khanhhs
Published © 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,547

Things used in this project

Hardware components

Arduino UNO
Arduino UNO
×1
USB Cable 2.0 Type A/B for Arduino Uno
DIYables USB Cable 2.0 Type A/B for Arduino Uno
×1
PHPoC WiFi Shield for Arduino
PHPoC WiFi Shield for Arduino
We can use PHPoC Shield instead
×1
MikroE ISL29125 RGB Color Sensor
We can use the same sensor from https://www.sparkfun.com/products/12829
×1
Jumper Wires
DIYables Jumper Wires
×1
Prototype Expansion Board for Arduino Uno
DIYables Prototype Expansion Board for Arduino Uno
Optional
×1
Starter Kit
DIYables Starter Kit
×1
Arduino Uno Case
DIYables Arduino Uno Case
×1
Breadboard Shield for Arduino
DIYables Breadboard Shield for Arduino
×1

Story

Read more

Schematics

Hookup

Code

Arduino Code

Arduino
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.php

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

Credits

khanhhs

khanhhs

0 projects • 56 followers

Comments

Related channels and tags
  • Arduino
  • DIYables
  • MikroE
  • PHPoC
  • Sensors