Colours and Names

Your live data will usually be numeric. Digital sensors and statuses will be sent as 0s and 1s.

It's important to be able to make these values human-readable, and to use the colour-codes that users expect to see.

The Infographics addin for ARDI offers a script file to help with this. It can be found on your ARDI server in the /displaylist/converters.js folder.

Key Functions

The script provides two main functions - ValueToString and ValueToColour. Both functions take the name of a property as the first parameter, and the current value as the second.

ValueToString returns a human-readable string describing the value, while ValueToColour returns a web colour that can be used when displaying the value.

Example

We want to make a box that displays the status of Stove #1 in our Blast Furnace demo site.

<html>
  <head>
    <title>Testing</title>
    <script src="https://demo.optrix.com.au/plugins/optrix/hmitt.js"></script>
	<script src="https://demo.optrix.com.au/s/bf/displaylist/converters.js"></script>
  </head>
  <body>
    <div id="display" style="width: 200px; height: 100px; padding: 1em; border-radius: 5px; background-color: purple; color: white; font-weight: bold; text-align: center;">
       Unknown
    </div>
 
    <script>
 
var connection = new HMITTPanel();
 
connection.Sub("Stove #1.State - Stove",function (v) {	
	document.querySelector('#display').innerHTML = ValueToString('State - Stove',v);
	document.querySelector('#display').style['background-color'] = ValueToColour('State - Stove',v);
});
 
connection.UseSSL();
connection.Connect("demo.optrix.com.au/s/bf");
 
    </script>
 
  </body>
</html>

Benefits

One of the key advantages to using these functions is that they adapt to change. Not only when individual sites add new options or change their colour preferences, but also between different sites, technology providers and customers.

Colours and Names