General

With our HTML5 Apps functionality you can integrate your own Rich Web Apps in sklera. The App is uploaded as a ZIP file to the Media Library, just like any other file, and is subsequently distributed to the players to enable offline support.

To simplify communication of apps with our player software we are offering a JavaScript library.


Structure of an App

An app should, at the least, have the following structure:


manifest.json

index.html

img/thumb.jpg

img/snap.jpg

js/sklera-sdk-VERSION.js


In manifest.json you define name, version number and two preview images for the sklera CMS. Said images need to be included in the ZIP file.

Any additional JS, CSS or media files can be included in the ZIP file as well.


App Manifest

manifest.json describes the app in the following JSON format:


{
  "manifest_version": 1,
  "name": "Hello World",
  "short_name": "Hello World",
  "description": "Example Hello World App",
  "author": "sklera GmbH",
  "version": "0.0.2",
  "offline_enabled": true,
  "thumbnail": "img/thumb_320x180.jpg",
  "snapshot": "img/snap_1280x720.jpg",
  "config": [
    {
      "name": "de_hello_world",
      "label": "Hello World Text (German)",
      "type": "string"
    },
    {
      "name": "en_hello_world",
      "label": "Hello World Text (English)",
      "type": "string"
    },
    {
      "name": "show_dark_mode",
      "label": "Show Dark mode",
      "type": "boolean"
    },
    {
      "name": "color",
      "label": "Language text color",
      "type": "select",
      "values": ["red", "green", "blue", "white", "black"],
      "desc": "Select a Textcolor"
    },
    {
      "name": "language",
      "label": "Language Select",
      "type": "select",
      "values": [
        { "label": "German", "value": "de" },
        { "label": "English", "value": "en" }
      ],
      "desc": "Select a language"
    }
  ]
}


App Settings

Config values for the app can be added under the 'config' key as you can see in the example above. For a comprehensive description of the possible config values check the corresponding article.


In the sklera CMS you can give custom values to these Apps by calling the 'App settings' menu in the media library, Spot-Widget or Layout Widget.




To access the config values in the app you can either call the Javascript library method getConfig , or alternately it's supplied as a second parameter of the  loaded callback function. 


sklera Javascript SDK

To simplify communication of apps with our player software we are offering a JavaScript library , which you can easily include in your web app to access additional features:

  • Read player data like name, address, postal code
  • Control Pause and Play of the player
  • Show/Hide the App
  • Show/Hide Layout widgets 
  • Save and read text data on the player

The SDK is available under the following link, complete with documentation and a sample app:

https://sklera.tv/js-sdk