Hi,
I am looking to do two things
- I took the code below from some examples (thank you), and would like the button to be red when off, and green when on. Can anyone tell me what to change?
<style>
.icon-tile.colorize {
filter: invert(45%) sepia(100%) hue-rotate(15deg) saturate(1700%);
-webkit-filter: invert(45%) sepia(100%) hue-rotate(15deg) saturate(1700%);
}
.item-on {
filter: invert(45%) sepia(100%) hue-rotate(15deg) saturate(1700%);
-webkit-filter: invert(45%) sepia(100%) hue-rotate(15deg) saturate(1700%);
}
</style>
<table style="width: 100%; border-collapse: separate; border-spacing: 8px;">
<tr><td colspan=2><h3 style="color: #ffaa00; line-height: .1em;">Office Speaker</h3></td></tr>
<tr>
<td style="border: 2px solid #76899e; border-radius: 10px;">
<div ng-if="itemValue('RNetAudioZone1_3_Status')!='ON'">
<button class="btn btn-lg" style="background: transparent;" ng-click="sendCmd('RNetAudioZone1_3_Status', 'ON')">
<img width="62px" src="/static/images/power-switch.svg"></img>
</button>
</div>
<div ng-if="itemValue('RNetAudioZone1_3_Status')=='ON'">
<button class="btn btn-lg" style="background: transparent;" ng-click="sendCmd('RNetAudioZone1_3_Status', 'OFF')">
<img width="62px" src="/static/images/power-switch.svg" class="item-on"></img>
</button>
</div>
</td>
2/. Volume as choices rather than slider. I only use a few vol settings, and would like to just be able to click on them (say 10, 15, 20, 25, 30), rather than slide 0-100. Is there a way to list them and on click change color to selected one and use that for volume. what i have now for slider is. I would also like to do this to select sources, but could maybe use the same code.
<td style="border: 2px solid #76899e; border-radius: 10px; padding-top: 10px; padding-bottom: 10px;">
<div class="slider-div" ng-init='volumeModel={"Office_vol": "Office Volume", "item": "RNetAudioZone1_3_Volume",
"floor" : 0, "ceil": 100, "step": 1, "hidelabel" : "true", "hidelimits": "true" }'>
<widget-slider ng-model="volumeModel"/>
</div>
</td>
Thank you