Layers Overview

Name: Media La Vista FZCO
Address: Dubai Silicon Oasis, Dubai, AE
Telephone: +971 55 581 01 49

Layers are the building blocks of jSignage content. Every visual element is a layer with position, size, timing, and effects.

All Layer Types

Basic Layers

Constructor	Description	Details
`$.media()`	Auto-detect media type (preferred)	Media Layers
`$.video()`	Video + optional audio	Media Layers
`$.image()`	Static bitmap or vector	Media Layers
`$.textArea()`	Rectangular text region	Text Layers
`$.g()`	Group container	—

Advanced Layers

Constructor	Description	Details
`$.playlist()`	Sequential media playback	Playlists
`$.slideshow()`	Custom-layout slides via renderToSVG	Slideshows
`$.fitTextArea()`	Auto-sized text	Text Layers
`$.headlineTextArea()`	Single headline, max font	Text Layers
`$.scrollingTextArea()`	Scrolling text	Text Layers
`$.table()`	Data table	Tables

Interactive Layers

Constructor	Description	Details
`$.multiPage()`	Programmatic page switching	Interactive
`$.carousel()`	Swipeable carousel	Interactive
`$.popup()`	Modal popup	Interactive
`$.pushButton()`	Interactive button	Interactive

Common Attributes

Attribute	Description	Default
`left`, `top`	Position (px or %)	`0`
`width`, `height`	Size (px or %)	`'100%'`
`begin`	Start time (seconds)	`0`
`dur`	Duration (seconds, `'media'`, `'indefinite'`)	depends
`repeatCount`	Number of repetitions	`1`
`opacity`	Layer opacity (0–1)	`1`
`frame`	Frame decoration object	Frame Decoration

Common Functions

Method	Description
`.addTo('svg')`	Add to the root SVG element
`.show()` / `.hide()`	Visibility toggle
`.begin()` / `.end()`	Timeline control
`.fadeIn()` / `.fadeOut()`	Effects

Multi-Zone Layout Example

$(function() {
  $('svg').add([
    // Main video area (75% width, 80% height)
    $.video({
      id: 'main', left: '25%', height: '80%',
      href: 'content.mp4'}),
    // Left sidebar - image playlist
    $.playlist({
      id: 'leftbar', width: '25%', height: '100%',
      data: ['ad1.jpg', 'ad2.jpg', 'ad3.jpg'],
      repeatDur: 'indefinite', defaultDur: 5
    }),
    // Bottom news bar
    $.textArea({
      id: 'newsbar', top: '80%', left: '25%', width: '50%',
      frame: { frameColor: 'black', backColor: 'grey'}
    }).text("Welcome to jSignage")
  ]);
});

Chaining

All layer methods return the layer object, enabling chaining:

$.textArea({ fontSize: 60, dur: 5 })
  .text("Hello World")
  .fadeIn({ dur: '1s'})
  .fadeOut({ dur: '0.5s'})
  .addTo('svg');