Hardware components | ||||||
 |
| × | 1 | |||
 |
| × | 1 | |||
| × | 1 | ||||
| × | 1 | ||||
| × | 1 | ||||
Subject
Demo Video
Read moreRemote Spider Robot Control with PHPoC Blue.
Items- PHPoC Blue
- PHPoC Proto Board
- Spider Robot (toy)
- Motor Driver
- Battery holder
- Controller Imageset
<?php
if(_SERVER("REQUEST_METHOD"))
exit; // avoid php execution via http request
include_once "/lib/sd_340.php";
include_once "/lib/sn_tcp_ws.php";
uio_setup(0, 12, "out low"); // uio0.12 - A phase
st_pwm_setup(0, 13, 0, 1000, "us"); // uio0.13 - A enable/PWM
uio_setup(0, 14, "out high"); // uio0.14 - B phase
st_pwm_setup(1, 15, 0, 1000, "us"); // uio0.15 - B enable/PWM
ws_setup(0, "rc_spider", "csv.phpoc");
$rwbuf = "";
function spider_drive($width, $phase, $uio_foot, $st_foot)
{
uio_out(0, $uio_foot, $phase);
st_pwm_width($st_foot, $width, 1000);
}
while(1)
{
if(ws_state(0) == TCP_CONNECTED)
{
$rlen = ws_read_line(0, $rwbuf);
if($rlen)
{
$rValue = (int)$rwbuf;
echo "$rValue\r\n";
switch($rValue)
{
case 0: //
echo "Stay \r\n";
spider_drive(0, LOW, 12, 0); // Left Stop
spider_drive(0, HIGH, 14, 1); // Right Stop
break;
case 1: // Go
echo "Go \r\n";
spider_drive(800, HIGH, 14, 1); // Left Go
spider_drive(800, LOW, 12, 0); // Right Go
break;
case 2: // Turn Right
echo "Turn Right \r\n";
spider_drive(800, HIGH, 14, 1); // Left Go
spider_drive(800, HIGH, 12, 0); // Right Back
break;
case 3: // Turn Left
echo "Turn Left \r\n";
spider_drive(800, LOW, 14, 1); // Left Back
spider_drive(800, LOW, 12, 0); // Right Go
break;
case 4: // Back
echo "Back \r\n";
spider_drive(800, LOW, 14, 1); // Left Back
spider_drive(800, HIGH, 12, 0); // Right Back
break;
default:
echo "Unknown rValue[$rValue] \r\n";
spider_drive(0, LOW, 0, 0); // Left Stop
spider_drive(0, HIGH, 2, 1); // Right Stop
break;
}
}
}
else
{
spider_drive(0, LOW, 12, 0);
spider_drive(0, HIGH, 14, 1);
}
}
?>
<?php
$ws_host = _SERVER("HTTP_HOST");
?>
<!DOCTYPE html>
<html>
<head>
<title>PHPoC Spider</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style type="text/css">
#area {
margin-right: auto;
margin-left: auto;
height: 687px;
width: 501px;
background: url(joystick.png) no-repeat #fff;
position: relative;
margin-bottom: 10px;
border: 1px solid #000;
}
#arrow_top {
position: absolute;
background: url(arrow_top.png) no-repeat;
width:70px;
height:63px;
left: 215px;
top: 100px;
}
#arrow_bottom {
position: absolute;
background: url(arrow_bottom.png) no-repeat;
width:70px;
height:63px;
left:215px;
top:312px;
}
#arrow_right {
position: absolute;
background: url(arrow_right.png) no-repeat;
width:63px;
height:70px;
left:325px;
top:200px;
}
#arrow_left {
position: absolute;
background: url(arrow_left.png) no-repeat;
width:63px;
height:70px;
left:115px;
top:200px;
}
</style>
<script type="text/javascript">
function init() {
ws = new WebSocket("ws://<?echo $ws_host?>/rc_spider", "csv.phpoc");
document.getElementById("ws_state").innerHTML = "CONNECTING";
ws.onopen = function(){ document.getElementById("ws_state").innerHTML = "OPEN" };
ws.onclose = function(){ document.getElementById("ws_state").innerHTML = "CLOSED"};
ws.onerror = function(){ alert("websocket error " + this.url) };
ws.onmessage = ws_onmessage;
arrow_top.width = 70;
arrow_top.height = 63;
arrow_right.width = 63;
arrow_right.height = 70;
arrow_bottom.width = 70;
arrow_bottom.height = 63;
arrow_left.width = 63;
arrow_left.height = 70;
arrow_top.addEventListener("touchstart", mouse_down);
arrow_top.addEventListener("touchend", mouse_up);
arrow_top.addEventListener("touchcancel", mouse_up);
arrow_top.addEventListener("mousedown", mouse_down);
arrow_top.addEventListener("mouseup", mouse_up);
arrow_top.addEventListener("mouseout", mouse_up);
arrow_bottom.addEventListener("touchstart", mouse_down);
arrow_bottom.addEventListener("touchend", mouse_up);
arrow_bottom.addEventListener("touchcancel", mouse_up);
arrow_bottom.addEventListener("mousedown", mouse_down);
arrow_bottom.addEventListener("mouseup", mouse_up);
arrow_bottom.addEventListener("mouseout", mouse_up);
arrow_right.addEventListener("touchstart", mouse_down);
arrow_right.addEventListener("touchend", mouse_up);
arrow_right.addEventListener("touchcancel", mouse_up);
arrow_right.addEventListener("mousedown", mouse_down);
arrow_right.addEventListener("mouseup", mouse_up);
arrow_right.addEventListener("mouseout", mouse_up);
arrow_left.addEventListener("touchstart", mouse_down);
arrow_left.addEventListener("touchend", mouse_up);
arrow_left.addEventListener("touchcancel", mouse_up);
arrow_left.addEventListener("mousedown", mouse_down);
arrow_left.addEventListener("mouseup", mouse_up);
arrow_left.addEventListener("mouseout", mouse_up);
}
function ws_onmessage(e_msg)
{
e_msg = e_msg || window.event; // MessageEvent
alert("msg : " + e_msg.data);
}
function mouse_down() {
check_position(event.target.id);
event.preventDefault();
}
function mouse_up() {
check_position("stop");
event.preventDefault();
}
function check_position(position) {
var event_position = 0;
if ( position == "arrow_top") {
event_position = 1;
} else if ( position == "arrow_right") {
event_position = 2;
} else if ( position == "arrow_left") {
event_position = 3;
} else if ( position == "arrow_bottom") {
event_position = 4;
} else {
event_position = 0;
}
if(ws.readyState == 1)
ws.send(event_position + "\r\n");
}
window.onload = init;
</script>
</head>
<body>
<div id="area">
<div id="arrow_top"></div>
<div id="arrow_bottom"></div>
<div id="arrow_right"></div>
<div id="arrow_left"></div>
</div>
<p>
WebSocket : <span id="ws_state">null</span><br>
<span id="debug"></span>
</p>
</body>
</html>
Comments