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

• WSAdam4_0.html:
  https://github.com/michelleseo/Arduino_Web/blob/master/WSAdam/WSAdam4_0.html
• dx.chartjs.js: 
  https://github.com/michelleseo/Arduino_Web/blob/master/WSAdam/dx.chartjs.js
• globalize.min.js:
  https://github.com/michelleseo/Arduino_Web/blob/master/WSAdam/globalize.min.js
• jquery-2.0.3.min.js:
  https://github.com/michelleseo/Arduino_Web/blob/master/WSAdam/jquery-2.0.3.min.js

Input Polling from a Browser - Web/Arduino/Adam

When Input Polling from a Browser...

The previous code updated input condition when [IN Refresh] button was clicked. Now we are going to change it so that it updates continuously.

We are going to fix the following parts:

omit...

<script>
    var ws;
    var poll = 0;
    var intervalTimer;
    var InLamp = new Array();
    for (var i = 0; i < 8; i++)
        InLamp[i] = '#DI' + (7 - i) + '_c';

omit...

//    ws.onopen = function() { status('Connected...'); }
    ws.onopen = function() {
        status('Connected...');
        // When WebSocket connects, polling starts.
        DI_pollEnable();
    }

omit...

//    function DI() { ws.send("DI"); }
    
    function DI_poll() {
        ws.send("DI");
        // Polls every 500 ms.
        intervalTimer = setTimeout(function() { DI_poll() }, 500);
    }
    
    function DI_pollEnable() { // Start polling
        if (!poll) {
            poll++;
            DI_poll();
        }
    }
    
    function DI_pollDisable() { // End polling
        clearTimeout(intervalTimer);
        poll = 0;
    }

omit...

    <!--<button type="button" onclick="DI()">IN Refresh</button>-->
    <button type="button" onclick="DI_pollEnable()">Input Refresh ON</button>
    <button type="button" onclick="DI_pollDisable()">OFF</button>
</body>

Full codes can be found in following links

• WSAdam2_0.html:
  https://github.com/michelleseo/Arduino_Web/blob/master/WSAdam/WSAdam2_0.html
  
• jQuery.js:
  https://github.com/michelleseo/Arduino_Web/blob/master/WSAdam/jquery.js

HTML / JavaScript - Web/Arduino/Adam

Screen Capture of WSAdam1_0.html

Let's simplify the HTML code.

Create

ws = new WebSocket('ws://192.168.219.16:80/');

Method

ws.send("DI"); // sends message
ws.close(); // Not used this time

Event

ws.onopen = function() { status('Connected...'); }
ws.onclose = function() { status('Closed...'); }
ws.onerror = function(evt) { status('Error ' + evt.data); }
ws.onmessage = function(evt) { // function that receives message

Reference: http://www.tutorialspoint.com/html5/html5_websocket.htm

<!DOCTYPE html>
<html>
    <head>
        <title>ADAM-4050 1.0</title>
        <!--It seemed to be a waste to download it everytime, 
        so I included the file.-->
        <script type="text/javascript" src="jquery.js"></script>
        <script>
            var ws;
            var InLamp = new Array();

            for (var i = 1; i < 8; i++)
                InLamp[i] = '#DI' + (7 - i) + '_c';

            // This is the code that browser calls when done
            // loading HTML/JS code.
            $(document).ready(function() {
                var i = 0;
                var html = 'ON <br />';

                // This is the code for making ON buttons in HTML.
                // The same code is repeated.
                for (i = 0; i < 8; i++)
                    html += '<button type="button" onclick="DO_On(' + i + ')">DO ' + i + '</button>';
                $('#OutONbutton').append(html);

                // This is the code for making OFF buttons in
                // HTML.
                html = 'OFF<br/>';
                for (i = 0; i < 8; i++)
                    html += '<button type="button" onclick="DO_Off(' + i + ')">DO ' + i + '</button>';
                $('#OutOFFbutton').append(html);

                // This is the code for drawing Input circles in
                // HTML.
                html = '<table><tr align="center">';
                for (i = 0; i < 7; i++)
                    html += '<td><svg height="50" width="50"><circle id="DI' + i + '_c" cx="25" cy="25" r="20" stroke="black" fill="white"/></svg></td>';
                html += '</tr><tr align="center"><td>DI 0</td> <td>DI 1</td> <td>DI 2</td> <td>DI 3</td> <td>DI 4</td> <td>DI 5</td> <td>DI 6</td></tr></table>';
                $('#InputLamp').append(html);

                // Now connect the WebSocket.
                WebSocketConnect();
            });

            function WebSocketConnect() {
                try {
                    ws = new WebSocket('ws://192.168.219.16:80/');

                    ws.onopen = function() {
                        status('Connected...');
                    }
                    ws.onclose = function() {
                        status('Closed...'); 
                    }
                    ws.onerror = function(evt) {
                        status('Error ' + evt.data); 
                    }

                    ws.onmessage = function(evt) {
                        for (var i = 1; i < 8; i++) {
                            if (evt.data[i] == '0')
                                $(InLamp[i]).css("fill", "white");
                            else
                                $(InLamp[i]).css("fill", "red");
                        }
                    };
                }
                catch (exception) {
                    status('Exception ' + exception);
                }
            }

            function DO_On(chn) { ws.send('DO' + chn + '_ON'); }
            function DO_Off(chn) { ws.send('DO' + chn + '_OFF'); }
            function DI() { ws.send("DI"); }
            function status(str) { $("#status").append(str); }
            
        </script>
    </head>
    <body>
        <p id="status">Connection Status: </p>
        <p id="OutONbutton"></p>
        <p id="OutOFFbutton"></p>
        <p id="InputLamp"></p>
        <button type="button" onclick="DI()">IN Refresh</button>
    </body>
</html>

Full codes can be found in following links

• WSAdam1_0.html: 
  https://github.com/michelleseo/Arduino_Web/blob/master/WSAdam/WSAdam1_0.html
  
• jQuery.js: 
  https://github.com/michelleseo/Arduino_Web/blob/master/WSAdam/jquery.js