Tweet
- Convenient to create Graphic User Interface
- Useful to control continuous states of devices (e.g. turn on/off LED)
How to control sensors/devices via WebSocket
This kind of method requires two kind of code:
- Web App code: this code contains:
- HTML and CSS code to form webpage,
- JavaScript code, which is run on Web browser:
- Acts WebSocket Client,
- Handles action from user.
- Sends the controlling command/value to PHPoC devices via WebSocket,
- Code run in system loop :
- Acts as WebSocket server,
- Receives controlling command/value from WebSocket,
- Controls the actuators/devices according to the received command/value)
Let's learn through an example of controlling an built-in LED on PHPoC. Web App has one button. When button is pressed by user, LED is turned ON and background image is changed. When button is released, LED is turned ON and background image is changed.
Web App code
- HTML button
HTML Code:
<button id="button" style="height:95px; width:95px; background-color: transparent;border: none; padding: 0;"></button>
- Handling action from user
To handle "press" and "release" action from, we need to handle "mousedown" and "mouseup" event (for Web Browser on PC), and "touchstart" and ("touchend") (for Web Browser on smart phone)
Code:
var button = document.getElementById("button");
button.addEventListener("touchstart", press);
button.addEventListener("touchend", release);
button.addEventListener("touchcancel", release);
button.addEventListener("mousedown", press);
button.addEventListener("mouseup", release);
button.addEventListener("mouseout", release);
- Sending data and update view
When button is pressed: Send command to turn ON LED and Change the background image of button
When button is released: Send command to turn OFF LED and Change the background image of button
Code:
function press()
{
if(ws.readyState == 1)
ws.send("on\r\n");
button.style.backgroundImage = "url('/on.png')";
event.preventDefault();
}
Code:
function release()
{
if(ws.readyState == 1)
ws.send("off\r\n");
button.style.backgroundImage = "url('/off.png')";
}
Full source code of Web app
PHP Code:
<!DOCTYPE html>
<html>
<head>
<title>PHPoC Tutorial></title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<style> body { text-align: center; } </style>
<script>
var ws;
function init()
{
var button = document.getElementById("button");
button.addEventListener("touchstart", press);
button.addEventListener("touchend", release);
button.addEventListener("touchcancel", release);
button.addEventListener("mousedown", press);
button.addEventListener("mouseup", release);
button.addEventListener("mouseout", release);
button.style.backgroundImage = "url('/off.png')";
ws = new WebSocket("ws://<?echo _SERVER("HTTP_HOST")?>/ob_led", "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 press()
{
if(ws.readyState == 1)
ws.send("on\r\n");
button.style.backgroundImage = "url('/on.png')";
event.preventDefault();
}
function release()
{
if(ws.readyState == 1)
ws.send("off\r\n");
button.style.backgroundImage = "url('/off.png')";
}
window.onload = init;
</script>
</head>
<body>
<h2>
UIO / On-Board User LED
<br><br>
<button id="button" style="height:95px; width:95px; background-color: transparent;border: none; padding: 0;"></button>
<p>WebSocket : <span id="ws_state">CLOSED</span></p>
</h2>
</body>
</html>
Code run in system loop
- Receiving data from Web Browser
PHP Code:
$rlen = ws_read_line(0, $rwbuf);
- Controlling sensors/devices according to the receiving data
PHP Code:
if($rwbuf == "on\r\n")
uio_out(0, OUT_PIN, LOW); // Turn LED on
else
if($rwbuf == "on\r\n")
uio_out(0, OUT_PIN, HIGH); // Turn LED off
Full source code
PHP Code:
<?php
if(_SERVER("REQUEST_METHOD"))
exit; // avoid php execution via http request
include "/lib/sd_340.php";
include "/lib/sn_tcp_ws.php";
define("OUT_PIN", 30);
uio_setup(0, OUT_PIN, "out high");
ws_setup(0, "ob_led", "csv.phpoc");
$rwbuf = "";
while(1)
{
if(ws_state(0) == TCP_CONNECTED)
{
$rlen = ws_read_line(0, $rwbuf);
if($rwbuf == "on\r\n")
uio_out(0, OUT_PIN, LOW); // Turn LED on
else
if($rwbuf == "on\r\n")
uio_out(0, OUT_PIN, HIGH); // Turn LED off
}
}
?>
See Also
- PHPoC System Files
- How PHPoC System Works
- WebSocket
- How to Control Devices via Web Browser
- How to Control Devices via HTTP Request
- How to Monitor Sensors/Devices via Web Browser
- How to Monitor Sensors/Devices via HTTP Request
- How to Monitor Sensors/Devices via WebSocket
- How to Access Web Apps on PHPoC
Did you find anything wrong here?