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
Set playlist:
SlideshowAPI.setPlaylist(panelName, playlistName);
  • panelName – name of the panel, on which the playlist should be displayed, or null for main panel
  • playlistName – name of the playlist to display
Clear set playlist:
SlideshowAPI.clearPlaylist(panelName);
  • panelName – name of the panel, on which the playlist should be cleared (returning to the scheduled playlist), or null for main panel
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
Pause playback:
SlideshowAPI.pause(panelName);
  • panelName – name of the panel, on which the playback should be paused, or null for main panel
Resume playback:
SlideshowAPI.resume(panelName);
  • panelName – name of the panel, on which the playback should be resumed, 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>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style> body { background-color: white; } </style>
  </head>
  <body>
    <h1>Examples for Slideshow's Local JavaScript API</h1>

    <h2>Method SlideshowAPI.showFile(panelName, fileName, length)</h2>

    <button onclick="SlideshowAPI.showFile(null, 'image1.jpg', 5);"> 
        Display file image1.jpg <br>on the main panel <br>for 5 seconds 
    </button>
    <button onclick="SlideshowAPI.showFile('Side panel', 'images/image2.jpg', 10);">
        Display file image2.jpg from folder images <br>on the panel called Side panel <br>for 10 seconds
    </button>
    <button onclick="SlideshowAPI.showFile(null, 'video1.mp4', 10);">
        Display file video1.mp4 <br>on the main panel <br>(length is ignored)
    </button>
    <button onclick="SlideshowAPI.showFile('audio', 'song1.mp3', 10);">
        Play file song1.mp3 <br>as a background audio <br>(length is ignored)
    </button>

    <h2>Method SlideshowAPI.next(panelName)</h2>

    <button onclick="SlideshowAPI.next(null);">
        Go to the next item <br>in the playlist on the main panel
    </button>
    <button onclick="SlideshowAPI.next('Side panel');">
        Go to the next item <br>in the playlist on the panel called Side panel
    </button>
    <button onclick="SlideshowAPI.next('audio');">
        Go to the next item <br>in the audio playlist
    </button>

    <h2>Method SlideshowAPI.setPlaylist(panelName, playlistName)</h2>

    <button onclick="SlideshowAPI.setPlaylist(null, 'Video playlist');">
        Set playlist called Video playlist <br>on the main panel
    </button>
    <button onclick="SlideshowAPI.setPlaylist('Side panel', 'Image playlist');">
        Set playlist called Image playlist <br>on the panel called Side panel
    </button>

    <h2>Method SlideshowAPI.pause(panelName) / SlideshowAPI.resume(panelName)</h2>

    <button onclick="SlideshowAPI.pause(null);">
        Pause playback <br>on the main panel
    </button>
    <button onclick="SlideshowAPI.resume('Side panel');">
        Pause playback <br>on the panel called Side panel
    </button>
    <button onclick="SlideshowAPI.resume(null);">
        Resume playback <br>on the main panel
    </button>
  </body>
</html>