So Philips recently introduced their Hue Connected Bulbs: an easy-to-use set of LED light bulbs and Wi-Fi connected bridge which allows you to dynamically change the color of your home lighting using their iOS or Android app. What’s particularly cool is that the bridge has a web API which you can access to set the colors of each bulb with your own app.

We at untitled network developed our own Philips Hue app called Oni: light Control, which is currently available on the Windows Phone Store. In addition to allowing you to set the color of your home lighting with defined “Moods”, the app also allows you to do the same using your phone’s built in voice commands or inexpensive NFC stickers. Here’s a demo of the Oni: Light Control in action:

I’m going to show you how you can develop your own app using the color picker from the Coding4Fun Toolkit for Windows Phone and the Json.Net library from Newtonsoft. These libraries can be found on NuGet, but you’ll obviously need the Philips Hue Connected Bulbs kit to test things out.

Getting Started:

The Philips Hue API uses a restful JSON interface you can access using any http client. Documentation on all of the supported methods by the Philips Hue bridge can be found at http://blog.ef.net/2012/11/02/philips-hue-api.html.

To get started, you’ll need authorized access to your bridge’s API. Once the bridge has successfully established a network connection with your router, discover its internal IP address via the URL: http://www.meethue.com/api/nupnp

You should get a response similar to:

[{"id":"ffss00fffe123456","internalipaddress":"192.168.1.100","macaddress":"0aa:bb:cc:dd:00:11"}]

Note the internalipaddress value and use the IP to access the bridge’s API directly the with the URL http://192.168.1.100/api

Now, since we haven’t registered a user for authorization, attempting to access the hub will return an error from the bridge:

[{"error":{"type":1,"address":"/","description":"unauthorized user"}}]

To register a new user, we’ll first POST the username we wish to use.

var client = new WebClient(); //our uri to perform registration var uri = new Uri(string.Format("http://{0}/api", HostnameTextBox.Text)); //create our registration object, along with username and description var reg = new { username = UsernameTextBox.Text, devicetype = "Coding4Fun Hue Light Project" }; var jsonObj = JsonConvert.SerializeObject(reg); //decide what to do with the response we get back from the bridge client.UploadStringCompleted += (o, args) =] Dispatcher.BeginInvoke(() =] { try { ResponseTextBox.Text = args.Result; } catch (Exception ex) { ResponseTextBox.Text = ex.Message; } }); //Invoke a POST to the bridge client.UploadStringAsync(uri, jsonObj);

Note the response we get back from our hub will be

[{"error":{"type":101,"address":"","description":"link button not pressed"}}]

This is because bridge requires you to first push the link button before new registrations can be made. After pushing the button and invoking the registration function again, you should receive the following result from the bridge:

[{"success":{"username":"coding4fun"}}]

Setting the Bulb Color:

We should now be able to access all methods on the bridge. You can get all of the configuration details, including all of the bulbs and their statuses with the same base url: http://192.168.1.100/api/coding4fun

Now comes the fun part. There are three color modes in which you can use to set the color of your bulbs:

hue & sat: ‘hue’ is a color range between 0-65535 which represent 182.04*degrees, ‘sat’ is saturation with a range of 0-254

‘hue’ is a color range between 0-65535 which represent 182.04*degrees, ‘sat’ is saturation with a range of 0-254 xy: are coordinates in the CIE 1931 space

are coordinates in the CIE 1931 space ct: is a color temperature expressed in mireds from 154 to 500, coolest to warmest respectfully

Source: http://rsmck.co.uk/hue

We’ll be setting the colors of our bulbs using hue & saturation parameters. Luckily, the Coding4Fun Toolkit for Windows Phone has three awesome color picker controls and some useful color extensions which makes setting the bulb colors a breeze. We start by building our state object – a list of parameters we want our bulb to be set to. Then we use the PUT verb to set the light with the following URL: http://{BRIGE-IPADDRESS}/api/coding4fun/lights/1/state

The “1” in the url is the 1-based index of the bulb you want to set.

//Get the HSV Value from the currently selected color var hsv = LightColorSlider.Color.GetHSV(); //build our State object var state = new { on = true, hue = (int)(hsv.Hue * 182.04), //we convert the hue value into degrees by multiplying the value by 182.04 sat = (int)(hsv.Saturation * 254) }; //convert it to json: var jsonObj = JsonConvert.SerializeObject(state); //set the api url to set the state var uri = new Uri(string.Format("http://{0}/api/{1}/lights/{2}/state", HostnameTextBox.Text, UsernameTextBox.Text, LightIndexTextBox.Text)); var client = new WebClient(); //decide what to do with the response we get back from the bridge client.UploadStringCompleted += (o, args) => Dispatcher.BeginInvoke(() => { try { ResponseTextBox.Text = args.Result; } catch (Exception ex) { ResponseTextBox.Text = ex.Message; } }); //Invoke the PUT method to set the state of the bulb client.UploadStringAsync(uri, "PUT", jsonObj);

That’s it! Be sure to check out all of the other functions the (other functions the Hue API supports) at http://developers.meethue.com/index.html

Bio:

Jarem Archer is a self-taught Software Developer and UX Designer. He’s part of a small team at untitled network who have a passion for video games, digital motion, entertainment and gadgets. Follow him on Twitter at http://twitter.com/unt1tled.