Smart Device Programming

Lab materials for how to create smart home applications with Philips Hue.
Venue: Room 4221, Teaching Lab 1, Academic Building.
Date: Oct. 11, 2017

In this lab, we will introduce how to program with Philips Hue by JavaScript. In this repository, there is a framework created for you to get started.

Overview
Configuration
Implementation
Tips
Contribute
Meta

Overview

What is Philips Hue?

Philips Hue is a line of color changing LED lamps and white bulbs created by Philips. It can provide an immersive experience with various user-defined lighting. There are different kinds of products in this line, and we are going to use ‘Philips Hue White and Color Wireless Ambiance Starter Kit A19 E27’ in this lab. The set of Philips Hue that we used in our project consists of four parts:

Three Hue light bulbs
One Hue bridge
Power adapter for Hue bridge
LAN cable to connect the Hue bridge to your router

How dose Philips Hue work?

There are four components within Hue system:

Applications: The control part of the system. It provides the interface for the users to make the lights do smart things.
Portal: The connection part of the system. It delivers control commands from outside and keeps your software in the bridge up-to-date. The portal presents a utility API to help you discover the address of your bridge.
Bridge: The communication part of the system. It enables the bulbs to communicate with each other as well as the portal through the Internet.
Lights: The output of the system. They are connected to the bridge via an open standards protocol called ZigBee Light Link. These smart bulbs contain three types of LED specially chosen to produce a range of colors and intensities.

Configuration

How to set up Philips Hue?

First, we need to prepare all the components as mentioned above. Make sure that:

The application connects the local network created by the Wi-Fi router.
The Wi-Fi router connects the Internet.
The bridge connects the Wi-Fi router, and all the blue lights are on without blinking.

Note that your application and the bridge should be on the same local network.

How to get the bridge details?

You can acquire the detail information about the bridge through this, like the Internal IP Address, Gateway, etc. You need this information to debug with the lights when you develop your applications.

Implementation

Mobile demo

Philips Hue (by Philips Lighting BV) is a mobile application that lets you easily control your lights from any device and create the right ambiance for every moment.

Web demo

Harmony for Philips Hue is an open-sourced web application that sets Philips Hue lights colors based on the color relationships.

Live demo

We will follow the tutorials here to show how to get familiar with the programming environments with Hue.

First, we need to obtain the Internal IP Address and bridge assigned Username. After getting connected with Hue bulb(s) via your devices, we can acquire all the bulbs’ state through the link:

http://<Internal IP Address>/api/<Username>/lights

The structure of the data is like (here we use only one bulb):

{
	"1": {
		"state": {
			"on": true,
			"bri": 254,
			"hue": 14910,
			"sat": 144,
			"effect": "none",
			"xy": [0.4596, 0.4105],
			"ct": 370,
			"alert": "none",
			"colormode": "ct",
			"reachable": true
		},
		"swupdate": {
			"state": "transferring",
			"lastinstall": null
		},
		"type": "Extended color light",
		"name": "Hue color lamp 1",
		"modelid": "LCT007",
		"manufacturername": "Philips",
		"uniqueid": "(omit)",
		"swversion": "5.38.1.14919"
	}
}

Then we can try to modify the bulb’s state via:

http://<Internal IP Address>/api/<Username>/lights/1/state

with PUT method.

Note that the range for bri and sat are from 0 to 254, and the range for hue is from 0 to 65535. The bulbs we used are in the LCT007 model, and the CIE color space is in Gamut B.

About the framework

This framework is built upon HTML5 Boilerplate V6.0.1, Bootstrap v4, and jsHue v2.1.1. After extract the content into your server (e.g., Apache), you can get the bridge IP Address from the console.

Change the IP Address which is hardcoded in

var bridge = hue.bridge("<your IP address>");

The console information will also tell you the current state. If you get an error message, then you need to press the button on the bridge. Otherwise, you will receive a string generated by bridge as your Username. Copy the Username to your local JavaScript code and save it in the user variable.

var user = bridge.user("<your username>");

You will take the variable as a key to communicate with Hue. You can also change the name of the user in

bridge.createUser("test").then(…);

Here, the username is test. After you get the bridge generated username, you need to copy the string and save it in user variable and comment the following part of code

bridge.createUser("test").then(…);

Otherwise, the bridge will keep on generate strings, and you will not be able to proceed to the next step. After compiling the code successfully, you can follow the instruction of jsHue to pass your commands to the bridge through your devices.

Tips

Involve in the development community to get inspired, e.g., Hue Pro Development Community.
Philips Hue API.
Philips Hue Python RGB / CIE1931 “xy” Converter.
You can learn from the other developers’ works from here.

Contribute

We would love you for the contribution to Lab2, check the LICENSE file for more information.

COMP4461 Lab2