Using colorpicker in template widget

Apps & Services HABPanel
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