• Anna Oh

Week2) Make an interface for client's side

Updated: Feb 11, 2019


For this week, We learned how does Philips Hue works. During the class, we discuss about the structure of whole system for Philips Hue.


I started my homework with classmates, Mingna and Vincent. Mingna set up the Bridge as name 'Flower'. And we worked with Flower together.

First of all, I set up the Hue developer account, and create my own user name by using Flower (Hue Bridge) IP. ( The guide for setting : Create my own user name)






I successfully got my own user name.













Then I tested with my user name to control the Hue. And I could see It was working well.


It was complicated for me to design interface directly for a next step since I forgot to many of p5.js functions. I tried to catch up the process for how to connect p5.js and Hue API with Shiffman's video, but I thought i will better to learn how to connect p5.js drawing for client's side to server with Tom's example. Furthermore, I downloaded Tom's example and changed little bit more (from index.html) and played with the hue.





After that, I wanted to tested more. So I studied the code from one of my classmate, Tim's blog. He already built up cool interface. Given that I still have big challenges to build up all code part by my self, I tried to practice by using Tim's code. Basically, Tim create 'Set up' button to connect his p5 sketch to Hue API, but I deleted the set up button and changed the code to connect slider directly from p5 sketch to connect the Hue.


To connect the local host, I use " python -m SimpleHTTPServer" from my folder at Terminal.



This is the final interface.




Code here

© 2023 by Salt & Pepper. Proudly created with Wix.com