Published June 21, 2017 © GPL3+

Arduino - Have Fun with Color Sensor

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

BeginnerFull instructions provided12,589

Things used in this project

Hardware components

Arduino UNO

DIYables USB Cable 2.0 Type A/B for Arduino Uno

PHPoC WiFi Shield for Arduino

We can use PHPoC Shield instead

MIKROE ISL29125 RGB Color Sensor

We can use the same sensor from https://www.sparkfun.com/products/12829

DIYables Jumper Wires

DIYables Prototype Expansion Board for Arduino Uno

Optional

DIYables Starter Kit

DIYables Arduino Uno Case

DIYables Breadboard Shield for Arduino

Story

If you are a beginner, you can learn about Arduino - Wifi here.

Demo

Wiring

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. (see schematics section)

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 (on code section) and background.png file.

background.png

Upload them to PHPoC shield using PHPoC debugger according to this instruction.

Write Arduino Code

Install three following libraries: PHPoC Library for Arduino, SparkFun ISL29125 (see instruction).
Upload Arduino code (on code section) to Arduino.

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.

The Best Arduino Starter Kit for Beginner

See The Best Arduino Kit for Beginners

Function References

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);
    }
}

<?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>

Arduino - Have Fun with Color Sensor

Things used in this project

Hardware components

Story

Demo

Wiring

Data Flow

What We Need to Do

Testing

The Best Arduino Starter Kit for Beginner

Function References

Schematics

Hookup

Code

Arduino Code

remote_color.php

Credits

khanhhs

Comments

Embed the widget on your own site

Arduino - Have Fun with Color Sensor

Arduino - Have Fun with Color Sensor

Things used in this project

Hardware components

Story

Demo

Wiring

Data Flow

What We Need to Do

Testing

The Best Arduino Starter Kit for Beginner

Function References

Schematics

Hookup

Code

Arduino Code

remote_color.php

Credits

khanhhs

Comments

Related channels and tags