Basic Digital Signage Example

Digital signage SVG files use embedded Javascript code to make the SVG image respond to live data updates from ARDI.

First, you prepare the image file in the vector image editor of your choice. For those with a limited budget, Inkscape produces SVG files that are extremely easy to work with and is free and open-source.

Let's start with the basic SVG file…

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="297mm"
   height="210mm"
   viewBox="0 0 200 100"
   version="1.1">
 
   <rect id="rct" x="0" y="0" width="200" height="100" fill="red">
     <text id="txt" x="50" y="50" fill="white">0%</text>
   </rect>
 
</svg>

This defines a simple red rectangle with white text inside, reading “0%”.

To make this respond to live data, we need to first import the Javascript libraries we depend on.

In this example, we will be using the ARDI client library and JQuery.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="297mm"
   height="210mm"
   viewBox="0 0 200 100"
   version="1.1">
 
   <script type="text/javascript" xlink:href="http://ademo.optrix.com.au/plugins/optrix/ardiclient.js"></script>
  <script type="text/javascript" xlink:href="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 
   <rect id="rct" x="0" y="0" width="200" height="100" fill="red">
     <text id="txt" x="50" y="50" fill="white">0%</text>
   </rect>
 
</svg>

Now that our dependencies are covered, we can actually add the script that responds to our incoming data.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="297mm"
   height="210mm"
   viewBox="0 0 200 100"
   version="1.1">
 
   <script type="text/javascript" xlink:href="http://ademo.optrix.com.au/plugins/optrix/ardiclient.js"></script>
  <script type="text/javascript" xlink:href="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 
<script type="text/javascript"><![CDATA[
 
	var connection = new ARDIHMI();
 
	connection.Subscribe("22:24:measurement",function (val) {
                var col="#000000";
                if (val < 25) col = "#FF2222";
		$('#txt').text(val + "%").attr("fill",col);
	}); 	
 
        //Server - ademo.optrix.com.au, site - PD (Power Generation Demo)
	connection.ConnectTo("ademo.optrix.com.au/s/pd");
]]></script>
 
 <rect id="rct" x="0" y="0" width="200" height="100" fill="red">
     <text id="txt" x="50" y="50" fill="white">0%</text>
   </rect>
 
</svg>

In this code,

var connection = new ARDIHMI();

This creates a new instance of the ARDI client, used to subscribe to values from the ARDI consolidator (the ARDI live data service).

connection.Subscribe(“22:24:measurement”,function (val) { … });

This line registers a new function to be called whenever there is a change to asset 22, property 24, node measurement.

The first parameter to the function is the new value returned from ARDI.

In the handler, we change the displayed SVG text value to match the updated value from ARDI (note that we add the measurement units - the value from ARDI is the raw number, without units).

We also check the value - if it is less than 25%, we set the text fill colour to red. Otherwise, it is black.

If you wanted, this is a great place to use JQuery or D3 animations to smooth out the transitions between numbers and/or colours.

connection.ConnectTo(“ademo.optrix.com.au/s/pd”);

This connects to the 'ademo' server, asking for the pd database (which in this case, stands for Powergen Demo).

And that - apart from the actual code to update the HTML content - is how you can create images and/or web pages that respond to live data. Each time a new change comes through from ARDI, one or more of your subscribed functions are called, giving them the chance to update themselves with live data.

This creates an SVG image that - when opened in a modern browser such as Chrome, Firefox or Edge - connects to ARDI and is immediately updated with live data.

You can use this to place live displays in any part of your facility, or even create a view that you can email to others or open across a network without needing to install software.