JSignage API

From SpinetiX Support Wiki

(Redirected from JSignage:JSignage API)
Jump to: navigation, search
JSignage.png

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

Note
See the full article about jSignage 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.

The layers can be classified as following:

Category Layer types
Basic layers
Advanced layers
Interactive layers
Add-on layers


"Technical note"
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")
] );

DOM manipulation

Note
See the jQuery port to the uDom page for more details on the functions available for DOM manipulation.

jSignage supports different types of selectors, tree traversing, accessing raw XML elements, and other methods for uDOM manipulation.

Animation events

The visual appeal of digital signage applications can be greatly enhanced with jSignage due to the possibility to add different types of animation events: effects, transitions or custom animations.

Effects

Note
See the full article about jSignage effects. See also JSignage:Creating new effects.

Effects can be used to improve the way a layer appears (in effect) or disappears (out effect) from the scene.

All effects share a common set of attributes to define their timing.

// 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' })
   );

Transitions

Note
See the full article about jSignage transitions. See also JSignage:Creating new transitions.

A transition is a combination of out & in effects applied between consecutive items of a playlist or slideshow.

All transitions share a common set of attributes and they are applied using the transition attribute.

// 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.

Animations are created with animateColor(), animateMotion(), animateOpacity(), animateRotate(), animateZoom() and svgAnimation() functions.

Geometric shapes

Note
See the full article about jSignage shapes.

The jSignage library provides a set of functions for drawing paths and basic geometric shapes: rectangles, circles, ellipses, lines, polylines and polygons.

  • For example, to draw a rectangle on the screen:
    $.rect({ x: 200, y: 100, width: 600, height: 400, fill:'blue' }).addTo('svg');

Color gradients

Gradients are created with linearGradient or radialGradient and referenced with .ref(). Similarly, referenceable animatable colors are created with solidColor.

For example, to draw a rectangle with a linear left to right gradient of blue to red:

$(function(){ 
   var gr = $.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');
});

Localization

Note
See the full article about localization in jSignage.

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

Note
See the full article about jSignage parsers.

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:

  • $.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.

Interactive Content

The jSignage library provides a basic set of interactive elements to make it easy to build interactive applications in SVG.

Utilities

The jSignage library also includes some utility methods:

Category Methods
Timers setTimeout, clearTimeout, setInterval, setIntervalSync, clearInterval
Helpers _createElement, durInSeconds, getCurrentTime, randomChoice, getDocumentViewbox, setAttributes, shuffle, triggerWithOffset

jSignage add-ons

The following add-ons were developed for jSignage library:

  • jSignage Graph library for building charts and gauges layers;
  • jSignage QR code library for generating QR code layers;
  • jSignage Astronomy library for different astronomy related calculations;
  • jSignage Multiscreen library for different multiscreen related calculations;
  • jSignage Weather library for weather forecast. This is now deprecated, being merged into jSignage Social library.
  • jSignage Social library for secure connection and data retrieval from different social networks (Facebook, Google, Instagram, Microsoft Online, Twitter, Yahoo).


These add-on libraries must be included in the document after the jSignage.js library, for instance:

 <script xlink:href="http://download.spinetix.com/spxjslibs/jSignage.js"/>
 <script xlink:href="http://download.spinetix.com/spxjslibs/jSignage.Graph.js"/>
This page was last modified on 21 June 2017, at 15:52. This page has been accessed 37,924 times.