JSignage tutorials

From SpinetiX Support Wiki

Jump to: navigation, search

Introduction

The best way to get up to speed with jSignage is to run the tutorials in Elementi:

  1. Download the tutorials archive included below.
  2. Create a new Project.
  3. Drag & drop the 7z file into that project to import the tutorials. A "tutorial" collection is created.
  4. Double-click on the "tutorial" collection to open it.
  5. Double-click on any of the svg files within to open the associated tutorial.
  6. Click on Menu > File > View Source to see the source code associated with each tutorial file.
    • Each file starts with a brief description text in the top <desc> element.

You can also preview the jSignage tutorials directly from this site in an HTML5 enabled web browser and see jSignage in action.

Note Note:
Compatibility with jSignage has been tested within the following browsers: Internet Explorer 9, Firefox 8, Chrome 15, Safari 5 and Opera 11. Any version above these should also be compatible.

List of tutorials

Show images and medias

  1. Simple image
  2. Media with start time and duration
  3. Media with in and out effects
  4. Decoration attributes
  5. Advanced decoration attributes

Build playlists

  1. Simple playlist with three images
  2. Simple playlist with two images and one video
  3. Advanced playlist
  4. Automatic playlist of all the medias in a directory
  5. Playlist with shuffle
  6. Playlist with shuffle and repeat

Display text

  1. Displaying text in jSignage
  2. Adding formatting to text
  3. Automatic wrapping of text in an area
  4. Forcing line breaks
  5. Displaying text from a file or server
  6. Displaying text of unknown length by scaling down the font size
  7. Displaying text of unknown length by scrolling
  8. Text of unknown length on one line

Arrange data in tables

  1. Image gallery
  2. Image gallery on two rows
  3. Progressive reveal of cells

Display data from RSS feeds

  1. Simple text ticker
  2. Simple text bar
  3. Custom news bar with vignette
  4. Fullscreen news slideshow

Build interactive applications

  1. Simple push button
  2. Advanced click handler
  3. Virtual museum navigation
  4. Image carousels
  5. Interactive slideshow
  6. Interactive text ticker
This page was last modified on 20 May 2019, at 14:24.