Connected Devices Homework 2

I’ve been working a lot with MIDI lately, doing many little experiments with WebMIDI.js. Our homework for this week was to make a web interface to interact with an existing IoT lighting device, so I decided to leverage my experience and make a mashup.

Here is the MIDI Phillips Hue control:

And another after the break:

I’m making use of the p5js function httpDo() in order to hit the Phillips Hue. There were some issues using colors effectively, and when I went back to check out another bulb from the equipment room I was given a white bulb with no color mixing.

But this worked more or less how I would hope. Of course there were issues getting everything paired and so on, but that is to be expected. Glad I could practice a couple times to get the hang of it.

Here is the p5js code:

//MIDI controlled Phillips Hue lights
//the hue of the light is a number from 0 to 65535

var url = “http://phillips-hue-ip-address/api/your-user-name/lights/1/state/”;

var jsonMessageToHue;

var clicked = false;

var textString = “…waiting for MIDI input”;

function setup() {
createCanvas(400, 400);

jsonMessageToHue = {“on”:true, “sat”:254, “bri”:254,”hue”:5000,”transitiontime”:1};

WebMidi.enable(function (err) {

if (err) {
console.log(“WebMidi could not be enabled.”, err);
} else {
console.log(“WebMidi enabled!”);
}

console.log(“—“);
console.log(“Inputs Ports: “);
for(i = 0; i< WebMidi.inputs.length; i++){
console.log(i + “: ” + WebMidi.inputs[i].name);
}
console.log(“—“);
console.log(“Output Ports: “);
for(i = 0; i< WebMidi.outputs.length; i++){
console.log(i + “: ” + WebMidi.outputs[i].name);
}

//

inputSoftware = WebMidi.inputs[0];

inputSoftware.addListener(‘noteon’, “all”,
function (e) {
console.log(“Received ‘noteon’ message (” + e.note.name + e.note.octave + “).”);

if(clicked){
//jsonMessageToHue.on=false;
//httpDo(url,”PUT”,jsonMessageToHue);
clicked=false;}
else{
//jsonMessageToHue.on=true;
//httpDo(url,”PUT”,jsonMessageToHue);
clicked=true;}

console.log(“Light turned on? ” + jsonMessageToHue.on);

if(e.note.name==”C”){
textString = “Detected a D note”;
console.log(“Detected a D note”);
jsonMessageToHue.bri = 254;
//httpDo(url,”PUT”,jsonMessageToHue);

}
if(e.note.name==”D”){
textString = “Detected a E note”;
console.log(“Detected a E note”);
jsonMessageToHue.bri = 200;
//httpDo(url,”PUT”,jsonMessageToHue);
}
if(e.note.name==”E”){
textString = “Detected a F note”;
console.log(“Detected a F note”);
jsonMessageToHue.bri = 150;
//httpDo(url,”PUT”,jsonMessageToHue);
}
if(e.note.name==”F”){
textString = “Detected a C note”;
console.log(“Detected a C note”);
jsonMessageToHue.bri = 100;
//httpDo(url,”PUT”,jsonMessageToHue);
}

httpDo(url,”PUT”,jsonMessageToHue);
}
);

});
//
}

function draw() {
background(0);
//httpDo(url,”PUT”,jsonMessageToHue);

fill(255);
textSize(32);
text(textString, 10, 30);

}

function mouseClicked(){

if(clicked){
jsonMessageToHue.on=false;
httpDo(url,”PUT”,jsonMessageToHue);
clicked=false;}
else{
jsonMessageToHue.on=true;
httpDo(url,”PUT”,jsonMessageToHue);
clicked=true;}

console.log(“Light turned on? ” + jsonMessageToHue.on);
}