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)
- Light Sensor
- Jumper wires
About Light Sensor
Light sensor is used to detect the current ambient light level - i.e. how bright/dark it is. The light sensor used in this example includes three pins:
- VCC pin.
- GND pin.
- Signal pin (outputs analog signal).
- The sensor outputs analog signal to signal pin. There bigger the ambient light level is, the higher the signal value is.
- By reading value of sensor's signal pin, we can infer ambient light level. To read value of sensor's signal pin, we just need to connect the sensor's signal pin to PHPoC device's ADC (Analog to Digital Converter) pin and use PHPoC code to read the value.
- Grove light sensor (for more convenience, use it in combination with PHPoC Grove Expansion Board).
- LDR Photoresistor Light Sensor.
Wiring Diagram
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\02.adc_light_sensor 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 light sensor.
- 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.
- gage_02.png: Image.
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("ADC_MAX", 2520);
adc_setup(0, 0); // adc0, channel 0
ws_setup(0, "rotary_angle", "csv.phpoc");
$last_adc_in = 0;
while(1)
{
if(ws_state(0) == TCP_CONNECTED)
{
$adc_in = adc_in(0, 30);
if($adc_in > ADC_MAX)
$adc_in = ADC_MAX;
if(abs($adc_in - $last_adc_in) > 5)
{
$adc_1000 = $adc_in * 1000 / ADC_MAX;
ws_write(0, (string)$adc_1000 . "\r\n");
$last_adc_in = $adc_in;
}
}
}
?>
[Explanation]
Source code of this file does:
- Setup ADC pin.
- Setup and initialize WebSocket.
- Read value from ADC pin.
- Calculate ‰ based on the read value.
- Send illuminance level to Web Browser via WebSocket.
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 = 400, canvas_height = 400;
var pivot_x = 200, pivot_y = 230;
var pivot_radius = 20, hand_radius = 180;
var ws;
function init()
{
var gage = document.getElementById("gage_02");
var ctx = gage.getContext("2d");
gage.width = canvas_width;
gage.height = canvas_height;
gage.style.backgroundImage = "url('/gage_02.png')";
ctx.translate(pivot_x, pivot_y);
gage_02_rotate_hand(0);
ws = new WebSocket("ws://<?echo _SERVER("HTTP_HOST")?>/rotary_angle", "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
var angle = Number(e_msg.data) / 1000.0 * 90.0;
gage_02_rotate_hand(angle);
}
function gage_02_rotate_hand(angle)
{
var gage = document.getElementById("gage_02");
var ctx = gage.getContext("2d");
var text;
if((angle < 0) || (angle > 90))
return;
ctx.clearRect(-pivot_x, -pivot_y, canvas_width, canvas_height);
ctx.rotate((angle + 45) / 180 * Math.PI);
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.moveTo(-pivot_radius, 0);
ctx.lineTo(-hand_radius, 0);
ctx.stroke();
ctx.rotate(-(angle + 45) / 180 * Math.PI);
angle = Math.floor(angle / 90 * 100);
if(angle < 10)
text = "00" + angle.toString();
else
if(angle < 100)
text = "0" + angle.toString();
else
text = angle.toString();
ctx.font = "24px Arial";
ctx.fillText(text, -20, 50);
}
window.onload = init;
</script>
</head>
<body>
<h2>
ADC / Catalex Light Sensor<br>
<br>
<canvas id="gage_02"></canvas>
<p>
WebSocket : <span id="ws_state">CLOSED</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: - Receive data (‰ of light sensor) from PHPoC devices via WebSocket,
- Visualize ‰ on canvas of webpage (draw needle on web-based gauge)
See Also
- Light Sensor - How to Use Light Sensor.
- Light Sensor - Monitoring Light Sensor from Webpage using Hypertext.
- Light Sensor - Monitoring Light Sensor from Webpage with Image.
- Light Sensor - Monitoring Light Sensor via WebSocket.
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