I have seen a couple posts about the slider control for dimmers/blinds. I ended up going a slightly different direction.
I was struggling a bit with how I wanted to implement my dimmers on my floorplan. I ended up going with the modal popup and some canned values.
I used the 4-way blind/dimmer widget as inspiration. I was trying to used a widget but I was not able to make it work in the template. I don’t know if it possible or if I was doing it wrong.
Probably ways to improve but it is working for me..
<div ng-init="dimmerName = {value: ''};"></div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<a ng-click="$close()" class="pull-right btn btn-danger">X</a>
<h3 class="modal-title">{{getItem(dimmerName.value).label}}</h3>
</div>
<div class="modal-body" style="background: rgba(0,0,0,.9);">
<div class="dimmerControl" ng-class="getItem(dimmerName.value).state > 80 ? 'dimmerValueOn' : 'dimmerValueOff'">
<button class="dimmerButton" ng-click="sendCmd(dimmerName.value, 100)">ON</button>
</div>
<div class="dimmerControl" ng-class="getItem(dimmerName.value).state > 60 ? 'dimmerValueOn' : 'dimmerValueOff'">
<button class="dimmerButton" ng-click="sendCmd(dimmerName.value, 80)">80</button>
</div>
<div class="dimmerControl" ng-class="getItem(dimmerName.value).state > 40 ? 'dimmerValueOn' : 'dimmerValueOff'">
<button class="dimmerButton" ng-click="sendCmd(dimmerName.value, 60)">60</button>
</div>
<div class="dimmerControl" ng-class="getItem(dimmerName.value).state > 20 ? 'dimmerValueOn' : 'dimmerValueOff'">
<button class="dimmerButton" ng-click="sendCmd(dimmerName.value, 40)">40</button>
</div>
<div class="dimmerControl" ng-class="getItem(dimmerName.value).state > 0 ? 'dimmerValueOn' : 'dimmerValueOff'">
<button class="dimmerButton" ng-click="sendCmd(dimmerName.value, 20)">20</button>
</div>
<div class="dimmerControl" ng-class="getItem(dimmerName.value).state == 0 ? 'dimmerValueOn' : 'dimmerValueOff'">
<button class="dimmerButton" ng-click="sendCmd(dimmerName.value, 0)">OFF</button>
</div>
</div>
</script>
<div width="100%" height="100%" oc-lazy-load="'/static/floorplan/floorplan.css'">
<div ng-include="'/static/floorplan/atest.svg'"></div>
</div>
Relevant styles from the stylesheet
.dimmerControl {
background: rgba(0,0,0,0.5);
border-radius: 10px;
border: 1px;
border-style: solid;
margin-top: 8%;
margin-left: 2%;
margin-right: 2%;
}
.dimmerValueOn {
border-color: rgb(0,255,0) ;
}
.dimmerValueOff {
border-color: rgb(255,255,255) ;
}
.dimmerButton {
color: rgb(255,255,255);
border: none;
background: rgba(0,0,0,0);
font-size: 1.2em;
height: 100%;
width: 100%;
padding: .75em;
}
Then, in the svg file, on the ng-click for each dimmer light, set the name of the Item and then open them modal window. In the code below replace “KitchenLights” with your item name.
dimmerName.value='KitchenLights'; openModal('myModalContent.html', true, 'sm')