Tweet
Remote-controlled lights via web
[Items]
1. PHPoC Blue
2. Relay Board (4-Port Digital Output Board)
3. 4 Lights
4. ipad
[How it works]
When you open the webpage, you can connect the PHPoC Blue though websocket automatically.
If you click circles on the webpage, you can turn on the light.
For example, if you click the yellow circle, the yellow light is turned on.
[Video clip]
[Source Code]
1. task0.php
Code:
<?php
if(_SERVER("REQUEST_METHOD"))
exit; // avoid php execution via http request
include "/lib/sd_340.php";
include "/lib/sd_spc.php";
include "/lib/sn_tcp_ws.php";
$sid = 1;
spc_reset();
spc_sync_baud(115200);
spc_scan();
spc_request($sid, 4, "set 0 output low");
ws_setup(0, "relay", "csv.phpoc");
$rwbuf = "";
while(1)
{
if(ws_state(0) == TCP_CONNECTED)
{
$rlen = ws_read_line(0, $rwbuf);
if($rlen) {
$rwcmd = rtrim($rwbuf, "\r\n");
switch ($rwcmd)
{
case "Y0" :
spc_request($sid, 4, "set 0 output low");
break;
case "Y1" :
spc_request($sid, 4, "set 0 output high");
break;
case "R0" :
spc_request($sid, 4, "set 1 output low");
break;
case "R1" :
spc_request($sid, 4, "set 1 output high");
break;
case "B0" :
spc_request($sid, 4, "set 2 output low");
break;
case "B1" :
spc_request($sid, 4, "set 2 output high");
break;
case "G0" :
spc_request($sid, 4, "set 3 output low");
break;
case "G1" :
spc_request($sid, 4, "set 3 output high");
break;
default :
echo "default\r\n";
break;
}
}
}
}
?>
Code:
<!DOCTYPE html>
<html>
<head>
<title>PHPoC / <?echo system("uname -i")?></title>
<meta name="viewport" content="width-device-width,initial-scale=1,user-scaleale=no" />
<style>
#wrapper {
margin: auto;
width: 400px;
border:1px solid #d3d3d3;
}
</style>
</head>
<body>
<div id="wrapper">
<canvas class="canvases" id="yellow_canvas" width="200px" height="200px">Your browser does not support the HTML5 canvas tag.</canvas>
<canvas class="canvases" id="red_canvas"width="200px" height="200px"></canvas>
<canvas class="canvases" id="blue_canvas" width="200px" height="200px"></canvas>
<canvas class="canvases" id="green_canvas" width="200px" height="200px"></canvas>
</div>
<center>
<p>
WebSocket : <span id="ws_state">CLOSED</span><br/>
</p>
</center>
<script>
var ws;
function init()
{
var button = document.getElementById("yellow_canvas");
button.addEventListener("touchstart", mouse_down);
button.addEventListener("touchend", mouse_up);
button.addEventListener("touchcancel", mouse_up);
button.addEventListener("mousedown", mouse_down);
button.addEventListener("mouseup", mouse_up);
button.addEventListener("mouseout", mouse_up);
var button = document.getElementById("red_canvas");
button.addEventListener("touchstart", mouse_down);
button.addEventListener("touchend", mouse_up);
button.addEventListener("touchcancel", mouse_up);
button.addEventListener("mousedown", mouse_down);
button.addEventListener("mouseup", mouse_up);
button.addEventListener("mouseout", mouse_up);
var button = document.getElementById("blue_canvas");
button.addEventListener("touchstart", mouse_down);
button.addEventListener("touchend", mouse_up);
button.addEventListener("touchcancel", mouse_up);
button.addEventListener("mousedown", mouse_down);
button.addEventListener("mouseup", mouse_up);
button.addEventListener("mouseout", mouse_up);
var button = document.getElementById("green_canvas");
button.addEventListener("touchstart", mouse_down);
button.addEventListener("touchend", mouse_up);
button.addEventListener("touchcancel", mouse_up);
button.addEventListener("mousedown", mouse_down);
button.addEventListener("mouseup", mouse_up);
button.addEventListener("mouseout", mouse_up);
ws = new WebSocket("ws://<?echo _SERVER("HTTP_HOST")?>/relay", "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;
}
function ws_onmessage(e_msg)
{
e_msg = e_msg || window.event; // MessageEvent
alert("msg : " + e_msg.data);
}
function draw_circle(object, color) {
var context = object.getContext('2d');
context.beginPath();
context.arc(100, 100, 90, 0, 2 * Math.PI);
context.fillStyle = color;
context.fill();
context.stroke();
}
function get_object_id(obj) {
return obj.getAttribute("id");
}
function mouse_down()
{
var obj_id = get_object_id(this);
var cmd = "";
if (obj_id == "yellow_canvas")
{
cmd = "Y1";
}
else if (obj_id == "red_canvas")
{
cmd = "R1";
}
else if (obj_id == "blue_canvas")
{
cmd = "B1";
}
else if (obj_id == "green_canvas")
{
cmd = "G1";
}
if(ws.readyState == 1)
ws.send(cmd+"\r\n");
draw_circle(this, "black");
event.preventDefault();
}
function mouse_up()
{
var obj_id = get_object_id(this);
var color = "";
var cmd = "";
if (obj_id == "yellow_canvas")
{
color = "yellow";
cmd = "Y0";
}
else if (obj_id == "red_canvas")
{
color = "red";
cmd = "R0";
}
else if (obj_id == "blue_canvas")
{
color = "blue";
cmd = "B0"
}
else if (obj_id == "green_canvas")
{
color = "green";
cmd = "G0";
}
draw_circle(this, color);
if(ws.readyState == 1)
ws.send(cmd+"\r\n");
}
draw_circle(document.getElementById("yellow_canvas"), "yellow");
draw_circle(document.getElementById("red_canvas"), "red");
draw_circle(document.getElementById("blue_canvas"), "blue");
draw_circle(document.getElementById("green_canvas"), "green");
window.onload = init;
</body>
</html>