JSignage:InteractiveTutorial6

Description

Interactive text ticker

• Demonstrates how to control a dynamic textTicker.
• We push the numbers on demand in the button click handler.
• A leading item is pushed if the ticker was inactive, of if it has been "idle" for more than 500 ms.
• A crawler becomes idle when blank is inserted because it has reached the end of the data but it's not disappeared yet.

Source code

$.uiStyle = 'round';

var counter = 0, button, ticker;

$('svg').add([
  button = $.pushButton( { left: 540, top: 200, width: 200, height: 60, fontWeight: 'bold', begin: 0 }, 'Next' ),
  ticker = $.textTicker({
    begin: 'indefinite',
    left: 0, top: 400, width: 1280, height: 120,
    fill: 'white',
    frame: { backColor: 'blue', backOpacity: 0.7 }
  }).fadeIn().fadeOut()
]);

button.click( function() {
  if ( !ticker.active() || ticker.idleTime() > 500 )
    ticker.pushData( 'Now calling:' );
  ticker.pushData( ++counter );
});