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
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');
All 30+ layer types, common attributes (position, size, timing), and functions.
