<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content = "height = device-height, width = 420, user-scalable = no" />
<title>RaspiRobot CamBot</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
function init() {
var button;
button = webiopi().createButton("bt_up", "/\\", go_forward, stop);
$("#up").append(button);
button = webiopi().createButton("bt_left", "<", turn_left, stop);
$("#middle").append(button);
button = webiopi().createButton("bt_stop", "X", stop);
$("#middle").append(button);
button = webiopi().createButton("bt_right", ">", turn_right, stop);
$("#middle").append(button);
button = webiopi().createButton("bt_down", "\\/", go_backward, stop);
$("#down").append(button);
button = webiopi().createButton("bt_camera", "cam", camera,stop);
$("#cam").append(button);
button = webiopi().createButton("bt_photo", "photo", photo,stop);
$("#cam").append(button);
button = webiopi().createAngleSlider(23, 30);
$("#updown").append(button);
button = webiopi().createAngleSlider(24, 0);
$("#leftright").append(button);
$(document).keydown(function(e)
{
switch(e.which)
{
case 37:turn_left(); break;
case 38:go_forward(); break;
case 39:turn_right(); break;
case 40:go_backward(); break;
case 32:stop(); break;
case 75:camera(); break;
case 80:photo(); break
}
});
}
function camera() {
$("#vid").html('');
webiopi().callMacro("camera");
$("#vid").html('<img width="320" height="240" src="http://raspi:8080/?action=stream">');
}
function photo() {
$("#ph").html('');
webiopi().callMacro("photo");
$("#ph").html('<img src="/home/pi/robot/photo/ph.jpg">');
}
function go_forward() {
webiopi().callMacro("go_forward");
}
function go_backward() {
webiopi().callMacro("go_backward");
}
function turn_right() {
webiopi().callMacro("turn_right");
}
function turn_left() {
webiopi().callMacro("turn_left");
}
function stop() {
webiopi().callMacro("stop");
}
webiopi().ready(init);
</script>
<style type="text/css">
button {
margin: 5px 5px 5px 5px;
width: 50px;
height: 50px;
font-size: 24pt;
font-weight: bold;
color: black;
}
#bt_camera, #bt_photo { width: 150px;}
</style>
</head>
<body>
<div style="float:left">
<div id="content" align="center">
<div id="cam"></div>
<div id="vid"><img width="320" height="240" src="http://raspi:8080/?action=stream"></div>
<div id="up"></div>
<div id="middle"></div>
<div id="down"></div>
<div>down<span id="updown"></span>up</div>
<div>left<span id="leftright"></span>right</div>
</div>
</div>
<div style="float:right" id="ph"></div>
</body>
</html>