You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
3.3 KiB
HTML
100 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AlphaBot</title>
|
|
<link href="bootstrap.min.css" rel="stylesheet" media="screen">
|
|
<!-- <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" media="screen">-->
|
|
<script src="jquery.js"></script>
|
|
<script>
|
|
|
|
$(function(){
|
|
var isTouchDevice = "ontouchstart" in document.documentElement ? true : false;
|
|
var BUTTON_DOWN = isTouchDevice ? "touchstart" : "mousedown";
|
|
var BUTTON_UP = isTouchDevice ? "touchend" : "mouseup";
|
|
|
|
$("button").bind(BUTTON_DOWN,function(){
|
|
$.post("/cmd",this.id,function(data,status){
|
|
});
|
|
});
|
|
|
|
$("button").bind(BUTTON_UP,function(){
|
|
$.post("/cmd","stop",function(data,status){
|
|
});
|
|
});
|
|
|
|
$('input').change(function() {
|
|
var speed = this.value;
|
|
$.post('/cmd', {speed: speed});;
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
<style type="text/css">
|
|
button {
|
|
margin: 10px 15px 10px 15px;
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
input {
|
|
margin: 10px 15px 10px 15px;
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="container" class="container" align="center">
|
|
<div style="width:60%; height:40px; line-height:40px; text-align:center; font-size:20px; color:white; background-color:blue; margin:auto">
|
|
AlphaBot Robot Web Control
|
|
</div><br><br>
|
|
|
|
<script>
|
|
var ip_addr = document.location.hostname;
|
|
document.write("<img width=\"320\" height=\"240\" src=\"http://" + ip_addr + ":8080/?action=stream\"></br>");
|
|
</script>
|
|
|
|
<!-- <img width="320" height="240" src="http://192.168.6.144:8080/?action=stream"><br/> -->
|
|
|
|
<table align="center">
|
|
<tr>
|
|
<td align="center"><b>Motor Contrl</b></td>
|
|
<td align="center"><b>Servo Contrl</b></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div align="center">
|
|
<button id="forward" class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-up"></button>
|
|
</div>
|
|
<div align="center">
|
|
<button id='turnleft' class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-left"></button>
|
|
<!--<button id='stop' class="btn btn-lg btn-primary glyphicon glyphicon-stop"></button>-->
|
|
<button id='turnright' class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-right"></button>
|
|
</div>
|
|
<div align="center">
|
|
<button id='backward' class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-down"></button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div align="center">
|
|
<button id="up" class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-up"></button>
|
|
</div>
|
|
<div align="center">
|
|
<button id='left' class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-left"></button>
|
|
<!--<button id='stop' class="btn btn-lg btn-primary glyphicon glyphicon-stop"></button>-->
|
|
<button id='right' class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-right"></button>
|
|
</div align="center">
|
|
<div align="center">
|
|
<button id='down' class="btn btn-lg btn-primary glyphicon glyphicon-circle-arrow-down"></button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<input type="range" min="20" max="100", style="width:300px";>
|
|
</div>
|
|
</body>
|
|
</html>
|