JSignage:Slideshow

This page is related to jSignage layers.

jSignage.slideshow()

jSignage.slideshow( attributesObject )

Returns: jSignage Object

Description

This advanced layer type allows displaying one or more slides of content one after the other. Contrarily to the playlists, where each item is only composed of a single media layer, the layout of the slideshow is controlled by the user. Slideshows may loop indefinitely or not depending on the configuration.

As this function returns a jSignage Object, any of the layer functions can be chained.

Parameters

attributesObject
Type: Plain Object.
An object containing any of the following attributes:
- data (required)
  Array with the data for each slide or at the minimum an object with a length property, such as { length: n } where n is the number of slides.
- renderToSVG (required)
  Callback function to build the SVG code for each slide.
- begin, dur, repeatCount, ... , left, top, width, ... , frame, ...
  Any of the common set of layer attributes to define the screen layout and active time interval. Frame attribute can be used to decorate the slideshow layer.
- defaultSlideDur
  Default duration for slides for which no duration has been specified. Default: 'indefinite', meaning that a slide with no set duration will show indefinitely.
- minimumSlideDur
  Minimum duration for any single slide. Applies to all slides. Default: 0.
- maximumSlideDur
  Maximum duration for any single slide. Applies to all slides. Default: 'indefinite'.
- defaultTransition
  Default transition between slides. Default: null for no transition. See the list of available transitions .
- defaultGap
  Default gap duration to be applied at the beginning of each slide including the first one. Default: 0.
- freezeDuringEffects
  Freeze all animations and media while applying transition effects. This will increase the duration of each slide by the duration of its in and out effects (see Impact on timeline). Default: false.
- iterating
  Callback function to modify some of the slideshow parameters before a new iteration starts.

renderToSVG

renderToSVG: function( index, item ){ ... }

The renderToSVG attribute must be set to a callback function, that receives the following parameters:

index is the slide number between 0 and data.length-1
item is equal to data[index] and may be undefined if that item does not exist in the data object.

This function is called once for each slide (that is data.length times) and must return either a valid jSignage layer object or null to terminate the slideshow.

The jSignage layer returned by this function may have the following attributes overriding the default values set at the slideshow level:

gap: Slide specific time delay with the previous slide.
transition Slide specific transition effect.

iterating

iterating: function( iter ) { ... }

The iterating attribute must be set to a callback function, that receives the following parameter:

iter is the iteration count (0 for the first iteration)

This function is called once before the first iteration, then before each subsequent iteration provided the playlist/slideshow is set to repeat. The return value of the callback is ignored.

Within the context of the callback, this refers to the playlist/slideshow parameters. The following properties can be altered:

data
defaultTransition
looping A boolean which is set to true to enable looping on the playlist/slideshow.
loopCount Number of remaining iterations. Define only if you do not want indefinite looping.
renderToSVG (slideshows only)
defaultGap (slideshows only)

Functions

All jSignage layers share a common set of functions, such as .begin(), .end(), .show(), .hide(), .addTo(), etc. To add or replace the text content inside a text area, use the .text() method. Additionaly, the slideshow layer accepts a .pushData() function.

.pushData()

slideshowLayerObject.pushData( value1, value2, ..., valueN )

This function can be used to push / append additional items to the data array specified at slideshow creation. Each argument can be a single element or an array of elements.

If the slide show is currently active, the new items are appended to an internal copy of the current data array, thus lengthening the duration of the slide show. If it has ended or has not yet started, it will be restarted (applying the begin effects if it's the case) and any data previously used is lost.

Examples

Text slideshow

Display predefined text on the screen.

$(function(){
   $.slideshow({
          data: [ "Welcome to jSignage demo",
                  "Each line of text will be displayed for 5s, centered on the screen",
                  "All parameters are constant, except for the text."
                ],
          defaultSlideDur: 5,          
          renderToSVG: function() {
            return $.textArea( {fontSize: 65 } ).text( this );
          },
   }).addTo('svg');
});

Notes:

The text to be displayed is defined as simple array of texts.
Each time a slide should be displayed, a new textArea is created and its text is set to be equal to the current line of data.

Show media names

Display a set of images and their names.

$(function(){
   $.slideshow({
      data: [ 'image_1.jpg', 'image_2.jpg', 'image_3.jpg', 'image_4.jpg' ],
      defaultSlideDur: 5, 
      repeatDur: 'indefinite',           
      renderToSVG: function( index ) {
        return $.g().add([
            $.media( {href: this } ),
            $.fitTextArea( { top: '80%', height: '15%', fontSize: 'max', 
                             frame: { backColor:'white', backOpacity: 0.8 } 
                           } 
                         ).text( index + " : " + this )
        ]);
      }
   }).addTo('svg');
});

Notes:

Each image is displayed in full screen like for a playlist. Each images will be shown for 5s.
The name of the media is shown on top of the media itself using fitTextArea(). This will ensure that the text is always visible regardless of the length of the filename.
The index of the current item is shown together with the media name using the tspan.
The size of the text is set using fontSize: 'max' ensuring that the text will be as large as possible.
A semi-transparent background is added to the text using the frame attribute.
A group is used to group all the layer into a single element to be returned by the renderToSVG callback.

Slideshow with color and description

Display a slideshow of images, with a specified description for each one. The color of the text can also be changed for each slides.

$(function(){
   $.slideshow({
      data: [ { href: '1.jpg', clr: 'blue', desc: 'Some nice description' },
              { href: '2.jpg', clr: 'red',  desc: 'Another description with longer text, fitting on mulitple lines.' },
              { href: '3.jpg', clr: 'green',desc: 'Final item description' } ],
      defaultSlideDur: 5, 
      repeatDur: 'indefinite',           
      renderToSVG: function( index ) {
        return $.g().add([
            $.media( {href: this.href } ),
            $.scrollingTextArea({ top: '80%', height: '10%', 
                                  lines: 1, lineDur: '2s',
                                  fill: this.clr,
                                  frame : { backColor:'white', backOpacity: 0.6 }
                               }).text( this.desc )
        ]);
      },
   }).addTo('svg');
});

Notes:

The data array is composed of objects. Each object contains three entry: the href, the description and the color.
A scrolling text area is used to display the description. This will insure that all the description is shown, regardless of its length.
The scrolling text area is configured to show at most 1 line. In case the text do not fit on a single line, each line will be displayed for 2 seconds. (lines: 1, lineDur: '2s')
The color of the text is modified for each slide using fill: this.clr
A semi-transparent background is added to the text using the frame attribute.

Display news feeds

$(function(){
   var uri = 'http://rss.cnn.com/rss/edition.rss';
   $.get( uri, function( rssFeed ) {
       $.slideshow({
         data: $.parseRSS( rssFeed ),
         renderToSVG: function() {
           return $.g( { dur: 10 } ).add([
              $.pingPongTextArea( { top: '5%', height: '15%', 
                                    fontSize: 'max', 
                                    delay: 1, speed: 200  
                                } ).text( this.title ),
              $.fitTextArea( { top: '25%', height: '75%', 
                               fontSize: 75, 
                               textAlign: 'start', displayAlign: 'before'
                            } ).text( this.description )           
         ]);
         },
       }).addTo('svg');
   }, 'text' );
});

Notes:

The $.get() is used to retrieve data from the 'uri'.
The $.parseRSS() is used to parse the input data, and map it into a JavaScript array.
A group (g) is used to group the title and the description into a single element.
- The duration of each slide is controlled by the dur attribute.
A Ping pong text area is used to display the title.
- The fontSize: 'max' attribute is used to set the size of the text to be as large as possible.
- The delay and speed are set in order to control how the text moves in the screen.
A fit-text area is used to display the description.
- This will ensure that all the text is shown, regardless of its length.
- A maximum font-size of 75px is set using the fontSize attribute.

JSignage:Slideshow

From SpinetiX Support Wiki

Contents