Documentation

Local JavaScript API allows you to create interactive digital signage screens by creating an HTML file, which can change the content displayed in each panel on the screen. For example, clicking a button in one part of the screen can trigger the display of a particular file in another part of the screen. Setting up such an HTML file requires at least basic knowledge of HTML and JavaScript.

All methods of the API are static methods in class SlideshowAPI. It can be accessed from HTML files displayed on the screen, the HTML file is displayed either from the internal memory, or as a website loaded from an URL file saved in the internal memory.

Local JavaScript API is disabled by default for security reasons and can be enabled via web interface – menu Settings – Device settings – Allow local API for web pages.

List of available methods

Display file on the screen:
SlideshowAPI.showFile(panelName, fileName, length);
  • panelName – name of the panel, on which the file should be displayed, or null for main panel
  • fileName – name of the file to display
  • length – length of display in seconds
Move to the next file in playlist:
SlideshowAPI.next(panelName);
  • panelName – name of the panel, on which the file should be displayed, or null for main panel

Examples

You can use the HTML file bellow as an example. It contains several buttons, each which a description what it does. The JavaScript call is in the “onclick” property of the each button.

<html>
  <head>
    <style>
      .wrapper { margin-bottom: 10px; }
      .wrapper button { font-size: 120%; padding: 4px 8px; }
    </style>
  </head>
  <body>
    <h1>Examples for Slideshow's Local JavaScript API</h1>
    <div class="wrapper">
      <button onclick="SlideshowAPI.showFile(null, 'image1.jpg', 5);">
        Display file image1.jpg on the main panel for 5 seconds
      </button>
    </div>
    <div class="wrapper">
      <button onclick="SlideshowAPI.showFile('Side panel', 'images/image2.jpg', 10);">
        Display file images/image2.jpg on the panel called Side panel for 10 seconds
      </button>
    </div>
    <div class="wrapper">
      <button onclick="SlideshowAPI.showFile('Side panel', 'image2.jpg', 10);">
        Display file video1.mp4 on the main panel (length is ignored)
      </button>
    </div>
    <div class="wrapper">
      <button onclick="SlideshowAPI.showFile('audio', 'song1.mp3', 10);">
        Play file song1.mp3 as a background audio (length is ignored)
      </button>
    </div>
    <div class="wrapper">
      <button onclick="SlideshowAPI.next(null);">
        Move the playlist on the main panel to the next item
      </button>
    </div>
    <div class="wrapper">
      <button onclick="SlideshowAPI.next('Side panel');">
        Move the playlist on the panel called Side panel to the next item
      </button>
    </div>
    <div class="wrapper">
      <button onclick="SlideshowAPI.next('audio');">
        Move the audio playlist to the next item
      </button>
    </div>
  </body>
</html>