JSignage:TextTicker
From SpinetiX Support Wiki
Contents
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).
- Specify horizontal alignment of text as
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
.
- Position of the font base line in percents. Default:
-
direction
- One of
'leftToRight'
,'rightToLeft'
,'topToBottom'
or'bottomToTop'
. Default:'rightToLeft'
- One of
-
lines
- Number of lines in the area (only for
'topToBottom'
or'bottomToTop'
). Default: 5.
- Number of lines in the area (only for
-
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.
- Callback function to build the text shown for each data item. Default:
-
smooth
- Round up the speed to the closest value guaranteed to produce a smooth scroll. Default:
true
.
- Round up the speed to the closest value guaranteed to produce a smooth scroll. Default:
-
spacing
- Spacing between two items in percentage of the line size. Default:
50
.
- Spacing between two items in percentage of the line size. Default:
-
speed
- Scrolling speed in percentage with 100% being one line height per second. Default:
100
.
- Scrolling speed in percentage with 100% being one line height per second. Default:
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 anddata.length-1
-
item
is equal todata[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.