Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>NetbookBot Remote</title>
    <style>
    #remotetable {
        border-spacing: 0px;
    }
    #remotetable button {
        width: 100px;
        height: 100px;
        margin: 0px;
        padding: 0px;

    }
    #remotetable button.holding {
        outline: 2px solid orange;
    }
    #remotetable canvas {
        display: block;
        margin-left: 10px;
    }
    </style>
</head>
<body>

<h1>NetbookBot Remote</h1>
<table id="remotetable" cellspaning=0 cellpadding=0>
    <tr>
        <td rowspan=3 width=120>Camera:<br><button id="btn_TiltUp">Tilt up</button><br><button id="btn_TiltDown">Tilt down</button></td>
        <td></td>
        <td><button id="btn_Forward">Forward</button></td>
        <td></td>
        <td rowspan=3><canvas width=400 height=300 id="sensoroutput"></canvas></td>
    </tr>
    <tr>
        <td><button id="btn_TurnLeft">Turn Left</button></td>
        <td><!--<button id="btn_Stop">Stop</button>--></td>
        <td><button id="btn_TurnRight">Turn Right</button></td>
    </tr>
    <tr>
        <td></td>
        <td><button id="btn_Backward">Backward</button></td>
        <td></td>
    </tr>
</table>
<p>You can also use the arrow keys and Page Up/Down keys<br>
<a href="skype:netbook.bot?call">Call the robot</a> (Skype)</p>

<script>

(function (global) {
    'use strict';

    var socanvas = global.document.getElementById('sensoroutput');
    var soc = socanvas.getContext('2d');

    var sensorvalues = {
        'leftDistance': 0,
        'rightDistance': 0,
        'ambientLight': 0,
        'batteryLevel': 0
    };

    var updateSensorValues = function () {
        soc.clearRect(0, 0, socanvas.width, socanvas.height);
        soc.save();
            soc.fillStyle = 'black';
            soc.font = "13px sans-serif";
            soc.fillText("Ambient light level:", 0, 11);

            soc.fillText("Battery level:", 205, 11);
            soc.font = "bold 16px sans-serif";
            soc.fillText(sensorvalues.batteryLevel+" V", 285 , 13);

            soc.textAlign = "center";
            soc.fillText("Distance", 100, 80);
            soc.font = "bold 16px sans-serif";
            soc.fillText(sensorvalues.leftDistance+" cm", 50, 100);
            soc.fillText(sensorvalues.rightDistance+" cm", 150, 100);

            soc.globalAlpha = sensorvalues.ambientLight/1023;
            soc.fillRect(1, 16, 199, 49);
            soc.globalAlpha = 1.0;
            soc.strokeRect(0.5, 15.5, 200, 50);

            soc.strokeStyle = "#999";
            soc.beginPath();
            soc.moveTo(100.5, 85);
            soc.lineTo(100.5, 300);
            soc.stroke();

            soc.fillStyle = "#CCC";
            soc.fillRect(205, 16, 9*15+4, 29);
            soc.fillStyle = "#3F3";
            soc.fillRect(207, 18, Math.min(sensorvalues.batteryLevel, 9)*15, 25);

            var leftBar = Math.min(Math.round(sensorvalues.leftDistance*1.5), 190);
            var rightBar = Math.min(Math.round(sensorvalues.rightDistance*1.5), 190);

            soc.lineWidth = 2;

            soc.fillStyle = "#F00";
            soc.strokeStyle = "#C00";
            soc.fillRect(10, 110+189-leftBar, 80, leftBar);
            soc.strokeRect(10, 110+189-leftBar, 80, leftBar);
            soc.fillStyle = "#0F0";
            soc.strokeStyle = "#0C0";
            soc.fillRect(110, 110+189-rightBar, 80, rightBar);
            soc.strokeRect(110, 110+189-rightBar, 80, rightBar);

        soc.restore();
    };
    updateSensorValues();

    var actions = [
        ['Forward', 38],
        ['Backward', 40],
        ['TurnLeft', 37],
        ['TurnRight', 39],
        ['TiltUp', 33],
        ['TiltDown', 34]
    ];

    var buttons = [];

    var lastSent = -1;

    var downListener = function (i) {
        return function (e) {
            actions[i].isHolding = true;
            if(lastSent !== i && ws && ws.readyState === 1) {
                ws.send(actions[i][0]);
                lastSent = i;
            }
            e.preventDefault();
        };
    };
    var upListener = function (i) {
        return function () {
            if(actions[i].isHolding) {
                actions[i].isHolding = false;
                if(lastSent !== -1 && ws && ws.readyState === 1) {
                    ws.send("Stop");
                    lastSent = -1;
                }
            }
        };
    };

    var keyCodes = [];

    for(var i=0; i < actions.length; i+=1) {
        buttons[i] = global.document.getElementById('btn_'+actions[i][0]);
        buttons[i].addEventListener('mousedown', downListener(i), false);
        buttons[i].addEventListener('mouseup', upListener(i), false);
        keyCodes[i] = actions[i][1];
        actions[i].isHolding = false;
    }

    global.addEventListener('keydown', function (e) {
        var kc = e.keyCode;
        var i = keyCodes.indexOf(kc);
        if(i > -1) {
            actions[i].isHolding = true;
            buttons[i].classList.add("holding");
            if(lastSent !== i && ws && ws.readyState === 1) {
                ws.send(actions[i][0]);
                lastSent = i;
            }
            e.preventDefault();
        }
    }, false);
    global.addEventListener('keyup', function (e) {
        var kc = e.keyCode;
        var i = keyCodes.indexOf(kc);
        if(i > -1) {
            if(actions[i].isHolding) {
                actions[i].isHolding = false;
                buttons[i].classList.remove("holding");
                if(lastSent !== -1 && ws && ws.readyState === 1) {
                    ws.send("Stop");
                    lastSent = -1;
                }
            }
        }
    }, false);

    if(!window.WebSocket) window.WebSocket = window.MozWebSocket;

    var ws = new WebSocket("ws://"+global.document.location.hostname+":8022");

    ws.onopen = function () {
        console.log("Connected");
    };
    ws.onmessage = function (e) {
        var data = JSON.parse(e.data);
        if(data.sensorvalues !== undefined) {
            //if(data.sensorvalues[0] != "255")
                sensorvalues.leftDistance = +data.sensorvalues[1];
            //if(data.sensorvalues[1] != "255")
                sensorvalues.rightDistance = +data.sensorvalues[0];
            sensorvalues.ambientLight = parseInt(data.sensorvalues[2], 10);
            updateSensorValues();
        }
        if(data.batterylevel !== undefined) {
            sensorvalues.batteryLevel = data.batterylevel;
            updateSensorValues();
        }

    };
    ws.onclose = function () {
        console.log("Disconnected");
    };
    ws.onerror = function (e) {
        console.log("Socket error");
    };

}(self));

</script>
</body>
</html>