JSignage:TableTutorial1

Description

Image gallery

• The table layer makes it very convenient to display tabular data as well as vertical or horizontal lists.
• We'll look first at a simple table with media elements, arranged in a single row.

Source code

var scientists = [ 'Albert Einstein', 'Ernest Rutherford', 'Marie Curie', 'Max Planck', 'Niels Bohr', 'Robert Oppenheimer' ];

$.textArea({ height: '20%', fontSize: 40, fontWeight: 'bold', fill: 'black' }).text('Great atom scientists').addTo('svg');

$.table({
        top: '20%',
        height: '40%',
        rows: 1,
        columns: 6,
        data: scientists,
        renderToSVG: function() {
          var uri = 'media/Atom_5_7/' + encodeURIComponent(this) + '.jpg';
          return $.image({ href: uri });
        }
}).addTo('svg');