Colours and Names

This is an old revision of the document!

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>

Colours and Names