1.10 - Philips Hue Gateway Setup


For fullscreen: https://www.youtube.com/watch?v=X941KESTxVk

Today we will show you how to set up the Hue Gateway so you can integrate any Hue device with the Q-Server and overall Quantum system.


First set up your Phillips Hue bridge as you normally would and connect the Hue devices that you want to use. We will use four Phillips Hue light bulbs.

Philips Hue Gateway Setup

When you are on the Q-Server homescreen, the first thing we want to do is download the Philips Hue Gateway. To do so, click on the “Library” tab and then on “Gateways”.

Once you are there download the Hue gateway by clicking on “Download”. If the installation finished move on to the “Gateways” tab on the left side. You should see the Hue Gateway listed.

Now click on the Action buttons of the Hue Gateway and click start.

Now you have to enter the ip address of your Philips Hue bridge.

Before you click on next, make sure to hit the link button of your Philips Hue bridge.

After you have done that, click on the Next button of the “Configure Hue”. Next you will be asked to put in a user name, but that should be automatically filled in by the gateway. Click “Next”.

Last step is to click on “Activate” and you are done and your gateway is set up.

Now move on to the Clients tab. You should see all your Hue devices that are connected to your Hue bridge listed up in the list like so:

Build the App

To demonstrate the functionality of the light bulbs, we are going to create an app. Go on the “Apps” tab on the left and click “Create New”.

We named ours Hue but you can give it any name you want.

Since we are using light bulbs, we want to use the “Light Hardware Object”. Drag one onto the canvas or simply click on it.

Next thing we need is a “Switch Interface Object”.

There are now two ways to complete the app. Since we are using four light bulbs, one method is to get four Light Hardware objects in order to control everything or we use the “Multi-mapping” feature.

Multi-mapping will allow you to map multiple hardware devices to a single hardware object in the application. We will use this in our application. To activate it, simply click on it and then on “Save Properties”.

Now connect the “State” of the Switch with the “On/Off” of the Light.

There are several more features to use like “Dim” to dim the lights or “RGB Color” to change the color of the light bulbs and even the color temperature. We will use these as well.

For the “Dim” port of the Light, we will use a “Slider percent ”.

For the “RGB Color” we will use a “Color Picker” from the Interface objects.

For the “Color Temperature” we will use another “Slider percent”.

Your canvas should look like this now:

For a better use later on, you should label the Interface objects with their connected Partner. So for instance label the first “Switch” with On/Off.

You can also give them different titles if you wish to. Once you are finished hit the “Save App” button at the top.

Map the Hardware

Now we will activate the app by clicking on the “Play” button of the listed app.

Since we are using the the “Multimapping” feature from the app, we will need four Clients to control the four light bulbs of our Philips Hue. Add them by clicking “+ Add Client”.

Select the first light for the first client and so on.

When you are done mapping hit “Done” and then click “Save + Run”.

Run the App!

Now move on to the dashboard.

You will now be able to control the light bulbs.

You can also change the color by clicking on “Edit” right to the color picker. Pick a color you want and then click save, the light bulbs should turn into that color.

Also you can use your mobile phone to control the light bulbs if you wish to.

That’s how you set up the Hue gateway on our Server to connect with the Philips Hue system. We hope this is useful for you and happy making!