Tweet
Demo
Things Used In This Project
- Arduino UNO & Genuino UNO
- USB Cable for Arduino
- PHPoC PHPoC WiFi Shield for Arduino or PHPoC Shield
- ISL29125 RGB Color Sensor
- Jumper wires
Wiring Diagram
- Stack PHPoC WiFi shield on Arduino
- Connect pin GND, 3.3V, pin SCL and SDA of color sensor to GND, 3.3V, A4 and A5 of Arduino, respectively.
Data Flow
Arduino ---> PHPoC WiFi Shield ---> Web browser
Arduino reads RGB color values from sensor and send the values to PHPoC WiFi Shield. When receiving the color values, PHPoC WiFi Shield send it to Web browser via websocket. Web browser changes background color to the received color.
Since background image is png image, some parts of image is transparent. Therefore, we will see the background color in transparent part of background image. In the demonstration, body of Minion is transparent. When background color is changed, we will see the color of Minion is changed.
Note that: PHPoC shield has a built-in program to pass data from Arduino to web browser. Therefore, we don't need to care about it.
What We Need to Do
- Set WiFi information for PHPoC shield (SSID and password)
- Upload new UI to PHPoC shield
- Write Arduino code
Setting WiFi Information for PHPoC Shield
See this instruction http://www.phpoc.com/support/manual/...rk_first_setup .
Upload new Web UI to PHPoC Shield
- Download PHPoC source code remote_color.php and background.png file .
- <remote_color.php>
PHP Code:<?php
$ws_host = _SERVER("HTTP_HOST");
?>
<!DOCTYPE html>
<html>
<head>
<title>PHPoC Shield - Color Sensor</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<style type="text/css">
body { text-align: center; }
#color {
margin-right: auto;
margin-left: auto;
width: 1000px;
height: 1240px;
background: url(background.png) no-repeat;
background-size: contain;
position: relative;
margin-bottom: 10px;
border: 1px solid #000;
}
</style>
<script type="text/javascript">
var IMAGE_WIDTH = 258, IMAGE_HEIGHT = 320;
var ws = null;
function init()
{
var width = window.innerWidth;
var height = window.innerHeight;
canvas_height = height - 100;
canvas_width = Math.round(canvas_height / IMAGE_HEIGHT * IMAGE_WIDTH);
var color = document.getElementById("color");
color.style.width = canvas_width + "px";
color.style.height = canvas_height + "px";
}
function ws_onmessage(e_msg)
{
var arr = JSON.parse(e_msg.data);
var R = Math.round(arr[0]);
var G = Math.round(arr[1]);
var B = Math.round(arr[2]);
var color = "rgb(" + R + ", " + G + ", " + B +")";
//document.body.style.backgroundColor = color;
document.getElementById("color").style.backgroundColor = color;
console.log(color);
}
function ws_onopen()
{
document.getElementById("ws_state").innerHTML = "OPEN";
document.getElementById("wc_conn").innerHTML = "Disconnect";
ws.send("B\r\n");
}
function ws_onclose()
{
document.getElementById("ws_state").innerHTML = "CLOSED";
document.getElementById("wc_conn").innerHTML = "Connect";
console.log("socket was closed");
ws.onopen = null;
ws.onclose = null;
ws.onmessage = null;
ws = null;
}
function wc_onclick()
{
if(ws == null)
{
ws = new WebSocket("ws://<?echo $ws_host?>/color", "text.phpoc");
document.getElementById("ws_state").innerHTML = "CONNECTING";
ws.onopen = ws_onopen;
ws.onclose = ws_onclose;
ws.onmessage = ws_onmessage;
}
else
ws.close();
}
window.onload = init;
</script>
</head>
<body>
<div id="color" class="arrow_up"></div>
<p>
WebSocket : <span id="ws_state">null</span><br>
</p>
<button id="wc_conn" type="button" onclick="wc_onclick();">Connect</button>
</body>
</html> - <background.png>
- Upload them to PHPoC shield using PHPoC debugger according to this instruction http://www.phpoc.com/support/manual/...d=major_upload .
Write Arduino Code
- Install tow following libraries (see instruction https://www.arduino.cc/en/Guide/Libraries).:
- PHPoC Library for Arduino https://github.com/phpoc/arduino
- SparkFun ISL29125 https://github.com/sparkfun/ISL29125_Breakout
- Upload Arduino code to Arduino
Code:#include <Wire.h> #include "SparkFunISL29125.h" #include "SPI.h" #include "Phpoc.h" // Declare sensor object SFE_ISL29125 RGB_sensor; PhpocServer server(80); char buf[20]; void setup() { Serial.begin(9600); while(!Serial) ; Phpoc.begin(PF_LOG_SPI | PF_LOG_NET); server.beginWebSocket("color"); Serial.print("WebSocket server address : "); Serial.println(Phpoc.localIP()); // Initialize the ISL29125 with simple configuration so it starts sampling if (RGB_sensor.init()) { Serial.println("Sensor Initialization Successful\n\r"); } } void loop() { // when the client sends the first byte, say hello: PhpocClient client = server.available(); if (client) { // Read sensor values (16 bit integers) unsigned int red = RGB_sensor.readRed(); unsigned int green = RGB_sensor.readGreen(); unsigned int blue = RGB_sensor.readBlue(); String txtMsg = "[" + String(red)+ ","+ String(green)+ ","+ String(blue) + "]"; txtMsg.toCharArray(buf, txtMsg.length() + 1 ); server.write(buf, txtMsg.length() ); delay(300); } }
Testing
- Click serial button on Arduino IDE to see the IP address.
- Open web browser, type http:// replace_ip_address/remote_color.php
- Click connect button and test it.
