This project shows how to change color of Minion using Arduino, PHPoC Wifi Shield and Color sensor


Things Used In This Project

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.

Click image for larger version  Name:	arduino_color_sensor_wiring.jpg Views:	1 Size:	59.1 KB ID:	727

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 .

Upload new Web UI to PHPoC Shield
  • Download PHPoC source code remote_color.php and background.png file .
  • <remote_color.php>

    PHP Code:
        <!DOCTYPE html>
        <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;
        <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"); = canvas_width + "px"; = canvas_height + "px";
        function ws_onmessage(e_msg)
        var arr = JSON.parse(;
        var R = Math.round(arr[0]);
        var G = Math.round(arr[1]);
        var B = Math.round(arr[2]);
        var color = "rgb(" + R + ", " + G + ", " + B +")";
        // = color;
        document.getElementById("color").style.backgroundColor = color;
        function ws_onopen()
        document.getElementById("ws_state").innerHTML = "OPEN";
        document.getElementById("wc_conn").innerHTML = "Disconnect";
        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;
        window.onload = init;
        <div id="color" class="arrow_up"></div>
        WebSocket : <span id="ws_state">null</span><br>
        <button id="wc_conn" type="button" onclick="wc_onclick();">Connect</button>
  • <background.png>

    Click image for larger version  Name:	background.png Views:	1 Size:	20.2 KB ID:	726
  • Upload them to PHPoC shield using PHPoC debugger according to this instruction .

Write Arduino Code
  • Install tow following libraries (see instruction
  • Upload Arduino code to Arduino
    #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() {
    	Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
    	Serial.print("WebSocket server address : ");
    	// 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() );

  • 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.