Integration with Other Libraries

Because HTML HMI is built upon industry standard web development technologies such as jQuery, JSON, CSS and HTML5, integration with other open-source libraries is fairly straightforward. In this example, an HTML5 canvas-based gauge from the popular Steelseries library is used to display a data point.
No canvas in your browser...sorry...
No canvas in your browser...sorry...

<!-- 
Using the SteelSeries HTML 5 library, we can display real time data in a graphical format.  
Configuration of the HTML that acts as a placeholder for a gauge is farly simple.

By placing a 'No canvas...' message in the canvas tag, you can notify users when their browser does not support HTML 5.
-->

<div class="canvasContainer">
  <canvas id="canvasRadial1">No canvas in your browser...sorry...</canvas>        
</div>
      

/*
Configuring the script to generate the radial gauge is fairly straightforward.
See also, the SteelSeries gauge library examples for more details:
https://github.com/HanSolo/SteelSeries-Canvas
*/

// Initializing gauge, bound to 'canvasRadial1' HTML element
var radial1 = new steelseries.Radial('canvasRadial1', {
  gaugeType: steelseries.GaugeType.TYPE1,
  size: 250,
  section: sections,
  area: areas,
  titleString: 'Tank 1 Level',
  unitString: 'Ft',
  threshold: 75,
  frameDesign: steelseries.FrameDesign.CHROME,
  backgroundColor: steelseries.BackgroundColor.BROWN,
  lcdVisible: true
});

// Set up a script interval to check and update the value every 1000ms.
setInterval(function(){ 
  var sv = OPC.get_value("Sine2.Value");
  radial1.setValueAnimated(parseFloat(sv)); 
}, 1000);