JSignage:Table

This page is related to jSignage layers.

jSignage.table()

jSignage.table( attributesObject )

Returns: jSignage Object

Description

A table arranges content in a regular 1D or 2D pattern. It is a container layer whose child layers are positioned with a horizontal and/or vertical offset to each other. Start times of the row/column layers may be delayed to provide a visual sequence effect.

The table is part of the advanced layer type.

Parameters

attributesObject
Type: Plain Object.
An object containing any of the following attributes.
- rows
  Number of rows or an array containing the rows' heights. Default: 1.
- columns
  Number of columns or an array containing the columns' widths. Default: 1.
- begin, dur, repeatCount, ... , left, top, width, ... , frame, ...
  Any of the common set of layer attributes to define the screen layout and active time interval. Frame attribute can be used to decorate the table layer.
- data
  Can be a single or two-dimensional array of data (the values are passed to the renderToSVG callback function), an array of jSignage layer objects (when renderToSVG is not defined), or null (if so, renderToSVG must be defined). Default: null.
- primaryOrder
  Primary filling order of the table, one of 'leftToRight', 'rightToLeft', 'topToBottom' or 'bottomToTop'.
  
  Default: 'leftToRight' unless there is only one column and multiple rows, in which case it is 'topToBottom'.
- secondaryOrder
  Secondary filling order of the table, one of 'leftToRight', 'rightToLeft', 'topToBottom' or 'bottomToTop'.
  
  Default: 'topToBottom' if primary order is horizontal, 'leftToRight' otherwise.
- delay
  Additional delay between the start times of each cell. Default: 0.
- secondaryDelay
  Additional delay between the start times of each secondary series. Default: 0.
- cellPadding
  Additional padding between the cells as a number of pixels or percentage. A relative value refers to the greatest of the width or height dimensions. Default: 0.
- columnPadding
  Additional padding between the columns as a number of pixels or percentage of table's width. Default: 0.
- rowPadding
  Additional padding between the rows as a number of pixels or percentage of table's height. Default: 0.
- renderToSVG
  Callback function to render the data items as layers. Must be defined if data is null.
  
  Default: function() { return this; }.

renderToSVG

renderToSVG: function( primary, secondary, item ){ ... }

Returns: jSignage layer object or null (to skip the cell).

Parameters

primary and secondary
Zero-based coordinates of the cell according to the requested scan order.
item
The corresponding element in the data array or null if data attribute is null. It is also accessible as this within the callback function.

Description

This function is called once for each cell, meaning rows * columns times.

Depending on the type of data attribute, the item parameter is determined as following:

If null, then item parameter is set to null for each call.
If 1D array, then the content for each cell is taken from consecutive elements according to the primaryOrder parameter until a full row or column is completed, then according to secondaryOrder. If the size of the data is smaller than rows x columns, the callback function is called only for the first data.length
If data is a 2D array, then the inner arrays are mapped to the cells of the table according to primaryOrder, then the outer array according to secondaryOrder. This allows displaying a variable number of rows or columns.

Note:

If the renderToSVG callback is not defined, the data array must contain jSignage layers.

Functions

All jSignage layers share a common set of functions, such as .begin(), .end(), .show(), .hide(), .addTo(), etc. The table layer doesn't have any specific functions.

Examples

See also the JSignage tutorials page.

Multiple jSignage objects

Display 4 different jSignage objects in a table.

$(function(){ 
   $.table({
     data: [ $.textArea({ fontSize: 10 }).text( "Line 1" ),
             $.textArea({ fontSize: 20 }).text( "Line 2" ),     
             $.textArea({ fontSize: 30 }).text( "Line 3" ),
             $.media( { href: 'images/1.jpg' })
           ],
     rows: 4,
   }).addTo( 'svg' );
});

Notes:

The table content is fully described by the data.
The $.textArea and $.media layers are used to construct the content.

Multiple lines of text

Display some text in a table.

$(function(){ 
   $.table({
     data: [ 1,2,3,4 ],
     rows: 4,
     renderToSVG: function( ) {
       return $.textArea({ fontSize: 32 }).text( "Line "+this );
     }
   }).addTo( 'svg' );
});

Note: The callback renderToSVG is defined to create custom cell content based on the data

Table without data

Display a table where the table content depends only on the position of the cell.

$(function(){ 
   $.table({
     rows: 10,
     columns: 4,
     renderToSVG: function( primary , secondary ) {
       return $.textArea({ fontSize: 32, frame : { backColor: (primary+secondary)%2==0?'blue':'yellow' } } )
                        .text( primary +"x"+ secondary );
     }
   }).addTo( 'svg' );
});

Price schedule

The primary and secondary can be used to design layout depending on the position in the table.

var schedule = [
   [ 'Quick check', 20 ],
   [ 'Winter pack', 50 ],
   [ 'Full service', 100 ]
];

$(function(){ 
   $.table({
     data: schedule,
     rows: 3,
     columns: 2,
     renderToSVG: function( primary ) {
         if ( primary==0 )
             return $.textArea({ fill: 'blue', fontSize: 32 }).text( this );
         else 
             return $.textArea({ fill: 'red', fontSize: 32 }).text( '$' + this );
      }
   }).addTo( 'svg' );
});

Variable number of cells

Display a staircase table with the Fibonacci numbers. The first line will display a single cell, the second line two cells, and so on.

$(function(){ 
  $.table({
    data: [ [1], [1,1], [1,2,1], [1,3,3,1], [1, 4, 6, 4, 1], [1, 5, 10, 10, 5, 1] ],
    rows: 6,
    columns: 6,
    renderToSVG: function( primary, secondary, item ) {
      return $.textArea({ fontSize: 32, frame : {frameColor: 'blue'} }).text( item );
    }
  }).addTo( 'svg' );
});