Control your Philips Hue light with your own Android app.

This tutorial assumes that you are familiar with MIT App Inventor, and that you have functioning Philips Hue lights and a bridge installed.

Part 1: Understanding APIs and communicating to your Philips Hue bridge.

APIs are the way that applications communicate with each other. For example, when you copy a snippet of text from a word document to notepad, an API is used to transfer the data (the text). An API can also be used to send data between devices on the web. Today you’re going to use an API to send commands from your Android device to your Philips Hue bridge to control your lights.

Before building your app you need to be able to connect to your Philips Hue lights via your Hue bridge, so first follow these instructions from Philips to get the address and APIs you need: www.developers.meethue.com/documentation/getting-started.

Part 2: Programming the app

Step 1. Create a new project in app inventor, and drag a horizontal arrangement from the layout section into the designer.

Step 2. Drag a button into the horizontal arrangement and change the text and name to ‘on’. Drag another button into the horizontal arrangement next to the on button and change the text and name to ‘off’

Step 3. Drag a web component into the designer and open its properties. Change the URL to http://<bridge ip address>/api/<your username>/lights/1/state.

Step 4. Go into the blocks editor and drag an when [on].click event onto the canvas.

Step 5. Drag a call [web1].PutText into the .click event, and add a text block into the ‘text’ part. In the text block type: {“on”:true} . Now your code should look like this:

Capture

Step 6. Now you should right click on the event block and duplicate the entire piece of code. Change the when [on].click to when [off].click and change the text to {“on”:false} .

Capture

Step 7. Now go back to the designer, get another horizontal arrangenment, change it’s width to ‘fill parent’ and it’s height to 7 percent. Change the alignHorizontal property to Center : 3. Drag 4 buttons into it. Name them ‘red’, ‘white’, ‘yellow’ and ‘blue’. Now go into their properties and change their background colour accordingly. Next, change their width to 20 percent and their height to 6 percent. Then remove the text. It should look like this:

Capture

Step 8. Now go back to ‘blocks’. Get a when [red].click event and put a call [web1].PutText inside, with a text block attached. Change the text to {“sat”:254, “hue”:5000}. This will change the light bulb’s colour to red. Duplicate it three times, and change the when [red].click event to when [white].click, when [yellow].click and when [blue].click, and the text to the following:

White: {“sat”:254, “hue”:35000}

Yellow: {“sat”:254, “hue”:18000}

Blue: {“sat”:254, “hue”:45000}

Your code should look like this:

Capture.PNG

Step 9. Click on ‘Build’ at the top of the page and then ‘provide QR code for .apk’. After it’s finished loading a QR code should appear. Use an app on your Android device to scan it, and go to the link. Your .apk should start downloading automatically. Next, you should navigate to your downloads folder with a file explorer. Click on your .apk file and use a package installer to install it.

Congratulations!!! You’ve just created an app that uses an API to control a Philips Hue light bulb!

Advertisements