This guide will teach you how to create an HTML Widget for Dise Lite players. 


TABLE OF CONTENTS

Players supported

The following players currently support HTML widgets.

  • SSSP2
  • SSSP3
  • Tizen (SSSP4, SSSP5 and SSSP6)
  • Brightsign (HD223 and HD224)

How to create an HTML Widget

A widget is a zip file (need to have file ending .zip) that besides a website and pictures etc. contains a manifest. 


When the zip file is loaded, Dise will look for a name, thumbnail and start page that it will use be used by reading the manifest.  


Format manifest

The manifest is in json format, must be called "manifest.json" and looks like below. Where the value is printed or where it says <required>, these fields are required, while <optional> is optional. The order in which the attributes come is not important.


{
    "name": "<required>",
    "media_type": "application/x-dise-widget",
    "manifest_version": 1,
    "start": "<required>",
    "version": "<optional>",
    "description": "<optional>",
    "thumbnail": "<optional>"
    "created": "<optional>",
    "size": <optional>,
    "hash": "<optional>",
    "privileges": "<optional>"
}



  • name
    Name to display in the portal, in content and playlists

  • media_type
    Must be "application / x-dise-widget". If it does not exist, the portal will not continue to extract thumbnails and players will not continue to load the widget.

  • manifest_version
    For now this value needs to be '1'

  • start
    Provides information about the filename of the html page to be displayed.The page is recommended to be at the root level.

  • version
    For future use. Describes version of the content of the widget. Can be any string and is intended to be displayed in the portal.

  • description
    For future use. Longer description of the contents of the widget. Can be any string and is intended to be displayed in the portal.

  • thumbnail (Required!)
    filename of the file to be used by the portal as a thumbnail.The file is recommended to be at the root level and have a .png or .jpg file extension

  • created
    For future use. Time when the content of the widget was created. A timestamp in ISO8601 format. Is supposed to appear in the portal

  • size
    For future use. Total size in bytes on the contents of the widget, for verification of widget validity. Is supposed to appear in the portal.

  • hash
    For future use. A SHA2 hash of the content of the widget, to verify the validity of the widget

  • privileges
    Describes the rights the web page in the widget should have in its iframe.Read out by player when it is loading the widget.
    Follows the same format as an iframes "sandbox" attribute, see ex. this side:
    https://html.com/attributes/iframe-sandbox/

    If the attribute does not exist, default to:
allow-forms allow-modals allow-pointer-lock allow-popups allow-scripts allow-same-origin


Example

An example of a manifest for a widget:

{
    "name": "MyWebsite",
    "media_type": "application/x-dise-widget",
    "manifest_version": 1,
    "description": "HTML5-application to show internal information",
    "start": "info.html",
    "thumbnail": "logo.png",
    "privileges": "allow-forms allow-modals allow-pointer-lock allow-popups allow-scripts allow-same-origin"
}

An example of what a widget might contain

How to schedule a Widget

In the portal, go to Content library > folder and tap Upload file. 
Select your zip file and press 'Ok'. 
The portal will use the name specified in the manifest instead of the file name, as well as extract and use the thumbnail sent with and specified in the manifest.


Custom settings access

A widget has access to custom settings for the player, which are sent as querystring variables with the start URL, for example as such: hash/index.html?var-x=abc


Access device's file system

A widget can ask the device’s file system help you download contents, those content will be downloaded into the same location as the index.html


More information and examples of this can be found here: https://bitbucket.org/diseinc/widget-file-access-api/src/develop/