Project tutorial

Arduino - Have Fun with Color Sensor © GPL3+

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

  • 7,989 views
  • 2 comments
  • 42 respects

Components and supplies

A000066 iso both
Arduino UNO & Genuino UNO
×1
P4s 347 nz5bbetukx
PHPoC WiFi Shield for Arduino
We can use PHPoC Shield instead
×1
MikroElektronika ISL29125 RGB Color Sensor
We can use the same sensor from https://www.sparkfun.com/products/12829
×1

About this project

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.

Write Arduino Code

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

Code

Arduino CodeArduino
This code reads RGB color value and sends it to web page through PHPoC Wifi Shield (via websocket)
#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);
    }
}
remote_color.phpPHP
This file provide web user interface. Upload this file along with background.png to PHPoC Wifi Shield or PHPoC Shield according to the described instruction.
<?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>

Schematics

Hookup
20170621 165700 sae8k3grvf

Comments

Similar projects you might like

Color Sensor Prototype: Detect Color Name from Objects

Project tutorial by moretticb

  • 3,023 views
  • 4 comments
  • 23 respects

Arduino Mp3 player + Distance sensor = FUN

Project tutorial by javier muñoz sáez

  • 21,581 views
  • 23 comments
  • 46 respects

Basic Water Sensor

Project showcase by Ömer Beden

  • 13,261 views
  • 1 comment
  • 6 respects

3DCG Control Using TouchDesigner & 10 DOF Mems IMU Sensor

Project tutorial by HomeMadeGarbage

  • 3,971 views
  • 0 comments
  • 13 respects

DHT11 Temperature/Humidity Sensor

Project tutorial by Zachary Haslam

  • 13,177 views
  • 1 comment
  • 30 respects

Arduino - Web-Based Joystick

Project tutorial by IoT_lover

  • 12,087 views
  • 13 comments
  • 73 respects
Add projectSign up / Login