<html> <head> <title>Devastator-Control</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ namespace = '/test'; // change to an empty string to use the global namespace // the socket.io documentation recommends sending an explicit package upon connection // this is specially important when using the global namespace var socket = io.connect('http://' + document.domain + ':' + location.port + namespace); socket.on('connect', function(msg) { socket.emit('my event', {data: 'I\'m connected!'}); }); $(document).keydown(function(event){ switch (event.which){ case 38: $('#up-button').focus(); $('#up-button').click(); break; case 37: $('#left-button').focus(); $('#left-button').click(); break; case 39: $('#right-button').focus(); $('#right-button').click(); break; case 40: $('#down-button').focus(); $('#down-button').click(); break; default: $('#pause-button').focus(); $('#pause-button').click(); } }); $(document).on('click', '#up-button', function() { $('#myslider').prop('disabled', true); $("button").removeClass("active"); $("button").addClass("active"); socket.emit('my event', {data: 'moving forward'}); socket.emit('motor', {left: $('#myslider').val(), right: $('#myslider').val()}); }); $(document).on('click', '#left-button', function() { $('#myslider').prop('disabled', true); socket.emit('my event', {data: 'turn left'}); socket.emit('motor', {left: $('#myslider').val()*-1, right: $('#myslider').val()}); }); $(document).on('click', '#pause-button', function() { $('#myslider').prop('disabled', false); socket.emit('my event', {data: 'moving stopped'}); socket.emit('motor', {left: 0, right: 0}); }); $(document).on('click', '#right-button', function() { $('#myslider').prop('disabled', true); socket.emit('my event', {data: 'turn right'}); socket.emit('motor', {left: $('#myslider').val(), right: $('#myslider').val()*-1}); }); $(document).on('click', '#down-button', function() { $('#myslider').prop('disabled', true); socket.emit('my event', {data: 'moving backward'}); socket.emit('motor', {left: $('#myslider').val()*-1, right: $('#myslider').val()*-1}); }); $(document).on('change', '#myslider-camv', function() { socket.emit('my event', {data: 'camera-vertical changed to : ' + $(this).val() }); var wert = parseFloat(-1*($(this).val()*0.9-45)); $("#camv").text(wert.toFixed(1)); socket.emit('servo', {servov: $(this).val(), servoh: $('#myslider-camh').val() }); }); $(document).on('change', '#myslider-camh', function() { socket.emit('my event', {data: 'camera-horizontal changed to: ' + $(this).val() }); var wert = parseFloat($(this).val()*1.8-90); $("#camh").text(wert.toFixed(1)); socket.emit('servo', {servoh: $(this).val(), servov: $('#myslider-camv').val() }); }); $(document).on('change', '#myslider', function() { socket.emit('my event', {data: 'speed changed to: ' + $(this).val() + '%'}); }); $(document).on('change', '#center', function() { if($(this).is(":checked")) { //'checked' event code socket.emit('my event', {data: 'center: on'}); socket.emit('centermode', {on: 'True'}); $('#myslider-camv').prop('disabled', true); $('#myslider-camh').prop('disabled', true); $('#myslider-camv').val("50"); $('#myslider-camh').val("50"); $("#camv").text("0"); $("#camh").text("0"); return; } //'unchecked' event code socket.emit('my event', {data: 'center: off'}); socket.emit('centermode', {on: 'False'}); $('#myslider-camv').prop('disabled', false); $('#myslider-camh').prop('disabled', false); }); $(document).on('change', '#ir-mode', function() { if($(this).is(":checked")) { //'checked' event code socket.emit('my event', {data: 'IR-mode: on'}); socket.emit('irmode', {on: 'True'}); return; } //'unchecked' event code socket.emit('my event', {data: 'IR-mode: off'}); socket.emit('irmode', {on: 'False'}); }); $(document).on('change', '#led-mode', function() { if($(this).is(":checked")) { //'checked' event code socket.emit('my event', {data: 'LED-mode: on'}); socket.emit('ledmode', {on: 'True'}); return; } //'unchecked' event code socket.emit('my event', {data: 'LED-mode: off'}); socket.emit('ledmode', {on: 'False'}); }); $(document).on('change', '#guided-mode', function() { if($(this).is(":checked")) { //'checked' event code socket.emit('my event', {data: 'guided-mode: on'}); socket.emit('guidedmode', {on: 'True'}); return; } //'unchecked' event code socket.emit('my event', {data: 'guided-mode: off'}); socket.emit('guidedmode', {on: 'False'}); }); socket.on('message', function(msg){ //console.log(msg) $('#direction').text(msg.direction); $('#pitch').text(msg.pitch); $('#roll').text(msg.roll); $('#distfront').text(msg.distfront + ' cm'); $('#distleft').text(msg.distleft + ' cm'); $('#distright').text(msg.distright + ' cm'); $('#distrear').text(msg.distrear + ' cm'); $('#lmotor').text(msg.lmotor + ' V'); $('#rmotor').text(msg.rmotor + ' V'); $('#batt').text(msg.batt + ' V'); }); }); </script> <style> body { background-color:lightgrey; } .data { font-family: Consolas; color: rgb(199,37,78); } .glyphicon { font-size: 40px; } td { padding: 5px; } .btn-success:active, .btn-success:focus { background-color: darkgreen !important; box-shadow: 5px 5px 10px 3px grey !important; } </style> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-sm-6" style="padding: 0px"> <img src="http://192.168.0.16:8080/stream/video.mjpeg" class="img-responsive" style="width:100%;" alt="live-stream Raspicam"></img> </div> <div class="col-sm-6"> <center> <table style="padding: 20px"> <tr> <td></td> <td><button id="up-button" type="button" class="btn btn-success"><span class="glyphicon glyphicon-arrow-up"></span></button></td> <td></td> <td rowspan="3"> -45°<input id="myslider-camv" orient="vertical" type="range" min="0" max="100" value="50">+45° </td> </tr> <tr> <td><button id="left-button" type="button" class="btn btn-success"><span class="glyphicon glyphicon-arrow-left"></span></button></td> <td><button id="pause-button" type="button" class="btn btn-success"><span class="glyphicon glyphicon-pause"></span></button></td> <td><button id="right-button" type="button" class="btn btn-success"><span class="glyphicon glyphicon-arrow-right"></span></button></td> </tr> <tr> <td></td> <td><button id="down-button" type="button" class="btn btn-success"><span class="glyphicon glyphicon-arrow-down"></span></button></td> <td></td> </tr> <tr> <td colspan="3"> -90°<input id="myslider-camh" type="range" min="0" max="100" value="50" style="display:inline-block; width:70%;">+90° </td> <td> <div class="checkbox"> <label><input id="center" type="checkbox">center</label> </div> </td> </tr> </table> </center> <p> <b>Speed:</b></br> 0<input id="myslider" type="range" min="1" max="100" value="50" style="display:inline-block; width:60%;">100% </p> <div class="checkbox"> <label><input id="ir-mode" type="checkbox">Nightvision (IR)</label> </div> <div class="checkbox"> <label><input id="led-mode" type="checkbox">LED</label> </div> <div class="checkbox"> <label><input id="guided-mode" type="checkbox">Autonomous</label> </div> </div> </div> <div class="row"> <div class="col-sm-4" style="padding: 0px 0px 0px 10px"> <h4>3-Axis Gyroscope Sensor</h4> Direction: <span class="data" id="direction">unknown</span><span class="data">°</span></br> Pitch: <span class="data" id="pitch">unknown</span><span class="data">°</span></br> Roll: <span class="data" id="roll">unknown</span><span class="data">°</span> <h4>Camera</h4> Cam-V: <span class="data" id="camv">0</span><span class="data">°</span></br> Cam-H: <span class="data" id="camh">0</span><span class="data">°</span></br> </div> <div class="col-sm-4" style="padding: 0px 0px 0px 10px"> <h4>Distances</h4> Front: <span class="data" id="distfront">unknown</span></br> Left: <span class="data" id="distleft">unknown</span></br> Right: <span class="data" id="distright">unknown</span></br> Rear: <span class="data" id="distrear">unknown</span> </div> <div class="col-sm-4"> <h4>Motor & Battery</h4> Left-Motor: <span class="data" id="lmotor">unknown</span></br> Rigth-Motor: <span class="data" id="rmotor">unknown</span></br> Battery: <span class="data" id="batt">unknown</span> </div> </div> </div> </body> </html>