Custom Widget: Hue Color Light Controller

Tags: #<Tag:0x00007fd3120c0598> #<Tag:0x00007fd3120c0458>

(Tim Rogers) #1

I created a custom widget to control various Hue lights that I have.

Here is the widget:
Hue Color Light Controller.widget.json (5.0 KB)

Customary screenshot:

It allows you to turn the light on and off, and dim the light. In addition, you can select a ‘scene’, which is really just a preset color combination. I have added the preset scenes that came with my Hue phone app, with the corresponding names. You can easily add or remove them, just look at the widget code and you will see a list that you can add and remove from. The values for the items are the same as what you can set using the color picker; It is a combination of 3 numbers. If you set the values to something that is not already a scene, the numbers are displayed in the dropdown so you can make a scene easily with your favorite colors.

A few bugs:

  1. When I set the values to the bulb, sometimes (but not always) the values set are close to, but not exactly right. For example, if I set the scene to ‘Read’, it should set the values to 84, 47, 100. Very often it will set it to 84, 46, 100, which is 1 off on the second number. Setting it again seems to fix it. I think this is really a bug with Hue, or the binding, so there isn’t much I can do about it.
  2. When I switch to the page that has this controller, the slider bar for the dimmer shows the correct values, but the slider is all the way to the left. (i.e. you will see a number like 75, but the slider looks empty) Once the value is changed, it seems to update correctly, but the initial drawing is off. Not sure if this is my fault or not, but I will try to find a work-around.

I have a checkbox to control whether the title is displayed. I would like to make a second option to disable the borders, in case people don’t want them.


Using colorpicker in template widget
New feature: globally provisioned widgets (i.e. with OSGi bundles)
(Johannes) #2

Hi Tim,

nice work, I like your widget. What is the right configuration for a color bulb?`
I have chosen Colortemperature for the Light item and Color for the dimmer. The function of the slider (dimmer) is given but I can’t chose scenes. There is a selection of the standard scenes from the hue app but without any function. The on/off button (bulb icon) only runs if the light is on to turn it off. I can’t turn it on with this button.

Thanks for your work. A widget for the hue bulbs is overdue.

Have a nice sunday!

Greetings Johannes

(Tim Rogers) #3

I should have put this in the description, sorry about that. I have linked 2 items to the color channel. I actually don’t have anything linked to the color temperature channel.

The first item linked to the color channel is a Color. The second is a Dimmer. In the widget, I have the Color item selected for the “Light”, and the Dimmer item selected for the dimmer.

Hope that helps

(Alex) #4


I am having an issue with the dropdown menu. The dropdown list gets hidden behind another widget if its parent widget is added to the panel before the other custom widget. Example:

  • add Hue Color Light controller custom widget
  • add any other widget and place below the Hue Color widget
  • click on the dropdown list, the dropdown list gets masked out by the other widget

now, do the following:

  • add any widget to the panel
  • add a custom Hue Color Light controller widget
  • place the first widget below the Hue Color widget.
  • click on the dropdown list, the dropdown list gets showed completely.

I tried to debug under Chrome, but found no issues. z-index was set to 1000 and
postion to absolute

Any hints where the problem is?


(Yannick Schaus) #5

Use dropdown-append-to-body="true" (documentation) to avoid this.

(Alex) #6

well it works… sort of. The problem now is that the width of the dropdown list is spanning all over the screen up to the rigth side. It is not inheriting the width of the parent element as it is supposed to do.
Any more ideas? Is it possible to make it inherit the width of the div element explicitly?


(Claus Blaabjerg Hansen) #7

Nice looking widget. I’m new to openHab, so this might be a noob question :slight_smile:

How to I link the widget to my hue light. Do I need to use an ID in the setting or?




(furax54) #8

Nice widget. I will use it with milight bulb if I can.

(Kersten Tams) #9

I added a color picker and use the code in a template.
So if some body like it …

.icon-tile.colorize {
  filter: invert(45%) sepia(100%) hue-rotate(15deg) saturate(1700%);
-webkit-filter: invert(45%) sepia(100%) hue-rotate(15deg) saturate(1700%);
.hue-controller-table {
  width: 100%;
  border-collapse: separate; 
  border-spacing: 8px;
  border: 2px solid #76899e; 
  border-radius: 10px;  
.hue-rounded-border {
  border: 2px solid #76899e; 
  border-radius: 10px;  
#dimmer-slider .rz-bubble {
  color: #FFAA00;
#dimmer-slider .rz-pointer {
  background-color: #FFAA00;
#dimmer-slider .rzslider .rz-bar.rz-selection {
  background-color: #FFAA00;
.caret#hue-controller-caret {
  position: absolute;
  left: 95%;
  top: 45%;
  color: white;  
.hue-select {
  padding-right: 10px;
.action-button#single-button {
  color: #FFAA00;
  background-color: rgb(95,95,95);
  border: 1px solid #76899e;
  overflow: hidden;
  width: 100%;
  border-radius: 5px;
  font-size: 18px;
  font-weight: normal;
ul.dropdown-menu#hue-controller-dropdown {
  background-color: rgb(200,200,200);
  text-align: center;
  border: 0px;
  border-radius: 5px;
  width: 100%;
ul.dropdown-menu#hue-controller-dropdown li {
  color: #000;
  border-collapse: separate;
  padding: 5px;
  border-radius: inherit;  

<!-- Defined scenes -->
<div ng-init="sceneMap={
              '180,1,100': 'Full',
              '81,56,100': 'Normal',
              '5,91,78': 'Savanna Sunset',
              '37,47,48': 'Tropical Twilight', 
              '225,99,53': 'Arctic Aurora', 
              '320,57,84': 'Spring Blossom', 
              '74,78,56': 'Relax', 
              '84,47,100': 'Read', 
              '181,21,100': 'Concentrate', 
              '187,98,100': 'Energize', 
              '82,55,100': 'Bright', 
              '82,55,30': 'Dimmed', 
              '82,55,0': 'Nightlight'
             }" />

<table class="hue-controller-table">
    <td style="padding: 0px; padding-top: 2px; padding-bottom: 2px;">
      <div ng-init='onoff={"name": "OnOff", "item": "HueLeuchtband_Color", "hidelabel": true, "hideonoff": true, "iconset": "smarthome-set","icon": "bulb","icon_size": "36" }'>
        <widget-switch   ng-model="onoff" />
    <td colspan="2">
      <h3 style="color: #ffaa00; line-height: .5em;">Leuchtband</h3>
    <td width="20%" class="hue-rounded-border">
      <table style="width: 100%;">
          <td style="padding: 0px; padding-top: 10px; padding-bottom: 10px;">
          <div class="col-sm-4">
            <div ng-init='colorPickerModel = {"item":"HueLeuchtband_Color","style":"aCKolor"}'></div>
            <widget-colorpicker ng-model="colorPickerModel" />
    <td width="80%" class="hue-rounded-border">
      <div class="slider-div" ng-init='dimmerModel={"name": "dimmer", "item": "HueLeuchtband_Color", 
                          "floor" : 0, "ceil": 100, "step": 1,
                          "hidelabel" : "true", "hidelimits": "true" }'>
        <widget-slider ng-model="dimmerModel" id="dimmer-slider"/>
    <td colspan="2">
      <table width="100%">
            <div style="font-size: 15px; color: #FFAA00; font-weight: bold;"><u>Szene</u></div>
            <div style="width: 100%;" class="btn-group" uib-dropdown>
              <button id="single-button" type="button" class="action-button" uib-dropdown-toggle>
                <span id="hue-select">{{sceneMap[itemValue('HueLeuchtband_Color')]}}</span><span class="caret" id="hue-controller-caret"></span>
                <span id="hue-select" ng-if="sceneMap[itemValue('HueLeuchtband_Color')]== NULL">UNKNOWN ({{itemValue('HueLeuchtband_Color')}})</span>
              <ul class="dropdown-menu" id="hue-controller-dropdown" uib-dropdown-menu role="menu" aria-labelledby="single-button">
                <li role="menuitem" ng-repeat="(state, label) in sceneMap">
                  <a ng-click="sendCmd('HueLeuchtband_Color', state)">{{label}}</a>

Of course you must replace the item name :wink:

(Alexandre) #10


I’m using Openhab since one week so I’m completly new here. Your widget with color picker addition based on Signal11 work was a perfect base for me but a little to “big” due to table formating and style.


As you can see, I removed the “scene” options because I’m using Yeelights. But I’m trying to implement this function in order to use sceneMap’s template given. For now, I don’t know how to push RGB values to “color” item. (edit : now it’s OK)

I shared my current work if someone is interested.

yeelight-widget.widget.json (4.3 KB)

(Alexandre) #11


Since yesterday I made few modifications in order to make it more beautiful and handle scene + color temperature for Yeelight.
I added the possibility to handle (if checked) “white only” bulbs.

Modifications needed :

  • As @Signal11 discribed, I have the same issues about scene configuration with Xiaomi Yeelight bindings so I presume it’s not a problem due to your Hue binding. I tried to set a variable on “ng-click” when sending RGB informations about a scene to the item, but it didn’t work. I need to check a bit more AngularJS.
  • Tabs height (color / scenes) aren’t the same, I have to try to manually fix the height
  • Add the possibility to remove “color temperature” as you don’t seems to have this parameter with Hue lights. If someone can confirm.
  • Rename the widget to “Bulb color and white controller”

If one of you can improve / correct / make suggestion for this widget it would be lovely.

yeelight-widget.widget.json (5.3 KB)

(Andreas B ) #12

Hey guys,

just registered to say thank you for that great widget! I really love it.

What binding are you using for the Xiaomi Yeelights? I saw one doing it, but he quit it since december last year. I want to get like all of my lamps with these bulbs (cannot go on the cables directly - just a rented apartement).

Thank you in advance. Keep up the great work.


Edit: I changed the language of the brightness and the color temp. - could you tell me how to change it at the “On” & “Off” under the lamp-icon? Or is it attached to the icon?

Edit 2: I think at Xiaomi Yeelight it is possible to change the color temperature at the white spectrum. Is it possible to add that?

Edit 3: I found sth. about translation (HABPanel in german using Map Transformation), will try it later. :slight_smile:

(Alexandre) #13


Actually, I’m using this binding for Xiaomi Yeelight :
I found it there : Yeelight binding?

As Android Yeelight’s app, it doesn’t handle color temp, that’s why I didn’t had this feature for white bulb.

I’m not sure to understand what you are saying. Do you want to replace icon-lamp by “on/off” instead ? If yes, you have to remove this

"iconset": "smarthome-set","icon": "bulb"

from :

        <div ng-init='onoff={"name": "OnOff", "item": config.oh_bulb_brightness, "hidelabel": true, "hideonoff": false, "iconset": "smarthome-set","icon": "bulb"}'>
          <widget-switch   ng-model="onoff" />

(Andreas B ) #14

Hey Alexandre,

thank you for that binding - I will try that one when my bulbs arrive.

I thought you can do different white tones, probably just a false information (still waiting for all my smart home stuff to arrive).

I just saw that you do not have the text under the icon, here is a screenshot of it:

Thank you in advance.


(Alexandre) #15


I don’t know if you can translate on/off of the widget-switch, never tried.
It’s wierd that we don’t have the same thing with the same code. By rereading it, I should have, like you, on/off displayed because I have this property enable into the ng-init :

"hideonoff": false

I’ll try to debug it tonight.

(Andreas B ) #16


could you also have a look at minimizing the height of it when you are debugging? I want to have HABpanel on a 7" Tablet and it is to big there (already took out the font size). Here is a picture of it:

Maybe Ill get a 10"-Tablet soon to have a bigger screen. Would be no problem then I guess.


Edit: One more thing. If the lamp is turned off all my other symbols are also grey, if I turn it on all other symbols are “normally” orange. Dont know why they all switch.

(Alexandre) #17


Thank you for your feedbacks :slight_smile:

I tried to reduce the general heigth but it’s quite hard due to widget actual size. I have to tweak the css in order to reduce the size of the color picker and change the shape to a square.

I made few modifications :

  • Settings
    • Customizable font size of the bulb name
    • Organisation changed a bit to be a bit more clear
  • Widget
    • The color of the bulb should inherit the settings of your theme (material…)
    • Removed “on/off” on bottom of bulb-icon
    • Re-integration of some css elements made by ktams

Todo :

  • Scenes RGB values sent are not correctly interpreted by the bulb, which result to “Unknown (r,g,b)”,
  • Default values are not properly sets (not a big deal but it’s quite bad for new comers) such as bulb’s font-size, display bulb’s name…
  • Change general aspects because I think it’s beautiful but I’m not happy of the result.

yeelight-widget.widget.json (6.5 KB)

(Andreas B ) #18

Hey Alexandre,

thank you for your work here :slight_smile:

I tried the new version and On/Off is gone. The color of the bulb changes the right way and does not change the rest of the theme. But my other icons are grey now and wont change (before the color changed with the bulb).

I thought about some things to change the height - maybe I will just delete “brightness” and so on for the tablet.


(Alexandre) #19


I decided to create a github repo in order to easilly share my work if someone is interested. Today’s release include the possibility to hide/show “Brightness” and “Color Temp.” labels as Andreas asked.


(Charly ) #20


do you know if there is a way to change the bulb-icon color according to the color item? This would be extremely useful but I can´t think of a solution here.