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 slide id (defined as an article tag in the DOM) and Y is the element id which identifies the element (and hence the zone) inside the slide.
Notice that the article id is unrelated with the position of the slide, and the element id is also unrelated with the position of the zone in the template.
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 zone or area in the template which will contains the element. Notice that the element id param indicated in "zoneY", which also uniquely identifies a element inside of a slide, is unrelated with the zone while the area id attribute stablish a link between an element and its area (or zone).
So, if we want to access to a specific area in a slide we must use the areaid attribute, but if we want to access a specific element (regardless of the area) we must use the zoneId param.
Also, we can know the area where a element is contained by reading the areaid attribute.
Diverse possible values for the areaid attribute 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"
}