JSignage:TextBar

 

This page is related to jSignage layers.

jSignage.textBar()

jSignage.textBar( attributesObject )

Returns: jSignage Object

Description

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

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

Parameters

attributesObject

Type: Plain Object.

An object containing any of the following attributes:

• data (required)

  Array of data to be shown by the text bar.

• begin, dur, repeatCount, ... , left, top, width, ... , frame, ...

  Any of the common set of layer attributes to define the screen layout 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.

  Frame decoration attributes can be used to improve the layout of the layer, for instance, by adding a background color.

• displayAlign, lineIncrement, textAlign

  Text alignment attributes to specify the text horizontal and vertical alignment, and line increment.

• fill, fontFamily, fontStyle, textShadow, ...

  Text styling attributes to specify the text color, font family, etc.

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

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

• scrollDur

  Scrolling duration. Default: 0.5.

• transition

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

• renderToText: function( index, item ) {}

  Callback function for building the text layer for the current data item.

  It may return a text string or a formatted text object, created by $.tspan().

  It takes the following parameters:

  • index is the item 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 is set to item.

  If omitted, it defaults to: function( index, item ) { return this; } which allows you to pass simple text strings without formatting in the data array and have them shown into the text bar.

Note:

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

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.