JSignage:PingPongTextArea

From SpinetiX Support Wiki

Jump to: navigation, search

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

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.

See also

This page was last modified on 9 August 2019, at 19:43.