1.Overview

The Widget Development Framework has been created to give a standardised way to be able to publish HTML5 content and applications to Signagelive powered players without you having to learn a whole new language.

To create a widget you just need a basic understanding of HTML and Javascript, and that will mean you can start to create content, or convert existing content to work across Signagelive supported hardware.

By using the Widget Development Framework you get offline support out of the box, with the majority of our supported hardware, and the ability to provide Signagelive users with a level of customisation, ranging from simply selecting a different font colour, to being able to completely configure the way an application will work and where it will get its data from.

By using the configuration options available in the framework, Signagelive users will see standard WYSIWYG controls when configuring your Widgets, based on the options you configure, so they get a friendly user interface that they are used to.

To get some ideas of the types of content and applications we have been creating using the Widget Development Framework, take a look at the Signagelive Marketplace.

To keep up to date with changes to the Widget Development Framework, discuss any questions you have around implementation and to have direct access to our Development team, be sure to sign up to our Slack Development Community here.

2.Adobe Animate

This section describes some of the steps at a high level, of how to convert HTML5 content which has been exported from Adobe Animate in to a Signagelive Widget.

Please be sure to have signed up to the Signagelive Slack Developer Community so that you can view the Widget documentation available in the widget channel.

After exporting from Adobe Animate, you will have a folder which contains the following:

  • Images – Folder containing any images
  • Index.html
  • Setup.js

2.1.Widget Files

The next step is to add the Signagelive files required to turn the exported content into a Widget and make the preferences available within the Widget.

Config.xml

Add the config.xml file to the base of the folder, this is the document which describes the Widget to Signagelive and is required for Signagelive to support the Widget. The Widget documentation details the different fields within this file and the different options available for the preferences.

The preferences described in this file are the options which will be available to a User within Signagelive to edit on the Widget.

The name is the Media Asset name which will be displayed within Signagelive.

To make sure that the thumbnails within Signagelive are how you want them to be displayed, you need to include thumbnail images within the Widget. The files to use for these are detailed within the icon tags.

Javascript

Create a “scripts” folder in the base of the exported folder, and add the following scripts to this folder.

  • Jquery-3.1.0.min.js
  • Widget.js (Signagelive written javascript – which imports the Preferences from the config.xml)

2.2.HTML

So that the javascript files mentioned above are available in the Widget, you will need to add them to the index.html file. This is done by adding <script> tags to the Head section. The below script tags will do this:

To make it so that the setup.js file exported from Animate is initialised once the config.xml file has been read, we need to remove the following from the body tag.

So that the setup.js file is still initialised we need to add the following script tag after the closing </body> tag.

Setup.js

The setup.js file is the file which is exported from Adobe Animate and sets up all of the template. This creates an HTML5 canvas, and all of the images or text elements are added to this canvas.

To be able to use the preferences from the config.xml file we need to update the setup.js file and replace any hardcoded text you may have set with the Widget preference you want to use.

The content of a Widget preference can be accessed within javascript using the following script:

It is possible to use these preferences to update font size and font colour.

2.3.Suggestions

For ease of editing and consistency throughout the Widgets you create it is suggested that background images and thumbnails use the following naming conventions:

  • Background Image – background.png / background.jpg
  • Large Thumbnail – lg_thumbnail.png / lg_thumbnail.jpg
  • Small Thumbnail – sm_thumbnail.png / sm_thumbnail.jpg

2.4.Altering Backgrounds

Once you have created a Widget, if you want to use exactly the same layout and preferences but just want to change the background image, you can do this by following these steps:

  1. Update the name in the config.xml file so that it is described differently in Signagelive
  2. Update the thumbnails in the images folder so they show the changed background
  3. Change the background image in the images folder, and make sure it has the same name as the original background image.

2.5.Widget Creation

Now that we have updated the exported content from Adobe Animate to make it work as a Signagelive Widget we actually need to create the Widget. This is very simple to do and only takes a couple of steps.

  • From the base exported folder (the location of the config.xml file) select all items and add to a .zip file
  • Once zipped, rename the zip file as required
  • Change the extension from .zip to .wgt
  • Upload to Signagelive

2.6.Adding a Video

Edit the HTML file to add a link to the css file we will create next “style.css”. This can of course be named as you wish.

Create a style sheet to position the video, using the name defined above.

Add the following code to the HTML file. Make sure to give the video tag an ID of “thevideo” to match the CSS added above, and change the name of the video to match the name of the video you will be using.

Amend the canvas to have style=none and background-color:none.

It is recommended not to use AUTOPLAY on the the video tag, as we have seen some issues with playback when this is used. Therefore inside the “widget-init” event handler added above, you need to add some javascript to start playback of the video.

Suggest Edit