Page tree
Skip to end of metadata
Go to start of metadata

ON THIS PAGE

For more information about available methods, refer to the roTextWidget entry. This object can be used to display a scrolling type ticker.

Note

This object supports both right-to-left and left-to-right (e.g. Arabic, Hebrew) scrolling modes, depending on the language of the first string or file added to the widget. To change the scrolling direction, you will first need to remove all strings from the ticker.

Object Creation

BSTicker(in unsigned long x, in unsigned long y, in unsigned long w, in unsigned long h, in long rotation);

The "x" and "y" integers specify the position of the ticker widget (via the top-left corner), while the "w" and "h" integers specify the size of the widget. The "rotation" parameter accepts the following values (rotation is counter-clockwise from landscape mode):

  • 0: 0 degrees
  • 90: 90 degrees
  • 180: 180 degrees
  • 270: 270 degrees

Note

The "rotation" parameter only affects the text inside the ticker; it does not alter the screen coordinates of the widget itself. If you are creating a vertical ticker or rotating the ticker to match portrait-mode HTML content, you will need to use the coordinate parameters ("x", "y", "w", "h") to match the rotation of the text.

Methods

boolean SetRectangle(in unisgned long x, //
	in unsigned long y, //
	in unsigned long w, //
	in unsigned long h);
/*
Modifies the position (x,y) and size (w,h) of the ticker widget. Changing the size of the widget 
will reset the ticker animation. As long as the size of the widget remains unchanged, modifying 
the position will not interrupt the ticker animation.
*/
 
int AddString(in DOMString str); 
/*
Adds a string to the queue. This method returns a string_id integer that can be used to identify 
which string was removed when the ontickerstringremoved event is generated; a zero return indicates 
that the method failed to add the string. Adding too many strings without popping them from the 
stack will cause AddString() to return False (the exact number depends on the font size for each 
string). The maximum recommended number of stored strings is 64.
*/

int AddSurface(in ImageData image);
/*
Adds a bitmap image to the list of strings to display. The image must be of type ImageData. This 
method returns a string_id integer that can be used to identify which surface is removed when the 
ontickerstringremoved event is generated. See the code at the bottom of this page for an example of
using a canvas/image with this method.
*/

boolean PopStrings(in unsigned long count);
boolean SetAutoPop(in boolean);
/*
If this method is set to True, strings are automatically removed (popped from the stack) once they 
have scrolled off screen.
*/

boolean SetForegroundColor(in unsigned long argb);
boolean SetForegroundColor(in unsigned long a, 
	in unsigned long r,
	in unsigned long g,
	in unsigned long b);
/*
Foreground alpha values are currently unsupported and are ignored by this method, though this may change in future firmware versions.
*/

boolean SetBackgroundColor(in unsigned long argb);
boolean SetBackgroundColor(in unsigned long a,
	in unsigned long r,
	in unsigned long g,
	in unsigned long b);

boolean SetSeparatorString(in DOMString str);
boolean SetSeparatorCircle();
boolean SetSeparatorDiamond();
boolean SetSeparatorSquare();

unsigned long SetPixelsPerSecond(in unsigned long pps);

boolean SetFont(in DOMString font); 
/*
Specifies a font for the BSTicker (as well as the roTextWidget BrightScript object). This method accepts a
list of font-family names (similar to the CSS <font-family> property). The string can also have a "font-face:"
prefix to indicate that this is a font description (e.g. "font-face:DejaVu Serif,Serif Italic Bold"). Fonts 
must be added to the HTML widget using the roHtmlWidget.AddFont() method before they can be used in a BSTicker 
instance.
*/

boolean SetSyncManager(in DOMString domain);
/*
Specifies a BSSyncManager domain to use when executing the SetMultiscreen() call. When this method is called, 
it creates an internal domain that is based on the existing BSSyncManager domain and uses the same network parameters. 
We recommend using this method instead of passing a multicast IP address and port to the SetMultiscreen() method 
itself.
*/

boolean SetMultiscreen(in unsigned long offset, 
in unsigned long size,
in DOMString ip_address,
in unsigned long port);

void Shutdown()

Events

bsTicker.ontickerstringremoved/*This event handler is triggered when a string has been removed and is no longer visible. The event contains the string_id property (whichis returned by a successful AddString() call).*/

Multiscreen Tickers

To create a ticker that scrolls across multiple screens, call the SetMultiscreen() method on each page. 

  • The "size" parameter determines the total width of the multiscreen ticker across all displays. This parameter should be the same value for each SetMultiscreen() call. Note that the size of a multiscreen ticker can be different from the total width of a multiscreen display (i.e. if the width of a BSTicker widget is smaller than the width of the screen).
  • The "offset" parameter determines the left starting point for each ticker in the multiscreen display. The parameter value will always be 0 for the leftmost display. This parameter should be calculated using the length of the multiscreen ticker, not the total length of the multiscreen display.
  • The "ip_address" and "port" parameters refer to the multicast address that the players will use to synchronize the ticker.

 

The following example diagram and code snippets specify a multiscreen display with two monitors. The width of each monitor is 1024 pixels, while the width of each ticker is 768 pixels.

Example

The following script shows how to use many of the available BSTicker methods:

var bsTicker = new BSTicker(10, 110, 600, 30);
 
function addText1()
{
    console.log('############ addText1');
    bsTicker.AddString("addText1");
}
function addText2()
{
    console.log('############ addText2');
    bsTicker.AddString("addText2");
}
function addText3()
{
    console.log('############ addText3');
    bsTicker.AddString("addText3");
}

function setBackground1()
{
    console.log('############ setBackground1');
    bsTicker.SetBackgroundColor(0xFFFF0000);
}
function setBackground2()
{
    console.log('############ setBackground2');
    bsTicker.SetBackgroundColor(0xFF00FF00);
}

function setForeground1()
{
    console.log('############ setForeground1');
    bsTicker.SetForegroundColor(0xFF007700);
}
function setForeground2()
{
    console.log('############ setForeground2');
    bsTicker.SetForegroundColor(0xFF000077);
}

function setSeparatorString()
{
    console.log('############ setSeparatorString');
    bsTicker.SetSeparatorString(" ### ");
}
function setSeparatorCircle()
{
    console.log('############ setSeparatorCircle');
    bsTicker.SetSeparatorCircle();
}
function setSeparatorDiamond()
{
    console.log('############ setSeparatorDiamond');
    bsTicker.SetSeparatorDiamond();
}
function setSeparatorSquare()
{
    console.log('############ setSeparatorSquare');
    bsTicker.SetSeparatorSquare();
}

function setTickerSpeed()
{
    console.log('############ setTickerSpeed');
    var speed = bsTicker.SetPixelsPerSecond(180);
    console.log('############ SetPixelsPerSecond(180), Resulting speed: ' + speed);
}

 

The following examples allow for adding a canvas or image to the ticker with the AddSurface() method:

//Loading a canvas
var ctx = canvas.getContext("2d");
var img = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);

ticker.AddSurface(img); 

//Loading an image

var imageObj = new Image();
imageObj.onload = function() {
	canvas.width = this.width;
	canvas.height = this.height;

	var ctx = canvas.getContext("2d");
	ctx.drawImage(this, 0, 0); // Use getImage Data as above
 };
 imageObj.src = "filename.jpg"; 
  • No labels