jSignage is a feature-richJavaScript library dedicated to building professional digital signage applications onSpinetiX players. 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 simpler than using standard JavaScript code.
If you're new to jSignage, we recommend that you check out thejSignage introductory page first.
Note that this is the API documentation for jSignage core; the links to thejSignage plugins are listed below.
Once thejSignage library has been loaded, thejSignage variable is added to the JavaScript global object and, thus, it can be directly referenced in the subsequent JavaScript code. ThejSignage variable is, in fact, afunction that always returns a reference to itself (i.e.,jSignage Object) when called without parameters (i.e.,jSignage()). Furthermore, many jSignage member functions return the jSignage object itself, in order to allow multiple calls to be chained together.
ThejSignage variable can also be referenced by its syntactic sugar alias$ (dollar sign), meaning that writing$( parameters ) is the same thing asjSignage( parameters ).
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 bemedia,textArea,playlist,carousel etc.
The layers can be classified as follows:
| Category | Layer types |
|---|---|
| Basic layers | |
| Advanced layers | |
| Interactive layers | |
| Plugins layers |
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")]);
jSignage supports different types of selectors, tree traversing, accessing raw XML elements, and other methods for uDOM manipulation.
The visual appeal of digital signage applications can be greatly enhanced withjSignage due to the possibility to add different types of animation events: effects, transitions or custom animations.
jSignage effects can be used to improve the way alayer appears (in effect) or disappears (out effect) from the scene.
// 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'}));
See also how tocreate new effects with jSignage.
jSignage transitions are applied between consecutive items of aplaylist orslideshow. A transition is a combination of an out-effect on the current slide and an in-effect on the next one.
// 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');
See alsoJSignage:Creating new transitions.
Custom animations are created with the following functions:
animateColor()animateMotion()animateOpacity()animateRotate()animateZoom()svgAnimation() The jSignage library provides a set of functions for drawingpaths and basic geometric shapes:rectangles,circles,ellipses,lines,polylines andpolygons.
$.rect({x:200,y:100,width:600,height:400,fill:'blue'}).addTo('svg');
Gradients are created withlinearGradient orradialGradient and referenced with.ref(). Similarly, referenceable animatable colors are created withsolidColor.
For example, to draw a rectangle with a linear left-to-right gradient of blue to red:
$(function(){vargr=$.linearGradient({x1:320,y1:0,x2:960,y2:0,stops:[{offset:0,color:'blue'},{offset:1,color:'red'}]}).addTo('svg');$.rect({x:320,y:180,width:640,height:360,fill:gr.ref()}).addTo('svg');});
jSignage adds support for locale-dependent display of date, time, and numbers using a subset of theUnicode Common Locale Data Repository database. The Localization API is based on two functions:
$.DateTimeFormat for the formatting of date and time$.NumberFormat for the formatting of numbers and currencies The jSignage framework supports the standardAJAX 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 that 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 ).
The$.get() and$.post() methods usually return text content from a server in a certain format, like XML, JSON, etc.; the jSignage library includes multiple functions to simplify the parsing of text content into a JavaScript object, the most important are:
$.parseXML() for parsing an XML text description into a DOM object.$.parseJSON() for parsing a JSON text into a JavaScript object.$.parseRSS() for parsing an RSS feed into a JavaScript array of news items.$.parseICAL() for parsing an iCalendar file into a JavaScript array of event items. The jSignage library provides both high-levelinteractive layers (multi-page, carousel, pop-up, etc.) and low-levelinteractive event functions (click, keydown, textInput, etc.) to make it easy to build interactive applications in SVG.
The jSignage library also includes several utility methods:
_createElement,getDocumentViewbox,setAttributes,triggerWithOffsetsetTimeout,clearTimeout,setInterval,setIntervalSync,clearInterval,durInSeconds,getCurrentTimedebug,error,info,warndecodeURIQueryString,extend,randomChoice,shuffleThe following plugins were developed for the jSignage library:
Deprecated:
These add-on libraries must be included in the document after the jSignage.js library, for instance:
<scriptxlink:href="https://download.spinetix.com/spxjslibs/jSignage.js"/><scriptxlink:href="https://download.spinetix.com/spxjslibs/jSignage.Graph.js"/>