JSignage:HeadlineTextArea

This page is related to jSignage text layers.

jSignage.headlineTextArea()

jSignage.headlineTextArea( attributesObject )

Returns: jSignage Object

Description

A headline text area is an extension of the text area layer optimized for single lines. It automatically adjusts the font size and transform so that:

the text occupies the full height of the area on a single line, and
it is entirely visible.

It is especially useful for single line text from an external source, such as a news headline, which needs to be displayed in full, but whose size may be variable and cannot be known in advance.

The headline text area is part of the advanced layer type.

Parameters

attributesObject
Type: Plain Object.

An object containing any of the text layer attributes, excepted for the vertical alignment which is not relevant since the text is normally full height, plus the specific attributes detailed below.

Specific attributes

The headline text area accepts the following specific attributes:

scaleMethod
Scaling method, either 'squeeze' or 'uniform'. Default: 'squeeze'.
Specifies how the text size is reduced to make it fit in the area if it is too large:
- If set to 'squeeze', the text will be squeezed horizontally.
- If set to 'uniform', the font size is reduced and the text is centered vertically.

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 single line of text as large as possible.

$(function(){ 
    $.headlineTextArea( {} ).text('Fit this text.').addTo('svg');
});

Scaled text area

Create a single line of text as large as possible reducing the font size to make it fit in the area.

$(function(){ 
    $.headlineTextArea( {scaleMethod: 'uniform'} ).text('Fit this text.').addTo('svg');
});

Show the date

Shows the current date on a single line.

var old =null;
function showDate() {
   var now = new Date();
   var date = now.toDateString();
   if ( old ) old.end();
   old = $.headlineTextArea( { scaleMethod: 'uniform' } )
                           .text( date )
                           .removeAfter()
                           .addTo('svg');
   $.setTimeout( showDate, 5*60*1000 );
}
$( showDate );

Notes:

The date is updated every 5 min using a timer. It is created using the setTimeout helper.
The function showDate is called once when the document is fully loaded using $( showDate );.
The old text area is stored in a variable (old) and is terminated using the end() before adding a new text zone to the document. This insure that only the latest text is visible.
The text area is build with the function removeAfter() to make sure that it it removed from the tree once it is over. This prevent memory leaks.

JSignage:HeadlineTextArea

From SpinetiX Support Wiki

Contents