JSignage:PingPongTextArea

From SpinetiX Support Wiki

Jump to: navigation, search

This page is related to jSignage 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 attributes applicable to the text areas, 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.

Specific functions

The ping-pong area has the same methods for specifying text content as the text areas, notably it supported unformatted text or formatted text object using .text().

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.
This page was last modified on 18 January 2019, at 18:45.