Basic Standalone SVG File

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://demo.optrix.com.au/plugins/optrix/hmi.js"></script>
  <script type="text/javascript" xlink:href="http://demo.optrix.com.au/plugins/jquery/jquery.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://demo.optrix.com.au/plugins/optrix/hmi.js"></script>
  <script type="text/javascript" xlink:href="http://demo.optrix.com.au/plugins/jquery/jquery.min.js"></script>
 
<script type="text/javascript"><![CDATA[
 
	var connection = new HMIPanel();
 
	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 HMIPanel();

This creates a new instance of the HMIPanel class - the ARDI client class, used to subscribe to values.

  connection.Subscribe("22:24:measurement",function (val) { ... });

This line registers a new function to be called whenever there is a change to the point code for asset 22, property 24, node measurement using the Subscribe function. If you're uploading the SVG file to an ARDI asset, you can save yourself some time and effort by using embed codes.

When data changes, your callback function wiill be run - the first parameter to the function is the new value.

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("demo.optrix.com.au/s/pd");

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

Summary

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.

Making It Even Better

You can make your job even easier by adding the SVG to the media of an asset, which allows you to use the Embedding Codes.

Basic Standalone SVG File