JSignage:ScrollingTextArea

From SpinetiX Support Wiki

Jump to: navigation, search

Description

A scrolling text area is an extension of the text area layer that scrolls vertically automatically if the number of lines of text exceeds the number of lines that fits in the area, either line by line or page by page.

A new scrolling text area is constructed with $.scrollingTextArea( { ... } ).

The scrolling text area is part of the advanced layer types.

Specific attributes

All attributes applicable to the text areas are supported.

The scrolling text area accepts the following specific attributes:

  • lines
    Number of lines that fits in the area. Default: 1.
  • lineDur
    Duration of each line in seconds. Default: 1.5.
    When the area fits n lines, the text is initially static for n x lineDur seconds, then scrolls up and displays each line for lineDur seconds. The value must be grater than 0.
  • pageDur (Requires firmware 3.1)
    Duration of each page for page mode. Default: 1.5×lines.
    If present, scroll mode is page by page instead or line by line and lineDur is ignored.
  • scrollDur
    Scrolling duration. Default: 0.5.

By default the texts shows only once for a total duration of lines×lineDur+(totalLines-lines)×(scrollDur+lineDur). To jump back to the top and display the text again, the repeatDur or repeatCount parameter must be specified.

Specific functions

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

Note that the font size is computed automatically based on the height of the area and the number of lines and thus should not be specified.

See the list of functions to work with layers.

Examples

Simple scrolling text area

$(function(){ 
   $.scrollingTextArea( {} ).text('OK!\nOr not OK?').addTo('svg');
});

Message

Display a message at the bottom of the screen, two lines at the time.

$(function(){ 
  $.scrollingTextArea( { lines: 2, repeatCount: 'indefinite', top: '80%', height: '20%', 
                         frame: { shape: 'round', backColor: 'white', frameColor: 'grey', padding: '5%' }
                    } ).text(
                            $.tspan().tbreak()
                             .tspan('Welcome to the jSignage demo.').tbreak()
                             .tspan('This is an example of scrollingTextArea.').tbreak()
                             .tspan('Lines are shown one by one.').tbreak()
                             .tbreak()
                      ).addTo('svg');
});

Note:

  • 2 lines of text are displayed, and the text will scroll for ever ({ lines: 2, repeatCount: 'indefinite' }
  • The text is composed using tspan().
  • Additional tbreak() are added at the top and at the bottom of the text to control how it appears and disappears from the screen.
  • The frame attribute is used to add a white background with rounded corners to the text.

Display variable length text

Retrieve the text data from a file and display it in a frame at the bottom of the screen.

$(function(){
   var uri = 'http://poetry.eserver.org/grass.txt';
   $.get( uri, function( recipe ) {
      var lines = $.parseTXT( recipe );
      var txt = $.scrollingTextArea({ top: '60%', height: '30%', left: '5%', width: '90%',
                                      repeatCount: 'indefinite', 
                                      frame : { shadow: true, backColor: 'white', padding: '2%' }, 
                                      lines: 4, textAlign: 'start', lineDur: 1.5 });
      var cnt = $.tspan();
      for ( i in lines )
         cnt.tspan( lines[i] ).tbreak();

      txt.text( cnt ).addTo('svg');
     }, 'text' );
});

Note:

  • The $.get() is used to retrieve data from the 'uri'.
  • The $.parseTXT() is used to extract the line of the text into an array.
    • Each line of the input document is added to the scrollingTextArea using a loop and the tspan() and tbreak() functions.
  • The frame attribute is used to add a background with a shadow frame to the text.

Display an RSS feed

Retrieve the data of the slideshow from a remote RSS feed, and use this data together with a push transition to nicely display the news (the text flies from the right and is then displayed line by line).

$(function(){
   var uri = 'http://rss.cnn.com/rss/edition.rss';
   var master;

   $.get( uri, function( rssFeed ) {
       var rss = $.parseRSS( rssFeed );
       $.slideshow({
         top: '80%', height: '15%',
         data: rss,
         defaultSlideDur: 3,
         defaultTransition: $.push({ direction: 'rightToLeft' }),
         repeatCount: 'indefinite'
         renderToSVG: function() {
           master = $.scrollingTextArea({ lines: 2, textAlign: 'start', lineDur: 2 })
                     .text( $.tspan( this.title, { fontWeight: 'bold' } )
                             .tbreak()
                             .tspan( this.description ) 
                          );
           return $.g().add( master ).endsWith( master );
         },
       }).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.
  • A slideshow is used to display each news item one by one.
    • Each slide is shown using a push() transition. The text appears flying from the right and pushing the old text to the left.
    • It is configured to use 15% of the height of the document (height: '15%'),
  • A group is used to control the end of each slides. The endsWith() insure that the slide will ends when all the text of the master has been displayed.
  • A scrolling text area is used to display the title and description. This will insure that all the text is shown, regardless of its length.
    • The layout of the text uses tspan and tbreak to format the title and the description in two separate line.
    • The title uses bold fonts.
This page was last modified on 20 July 2015, at 10:47.