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 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; }.

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

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, 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' );
});