Untitled

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

    <head>
        <meta http-equiv="content-type" content="text/html; charset=windows-1250">
        <script src="http://10.0.0.13:2424/js/ideino-linino-lib/socket.io.js"></script>
        <script src="http://10.0.0.13:2424/js/ideino-linino-lib/ideino-linino-lib-client.js"></script>
    </head>
    <style>
        .button {
            width: 100px;
            height: 30px;
            border: 1px solid gray;
            box-shadow: 6px 6px 5px #888888;
            position: absolute;
            left: 300px;
            top: 5px;
        }
        .txtbox {
            width: 200px;
            height: 50px;
            border: 1px solid gray;
            font-family: courier;
            font-size: 1.2em;
            text-align:center;
            box-shadow: 6px 6px 5px #888888;
            position: absolute;
        }
        .canvas {
            border: 1px solid gray;
            box-shadow: 6px 6px 5px #888888;
            position: absolute;
        }
    </style>

    <body>
        <script>
            window.onload = connect('10.0.0.13');

            function aread() {
                analogRead('A0', function(myData) {
                    document.getElementById("myCanvas1").height = myData.value;
                    document.getElementById('txtValue1').value = myData.value;
                    if (myData.value > 300) {
                        var c = document.getElementById("myCanvas1");
                        var ctx = c.getContext("2d");
                        ctx.fillStyle = "#FF0000";
                        ctx.fillRect(0, 0, 200, myData.value);
                    }
                });

                analogRead('A1', function(myData) {
                    document.getElementById("myCanvas2").height = myData.value;
                    document.getElementById('txtValue2').value = myData.value;
                    if (myData.value > 400) {
                        var c = document.getElementById("myCanvas2");
                        var ctx = c.getContext("2d");
                        ctx.fillStyle = "#FF0000";
                        ctx.fillRect(0, 0, 200, myData.value);
                        alarm.play();
                    }
                });
            }
        </script>
        <div>
            <audio id="alarm">
                <source src="Alarm.mp3" type="audio/mp3">Your browser does not support HTML5 video.</audio>
            <br/>
            <button type="button" class="button" onclick="aread()">Start</button>
            <br/>
            <canvas id="myCanvas1" class="canvas" width="200" style="left: 100px;bottom: 50px;"></canvas>
            <input type="label" id="txtValue1" class="txtbox" placeholder="Baby's movements" style="left: 100px;top: 60px;">
            <canvas id="myCanvas2" class="canvas" width="200" style="left: 400px;bottom: 50px;"></canvas>
            <input type="label" id="txtValue2" class="txtbox" placeholder="Baby's audio" style="left: 400px;top: 60px;">
        </div>
    </body>

</html>