Custom Music Control Widget: Mute example

Apps & Services HABPanel
,
1

I’m learning how to create custom widgets and am currently creating a dashboard for my Sonos equipment. I can set up my widget so that the items are hardcoded as shown below using the Mute button as an example:

<div class="mybtn" ng-if="itemValue('Sonos_Play1_StummSchalten')=='ON'" ng-click="sendCmd('Sonos_Play1_StummSchalten', 'OFF')">
    <img src="/static/buttons/mute_132px.png"></img>
    <img src="/static/buttons/mute_Hover_132px.png" class="img-top"></img>
</div> 

<div class="mybtn" ng-if="itemValue('Sonos_Play1_StummSchalten')=='OFF'" ng-click="sendCmd('Sonos_Play1_StummSchalten', 'ON')">
    <img src="/static/buttons/unmute_132px.png"></img>
    <img src="/static/buttons/unmute_Hover_132px.png" class="img-top"></img>
</div>  
       
<div class="mybtn" ng-if="itemValue('Sonos_Play1_StummSchalten')=='NULL'" ng-click="sendCmd('Sonos_Play1_StummSchalten', 'ON')">
    <img src="/static/buttons/mute_132px.png"></img>
    <img src="/static/buttons/mute_Hover_132px.png" class="img-top"></img>
</div>

However since I have more than one Sonos group, I thought I could just replace the hard-coded items with a config. and then I can assign the item on each dashboard differently via the widget settings. On the settings I add a configuration with Item set and the ID “mute”. and changed my code as follows:

<div class="mybtn" ng-if="itemValue('config.mute')=='ON'" ng-click="sendCmd('config.mute', 'OFF')">
    <img src="/static/buttons/mute_132px.png"></img>
    <img src="/static/buttons/mute_Hover_132px.png" class="img-top"></img>
</div>
     
<div class="mybtn" ng-if="itemValue('config.mute')=='OFF'" ng-click="sendCmd('config.mute', 'ON')">
       <img src="/static/buttons/unmute_132px.png"></img>
       <img src="/static/buttons/unmute_Hover_132px.png" class="img-top"></img>
</div>  
       
<div class="mybtn" ng-if="itemValue('config.mute')=='NULL'" ng-click="sendCmd('config.mute', 'ON')">
       <img src="/static/buttons/mute_132px.png"></img>
       <img src="/static/buttons/mute_Hover_132px.png" class="img-top"></img>
</div>

Seems logical, but doesn’t work. The mute remains hidden. Is this not possible? Does it have something to do with the ng-if and ng-click on one line?

Of couse I could create multiple widgets i.e. one widget per group, but that would make code changes laborious. Or is this the only solution?

Any help would be greatly appreciated.