JSignage:MultiPage

Description

The multi-page layer defines an area on the screen where multiple layers can be shown, but only one at a time, like the pages of a book. When switching from one page to the other, transition effects can be applied. It is closely related to the slideshow layer, but switching to the next slide is controlled by the program directly rather than being data driven. This layer can be used to create interactive content.

A new multi-page is constructed with $.multiPage( { ... } ).

The multi-page is part of the interactive layer type and part of the interactivity framework.

Multi-page parameters

All layers share a common set of attributes to define their screen layout and active time interval. Frame decoration may also be used with this layer.

The multipage layer defines the following specifc parameters:

• defaultTransition

  Default transition effect between pages. Default: null for no transition.

  See Transitions for the list of transitions available.

• pageEnded

  Callback function which will be called when the current page is ending. Default: null.

  This typically provides an opportunity to call this.switch() within the callback to program a new page.

  Note: the this object of the callback is the layer.

Specific functions

• .switchPage( layer, transition )

  Switch to a new page. layer must be a jSignage layer object.

  The transition parameter is optional. If not specified, the defaultTransition is used instead.

  It is possible to switch to an empty page by doing .switch(null).

The widget is initially empty and you must call .switchPage() at least once to display something.

Typically .switchPage() is called once after the multi-page widget is created to display the initial choice and then is called by event handlers reacting on user input.

Warning:

• .switchPage( ) has no return value. Thus it is not possible to chain it with other events;

See the list of functions to work with layers.

Examples

Counter using timers

Displaying a counter. The number are flying from right to left and increasing every seconds.

$(function(){
   var n = 0;
   var layer = $.multiPage({
      defaultTransition: $.push( {dur: 0.3, direction: 'rightToLeft' } ),
   }).addTo('svg');

   $.setInterval( function() {
      layer.switchPage( $.headlineTextArea( {} ).text( ++n ) );
   }, 1000);
});

Notes:

• A timer ( setInterval() ) is used to trigger a new page every 1s
• A push() transition is used to switch from one number to the other
• The number are displayed using the headlineTextArea() to insure that the size of the text is adapted to the size of the window.

Counter using pageEnd()

An alternative manner to create the same kind of animation is to use the pageEnd() options.

The number is increased every 3 seconds, and a fade transition is used to switch from one number to the other.

$(function(){
   var n = 0;
   function new_page() {
     return $.headlineTextArea({ dur: '3s' }).text( ++n )
   }
   $.multiPage({
     defaultTransition: $.fade(),
     pageEnded: function() {
       this.switchPage( new_page() );
     }
   }).addTo('svg').switchPage( new_page() );
});

Notes:

• pageEnded()is used to trigger a new page, when the current one is ended.
• A fade() transition is used to switch from one number to the other
• The number are displayed using the headlineTextArea() to insure that the size of the text is adapted to the size of the window.
• A duration is specified for the headlineTextArea(), so that the page actually ends after 3 seconds.
• switchPage() is called after addTo(), and must be the last action on the multiPage as it returns no values.

Key pressed

React to a key pressed on the keyboard and display this key on the screen.

$(function(){
   var layer = $.multiPage({
     defaultTransition: $.flip( { orientation: 'vertical' } ),
   }).addTo('svg');
   
   $('svg').textInput( function( event ) {
        layer.switchPage( $.headlineTextArea( {} ).text( event.data ) );
   });
});

Notes:

• The textInput() is used to trigger a new page.
• The keyt pressed by the used are displayed using the headlineTextArea().

Switching media

Display different media depending on a key pressed by the user.

$(function(){
   var layer = $.multiPage({
                            width: 960, height: 720, left: 160,
                            defaultTransition: $.cubeFace({ dur: '1s', direction: 'leftToRight' }),
   }).addTo('svg');
 
   $('svg').keydown( function( event ) {
        var media;
        switch ( event.keyIdentifier  ) {
            case 'U+0041': //'a'
                media = $.media({ href: 'media/Monet_4_3/1.jpg'} ); break;
            case 'U+0043': // 'c'
                media = $.media({ href: 'media/Monet_4_3/3.jpg'} ); break;
            default:
                media = $.textArea({ fontSize: 45, frame: { frameColor: 'black'} } )
                                 .text("Please press 'A' or 'C'"); 
        }
        layer.switchPage( media );
   });
});

Note:

• As keydown() is used to trigger the event, keyIdentifier must be used to identify the key pressed by the user.

Reacting on mouse

Display a new page with the mouse position on each click. The mouse position is shown for 5 seconds.

$(function(){
    function realPos( evt ){
        var pt=document.documentElement.createSVGPoint();
        pt.x=evt.clientX;
        pt.y=evt.clientY;
        return pt.matrixTransform( $('svg')[0].getScreenCTM().inverse() );
    };
    
    function default_page() { 
        return $.headlineTextArea( { scaleMethod: 'uniform' } ).text( "Please click" );
    };

    var layer = $.multiPage({ 
                            defaultTransition: $.fade({ dur: '0.5s' }),
                            pageEnded: function() { layer.switchPage( default_page() ); } 
    }).addTo('svg');
   
    layer.switchPage( default_page() );
   
    $('svg').click( function( evt ) {
        var pt = realPos( evt );
        layer.switchPage( $.headlineTextArea( { scaleMethod: 'uniform', dur: 5 } )
                                           .text( "Click at "+parseInt(pt.x)+","+parseInt(pt.y) ) 
                        );
    });
});

Notes:

• realPos() is used to get the real position of the mouse in the current document.
• The click() is used to trigger a new page.
• A duration is specified for the headlineTextArea(), so that the page actually ends after 5 seconds.
• pageEnded()is used to trigger the default page, when the current one is ended.
• switchPage() is called on the layer to display the initial default page.
• The switchPage() is called after the variable layer as been assigned.