Template for White Hue Lights with Color Temperature and Thing state

Tutorials & Examples HABPanel Examples
1

Hi, newbie here. Sorry if I’ve re-invented the wheel, but I tried to build a control for white lamps with color temperature, therefore two sliders, another feature is “dynamic icons” and if the lamp is unavailable a status message from the Thing behind the Item. Built with current OpenHAB 2.2.

image
image.png904×228 17.4 KB

First the groundwork:
There are two or three items for each bulb, the Dimmer for the Brightness channel, a String for Online state (without channel, filled with the Thing state via the rule) and if the bulb supports it the Dimmer for the Color Temperature channel.

Dimmer Flur_Decke_Lampe "Flurlampe" <light> (gLampen) ["Lighting"] {channel="hue:0100:1:1:brightness"}
String Flur_Decke_Lampe_Online <light> (gLampenOnline)
Dimmer Wohnzimmer_Esstisch_Lampe "Esstischlampe" <light> (gLampen) ["Lighting"] {channel="hue:0220:1:4:brightness"}
Dimmer Wohnzimmer_Esstisch_Lampe_Coltemp "Esstischlampe Farbtemp" <light> {channel="hue:0220:1:4:color_temperature"}
String Wohnzimmer_Esstisch_Lampe_Online <light> (gLampenOnline)

There is a rule for each bulb (only one shown here)

rule "Lampe4"
when
    System started or
    Thing "hue:0220:1:4" changed
then
    var si = getThingStatusInfo("hue:0220:1:4");
    logInfo("Rule Lampe4", "Status: " + si);
    Wohnzimmer_Esstisch_Lampe_Online.sendCommand(if (si !== null) si.toString() else "NULL");
End

Now for the template. It has three settings: config.item_brightness is obviously ties the Item for brightness, config.item_online to the online-Item and config.item_colortemp to the Item for Color temperature (or if not available and as the dialog not allows NULL input, the brightness-Item). The icons are hardcoded, feel free to change them or make them configurable. As I have no Angular experience, the layout is a what I was able to achieve, tweaking this was tedious for me…
Noteworthy: To use the icon-widget, the iconset and icon (and state if hardcoded) have to be “double-quoted”. The name (head text) is retrieved from the Item label. The Color temperature would be from 200K – 6500K, I found no way to set this value as limit and pointer text for the openhab supplied slider widget. The translate-function would have to be overridable from the outside I suppose.

<div>
  <div ng-if="getItem(config.item_online).state.toString() != 'ONLINE'" class="box-content">
    <widget-icon iconset="'freepik-household'" icon="'lamp-4'" class="icon icon-tile-backdrop" backdrop="true" center="true"></widget-icon>
    <widget-icon style="position: absolute; top: 10px; left: 10px;" iconset="'eclipse-smarthome-classic'" icon="'light'" class="icon" state="'OFF'"></widget-icon>
    <div class="slider-label box-content">{{getItem(config.item_brightness).label}} 
    <div class="dummy-content">
        <span class="value">{{getItem(config.item_online).state}}</span>
    </div>
    </div>
  </div>
  <div ng-if="getItem(config.item_online).state.toString() == 'ONLINE'" class="box-content">
    <widget-icon style="position: absolute; top: 10px; left: 10px;" iconset="'eclipse-smarthome-classic'" icon="'light'" class="icon" state="getItem(config.item_brightness).state"></widget-icon>
    <div ng-init="slider1 = {
                        'name': getItem(config.item_brightness).label,
                       	'item': config.item_brightness,
                        'floor': 0,
                        'ceil': 100,
                  	'step': 1,
                        'precision': 1,
                        'unit': '%',
                        'hidelabel': false,
			'hidelimits': true,
                        'hidepointer': false,
                        'backdrop_icon': 'lamp-4', 
                  	'backdrop_iconset': 'freepik-household',
                }">
		<widget-slider ng-model="slider1"/>
	</div>
        <div ng-if="config.item_colortemp && config.item_colortemp != config.item_brightness">
		<div ng-init="slider2 = {
                       	'item': config.item_colortemp,
                        'floor': 0,
                        'ceil': 100,
                  	'step': 1,
                        'precision': 1,
                        'unit': 'K',
                        'hidelabel': true,
			'hidelimits': true,
                        'hidepointer': true,
                   }">
		  <widget-slider ng-model="slider2"/>
		</div>
      </div>
  </div>
</div>

Hope this is useful for some of you!

5 Likes
2

I have also tried to create something for the tunable white lamps. Wanted something intuitive to gain more acceptance from my wife.
I was able to creathe a slider with a color gradient so you can see what should be the resulting color of the lamp.
What is missing now to make this perfect:

  • display the color temperature on the slider: I think this would be possible with the transform option of the slider. With the builtin slider I understand you can only add a unit, but no function for calculating / translating the value. Would it be possible with the oc-lazy-load to clone the slider widget and modify it? If so could someone give me a hint, I am new in Javascript and Angular …
  • if you make the slider bar larger you can see that the knob is aligne to the top of the bar not to the middle. Any way to change the alignment?
  • killer feature would be to dynamically change the color of the icon according to the slider. I have no idea if this is possible and how to achieve this

This is what I have so far:

grafik

<style>
#slider-amb .rz-bar {
  background: linear-gradient(to right, #c0ffff, #ffffff, #ffffb3);
  height: 10px;
}
#slider-amb .rz-selection {
  background: transparent;
}
#slider-bright .rz-bar {
  background: linear-gradient(to right,#000000, #ffffff);
  height: 10px;
}
#slider-bright .rz-selection {
  background: transparent;
}
</style>
<div class="box-content">{{getItem(config.hueSwitch).label}}</div>
<div ng-init='onoff={"name": "HueAmbOnOff", "item": config.hueSwitch, "hidelabel": true, "hideonoff": true, 
              "iconset": "custom-icon","icon": "lamp","icon_size": "50" }'>
              <widget-switch ng-model="onoff" />
            </div>
<div class="slider-amb" ng-init='sliderAmb={"name": "dimmer", "item": config.whiteTemp, "floor" : 0, "ceil": 100, "step": 1, 
                                    "hidelabel" : true, "hidelimits": true, "hidepointer": true}'>
  <widget-slider ng-model="sliderAmb" id="slider-amb"/>&nbsp;</div>

<div class="slider-bright" ng-init='sliderBright={"name": "dimmer", "item": config.brightness, "floor" : 0, "ceil": 100, "step": 1, 
                                    "hidelabel" : "true", "hidelimits": "false", "unit": " %" }'>
  <widget-slider ng-model="sliderBright" id="slider-bright"/>&nbsp;</div>

If somebody has any hints for me it would be great. Thanks.
-Dirk

3 Likes