Habpanel using the Template as Switch

Apps & Services HABPanel
1

All,
I am using Habpanel and I love it.
Most of it I can customize to match my expectations.

I mainly use the template:

<div 
 ng-style="{
 'background-color': itemValue('Presence')=='OFF' ? '#808080' : '#313135'
 }"
 class="template-container"
 style="top:0;bottom:0;left:0;right:0;position:absolute">
 <div class="template-contents">
 <div class="row">
		<div class="col-xs-12"><span><widget-icon iconset="'smarthome-set'" icon="'pet'" /></span></div>
	</div>
 <div class="row">
		<div class="col-xs-12"><span style="color: #4CC417; font-size: 10pt; text-align:center">{{itemValue('Presence')| number:0}}<small style="font-size:8pt"></small></span></div>
	</div>
 </div>
</div>

However, I would like to modify two things:

  1. Change the icon’s color depending on the switch’s state (instead of the entire tile)
  2. enable the switch functionality to change the state

Any suggestions?

2

Is there anyone out there who has realized this kind of function?

3

Really Nobody?
:frowning:

4

SVG icons are colorized using the filter CSS attribute, it’s a little tricky and you have to play with the values for hue, sepia, invert, saturate, for example in the Chrome debugger to get them right. You can them define them in CSS classes like below then use ng-class (doc) to apply your additional classes dynamically to the <widget-icon />

<style>
.icon-green .icon-tile.colorize {
  filter: invert(40%) sepia(100%) hue-rotate(100deg) saturate(10000%);
  -webkit-filter: invert(40%) sepia(100%) hue-rotate(100deg) saturate(10000%);
}
.icon-red .icon-tile.colorize {
  filter: invert(40%) sepia(100%) hue-rotate(0deg) saturate(10000%);
  -webkit-filter: invert(40%) sepia(100%) hue-rotate(0deg) saturate(10000%);
}
</style>
<div 
 ng-style="{
 'background-color': itemValue('Presence')=='OFF' ? '#808080' : '#313135'
 }"
 class="template-container"
 style="top:0;bottom:0;left:0;right:0;position:absolute;cursor:pointer;"
     ng-click="sendCmd('Presence', itemState('Presence')=='ON' ? 'OFF' : 'ON')">
 <div class="template-contents">
 <div class="row">
		<div class="col-xs-12"><span>
      <widget-icon
      		ng-class="{ 'icon-green': itemState('Presence'), 'icon-red': !itemState('Presence') }"
            iconset="'smarthome-set'" colorize="false" icon="'pet'" />
    </span></div>
	</div>
 <div class="row">
		<div class="col-xs-12"><span style="color: #4CC417; font-size: 10pt; text-align:center">{{itemValue('Presence')| number:0}}<small style="font-size:8pt"></small></span></div>
	</div>
 </div>
</div>

Imitating a switch is easily done with
`ng-click=“sendCmd(‘Presence’, itemState(‘Presence’)==‘ON’ ? ‘OFF’ : ‘ON’)”``
on the top-level element.

5

Thanks a lot!
I will check it out asap