Slide elements examples in JSON

A basic example of a Vish Editor presentation can be found here, it shows the basic JSON structure of a presentation and its slides. However, there is a great diversity of contents that can be inserted in a presentation, each of which has its own definition in JSON. In this document, we collect and explain some of the elements that can be included in a slide.

Text

{
	"id":"article1_zone2",
	"type":"text",
	"areaid":"header",
	"body":"Hello World"
}

In the "body" field we can also specified a HTML code generated by a Wysiwyg, in order to provided styled text.

Image

{
	"id":"article1_zone1",
	"type":"image",
	"areaid":"left",
	"body":"http://vishub.org/pictures/312.jpeg",
	"style":"position: relative; width:117.1%; height:109.5%; top:-4.7%; left:-2.3%;"
}

HTML5 Video

{
	"id":"article9_zone2",
	"type":"video",
	"areaid":"left",
	"poster":".../vishEditor/images/example_poster_image.jpg",
	"style":"position: relative; width:100%; height:100%; top:-3.125%; left:0.14%;",
	"sources":"[{ \\"type\\": \\"video/webm\\", \\"src\\": \\"http://vishub.org/videos/325.webm\\"},
                    { \\"type\\": \\"video/mp4\\", \\"src\\": \\"http://vishub.org/videos/325.mp4\\"}]"
}

Noticed that the sources field is defined as another JSON object with the following structure:

{
[
	{ 
		"type": "video/webm", 
		"src": "http://vishub.org/videos/325.webm"
	},{ 
		"type": "video/mp4",  
		"src": "http://vishub.org/videos/325.mp4" 
	}
]
}

Generic Objects

Any embeddable content defined by its URL can be included with the "object" type.
In order to provide a better integration, ViSH Editor automatically recognizes and gives special treatment to some contents like Youtube videos, PDF documents or flash files.
If a content can't be recognized, it will be embeded as an iframe.
The following JSON represents an iframe of the Wikipedia (http://en.wikipedia.org) website.

{
	"id":"article5_zone1",
	"type":"object",
	"areaid":"center",
	"body":"<iframe src=\\"http://en.wikipedia.org?wmode=transparent\\" 
                 id=\\"resizableunicID7\\" class=\\"t10_object\\" wmode=\\"transparent\\"></iframe>",
	"style":"position: relative; width:100%; height:100%; top:0%; left:0%;"
}

Youtube Video

{
	"id":"article3_zone2",
	"type":"object",
	"areaid":"left",
	"body":"<iframe src=\\"http://www.youtube.com/embed/8t29CZcGAbs?wmode=opaque\\" 
                frameborder=\\"0\\" id=\\"resizableunicID9\\" class=\\"t3_object\\" wmode=\\"opaque\\"> 
                </iframe>",
               "style":"position: relative; width:85.8%; height:100%; top:0.2%; left:6.4%;"
}

As we explain before, a Youtube video can be defined as a generic object.
In this case, Vish Editor recognizes that the content to be embeded is a Youtube video and it will be use the Youtube API to embed the video instead of a generic iframe in order to provides a better integration.
There are diverse url patterns to reference a Youtube video, any of them can be use to define the video in the JSON definition.

Flash file

Another example of how generic objects can be use to insert a flash file.

{
	'id'     : 'article1_zone1',
	'type'   : 'object',
	'areaid' : 'left',
	'body'   : '<embed width="99%" height="99%" src="contents/swf/virtualexperiment_1.swf" 
                    type="application/x-shockwave-flash"></embed>'
}

Web Snapshot

{
	"id":"article1_zone1",
	"type":"snapshot",
	"areaid":"left",
	"body":"<iframe src=\\"http://en.wikipedia.org\\" id=\\"resizableunicID10\\"
                class=\\"snapshot_content\\" scrolling=\\"no\\" wmode=\\"opaque\\"></iframe>",
	"style":"position: relative; width:83.4%; height:83.3%; top:5.5%; left:4.7%;",
	"scrollTop":"1482",
	"scrollLeft":"202"
}