COMP4461 Lab2

This repo is the Lab 2 material for UG course COMP4461 Human-Computer Interaction.

View the Project on GitHub

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

Bootstrap HTML jshue License PRs Welcome

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.

Table of Contents

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:

How dose Philips Hue work?

There are four components within Hue system:

Configuration

How to set up Philips Hue?

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

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

Contribute

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

Meta

Zhida Sun. Distributed under the MIT license. See LICENSE for more information.