Thursday, May 29, 2014

HTML / JavaScript - 4017 Arduino Gateway

Screen Capture of WSAdam4_0.html

I want to emphasize how easy it is to draw that circular gauge!

First of all choose the chart that you like the most.
http://chartjs.devexpress.com/Demos/VizGallery/#index

If you have picked Circular Gauge, let's have a look at 12 samples.
http://chartjs.devexpress.com/Demos/VizGallery/#chart/circulargaugesbasicelementspaletteforranges

Now we have to download the library.
http://chartjs.devexpress.com/Download

Last updated download file is DevExpressChartJS-13.2.9.zip

Next, read the tutorial very thoroughly. After reading this you can do everything!
http://chartjs.devexpress.com/Documentation/Tutorial/Configure_Gauges?version=13_2

If you want to know more, read the API reference.
http://chartjs.devexpress.com/Documentation/ApiReference/dxCircularGauge?version=13_2

I have divided up what we have to do roughly. It could easily be done by just simply following the tutorial.

  1. Load the needed js library.
  2. Create the gauge.
  3. Using HTML, create space for gauge.

    If all the above is done,
  4. Send data that gauge is going to represent.

<!DOCTYPE html>
<html>
    <head>
        <title>ADAM-4017 4.0</title>
        <!--****************************
        1. Load the needed js library
           The following 3 js library is included 
           in DevExpressChartJS-13.2.9\Lib\js
           I have attached it in this posting.
        ****************************-->
        <script type="text/javascript" src="jquery-2.0.3.min.js"></script>
        <script type="text/javascript" src="globalize.min.js"></script>
        <script type="text/javascript" src="dx.chartjs.js"></script>
        <script>
            var ws;
            var poll = 0;
            var intervalTimer;
            
//          ****************************
//          2. Create the gauge
//          ****************************
            $(function() {
                $('#gaugeContainer').dxCircularGauge({
                    scale: {
                        startValue: 0,
                        endValue: 10,
                        majorTick: { tickInterval: 1 },
                        minorTick: { visible: true, tickInterval: 0.1 }
                    },
                    rangeContainer: {
                        ranges: [{ startValue: 0, endValue: 9, color: 'royalblue' },
                                 { startValue: 9, endValue: 10, color: 'red'}]
                    },
                    valueIndicator: { color: 'red' },
                    title: {
                        text: 'ADAM-4017',
                        font: { size: 28 },
                        position: 'bottom-center'
                    }
                });
            });

            $(document).ready(function() {
                WebSocketConnect();
            });

            function WebSocketConnect() {
                try {
                    ws = new WebSocket('ws://192.168.219.16:80/');
                    ws.onopen = function() {
                        status('Connected...');
                        ws.send("AI0");
                    }
                    ws.onclose = function() { status('Closed...'); }
                    ws.onerror = function(evt) { status('Error ' + evt.data); }
                    ws.onmessage = function(evt) {
//                  ****************************
//                  4. Send data that gauge is going to represent.
//                  ****************************
                        $('#gaugeContainer').dxCircularGauge('instance').value(evt.data);
                    }
                }
                catch (exception) {status('Exception ' + exception);}
            }

            function DI_poll() {
                ws.send("AI0");
                intervalTimer = setTimeout(function() { DI_poll() }, 500);
            }

            function DI_pollEnable() {
                if (!poll) {
                    poll++;
                    DI_poll();
                }
            }

            function DI_pollDisable() {
                clearTimeout(intervalTimer);
                poll = 0;
            }

            function status(str) { $('#status').append(str); }
            
        </script>
    </head>
    <body>
    <p id="status">Connection Status: </p>
    <button type="button" onclick="DI_pollEnable()">Input Refresh ON</button>
    <button type="button" onclick="DI_pollDisable()">OFF</button>
    
    <!--****************************
    3. Using HTML create space for gauge.
    ****************************-->
    <div id="gaugeContainer" style="height:380px"></div>
    </body>
</html>



Full codes can be found in following links