Tweet
Tutorial Video
Hardware
- PHPoC Blue (+ USB WLAN) or PHPoC Black (+ Ethernet cable)
- Micro USB to USB Cable (to upload source code to PHPoC Device)
About Built-in LED
There are some LEDs are built-in on PHPoC board. This helps user quickly get started without wiring anything. These LED were already connected to IO pin of PHPoC device.
How to control built-in LED:
- These LEDs are turned ON by setting IO pin of PHPoC device to LOW (0 V).
- These LEDs are turned OFF by setting IO pin of PHPoC device to HIGH (3.3 V).
Quick Steps
Source code of this example is a part of PHPoC Support Packet (PSP). You need to:
- Download PHPoC Support Package.
- Upload example\p4s\05.html5_graphics\01.uio_ob_led to PHPoC Blue/Black.
- Configure network parameters (e.g. WiFi SSID, password, IP address ...).
- Click "Run" button on PHPoC Debugger.
- Access webpage on PHPoC using Web Browser on your PC or smart phone (See How To).
Source Code
Source files includes:
- init.php: this file is run when PHPoC system is powered or reset. It is used to specify which file is run is system loop.
- task0.php: this file is run in system loop of PHPoC devices. It acts as WebSocket server and also interacts with built-in LED.
- index.php: this file contains source code of web page.It is only run in response to request from Web Browser. It contains webpage (user interface) and acts WebSocket client.
- button_pop.png: Image.
- button_push.png: Image.
index.php
[Full Code]
PHP Code:
<!DOCTYPE html>
<html>
<head>
<title>PHPoC / <?echo system("uname -i")?></title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<style> body { text-align: center; } </style>
<script>
var canvas_width = 95;
var canvas_height = 95;
var ws;
function init()
{
var button = document.getElementById("button");
button.width = canvas_width;
button.height = canvas_height;
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);
update_button(1);
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 update_button(state)
{
var button = document.getElementById("button");
if(state)
button.style.backgroundImage = "url('/button_pop.png')";
else
button.style.backgroundImage = "url('/button_push.png')";
}
function mouse_down()
{
if(ws.readyState == 1)
ws.send("0\r\n");
update_button(0);
event.preventDefault();
}
function mouse_up()
{
if(ws.readyState == 1)
ws.send("1\r\n");
update_button(1);
}
window.onload = init;
</script>
</head>
<body>
<h2>
UIO / On-Board User LED<br>
<br>
<canvas id="button"></canvas>
<p>
WebSocket : <span id="ws_state">CLOSED</span><br>
<!--
ADC : <span id="debug"></span><br>
-->
</p>
</h2>
</body>
</html>
[Explanation]
Source code of index.php file is composed of HTML, CSS, JavaScript and PHPoC code.
PHPoC code is interpreted on on PHPoC device.
PHPoC code may add/update the content of HTML, CSS or JavaScript code. Once PHPoC code is interpreted in PHPoC, the remaining code is client-side code and it is returned to Web Browser. Web Browser receives this code and interpret it to display the webpage.
- HTML: describes the structure of Web pages
- CSS: describes how HTML elements are to be displayed
- JavaScript: This code: - Handle click/touch event from user on Webpage,
- The controlling state of built-in LED is ON and OFF if button is pressed or released, respectively,
- Send ON/OFF state of built-in LED to PHPoC device via WebSocket
- Update Graphic UI: change background image with respect to the pressed/released state
init.php
This file is run when PHPoC system is powered or reset. It is used to specify that task0.php is run is system loop.
PHP Code:
<?php
system("php task0.php");
?>
task0.php
[Full 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($rlen)
uio_out(0, OUT_PIN, (int)$rwbuf);
}
}
?>
[Explanation]
Source code of this file does:
- Setup IO pin to output mode and initialize IO pin state to HIGH (LED is off).
- Setup and initialize WebSocket.
- Receive data (ON/OFF state )from Web Browser via WebSocket.
- Control built-in LED by changing state of IO pin according to the received data.
See Also
- LED - Blinking LED.
- LED - Controlling LED from Webpage using Hypertext.
- LED - Controlling LED from Webpage with Image.
Other Resources
- PHPoC System Files
- How PHPoC System Works
- How To Use PHPoC Support Package
- WebSocket
- How to Create Embedded Web Apps with WebSocket on PHPoC
- How to Control Devices via Web Browser
- How to Control Devices via HTTP Request
- How to Control Devices via WebSocket
- 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