JSignage:ScrollingTextArea

This page is related to jSignage text layers.

jSignage.scrollingTextArea()

jSignage.scrollingTextArea( attributesObject )

Returns: jSignage Object

Description

A scrolling text area is an extension of the text area layer that scrolls vertically automatically if the number of lines of text exceeds the number of lines that fits in the area, either line by line or page by page.

The scrolling text area is part of the advanced layer types.

Parameters

attributesObject
Type: Plain Object.

An object containing any of the text layer attributes, plus the specific attributes detailed below.

Specific attributes

The scrolling text area accepts the following specific attributes:

lines
Number of lines that fits in the area. Default: 1.

lineDur
Duration of each line in seconds. Default: 1.5.

When the area fits n lines, the text is initially static for n x lineDur seconds, then scrolls up and displays each line for lineDur seconds. The value must be grater than 0.

pageDur (Requires firmware 3.1)
Duration of each page for page mode. Default: 1.5×lines.

If present, scroll mode is page by page instead or line by line and lineDur is ignored.

scrollDur
Scrolling duration. Default: 0.5.

By default, the texts shows only once for a total duration of lines×lineDur+(totalLines-lines)×(scrollDur+lineDur). To jump back to the top and display the text again, the repeatDur or repeatCount parameter must be specified.

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.

Examples

Simple scrolling text area

$(function(){ 
   $.scrollingTextArea( {} ).text('OK!\nOr not OK?').addTo('svg');
});

Message

Display a message at the bottom of the screen, two lines at the time.

$(function(){ 
    $.scrollingTextArea( { 
        lines: 2, repeatCount: 'indefinite', top: '80%', height: '20%', 
        frame: { shape: 'round', backColor: 'white', frameColor: 'grey', padding: '5%' }
    } ).text(
        $.tspan().tbreak()
        .tspan('Welcome to the jSignage demo.').tbreak()
        .tspan('This is an example of scrollingTextArea.').tbreak()
        .tspan('Lines are shown one by one.').tbreak()
        .tbreak()
    ).addTo('svg');
});

Notes:

2 lines of text are displayed, and the text will scroll for ever ({ lines: 2, repeatCount: 'indefinite' }
The text is composed using tspan().
Additional tbreak() are added at the top and at the bottom of the text to control how it appears and disappears from the screen.
The frame attribute is used to add a white background with rounded corners to the text.

Display variable length text

Retrieve the text data from a file and display it in a frame at the bottom of the screen.

$(function(){
   var uri = 'http://poetry.eserver.org/grass.txt';
   $.get( uri, function( recipe ) {
      var lines = $.parseTXT( recipe );
      var txt = $.scrollingTextArea({ top: '60%', height: '30%', left: '5%', width: '90%',
                                      repeatCount: 'indefinite', 
                                      frame : { shadow: true, backColor: 'white', padding: '2%' }, 
                                      lines: 4, textAlign: 'start', lineDur: 1.5 });
      var cnt = $.tspan();
      for ( i in lines )
         cnt.tspan( lines[i] ).tbreak();

      txt.text( cnt ).addTo('svg');
     }, 'text' );
});

Note:

The $.get() is used to retrieve data from the 'uri'.
The $.parseTXT() is used to extract the line of the text into an array.
- Each line of the input document is added to the scrollingTextArea using a loop and the tspan() and tbreak() functions.
The frame attribute is used to add a background with a shadow frame to the text.

Display an RSS feed

Retrieve the data of the slideshow from a remote RSS feed, and use this data together with a push transition to nicely display the news (the text flies from the right and is then displayed line by line).

$(function(){
   var uri = 'http://rss.cnn.com/rss/edition.rss';
   var master;

   $.get( uri, function( rssFeed ) {
       var rss = $.parseRSS( rssFeed );
       $.slideshow({
         top: '80%', height: '15%',
         data: rss,
         defaultSlideDur: 3,
         defaultTransition: $.push({ direction: 'rightToLeft' }),
         repeatCount: 'indefinite'
         renderToSVG: function() {
           master = $.scrollingTextArea({ lines: 2, textAlign: 'start', lineDur: 2 })
                     .text( $.tspan( this.title, { fontWeight: 'bold' } )
                             .tbreak()
                             .tspan( this.description ) 
                          );
           return $.g().add( master ).endsWith( master );
         },
       }).addTo('svg');
   }, 'text' );
});

Note:

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 slideshow is used to display each news item one by one.
- Each slide is shown using a push() transition. The text appears flying from the right and pushing the old text to the left.
- It is configured to use 15% of the height of the document (height: '15%'),
A group is used to control the end of each slides. The endsWith() insure that the slide will ends when all the text of the master has been displayed.
A scrolling text area is used to display the title and description. This will insure that all the text is shown, regardless of its length.
- The layout of the text uses tspan and tbreak to format the title and the description in two separate line.
- The title uses bold fonts.

JSignage:ScrollingTextArea

From SpinetiX Support Wiki

Contents