-
Notifications
You must be signed in to change notification settings - Fork 0
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.
A Vish Editor presentation is defined by a set of slides and metadata.
There are different types of slides, each of them has its own definition.
The most basic slide is the standard slide.
A standard slide is defined by an identifier, a template and a set of zones, each of them contains only one element.
A zone an its contained element are uniquely related, hence we can refers both the element or the zone which contains it.
The other types of slide (Flashcard, Virtual Tour) consists in a list of particular attributes and a set of standard slides, referred as subslides.
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 zone number which identifies the zone (and hence the element) inside the slide.
Notice that the article id is unrelated with the position of the slide, and the zone 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 area of the template which will contains the zone and hence the element.
Notice that the zone id param indicated in "zoneY", 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 hence the zone which contains it) and the area of the template that will contains the element.
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 zone or element 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.
{
"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.
{
"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.
{
"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"
}
]
}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%;"
}{
"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.
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>'
}{
"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"
}