JSignage:TextTicker

Description

The text ticker is a specialized version of the crawler layer (part of the advanced layer types) that can be used to display some text "crawling" across the screen, either horizontally or vertically. A horizontal ticker fits a single line of text in its area, whereas a vertical ticker will typically display multiple lines at once.

A text ticker is constructed with:

$.textTicker( { 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 horizontal alignment of text as "start" (default value), "center", "end", or "justify" (valid for "topToBottom" and "bottomToTop" only).

Note that 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 ticker.

Optional:

• baseLine

  Position of the font base line in percents. Default: 30.

• direction

  One of 'leftToRight', 'rightToLeft', 'topToBottom' or 'bottomToTop'. Default: 'rightToLeft'

• lines

  Number of lines in the area (only for 'topToBottom' or 'bottomToTop'). Default: 5.

• renderToText: function( index, item ) {}

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

  The default callback allows you to pass text strings in the data array and have them shown by the text ticker.

• smooth

  Round up the speed to the closest value guaranteed to produce a smooth scroll. Default: true.

• spacing

  Spacing between two items in percentage of the line size. Default: 50.

• speed

  Scrolling speed in percentage with 100% being one line height per second. Default: 100.

Specific functions

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

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

renderToText Callback

The renderToText( index, item ) callback will be called once for each item, just before the text becomes visible.
The number of crawl item is equal to the value of data.length.

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

Return value

The callback may return

• a text string,
• a formatted text object, created by $.tspan()

Examples

Text ticker with inline text

Display the 3 lines of text for an indefinite amount of time in full screen.

$(function(){
   $.textTicker({
     data: [ 'Welcome !', 'Bienvenue !', 'Wilkommen !' ],
     repeatCount: 'indefinite'
   }).addTo( 'svg' );
});

Note:

• For basic text, only the data needs to be defined.

Basic RSS Ticker

Display a white news ticker at the bottom of the screen.

$.get(
  'http://www.spinetix.com/rss.xml',
  function( rssFeed ) {
     $.textTicker({
        top: '80%', height: '15%',
        fill: 'white', 
        data: $.parseRSS( rssFeed ),
        repeatCount: 'indefinite',
        renderToText: function( ) { return this.title; }
     }).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.
• The fill attribute is used to control the color of the text.
• The renderToText function is defined so that the titleelement of the news is displayed.

Vertical text ticker

Display some poetry using a vertical crawler.

$.get(
  'http://poetry.eserver.org/aeneid-e.txt',
  function( txtFeed ) {
     $.textTicker({
        data: $.parseTXT( txtFeed ),
        lines: 15,
        textAlign: 'center',
        direction: 'bottomToTop', 
     }).addTo( 'svg' );
  },
  'text'
);

• The $.get() is used to retrieve data from the 'uri'.
• The $.parseTXT() is used to parse the input data, and map it into a JavaScript array.

Formated RSS Ticker

Display a formated news ticker at the bottom of the screen.

 $.get(
   'http://rss.news.yahoo.com/rss/world',
   function( rssFeed ) {
      $.textTicker({
         top: '80%', height: '15%',
         data: $.parseRSS( rssFeed ),
         speed: 200,
         fontFamily: 'Arial', fill: 'white',
         frame: { backColor: 'blue', backOpacity: 0.5 },
         renderToText: function( ) {
           return $.tspan( this.title + ': ', { fontWeight: 'bold' } )
                   .tspan( this.description )
           ;
         },
         repeatCount: 'indefinite'
      }).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.
• The frame attribute is used to add a semi-transparent background to the ticker.
• The renderToText function uses formated text object so that the title and the description element of the news are displayed one after the other. The title is displayed in bold.