Custom Widget: Hue Color Light Controller

widget
widgetgallery
Tags: #<Tag:0x00007fd31253c6f8> #<Tag:0x00007fd31253c5b8>

(Frederick) #21

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>



(Sandor) #22

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,