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!

https://github.com/nicosanin/connected_devices/tree/master

var url = ‘128.122.151.172’; // 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);
background(153);
text (“Enter your name and I will give you your new favorite color”,200, 360);
console.log(text);
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);
colorButton.mouseClicked(changeBrightness);

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) {
resultDiv.html(result);
}

function changeBrightness() {
var huechange = 0;
var random = Math.floor(Math.random()*5);
var co = colores[random];
//console.log(co);
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
}

Simple server assignment #1

For this assignment, the idea was to create a simple server, similar to the class examples, with 3 different functions or restfull Apis. I looked at different example by Tom Igoe and some by Shawn Van Every. It made me a bit more familiarized with the code language used for this purpose, even if I still don’t understand some parts of the code of the more complex examples. So I chose the example of the “age checker” by Tom Igoe, to built my aplication around it (This, after a great deal of anxiety and confussion about how to get started).

So what I managed to do was simple but allowed me to understant the basics of what we saw on last class, and to realize I should learn about HTML and CSS, and also about web sockets.

The functions for the server I wrote are 3:

  1. Selecting a color in terms of text.
  2. Changing the color of the background.
  3. Loading an image to the background. (still does’t work 🙁 )
  1. The first asks you to put a color input by typing a)http://localhost:8080/check/color/red or b)http://localhost:8080/check/color/green, http://localhost:8080/check/color/blue, c)http://localhost:8080/check/color/(or something else). There is a bug I haven’t figured out when I enter blue. It doesn’t show a text message it’s supposed to show.
  2. The second is for you to change the browser’s background. You enter a)http://localhost:8080/check/imageBackground/:imageBackground/change b)http://localhost:8080/check/imageBackground/:imageBackground/(something-else-other-than-change
  3. The third function is for uploading an image. By entering the word image, an image will be loaded in the browser.

The first two work, but the third, It still doesn’t at this point.

The code at this point, without the image load function working properly for the mean time:

https://github.com/nicosanin/connected_devices/blob/master/colors.js