#### 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.

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