HTML based digital signage

Posted by

Enonic Monitoring

Digital signage has become a natural part of most people's lives in the last few decades. All around us we are surrounded by electronic displays that present all kinds of information; advertisements, weather forecasts and travel routes. In this article, we show how Enonic CMS can be used for this purpose.

Handling support issues is a daily task here at Enonic. All customers have access to our support system, where they can post bug reports and feature requests, as well as asking for assistance from a consultant or developer. The support issues are assigned to a specific person (depending on the content), who processes the request, continuously leaving feedback to the customer.

To get a better overview of the current status of the support system, we decided to create a monitoring system that could show live information and statistics on a big display in our facilities. This was naturally created as a site on Enonic CMS.

Digital signage on Enonic CMS

The structure of the monitoring screen is basically the same as any page based on Enonic CMS; it consists of a page template with a portlet for each of the individual parts of information. Each portlet automatically refreshes it's information after a given time interval, for example every 20 seconds.

The portlets are made to work independently from each other. In this way, we are free to add or remove parts of the screen whenever we want, without the risk of affecting anything else.
Each portlet is built with the following logic:

This conditional test outputs the main structure of the portlet when first loaded (when the page template renders the regions (window is inline)), otherwise it returns the JSON data for the portlet when the portlet window calls itself with portal:createWindowUrl() (when the window isn't rendered inline).

Creating the JSON data from the XML result is not very complicated:

Note that we need to do some processing of the string content before it can be outputted as JSON. This code is from a working example, but it doesn't perfectly encode the string for this use. A template for encoding JSON has been added to the Enonic STK.

The JSON data will not work in Enonic's ICE mode (In Context Editing in admin), as this mode adds a DIV wrapper to the content, invalidating the JSON.

We don't need the XML data when the portlet is not outputting JSON (when it is rendered inline), so we add a condition to the datasource, like this:

Creating the graphical elements

The script that loads and refreshes the content of this portlet is listed below, separated into three parts. This script actually generates three of the elements found in the first image of this article; the number of open issues, a list of the 10 latest issues, and a pie chart of the amount of issues assigned to our 5 departments.

In the first part, we create most of DOM elements that are used for this part of the screen.

Updating the data

On a given interval, in this case every 10 seconds, the portlet refreshes it's content. As mentioned earlier, we use the XSLT function portal:createWindowUrl() to generate a URL to the current portlet window. The conditional statement then triggers the template "json-data" to be called, and the generated JSON data is put into the container elements generated above.

This last part creates the pie chart elements, which is based on the CSS3 rotate transform.

This is just the beginning

This is just a few examples on how digital signage can be implemented on a standard web platform. The possibilites are almost "endless", especially with the new techniques utilizing the capabilities of CSS3 and JavaScript. What about adding touch screen functionality or embedding social content?


The following video demonstrates how information can be illustrated in various ways, depending on the content and purpose. 

Note that the chart animation appears choppy on the video, this is due to high system load on the computer running the monitoring system (when capturing the video)