JSignage:Table
From SpinetiX Support Wiki
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 (whenrenderToSVG
is not defined), or null (if so,renderToSVG
must be defined). Default: null.
- Can be a single or two-dimensional array of data (the values are passed to the
-
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 refer 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 width. Default: 0.
-
rowPadding
- Additional padding between the rows as a number of pixels or percentage of width. Default: 0.
-
renderToSVG
- Callback function to render the data items as layers. Must be defined if
data
is null. - Default:
function() { return this; }
.
- Callback function to render the data items as layers. Must be defined if
-
renderToSVG
renderToSVG: function( primary, secondary, item ){ ... }
Returns: jSignage layer object or null
(to skip the cell).
Parameters
-
primary
andsecondary
- Zero-based coordinates of the cell according to the requested scan order.
-
item
- The corresponding element in the
data
array or null ifdata
attribute is null. It is also accessible asthis
within the callback function.
- The corresponding element in the
Description
The size of the table is calculated as rows * columns
and this function is called once for each cell.
Depending on the type of data
attribute, the item
parameter is determined as following:
- If
null
, thenitem
parameter is set tonull
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 tosecondaryOrder
. If the size of thedata
is smaller thanrows x columns
, the callback function is called only for the firstdata.length
- If
data
is a 2D array, then the inner arrays are mapped to the cells of the table according toprimaryOrder
, then the outer array according tosecondaryOrder
. This allows displaying a variable number of rows or columns.
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
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' );
});