JSignage:TextBar

Description

The text bar is a specialized version of the slideshow layer (part of the advanced layer type) that can be used to display texts, typically on one or two lines (any number of lines can be specified).

A text bar is constructed with:

$.textBar( { attributes } );

Attributes

All layers share a common set of attributes to define their layout on the screen and active time interval.

• the repeatCount attribute can be used to control the number of times the text ticker will run; can be set to 'indefinite' to make the text ticker to loop forever.
• the frame attribute can be used to add frame decoration (e.g., background) to this layer.

Font and styling attributes may be use to change the formatting of the text, in particular:

• fill

  Specify the text color.

• fontFamily

  Specify which font is used to render the text.

• textAlign

  Specify the horizontal alignment of the text, as 'start' (default value), 'center', 'justify', or 'end' (valid for 'topToBottom' and 'bottomToTop' only).

Note: The text is scaled to take the entire vertical space of the text ticker area, so the fontSize attribute is ignored if used.

Specific attributes

Required:

• data

  Array of data to be shown by the text bar.

Optional:

• lines

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

• lineDur

  Duration of each line in seconds. When the area fits n lines, the text is initially static for n×lineDur seconds, then scrolls up and displays each line for lineDur seconds. The value must be grater than 0. Default: 1.

• renderToText: function( index, item ) {}

  Callback to build the text shown for one data item. Default: function() { return this; }.

  The default renderer allows you to pass text strings in the data array and have them shown into the bar. See renderToText for more details.

• scrollDur

  Scrolling duration. Default: 0.5.

• transition

  Transition between items. Default: $.push({ direction: 'bottomToTop' }).

Each items in the data array will show for a total duration of lines×lineDur+(totalLines-lines)×(scrollDur+lineDur)

Specific functions

In addition to the list of functions common to all layers, the textBar also supports the .pushData() function.

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

Examples

Simple text without formatting

$(function(){ 
   $.textBar({
     data: [ 'Using multiple lines of text ...', '... this is good for verbosity !' ],
     height: '20%',
     bottom: 0,
     lines: 1,
     lineDur: 2,
     frame: { backColor: 'white' },
     repeatCount: 'indefinite'
   }).addTo('svg');
});

RSS news feed

$(function(){
   var uri = 'http://rss.cnn.com/rss/edition.rss';
   $.get( uri, function( rssFeed ) {
     var rss = $.parseRSS( rssFeed );
     $.textBar({
       data: rss,
       height: '20%',
       bottom: 0,
       lines: 2,
       textAlign: 'start',
       renderToText: function() {
         return $.tspan( this.title, {fontWeight: 'bold'} )
                 .tbreak()
                 .tspan( this.description );
       },
       repeatCount: 'indefinite'
     }).addTo('svg');
   }, 'text' );
});

• 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 formatted text object is used to format the output text on two separate lines.