In the Home Control system there are a few remote-controlled lights from Philips Hue and Innr (compatible with Philips Hue but much cheaper). These are controlled by a Philips Hue bridge interfaced to OpenHab.
There are widgets on the HabPanel associated with each light, that display the current state of the light and allows them to be toggled on/off when pressed. A separate Lights page on the HabPanel permits more detailed control of brightness / colour temperature where applicable.
Control can also be made on the iPhone / iPad using the BasicUI in the OpenHab app, and via voice with the Philips Hue skill for Alexa.
Additional automated functionality for the lights uses Node-RED to interface between OpenHab, the Philips Hue bridge and the HabPanel.
OpenHab
In the OpenHab things folder is a home.things file which defines the Philips Hue hub characteristics and associated lights parameters. I used the setup page for the Philips Hue binding and a little experimentation. Some of the lights only have adjustable brightness (id=0100 below), whilst others also support changes in their colour temperature (id=0220).
The “lightId” numbers came from the OpenHab things page, writing them in the home.things file rather than using the OpenHab database. The Hue Bridge username was a little more difficult. It is supposed to be shown in the OpenHab log files but it isn’t. Found a blog which gave a workaround as follows:
- In the browser, open “*
/debug/clip.html*“; the Clip API Debugger opens - Enter /api in the URL field
- Enter {“devicetype”:”openhabhuebinding#openhab”} in the Message Body field
- Press the pairing button on the bridge, then press “POST” in the debugger; JSON response contains the cryptic username value
- Add username to home.things file, as “*
*” below
1
2
3
4
5
6
7
8
Bridge hue:bridge:0017886fd5e0
[ ipAddress="192.168.0.126", userName="<username>" ]
{
0100 bulb_lounge [ lightId="2" ]
0220 bulb_hall_study [ lightId="1" ]
0220 bulb_hall_kitchen [ lightId="3" ]
0100 bulb_welcome [ lightId="4" ]
}
In the OpenHab items folder is a lights.items file which associates each light with specific channels depending on their capabilities (dimmable, colour temp, etc). Note that the toggle switch also uses the brightness channel but only sets to 0 (off) or 100 (on). The ESP switches have associated MQTT channel parameters.
In addition, as we wanted some automated functionality such as lights coming on at dusk, Node-RED uses an OH3 node for talking to Philips Hue items, and MQTT to other devices.
HabPanel Widget
The HabPanel uses code in a Template widget to display the state of the associated light and to change the light state when pressed. It uses a pair of SVG icons that I found online, and made some amendments to suit my function and colour scheme.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div ng-init="LightItem='Light_Lounge_Toggle'; LightItemText='Lounge'">
</div>
<div class="rounded-box">
<table style="width: 100%; text-align: center">
<tr>
<td>
<a ng-click="sendCmd(LightItem, (itemValue(LightItem) == 'OFF')? 'ON' : 'OFF')">
<div ng-if="itemValue(LightItem) == 'ON'">
<img ng-src="/static/images/bulb-on.svg" style="height: 7vw" />
</div>
<div ng-if="itemValue(LightItem) == 'OFF'">
<img ng-src="/static/images/bulb-off.svg" style="height: 7vw" />
</div>
</a>
</td>
</tr>
<tr>
<td style="font-size: 1.6vw; font-weight: 400; padding-top: 0.5vw;
font-family: Roboto, Helvetica, sans-serif;">
</td>
</tr>
</table>
</div>
The ng-init initialisation section defines the LightItem and LightItemText variables at the top of the code, so it is easy to amend as each widget references its own light. The LightItem is the OpenHab name for the controlled light parameter (in this case _Toggle) from the lights.items file.
In the HTML table section first row, ng-click is used to toggle a state change when clicked, and ng-if is used to display the relevant SVG light icon depending on whether the LightItem value is ON or OFF. Note the use of “vw” units rather than “px” so that the same scaled view is presented whatever device the HabPanel is viewed on. The second row displays the name associated with the light from LightItemText.
BasicUI / SiteMap
1
2
3
4
5
6
7
8
9
sitemap home label="My Home Automation" {
...
Frame label="Lounge" {
// Light_Lounge
Switch item=Light_Lounge_Toggle label="Lounge Light" icon="light"
Slider item=Light_Lounge_Dimmer label="Brightness" icon=""
}
...
}
Node-RED
TODO: add flow for switching light on at dusk and off at 1030ish
References / Info
- OpenHab: setup information for the Philips Hue binding, gives details on the things / items configuration files above
- OpenHab: how to use SiteMaps for BasicUI, etc
- HabPanel Template Widget tutorial