JSignage:TextTicker

From SpinetiX Support Wiki

Jump to: navigation, search

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

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.
This page was last modified on 6 February 2020, at 17:38.