week 11
light observation
This week I made a hue control project which mimic the effect of sunrise hue change. Also the main hua value for the top strip light is controlled by time API so it can only mimic that effect when it does happen outside. I am trying to introduce and sense the effect of outdoors light as an observation, signal and conversation. Still I found it’s quite different between getting the hue from physical sensor and generating a hue value from time API. There are other control modes for hue/bri/ct/sat varying from control from slider, gradient control, stable and triggered by a button. Still I have some problem with writing loops for fade in/out control. The different control modes are generated from the different characteristics of the lights. It’s also interesting to think about how to infuse randomness and intuitiveness into this control interface.
Here is my code:
var url = '128.122.151.15'; // the hub IP address
var username = 'cxlzxpiswiOGOn8fhe1VxUYuF85wkRd9CP718P5c'; // fill in your Hub-given username var resultDiv;
var dimmer10h;
var dimmer10b;
var button10;
var dimmer18h;
var button18;
var dimmer16c;
var dimmer16b;
var button16;
var dimmer22c;
var dimmer22b;
var button22;
var lightNumber;
var hour;
var minute;
var timeValue;
var hueValue;
var turnOn =false;
// var speed=1;
function setup() {
resultDiv = createDiv('Hub response'); // a div for the Hue hub's responses
resultDiv.position(10, 340); // position it
dimmer10h = createSlider(0, 65535, 0) // a slider to dim one light
dimmer10h.position(10, 10); // position it
dimmer10h.mouseReleased(changeHuetoDate); // set a mouseReleased callback function
dimmer10b = createSlider(0, 254, 127) // a slider to dim one light
dimmer10b.position(10, 40); // position it
dimmer10b.mouseReleased(changeBrightness); // set a mouseReleased callback function
button10 = createButton('10');
button10.position(50, 70);
button10.mouseClicked(onOff10);
dimmer18h = createSlider(0, 65535, 0) // a slider to dim one light
dimmer18h.position(10, 100); // position it
dimmer18h.mouseReleased(changeHuetoDate); // set a mouseReleased callback function
button18 = createButton('18');
button18.position(50, 130);
button18.mouseClicked(onOff18);
dimmer16c = createSlider(0, 254, 0) // a slider to dim one light
dimmer16c.position(10, 160); // position it
dimmer16c.mouseReleased(changeCt); // set a mouseReleased callback function
dimmer16b = createSlider(0, 254, 127) // a slider to dim one light
dimmer16b.position(10, 190); // position it
dimmer16b.mouseReleased(changeBrightness); // set a mouseReleased callback function
button16 = createButton('16');
button16.position(50, 220);
button16.mouseClicked(onOff16);
dimmer22c = createSlider(0, 254, 0) // a slider to dim one light
dimmer22c.position(10, 250); // position it
dimmer22c.mouseReleased(changeCt); // set a mouseReleased callback function
dimmer22b = createSlider(0, 254, 127) // a slider to dim one light
dimmer22b.position(10, 280); // position it
dimmer22b.mouseReleased(bouncingBrightness); // set a mouseReleased callback function
button22 = createButton('22');
button22.position(50, 310);
button22.mouseClicked(onOff22);
url = "http://" + url + '/api/' + username + '/lights/';
httpDo(url, 'GET', getLights);
// connect(); // connect to Hue hub; it will show all light state
}
/*
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);
// console.log(result);
}
function onOff10() {
lightNumber=10;
turnOn=!turnOn;
console.log(turnOn);
var lightState = { // make a JSON object with it
on: turnOn,
sat:235
}
// make the HTTP call with the JSON object:
setLight(lightNumber, lightState);
}
function onOff18() {
lightNumber=18;
turnOn=!turnOn;
console.log(turnOn);
var lightState = { // make a JSON object with it
on: turnOn,
sat:254,
bri:254
// ct:235
}
// make the HTTP call with the JSON object:
setLight(lightNumber, lightState);
}
function onOff16() {
lightNumber=16;
turnOn=!turnOn;
console.log(turnOn);
var lightState = { // make a JSON object with it
on: turnOn,
// ct:177
}
// make the HTTP call with the JSON object:
setLight(lightNumber, lightState);
}
function onOff22() {
lightNumber=22;
turnOn=!turnOn;
console.log(turnOn);
var lightState = { // make a JSON object with it
on: turnOn,
// ct:153
}
// make the HTTP call with the JSON object:
setLight(lightNumber, lightState);
}
function changeBrightness() {
console.log(this);
var brightness = this.value(); // get the value of this slider
var turnOn;
var lightState = { // make a JSON object with it
bri: brightness,
on: turnOn
}
// make the HTTP call with the JSON object:
setLight(lightNumber, lightState);
}
function changeCt() {
console.log(this);
var temp = this.value(); // get the value of this slider
var turnOn;
var lightState = { // make a JSON object with it
ct: temp,
on: turnOn
}
// make the HTTP call with the JSON object:
setLight(lightNumber, lightState);
}
function changeHuetoDate() {
const today = new Date();
hour=today.getHours();
minute=today.getMinutes();
console.log(hour+':'+minute);
timeValue=hour*60+minute;
console.log('timeValue(hour*60+minute)='+timeValue);
hueValue=mapHue(timeValue);
console.log('hueValue='+hueValue);
var hue=hueValue;
// var hue = this.value(); // get the value of this slider
var lightState = { // make a JSON object with it
hue: hue,
on: true
}
// make the HTTP call with the JSON object:
setLight(lightNumber, lightState);
}
function loopBrightness(initial,speed){
var initial;
var speed;
console.log(initial,speed);
var initial = addBrightness+initial;
var addBrightness=bounce(initial,155,254,speed);
// console.log(brightness22);
var turnOn;
var lightState = { // make a JSON object with it
bri: initial,
on: turnOn,
// transitiontime:10
}
console.log('loopBrightness');
console.log(addBrightness);
// make the HTTP call with the JSON object:
setLight(lightNumber, lightState);
}
function bounce(pos,low,high,speed){
if(pos<low||pos>high){
speed*=-1;
return speed;
}
else return speed;
}
function bouncingBrightness(){
var brightness22 = this.value();4
setInterval(loopBrightness(brightness22,1),1000);
}
/*
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
}
function mapHue(timeValue){
if(timeValue<360){
return(3600);
}
else if(timeValue>1200){
return(60000);
}
else {return parseInt(map(timeValue,360,1200,3600,60000));
}
}week 10
This week I learnt how to make hue value interactive with the time being now based on Tom’s hue control client example. I map the timeValue to HueValue and hope this could help to adapt the indoors light condition to natural light conditions. And also, I learnt how callback function to be like an event listener and take all of the result no matter what type varibles they are from DOM activities. Here is some instrutions I found helpful:
4. Iterations of callback functions Tom showed me above, and how to define functions in Javascript like using arrow function.
