A Simple Live-Data Web Page

Below you'll find the code for a simple web-page that displays the current speed of the Paint Line on our demo server.

<html>
  <head>
    <title>Testing</title>
    <script src="https://demo.optrix.com.au/plugins/optrix/hmitt.js"></script>
  </head>
  <body>
    <div id="display">
       Unknown
    </div>
 
    <script>
 
//Create a connection
var connection = new HMITTPanel();
 
//Subscribe to points
connection.Sub("Paint Line.Speed - Actual",function (v) {
   document.querySelector('#display').innerHTML = parseFloat(v).toFixed(2) + " m/min";
});
 
//Connect to the server
connection.UseSSL();
connection.Connect("demo.optrix.com.au/s/pl");
 
    </script>
 
  </body>
</html>

Smoothness

If you opened the HTML above, you'll notice that the data is animated. The library automatically smooths the transition between data updates by interpolating the incoming values over time.

While this works beautifully in some cases, there are types of data and visualisation that it isn't very useful for.

An optional 3rd parameter to 'Sub' allows you to prevent animation.

connection.Sub("Paint Line.Speed - Actual",function (v) {
   document.querySelector('#display').innerHTML = parseFloat(v).toFixed(2) + " m/min";
},true);

More Complex Examples

This all works well if you only ever want to work with one data point at a time, but what happens when you want to compare point values, or perform analysis?

Discover the GetValue function

A Simple Live-Data Web Page