I recently got an iPhone 6. I’ve been a die hard Android fan for 5+ years and decided to try out iOS finally. One thing that bothered me is that Android is pretty open and widgets for stuff like Philips Hue are readily available. After jailbreaking my iPhone and doing some research, I found out I could add a toggle to iOS’s control center fairly easily.

Toggle added to the bottom right of control centerBefore we start off, you’ll need to know the IP of your Hue bridge. This can be found by going into the official Hue app’s settings, My Bridge, and then Network Settings. After that, you’ll need to get some apps. As of this writing everything works on iOS 8.4 (with one exception). On Cydia, go ahead and download the following:

  • OpenSSH
  • Activate Command
  • QuickActivator
  • cURL

You will also need to download Activator. Do a search for it and see if you can download it. As of this writing, iOS 8.4 was only recently jailbroken so Activator is not compatible. To get the beta build for 8.4, add http://rpetri.ch/repo to your repos.

After everything is installed we need to write a quick little script that will actually do our toggling. Before we can write the script, however, we will need to generate a user on the Hue bridge. Luckily the Hue bridge runs its own little web server with a little REST API debug tool which can be found at http://<IP-of-bridge>/debug/clip.html

Generating your user is pretty simple. In the URL field enter /api. In the Message Body field, enter

{"devicetype":"iphone-toggle#iphone pat"}

You can replace “pat” with whatever you so choose.

Next, hit the “POST” button. You should see something like the following returned in the Command Response section:

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

Easy enough. Hit the link button on your bridge and hit the “POST” button again. You should get a success message returned with your username attached. Copy that (without the quotes), save it, email it to yourself, write it on a carrier pigeon to return two months from now, whatever. You’ll need it later.

Next we’ll need to make groups. Groups are kind of a hidden feature in the Hue platform. It’s fully usable through the API, but the official app doesn’t have anything to let you crete groups. Groups are simply groups of lights that you can control. You can download another app to create your groups, or you can just follow along and create them from the debug tool.

To group the lights you want, you’ll first need to know the ID’s of each one. In the URL field of the debug tool enter the following and press the “GET” button:

http://<IP-of-bridge>/api/<username>/lights

In the response you’ll see a hierarchy of lights listed. The first level is the data set “lights”, with each light having its own dataset underneath it. The ID will be in quotes and will look something like

    "2": {
        "state": {
            ...
        },
        ...
        "name": "Bed"
        ...
    }

It gives you some cool information about the lights such as the type, model ID, manufacturer, and unique ID. Those are worthless to us now so don’t worry too much about it. After you get your list of lights, you’ll want to enter the following in the message body:

    {
        "lights": [
            "1",
            "2",
            "3",
            "4"
        ],
        "name": "bedroom"
    }

Change the light ID’s to whatever your group to contain and change the name to whatever you want. Each ID must be in quotes and followed by a comma (except for the last one). Now press the “POST” button. You should get a success response with your group’s ID (e.g. "ID":"/groups/1").

Now that your group is created we can write the script. In a text editor (I’m a Sublime Text 3 fan), save the following as toggle-lights.sh somewhere on your computer:

    #!/bin/bash
    # Change these three
    ip="192.168.1.11"
    username="1914aae43fdbb04f3b87670c2f7219d8"
    group="1"

    api="http://$ip/api/$username/groups/$group"

    state=$(curl -s "$api")

    # If the group is on
    if [[ $state == *"\"on\":true"* ]]
    then
        curl -s -X PUT -H "Content-Type: application/json" -d '{ "on": false }' "$api/action"
    else
        curl -s -X PUT -H "Content-Type: application/json" -d '{ "on": true }' "$api/action"
    fi

Change “ip”, “username”, and “group” to match your environment.

Now you’re going to have to copy this script onto your device. I used Transmit on my Mac to copy it via SFTP using my SSH credentials. Either way, upload it to /usr/bin and name it toggle-lights. Note there is no extension on it. Afterwards, SSH into your device and run the command

chmod +x /usr/bin/toggle-lights

This sets the script as being executable. Next we need to configure Activate Command in the settings app. For Command 1, enter /usr/bin/toggle-lights > /dev/null. Next go to QuickActivator in the settings app. Go to Quick Launch, then shortcuts, and then Add New Shortcut. Here you can change the glyph to whatever you want. After we confirm that our script runs, I will show you how to customize the glyph to be an actual Hue-shaped light bulb. Under Action, choose our toggle lights command.

That should be all we need to do! Note that if you have more than 4 shortcuts, your shortcut might not be visible until you swipe to the next page of shortcuts. You can remedy this by increasing the number of visible shortcuts in QuickActivator, or by removing one of the default shortcuts.

If you’re like me and feel like aesthetics is everything, you’ll notice that in my screenshot my lightbulb shortcut looks like a Hue bulb. QuickActivator will let you use vector PDF’s as glyphs, so I went online and found an SVG of the Hue lightbulb at UX Repo that matched the styling of the other shortcuts really well. I ran the SVG through Illustrator and uploaded the vector PDF here so that it’s all prepped for you to upload to your device. Simply copy the PDF to /Library/PreferenceBundles/QuickActivatorSettings.bundle/Glyphs and the glyph will be available to you in the QuickActivator settings page.

Previous Post Next Post