Skip to content

Slide elements examples in JSON

Jump to bottom Edit New page
agordillo edited this page Jan 21, 2013 · 46 revisions

 
A introduction to Vish Editor Presentations structure can be found here, and 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 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 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.
As the area only contains one element, it can uniquely identifies the contained element inside of the slide.
Notice that the element id param indicated in "zoneY", which also uniquely identifies a element inside of the slide, is unrelated with the zone while the area id attribute stablish a link between the 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 element id param.
Also, we can know the area where a element is contained by reading the areaid attribute of its container.
Diverse possible values for the areaid attribute are allowed in function of the template:

  • "header"
  • "subheader"
  • "left"
  • "center"
  • "right"
  • "circle"
  • Any of the above values in combination with numbers (e.g. "right2")

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

We define a Web Snapshot has a website fragment.
Its like a website, but it has a fixed position and it hasn't scroll bars.
It can be use to included a specific element of a website (like a 3D Object) without embed the full page.
Also, removing scroll bars, seems like any other element inserted by its source achieving a greater sense of integration.

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

The Web Snapshot definition is like the website definition, but adding the scroll bars position information in order to fix it.

Add a custom footer
Add a custom sidebar
Clone this wiki locally