Using colorpicker in template widget

Apps & Services HABPanel
1

I am attempting to create a template widget that will spit out a colorpicker widget for each Hue bulb in a particular room (group). I have already gotten the Hue bridge hooked up, and have been able to manually plop a color picker widget on the page, but am having trouble when I attempt to put one into a template.

The widget itself appears, but does not reflect the state of the bulb, nor does it cause the bulb’s color to change when I click anything.

<div>
  <h2>Test</h2>
  <div ng-init="light = {	'name': 'test',
                					'item': 'ExtraLight_Color'}"></div>
  <widget-colorpicker ng-model="light"/>
</div>
2

I was able to get partial success by updating to the latest snapshot, and by using the aCKolor widget. However the color picker widget only seems to work if the item has been hardcoded in it, it won’t work when using the item as part of a variable.

I may be running into an Angular issue (I am new to Angular), as it looks like the onchange event is trying to fire at http://localhost:8080/rest/items/{{item.name}}

<div class="row">
    <div ng-init='hardcoded = {"name":"test","item":"ExtraLight_Color","style":"aCKolor"}'></div>
    <widget-colorpicker ng-model="hardcoded" />  
</div>

<div class="row" ng-repeat="item in (itemsInGroup(config.GroupName) | filter:{type:'Color'})">
  <div class="col-sm-4">{{item.name}}</div>
  <div class="col-sm-4">{{itemValue(item.name)}}</div>
  <div class="col-sm-4">
    <div ng-init='light = {"item":"{{item.name}}","style":"aCKolor"}'></div>
    <widget-colorpicker ng-model="light" />  
  </div>
</div>
3

It was definitely a problem with my Angular variables in the end. This Template achieves what I was hoping to (will update with a better style in the near future).

Note that it looks like you need to cause the lightbulbs to update somehow before the color picker widgets populate on this screen.

<div class="row" ng-repeat="item in (itemsInGroup(config.GroupName) | filter:{type:'Color'})">
  <div class="col-sm-4">{{item.name}}</div>
  <div class="col-sm-4">{{itemValue(item.name)}}</div>
  <div class="col-sm-4">
    <div ng-init='light = {"item":item.name,"style":"aCKolor"}'></div>
    <widget-colorpicker ng-model="light" />  
  </div>
</div>
4

This is a decent enough widget for now. It looks best when expanded to the full width of a panel.

Credit: Alot of this widget was made possible due to inspiration from Custom Widget: Hue Color Light Controller

<style>
  .border {
  	border: 2px solid #76899e;
  }
  
  .r10 {
  	border-radius: 10px;  
  }
  
  .p10 {
  	padding: 10px;
  }
  
  .m5 {
  	margin: 5px;
  }
  
  .h60 {
  	height: 60px;
  }
  
  .c-ckolor__wrapper {
    border: 2px solid #76899e;
    border-radius: 10px;  
  	padding: 10px;
  }
</style>

<div class="row">
  <div class="col-sm-4" ng-repeat="item in (itemsInGroup(config.GroupName) | filter:{type:'Color'})">
    <div class="border r10 p10">
      <div class="row p10">
        <div class="col-sm-4 h60">
        	<div ng-init='switchModel = {"name": "OnOff", "item": item.name, "hidelabel": true, "hideonoff": true, "iconset": "smarthome-set","icon": "bulb","icon_size": "36" }'></div>
          <widget-switch   ng-model="switchModel" />
        </div>
        
        <div class="col-sm-8">
          <p>{{item.name}}</p>
          <p>{{itemValue(item.name)}}</p>
        </div>
      </div>
      
      <div class="row">
        <div class="col-sm-4">
          <div ng-init='colorPickerModel = {"item":item.name,"style":"aCKolor"}'></div>
        	<widget-colorpicker ng-model="colorPickerModel" />
        </div>
        
        <div class="col-sm-8">
          <div class="slider-div" ng-init='brightnessModel = {"name": "dimmer", "item": item.name, "floor" : 0, "ceil": 100, "step": 1, "hidelabel" : "true", "hidelimits": "true" }'></div>
          <widget-slider ng-model="brightnessModel"/>  
        </div>

      </div>
    </div>
  </div>
</div>
1 Like