Custom Widget: Hue Color Light Controller

Hello,
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

Hi,

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?

Thanks

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

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?

thanks

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?

Thanks

Regards

Claus

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

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

<style>
.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;  
} 
</style>

<!-- 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">
  <tr>
    <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" />
      </div>
    </td>
    <td colspan="2">
      <h3 style="color: #ffaa00; line-height: .5em;">Leuchtband</h3>
    </td>
  </tr>
  <tr>
    <td width="20%" class="hue-rounded-border">
      <table style="width: 100%;">
        <tr>
          <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" />
          </div>
          </td>
         </tr>
      </table>
    </td>
    <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"/>
      </div>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <table width="100%">
        <tr>
          <td>
            <div style="font-size: 15px; color: #FFAA00; font-weight: bold;"><u>Szene</u></div>
          </td>
        </tr>
        <tr>
          <td>
            <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>
              </button>
              <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>
                </li>                
              </ul>
            </div>
          </td>
        </tr>
      </table>          
    </td>
  </tr>
</table>

Of course you must replace the item name :wink:

Hi,

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.

widget_yeelight

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)

1 Like

Hi,

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)

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.

Greetings
Andy

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:

Hi,

Actually, I’m using this binding for Xiaomi Yeelight : https://github.com/openhab/openhab2-addons/files/755413/org.openhab.binding.yeelight-2.1.0-SNAPSHOT.zip
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" />
        </div>

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.

Greetings
Andreas

Hi,

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.

Hey,

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.

Greetings

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.

Hi,

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)

1 Like

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.

Greetings
Andreas

Hi,

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.

Regards,

4 Likes

Hi,

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.

Greetings
Charly

1 Like

Thanks for the widget, trying a simple modif here too. I am using this with Ikea lights and it works well but i guess i need some modifs too. Anyways, here you go:

Capture3Capture2Capture_1



<!-- Defined scenes -->
<div ng-init="strength={
              '0': '', 
             }" />
<div ng-init="sceneMap={
              '0': 'Off', 
              '10': 'Blue', 
              '40': 'Focus', 
              '80': 'Relax', 
              '100': 'Yellow', 
             }" />

<table class="hue-controller-table">
  <tr>
    <td ng-if="config.showTitle == true" colspan="2">
      <h3 style="color: #ffaa00; line-height: .5em;">{{config.title}}</h3>
    </td>
  </tr>
  <tr>
    <td width="20%" class="hue-rounded-border">
      <table style="width: 100%;">
        <tr>
          <td style="padding: 0px; padding-top: 10px; padding-bottom: 10px;">
            <div ng-init='onoff={"name": "OnOff", "item": config.light, "hidelabel": true, "hideonoff": true, "iconset": "smarthome-set","icon": "bulb","icon_size": "36" }'>
              <widget-switch   ng-model="onoff" />
            </div>
          </td>
        </tr>
      </table>
    </td>

    <td colspan="2">
      <table width="10%">

        <tr>
          <td>
            <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" ng-if="strength[itemValue(config.light)]== NULL">On</span>
              </button>
              <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 strength">
                   <div class="slider-div" ng-init='dimmerModel={"name": "dimmer", "item": config.dimmer, 
                          "floor" : 0, "ceil": 100, "step": 1,
                          "hidelabel" : "true", "hidelimits": "true" }'>
        <widget-slider ng-model="dimmerModel" id="dimmer-slider"/>
                </li>                
              </ul>
            </div>
          </td>
            <td colspan="2">
      <table width="10%">

        <tr>
          <td>
            <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(config.light)]}}</span><span class="caret" id="hue-controller-caret"></span>
                <span id="hue-select" ng-if="sceneMap[itemValue(config.light)]== NULL">({{itemValue(config.light)}})</span>
              </button>
              <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(config.light, state)">{{label}}</a>
                </li>                
              </ul>
            </div>
          </td>
        </tr>
      </table>          
    </td>
  </tr>
</table>


1 Like

Hi,

I’m new in openHAB but I figure it out how to do same basic things.
I stuck with Philips Bulbs “Scene”.
Everything is working except “Scene”

<style>
.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;  
} 
  
</style>

<!-- Defined scenes -->
<div ng-init="sceneMap={
              '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">
  <tr>
    <td ng-if="config.showTitle == true" colspan="2">
      <h3 style="color: #ffaa00; line-height: .5em;">{{config.title}}</h3>
    </td>
  </tr>
  <tr>
    <td width="20%" class="hue-rounded-border">
      <table style="width: 100%;">
        <tr>
          <td style="padding: 0px; padding-top: 10px; padding-bottom: 10px;">
            <div ng-init='onoff={"name": "OnOff", "item": config.light, "hidelabel": true, "hideonoff": true, "iconset": "smarthome-set","icon": "bulb","icon_size": "36" }'>
              <widget-switch   ng-model="onoff" />
            </div>
          </td>
        </tr>
      </table>
    </td>
    <td width="80%" class="hue-rounded-border">
      <div class="slider-div" ng-init='dimmerModel={"name": "dimmer", "item": config.dimmer, 
                          "floor" : 0, "ceil": 100, "step": 1,
                          "hidelabel" : "true", "hidelimits": "true" }'>
        <widget-slider ng-model="dimmerModel" id="dimmer-slider"/>
      </div>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <table width="100%">
        <tr>
          <td><div style="font-size: 15px; color: #FFAA00; font-weight: bold;"><u>Scene</u></div></td>
        </tr>
        <tr>
          <td>
            <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(config.light)]}}</span><span class="caret" id="hue-controller-caret"></span>
                <span id="hue-select" ng-if="sceneMap[itemValue(config.light)]== NULL">UNKNOWN ({{itemValue(config.light)}})</span>
              </button>
              <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(config.light, state)">{{label}}</a>
                </li>                
              </ul>
            </div>
          </td>
        </tr>
      </table>          
    </td>
  </tr>
</table>

This is what I get and if u choose anything from drop-down list still it is the same - no change.

Untitled

And drop-down list is behind other widgets.
Can font for “Staircase - Down” be smaller?
If u can edit my code and change to work it i would appreciate (still beginner in this field).

Thx a lot,