Skip to main content

How to build HTML5 Widgets?

HTML5 Widgets

A great way to take advantage of HTML5 for digital signage is to build "widgets" that display dynamic information using a portion of the large screen. Below are some sample widgets:

  • Conference Room Widget: 

    This widget talks directly to any iCalendar-compatible scheduling software (such as Google Calendar) and builds a great conference/meeting room door sign with the XDS-1060 or XDS-1062 or XDS-1078 signboards.

  •  

  • Applicable models: IAdea XDS-1060 or XDS-1062 or XDS-1078

  •  How to use: download the file attachment below. Unzip to a USB stick formatted as FAT or FAT32. You should see a folder named "SMIL" in the root directory. Insert the USB stick into an IAdea media player and the content will load and play. In the SMIL folder you will also find a ".wgt" widget file which you can schedule independently via supporting Content Management Systems.

  • Example download: SMIL-ConfRoom.zip SMIL-ConfRoom.zip

 

 

Building a Widget

This section provides information to help you build widgets using the IAdea Widgets Library for Digital Signage.

The simplest "Hello, world" widget to create can be done in just a few lines of HTML code:

<html>
<body>
Hello, world.
</body>
</html>

The output of the widget should be similar to the following.

Capture2.JPG

To view this on an IAdea Web Appliance, do the following:

  1. Save the HTML widget code as file name "index.html"
  2. Compress the file into "ZIP" format
  3. Rename the file with ".wgt" file extension (e.g., index.wgt)
  4. Schedule the .wgt file in SMIL like any other media object (such as video), using the <ref> tag (see Scheduling a Widget using SMIL). You may consult http://A-SMIL.org for information regarding SMIL.

Of course, showing a tiny "Hello, world." on a big screen is far from what digital signage needs. We will add more features to make this a more suitable tool.

 

 

 

Making It Beautiful

An advancement in HTML5 technology is the support for Web Fonts via CSS. IAdea players currently support fonts built using the Open Type Font (OTF) and True Type Font (TTF) technologies. We will demonstrate using the beautiful Graublau Sans Web font provided by fonts.info.

Put on a tad of color, and make the font large enough for viewing from a distance, a prettier version of our "Hello, world" widget can be achieved with just slightly more code:

 

<html>
<style>
  @font-face {
    font-family: "GraublauWeb";
    src: url("http://www.fonts.info/info/press/GraublauWeb-Regular.otf") format("opentype");
  }
  body { 
    background-color: transparent;
    margin: 4px;
    font-family: GraublauWeb;
    font-size: 96px; 
  }
  div {
    background-color: #339933;
    color: white;
    width: 100%;
    height: 100%;
  }
</style>
<body><div>
Hello, world.
</div></body>
</html>

 

And voila!

Capture1.JPG

Note that each time the widget loads, your IAdea player may need to re-visit the provider of the font and check for updates. This runs the danger that if network connection becomes temporarily unavailable, your widget will not be able to render fonts correctly.

The solution is for you to download the .otf font file, place it in the same directory as your index.html, and change the font reference to the following:

 

  @font-face {
    font-family: GraublauWeb;
    src: url(GraublauWeb-Regular.otf) format("opentype");
  }

 

so the font is loaded locally. When making the .wgt widget file, zip the font file into the .wgt package.

Using Web Fonts is the recommended approach for keeping a consistent look for your HTML content.

 

 

 

Making It Fly with Widgets Library

 

Making content interesting is a key to a successful digital signage project. We will now make the "Hello, world" widget really lively using the IAdea Widgets Library.

The Widgets Library is a JavaScript library that can be included in your HTML5 widgets to provide useful features for digital signage.

The following revised "Hello, world" widget makes use of the Widgets Library. You will first need to download the GraublauWeb.otf font used in the previous sample code, and the iaWidgets.js file is in attachment below.

 

<html> 
  <head>
    <style>
      @font-face {
        font-family: GraublauWeb;
        src: url("GraublauWeb.otf") format("opentype");
      }
      body 
      { 
        font-family: 'GraublauWeb', arial, serif; 
        background-color: transparent;
        margin: 0;
      }
    </style>
    <script language="JavaScript" type="text/javascript" src="iaWidgets.js"></script>
    <script language="JavaScript">
      function init()
      {
        var conf = adapi.getConfiguration() ;
        
        w = new adapi.widget( "wHelloWorld", {
          layout: "Tt", backgroundColor: conf.param[ "color" ],
          content: [
            { data: "Hello,", doLoad: getMessage },
            { data: ":-)" }
          ],
          pages: {
            count: 2,
            interval: 3,
            transition: "SlideUpDown"
          }
        } ) ;
      }
      
      var bSayHello = false ;
      
      function getMessage()
      {
        var message = ( bSayHello ? "Hello," : "world!" ) ;
        bSayHello = !bSayHello ;
        return message ;
      }
    </script>
  </head>
  <body onload="init()">
    <div id="wHelloWorld" style="width:100%; height:100%"></div>
  </body> 
</html>

The resulting widget looks like this (theme color easily changed without modifying widget code!)

Making It Fly with Widgets Library

 

Scheduling a Widget using SMIL

A widget should have all its required HTML resources (such as fonts, style sheets, scripts) encapsulated in a zip-compressed file and given the file name extension ".wgt".

When you have the widget as a .wgt file, you can schedule it into SMIL as a ref item:

 

<ref src="http://path_to_widget.wgt" type="application/widget" />

 

 

 

Using HTML5 in SMIL

While IAdea players can directly play HTML5 files, there are several benefits if HTML5 is scheduled as a media element in SMIL.

Please note that to activate support for HTML5 content type, the SMIL body element must be attributed with systemComponent="http://www.w3.org/1999/xhtml", such as:

 

<smil>
  <head/>
  <body systemComponent="http://www.w3.org/1999/xhtml">
    <!-- ... -->
  </body>
</smil>

 

Then HTML content can be referenced using one of the following ways:

 

    <text src="http://server/path/doc.html" type="text/html" />

 

or

 

    <ref src="http://server/path/doc.wgt" type="application/widget" />

 

Where a widget (.wgt) file is a zipped tree of an HTML document named "index.html" stored with all its external assets.

The media element can be given a display duration, start and end condition, etc. just like any other media object referenced in SMIL.

 

Caching HTML Widgets in SMIL

HTML5 can be directly linked from SMIL as a simple <text> media object. However, such usage can face a problem when device accidentally reboots while network is not available. When such an event occurs, the SMIL framework only caches the HTML document. Any external elements in the HTML presentation, such as images, scripts and iframes, would not be available from the cache system.

To keep the entire HTML presentation persistent across power loss, it is advised that the entire HTML tree: the root HTML document and all its linked objects, are stored in what's known as the W3C Widget format. Simply explained, it is done by putting all needed files inside a directory structure with the root HTML saved as "index.html" and all URLs referneces relative. Then the directory tree is compressed in .zip format, and then renamed to .wgt (for widget).

Then in SMIL, one can playback the entire HTML tree as a single atomic media object, very much like a video or image file. The syntax to schedule a widget is

 

    <ref src="http://path_to_widget.wgt" type="application/widget" />

 

Note that the SMIL body must specify systemComponent="http://www.w3.org/1999/xhtml" to activate HTML5 support.

 

 

Was this article helpful?
Powered by Zendesk