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 
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.
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. 
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 
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
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:
<!-- 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.
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,
@Signal11 Great widget, is it possible to change the scene configuration? I would like to make it more generic by link scene to a number item, and that the labels are coming from a map file. I have the following items in OH:
Number_Scene_LivingRoom which is mapped to Scene_LivingRoom.map which has this content:
0="OFF"
1="ON"
2="NIGHT"
3="READING"
So when I change the scene to “NIGHT” i would like to : Number_Scene_LivingRoom.sendCommand(2)
Thanks for any feedback on how to modify your file to this
how would i remove the scene dropdown from the hue color controller?
Sorry for this maybe dumb question but i’m new to openhab, what am i supposed to do with the .json file?
Thanks
Hi Everyone,
I am having my issues with these hue scenes. What I would like to do is to set a hue scene with the widget. Therefore I would set the scene via sendHttpPutRequest. Any ideas how to realize that? I am relatively new to openhab switching from fhem. So some hints or whatever would be nice.
I know exactly how the hue http request needs to look like, just don’t know how to realize it with the widget.