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.

Generic element

Any slide element has the following mandatory fields:

{
	"id":"article1_zone3",
	"type":"text",
	"areaid":"header",
        [...]
}

The id attribute identifies the element in the slide following the convention "articleX_zoneY" where X is the article id and Y is the zone number which identifies the zone inside the slide.
Notice that the article id is unrelated with the position of the slide.
This conventions also can be used to uniquely identify a slide in the backend by the convention "presentationId_articleX".

The type attribute defines the type of the element in order to allow Vish Editor to give it a special treatment. Actually, Vish Editor supports the following type param values:

• text
• image
• video (for HTML5 videos)
• object
• snapshot

One or more examples of each of them are explained in this document.

Finally, the areaid attribute defines the area of the template which will contains the element.
Notice that the zone id param, which also uniquely identifies a zone in a slide, is unrelated with the position of the zone in the template while the area id attribute stablish a link between an element and the template position.
So, if we want to access to a specific location in a slide we must use the areaid attribute, but if we want to access a specific element we must use the zoneId param.
Diverse possible values are allowed in function of the template: "header", "subheader", "left", "center", "right", etc.

The rest of the fields needed to define a slide element depends of the type attribute.
Examples of each of the different elements that can be used in a slide of a Vish Editor presentation are presented below.

Text

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

In the "body" field we can also specified 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%;"
}

Any URL specified in the JSON should be absolute, in order to be server-agnostic.

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"
}