Hi Kris,
Ok, so I’ve created a “custom widget” for the lights control on ground floor.
I do not use svg icons, but png’s instead. For the dimmer, I use a “dimmer.scale” file, so I get the correct value for the icon based on 10 different icons… dimmer values 0 till 100% divided by chunks of 10.
Icons are in a separate folder in static/icons
With having this said, here’s my config. Any optimization suggestions are always welcome!
The widget code:
<div ng-init="ServerPath='http://10.0.0.2:8080'; ">
<link rel="stylesheet" type="text/css" href="{{ServerPath}}/static/css/livingroom.css" />
<div class="living-container">
<div class="living-title">
<span class="living-title-text">Ground Floor Lighting</span>
</div>
<div class="living-divider-div">
<div class="divider"></div>
</div>
<div class="living-body">
<table>
<tr>
<td>Voordeur</td>
<td>Hal</td>
<td>TV-Meubel</td>
<td>Plafond</td>
<td colspan="2">Eettafel</td>
</tr>
<tr>
<td>
<div ng-if="itemValue('GF_Entrace_Light')=='OFF'">
<img ng-src={{ServerPath}}/static/icons/wall-lamp-anim-000.png height="100" width="100" ng-click="sendCmd('GF_Entrace_Light','ON')"/>
</div>
<div ng-if="itemValue('GF_Entrace_Light')=='ON'">
<img ng-src={{ServerPath}}/static/icons/wall-lamp-anim-100.png height="100" width="100" ng-click="sendCmd('GF_Entrace_Light','OFF')"/>
</div>
</td>
<td>
<div ng-if="itemValue('GF_Hall_Light')=='OFF'">
<img ng-src={{ServerPath}}/static/icons/ceiling-lamp-anim.png height="100" width="100" ng-click="sendCmd('GF_Hall_Light','ON')"/>
</div>
<div ng-if="itemValue('GF_Hall_Light')=='ON'">
<img ng-src={{ServerPath}}/static/icons/ceiling-lamp-anim100.png height="100" width="100" ng-click="sendCmd('GF_Hall_Light','OFF')"/>
</div>
</td>
<td>
<div ng-if="itemValue('GF_Light_TV')=='OFF'">
<img ng-src={{ServerPath}}/static/icons/desk-lamp-anim-000.png height="100" width="100" ng-click="sendCmd('GF_Light_TV','ON')"/>
</div>
<div ng-if="itemValue('GF_Light_TV')=='ON'">
<img ng-src={{ServerPath}}/static/icons/desk-lamp-anim-100.png height="100" width="100" ng-click="sendCmd('GF_Light_TV','OFF')"/>
</div>
</td>
<td>
<div ng-if="itemValue('GF_Living_mainLight_Switch')=='OFF'">
<img ng-src={{ServerPath}}/static/icons/ceiling-lamp-anim-000.png height="100" width="100" ng-click="sendCmd('GF_Living_mainLight_Switch','ON')"/>
</div>
<div ng-if="itemValue('GF_Living_mainLight_Switch')=='ON'">
<img ng-src={{ServerPath}}/static/icons/ceiling-lamp-anim-100.png height="100" width="100" ng-click="sendCmd('GF_Living_mainLight_Switch','OFF')"/>
</div>
</td>
<td>
<div ng-if="itemValue('GF_LivingDining_Light')=='0'">
<img ng-src={{ServerPath}}/static/icons/ceiling-lamp-anim-000.png height="100" width="100" ng-click="sendCmd('GF_LivingDining_Light','ON')"/>
</div>
<div ng-if="itemValue('GF_LivingDining_Light')!='0'">
<img ng-src={{ServerPath}}/static/icons/ceiling-lamp-anim{{itemValue('dimmerValueScaled')}}.png height="100" width="100" ng-click="sendCmd('GF_LivingDining_Light','OFF')"/>
</div>
</td>
<td>
<div ng-if="itemValue('GF_LivingDining_Light')=='0'">
<img ng-src={{ServerPath}}/static/icons/ceiling-lamp-anim-000.png height="100" width="100" ng-click="sendCmd('GF_LivingDining_Light','ON')"/>
</div>
<div ng-if="itemValue('GF_LivingDining_Light')!='0'">
<img ng-src={{ServerPath}}/static/icons/ceiling-lamp-anim{{itemValue('dimmerValueScaled')}}.png height="100" width="100" ng-click="sendCmd('GF_LivingDining_Light','OFF')"/>
</div>
</td>
</tr>
<tr>
<td>
<div ng-if="itemValue('GF_Entrace_Light')=='OFF'">
OFF
</div>
<div ng-if="itemValue('GF_Entrace_Light')=='ON'">
ON
</div>
</td>
<td>
<div ng-if="itemValue('GF_Hall_Light')=='OFF'">
OFF
</div>
<div ng-if="itemValue('GF_Hall_Light')=='ON'">
ON
</div>
</td>
<td>
<div ng-if="itemValue('GF_Light_TV')=='OFF'">
OFF
</div>
<div ng-if="itemValue('GF_Light_TV')=='ON'">
ON
</div>
</td>
<td>
<div ng-if="itemValue('GF_Living_mainLight_Switch')=='OFF'">
OFF
</div>
<div ng-if="itemValue('GF_Living_mainLight_Switch')=='ON'">
ON
</div>
</td>
<td colspan="2">
<div style="width: 100%" ng-init='tablelightModel={
name: "percentage",
item: "GF_LivingDining_Light",
floor : 0,
ceil: 100,
selectionBarGradient: {
from: "white",
to: "#FC0"
},
step: 1,
hidelabel : true,
hidelimits: false,
vertical: false,
showTicks:true
}'>
<widget-slider ng-model="tablelightModel" id="dimmer-slider"></widget-slider>
</div>
</td>
</tr>
</table>
</div>
</div>
The css:
.living-container{
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
color: white;
border-radius: 15px;
border: 2px solid #FFF;
padding: 1px;
}
.living-title{
left: 0px;
right: 0px;
top: 0px;
color: white;
}
.living-title-text{
color: white;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.2em;
font-weight: 900;
text-shadow: 2px 2px #000000;
}
.living-divider-div{
height: 10px;
}
.divider {
display:block;
border:none;
color:white;
height:1px;
background:black;
background: -webkit-gradient(radial, 30% 30%, 0, 30% 30%, 350, from(#fff), to(#000));
}
#dimmer-slider{
}
#dimmer-slider .rz-bubble {
color: white;
}
#dimmer-slider .rz-pointer {
top: -7px;
width: 14px;
height: 14px;
background: #f7f712;
}
#dimmer-slider .rz-pointer:after{
top: 3px;
left: 3px;
background: #f7f712;
}
#dimmer-slider .rzslider .rz-bar.rz-selection {
background: linear-gradient(to right, #ffffff, #ffff13);
}
and finally the dimmer.scale (i think the first and the last entry are wrong according to the rules…checking this):
[0..0] = 0
[0.01..0.10] = 10
[0.11..0.20] = 20
[0.21..0.30] = 30
[0.31..0.40] = 40
[0.41..0.50] = 50
[0.51..0.60] = 60
[0.61..0.70] = 70
[0.71..0.80] = 80
[0.81..0.90] = 90
[0.91..1[ = 100
then I have this item for the scaling:
Number dimmerValueScaled "Scaled Dimmer: [SCALE(dimmer.scale):%s]" {channel="zwave:device:3d4427ff:node8:switch_dimmer1" }
Let me know if this is what you are looking for!
/Jasper
