JSignage:PingPongTextArea

This page is related to jSignage text layers.

jSignage.pingPongTextArea()

jSignage.pingPongTextArea( attributesObject )

Returns: jSignage Object

Description

A ping-pong text area is an extension of the text area layer that automatically applies scrolling back and forth if the text does not fit entirely within the area. The ping-pong text area is part of the advanced layer type.

Parameters

attributesObject
Type: Plain Object.

An object containing any of the text layer attributes, plus the specific attributes detailed below.

Specific attributes

The ping-pong text area accepts the following specific attributes:

direction
The scrolling direction, one of 'rightToLeft', 'leftToRight', 'bottomToTop' or 'topToBottom'.

Default: 'rightToLeft'.
speed
Scrolling speed in percent of the area's height per second.

Default: 100, i.e. the text will scroll by a distance equal to the height of the area every second.
backSpeed
Scrolling speed for the backward motion in percent of the area's height per second.

Default: speed.
smooth
When true, speed is rounded to always move by the same integer number of screen pixels by seconds.

Default: true.
delay
Time to stay on the initial position before scrolling starts.

Default: '500ms'.
backDelay
Time to stay on the final position before scrolling back.

Default: delay.
scrollBack
If true, the text will scroll back to the initial position using the back speed.

If false, it will simply jump back to intial position after the back delay.

Default: false.

Functions

All jSignage layers share a common set of functions, such as .begin(), .end(), .show(), .hide(), .addTo(), etc. To add or replace the text content inside a text area, use the .text() method.

Examples

Simple text area

Create a text as big as possible, and make it scroll if it is too large. Once the text has been displayed it will jump back to the start.

$(function(){ 
   $.pingPongTextArea( { fontSize: 'max' } ).text('OK  !!!!').addTo('svg');
});

Ping-pong

Display the text area, making it scroll from left to right and then right to left.

$(function(){ 
   $.pingPongTextArea( { fontSize: 'max', speed: 50, scrollBack: true } ).text('<--- OK --->').addTo('svg');
});

Display news feeds

Display the title of the RSS feed using a pingPongTextArea.

$(function(){
  var uri = 'http://rss.cnn.com/rss/edition.rss';
  $.get( uri, function( rssFeed ) {
      $.slideshow({
        data: $.parseRSS( rssFeed ),
        top: '75%', height: '15%', 
        defaultSlideDur : 10,
        renderToSVG: function() {
          return  $.pingPongTextArea( { fontSize: 'max' } ).text( this.title );
        },
      }).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 slide shows is used to display each title one by one.
A Ping pong text area is used to display the title.
- The fontSize: 'max' attribute is used to set the size of the text to be as large as possible.