JSignage API

From SpinetiX Support Wiki

jSignage is a feature-rich JavaScript library dedicated to building professional digital signage applications on SpinetiX Hyper Media Player(s). The main purpose of jSignage is to make things like animations, interactivity and event handling, DOM traversal and manipulation, Ajax calls, data feed parsing etc., much more simpler than using standard JavaScript code.

If you're new to jSignage, we recommend that you check out the jSignage introductory page first.

Layers

Layers are the building blocks of jSignage documents. A layer can be broadly defined as a rectangular region on the screen where something (such as an image, some text, a playlist etc.) is shown for a certain amount of time.

New layers are created with: $.<layerType>( { attributes } ) where <layerType> can be media, textArea, playlist, carousel etc.

More layer types can be added by extending the jSignage library with new constructors - see Layer implementation in SVG article for more details.

Example:

// create a new media layer and add it to the DOM tree$.media({id:'movie',width:1280,height:720,href:'clip.avi'}).addTo('svg');// easily build multi-zone layouts$('svg').add([$.video(id:'main',left:'25%',height:'80%',href:'coke.avi'}),$.playlist({id:'leftbar',left:'0%',width:'25%',height:'100%',data:['ad1.jpg','ad2.jpg','ad3.jpg']}),$.textArea({id:'newsbar',top:'80%',left:'25%',width:'50%',frame:{frameColor:'black',backColor:'grey'}// add a black frame and a grey background to the text layer }).text("Welcome to jSignage")]);

// add fade in and fade out effects to all the images in the document$('image').fadeIn({dur:'0.5s'}).fadeOut();// add an svg clock to the document with a fade in animation$('svg').add($.animation({href:'clock.svg',id:'clk1'}).fadeIn({dur:'3s'}));

// create a playlist of images with a cross-fade transition between them and add it to the document$.playlist({data:['A.jpg','B.jpg','C.jpg','D.jpg'],defaultTransition:$.crossFade()}).addTo('svg');

Custom animations

jSignage provides support for the animation of the parameters of gradients and solid colors, and of the opacity, motion and transform of geometric shapes and layers. These are implemented with SMIL animations rather than with JavaScript timers, whenever supported.

Localization

jSignage adds support for locale-dependent display of date, time and numbers using a subset of the Unicode Common Locale Data Repository data base.

Data feeds

Requesting and sending data

The jSignage framework supports the standard AJAX functionalities of jQuery for requesting or sending data over HTTP. The AJAX API is asynchronous, so a typical usage involves setting up a callback function which executes when the data is received.

The two most useful methods for accessing static or dynamic data on a server are:

$.get( url, callback )

$.post( url, data, callback )

For building client / server applications, the JSON-based methods are supported as well, such as $.getJSON( url, data, callback ).

Converting and parsing

The $.get() and $.post() methods usually return text content from a server in a certain format, like XML, JSON etc.; for this cases, the jSignage library includes multiple functions to simplify the parsing of text content into a JavaScript object - the most important are: