Your new favorite color!

The assignment for this week was to create an interface to control lights, using a wifi method. The systems we tried where all based on the idea of using a server to connect the lights using wifi and phone or web browser application to send them instructions.

I looked at the LIFX system at first. It has a huge amount of documentation, and looks very powerful, but also very hard to use. It uses, as I learned from Tom Igoe, an old protocol called SOAP. So I decided to start with the other systems, that seemed a little bit more friendly, specially for a beginner like myself in this field.

With my friend Tushar, we tried the Wemo system, but ran into problems when trying to set it up. Errors that we couldn’t really solve or understand. So after a couple of hours, we decided to give the chance to the next system: The Phillips Hue Lights.

We finally encountered a system that works fine, with great and clear documentation. So after some time trying it and solving the network setting requirements, we finally were able to control the lights, using the well designed Debug user interface provided by Phillips. It is very easy to understand and to use. After familiarizing and playing with it I went back to The code examples from Tom Igoe. I took the example of using one light and decided to add a function that would change colors. So after not too much thought (I got to the point of understanding this enough to start very late in the week) I decided to use the idea of getting a color by surprise. With the idea of not picking a favorite color, but getting one. Kind of the opposite thing we always do!

So i included an HTML input element to receive the names of people in our class. The program will assign a specific color (or hue) to some of us, and to the rest of inputs that don’t match this six specific names a fixed color for any possible enter name value.

The code!

var url = ‘’; // the hub IP address
var username = ‘RCeylvI5FQMsab4Fs8VFgqvg8r9NdDRTQdgBiOM-‘; // fill in your Hub-given username var resultDiv;
var dimmer;
var lightNumber = 1;
var colorChanger;
var colores = [10000, 20000, 30000, 40000, 50000];

function setup() {
createCanvas(1000, 1000);
text (“Enter your name and I will give you your new favorite color”,200, 360);
text (‘Dont forget the Capital letter on your name!’, 250, 385);
resultDiv = createDiv(‘Hub response’); // a div for the Hue hub’s responses
resultDiv.position(10, 50); // position it
dimmer = createSlider(0, 254, 127) // a slider to dim one light
dimmer.position(300, 250); // position it
dimmer.mouseReleased(changeBrightness); // set a mouseReleased callback function
text (‘Change brightness’, 300, 280, 500);
colorChanger = createInput(‘ ‘); //connect to colores
colorChanger.position(300, 300, 500);

colorButton = createButton(“Give me my color pleaaase!!! :)”);
colorButton.position(275, 325, 500);

connect(); // connect to Hue hub; it will show all light states
this function makes the HTTP GET call to get the light data:
HTTP GET http://your.hue.hub.address/api/username/lights/
/ function connect() { url = “http://” + url + ‘/api/’ + username + ‘/lights/’; httpDo(url, ‘GET’, getLights); } /
this function uses the response from the hub
to create a new div for the UI elements
function getLights(result) {

function changeBrightness() {
var huechange = 0;
var random = Math.floor(Math.random()*5);
var co = colores[random];
if(colorChanger.value() == “Arnab”){
huechange = 10000;
console.log(“it’s Arnab”);
if(colorChanger.value() == “Nico”){
huechange = 20000;
console.log(“it’s Nico”);
if (colorChanger.value() == “Tom”){
huechange = 30000;
console.log(“it’s Tom”);

if (colorChanger.value() == “Tushar”){
huechange = 40000;
console.log(“it’s Tushar”);
if (colorChanger.value() == “August”){
huechange = 50000;
console.log(“it’s August”);
if (colorChanger.value() == “Anna”) {
huechange = 60000;
console.log(“it’s Anna”)
else {
huechange = 35000;


//random between o and 65535 ——> int(random(65535))
var brightness = this.value(); // get the value of this slider
var lightState = { // make a JSON object with it
bri: brightness,
on: true,
hue: huechange
// make the HTTP call with the JSON object:
setLight(lightNumber, lightState);

this function makes an HTTP PUT call to change the properties of the lights:
HTTP PUT http://your.hue.hub.address/api/username/lights/lightNumber/state/
and the body has the light state:
on: true/false,
bri: brightness
function setLight(whichLight, data) {
var path = url + whichLight + ‘/state/’;

var content = JSON.stringify(data); // convert JSON obj to string
httpDo( path, ‘PUT’, content, ‘text’, getLights); //HTTP PUT the change

Leave a Reply

Your email address will not be published. Required fields are marked *