Hue Lights Controller

This project implements a simple web-based controller for lights connected to a Philips Hue bridge. This includes Hue bulbs, but also bulbs from Ikea which are paired to the bridge using TouchLink.

The code uses v1 of the Hue API. As mentioned in the documentation, to connect to the API you must first perform a one-time registration with the bridge to setup a username that is used to secure subsequent API requests. This username should be assigned to the USERNAME constant in script.js, and the IP address (or hostname) of the bridge should be assigned to BRIDGE.

I host the code on my Synology, and access it over HTTP via http://synology.local. If you want to use HTTPS, you will need to change the scheme in the call helper function in script.js.

The lights connected to the bridge are automatically discovered when the web page is loaded.

The app allows you to turn on and off individual lights as well as all lights via a single button press. The colour of Hue lights can be dynamically adjusted as can the temperature of Ikea lights (Ikea bulbs don't support changing colour without assignment of a scene). You can also adjust the brightness of any light via a slider.

Unfortunately, I had difficulty using the Hue API to turn off Ikea lights. The only way I could overcome this was by augmenting the "off" command with the "transitiontime" property. Not sure why this works... but it does. However, a downside of this approach is that a few seconds after the light is switched off, the brightness value stored by the bulb drops to 0 (i.e. the existing brightness is not cached by the bulb). This means that when the light is turned back on, it does so at minimum brightness. You won't notice this if you turn lights on and off within the same browser session, as the brightness level is cached by the app, and explicitly reinstated when the light is switched on, but if you close the browser, and restart the app, and then turn a light on, it will default to minimum brightness. To overcome this, I explicitly set the brightness of each light to 152 (60%) when it is powered on in a new session.

The app interface is designed to be responsive so it works nicely when accessed via a desktop browser or via a mobile device.

Here is a screenshot of my hosted instance. I have clicked the colour picker for the "Entrance" light to show off the popup slider for adjusting the assigned colour. You will see that the current color of each light is displayed in the colour picker, but also as a glowing bulb to the left of the light name.