<!--
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);