Custom Widget: Hue Color Light Controller

L0g4nX0 · March 2, 2018, 3:51pm

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:

Capture3 Capture2 Capture_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>

Rodnas · July 6, 2018, 6:06am

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,

skatun · August 21, 2018, 9:31am

@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

mwieting · October 9, 2018, 11:00am

how would i remove the scene dropdown from the hue color controller?

jpcolin · October 18, 2018, 11:05am

Sorry for this maybe dumb question but i’m new to openhab, what am i supposed to do with the .json file?
Thanks

DanE · July 8, 2019, 3:50pm

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.

DanE · July 8, 2019, 3:51pm

I know exactly how the hue http request needs to look like, just don’t know how to realize it with the widget.

dastrix80 · August 25, 2019, 10:51pm

Hi All

Can someone explain how to use this? My items are below. I must be stupid, i cannot find where you enter the ITEM name into the settings.


/* Cinema RGBW Lights*/
Dimmer Cinema_RGBW_Dimmer           "Cinema Backlight Dimmer"                (gCinemaLights) 
Number Cinema_RGBW_SensorPower      "Cinema Power"                           (gCinemaLights) 
Number Cinema_RGBW_Num1             "Cinema - Current Consumption [%.1f W]"  (gCinemaLights) 
Number Cinema_RGBW_Num2             "Cinema - Usage [%.1f kW]"               (gCinemaLights) 
Color Cinema_RGBW_Color             "Cinema - [%s]"                          (gCinemaLights) 
Number Cinema_RGBW_StartAnimation   "Cinema Scene [%s]"                      (gCinemaLights) 
Dimmer Cinema_RGBW_Red              "Cinema Red"                             (gCinemaLights) 
Dimmer Cinema_RGBW_Green            "Cinema Green [%d]"                      (gCinemaLights) 
Dimmer Cinema_RGBW_Blue             "Cinema Blue [%d]"                       (gCinemaLights) 
Dimmer Cinema_RGBW_White            "Cinema White [%d]"                      (gCinemaLights)

Thanks

dastrix80 · August 27, 2019, 12:11pm

Anyone?

I cannot seem to get this widget working - it’s not clear under settings of the widget what item goes where. Any help would be great!

FarkKnuckle · August 29, 2019, 2:16am

@dastrix80

My Items:

Dimmer    GF_Study_Monitor_Dimmer               "Study Monitor Dimmer"                    (GF_Study, gLight, gDimmers, gDimmersStudy)           {channel="hue:0210:0017887a670c:7:color"}
Color     GF_Study_Monitor_Colour               "Study Monitor Colour"                    (GF_Study, gLight)                                    {channel="hue:0210:0017887a670c:7:color"}

The Colour item went into the Light Item on the widget and the dimmer item went into the Dimmer item - but they’re both connected to the same hue channel

Yours looks like it should be the 1st and 5th items?

ps. sorry if this isn’t what you’re after

FarkKnuckle · August 29, 2019, 2:30am

Also, Hue lights are RGB not RGBW so maybe the RGBW controller you’re using needs the message converted to 4 channels?

See below Savanna Sunset scene being selected

2019-08-29 12:28:25.176 [ome.event.ItemCommandEvent] - Item 'GF_Study_Monitor_Colour' received command 5,91,78

and the scene presets line 61-75 of the widget code

<!-- 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'
             }" />

dastrix80 · September 3, 2019, 2:30am

Thanks ill look into it, yes im using the Fibaro