Creating a basic Web Interface

This week’s assignment was to create a web interface for an existing web-connected consumer device. In class we specifically went over the hue bulb system and that is the device I created the web interface for. I began the assignment by going over the documentation provided to us regarding the hue system, assigned IP, and clip api. After getting my login credentials from the clip API I began doing basic calls of the hue bulb. i.e turning it on and off and changing the colors manually.

Screen Shot 2019-02-11 at 7.01.31 PM.png

After playing around with this system for a bit I began to focus my attention on creating my own interface. I referenced the hue control repo from Tom Igoe, and node hue api repo from Peter Murray. I had difficulty understanding portions of getting the api to work so it took a good amount of time to really wrap my head around what was happening. Timothy Lobiak was also extremely helpful in giving me guidance and sharing code snippets on how to create the colorMode sliders and storing values.

I ended up deciding to use p5.js due to my familiarity with the DOM elements. Even with this I was a bit rusty so with the language. My goal for functionality was to be able to turn the light on and off with a button, then have three sliders that controlled the hue, saturation, and brightness and have the bulb change state in real time depending on the position of each slider.

this is the basic interface functioning.