Some help with Habpanel code

Hi Team,

Can someone assist in determining why i cannot use the INPUT section of this code?

Power , Volume both work fine but none of the input buttons work. I tested the send commands in the Openhab console and they trigger the inputs just fine, so its clearly code related.

I’ve tried many things :frowning:

	<div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#flat-tv"></use></svg></div></div>
	<div class="title">Yamaha AVR</div>
	<div class="controls">
    
      <div class="widget" ng-if="itemValue('Main_Zone_Power')=='OFF'" ng-click="sendCmd('Main_Zone_Power', 'ON')">
      <div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use></svg></div>
      <div class="name">Power {{itemValue('Main_Zone_Power')}}</div>
    </div>
      <div class="widget" ng-if="itemValue('Main_Zone_Power')=='ON'" ng-click="sendCmd('Main_Zone_Power', 'OFF')">
      <div class="icon on" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></div>
      <div class="name">Power {{itemValue('Main_Zone_Power')}}</div>
    </div> 
    
      <div class="widget" ng-class="{true: 'disabled'}[itemValue('Main_Zone_Power')=='OFF']">
			<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#flat-tv"></use></svg></div>
			<div class="name">Input</div>
			<div class="appLogo" ng-if="itemValue('Zone_1_Input')=='AirPlay'"><svg viewBox="0 0 440 100"><use xlink:href="/static/matrix-theme/AppIcons.svg#logoApple"></use></svg></div>        
			<div class="appLogo" ng-if="itemValue('Zone_1_Input')=='AV1'"><svg viewBox="0 0 440 100"><use xlink:href="/static/matrix-theme/AppIcons.svg#logoPs4"></use></svg></div>            
			<div class="appLogo" ng-if="itemValue('Zone_1_Input')=='AUDIO1'"><svg viewBox="0 0 440 100"><use xlink:href="/static/matrix-theme/AppIcons.svg#netflix"></use></svg></div>
      <div class="appLogo" ng-if="itemValue('Zone_1_Input')=='Spotify'"><svg viewBox="0 0 440 100"><use xlink:href="/static/matrix-theme/AppIcons.svg#spotify"></use></svg></div>
        
			<div class="controlGroup">
			<div class="control" ng-class="{true: 'on'}[itemValue('Zone_1_Input', 'AirPlay')=='AirPlay']" ng-click="sendCmd('Zone_1_Input, 'AirPlay')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/matrixicons.svg#logoApple"></use></svg></div>
			<div class="control" ng-class="{true: 'on'}[itemValue('Zone_1_Input', 'AV1')=='AV1']" ng-click="sendCmd('Zone_1_Input, 'AV1')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#ps4"></use></svg></div>
			<div class="control" ng-class="{true: 'on'}[itemValue('Zone_1_Input', 'AUDIO1')=='AUDIO1']" ng-click="sendCmd('Zone_1_Input, 'AUDIO1')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/matrixicons.svg#logoNetflix"></use></svg></div>
      <div class="control" ng-class="{true: 'on'}[itemValue('Zone_1_Input', 'AV2')=='AV2']" ng-click="sendCmd('Zone_1_Input, 'AV2')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#flat-tv"></use></svg></div>
      <div class="control" ng-class="{true: 'on'}[itemValue('Zone_1_Input', 'Spotify')=='Spotify']" ng-click="sendCmd('Zone_1_Input, 'Spotify')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#spotify"></use></svg></div>
      
		  </div>
		  </div>
    
```javascript
your code goes here

Thank you!

This works

  <div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#flat-tv"></use></svg></div></div>
  <div class="title">Yamaha AVR</div>
  <div class="controls">

    <div class="widget" ng-if="itemValue('Main_Zone_Power')=='OFF'" ng-click="sendCmd('Main_Zone_Power', 'ON')">
      <div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use></svg></div>
      <div class="name">Power {{itemValue('Main_Zone_Power')}}</div>
    </div>
    <div class="widget" ng-if="itemValue('Main_Zone_Power')=='ON'" ng-click="sendCmd('Main_Zone_Power', 'OFF')">
      <div class="icon on" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></div>
      <div class="name">Power {{itemValue('Main_Zone_Power')}}</div>
    </div> 

    <div class="widget" ng-class="{true: 'disabled'}[itemValue('Main_Zone_Power')=='OFF']">
  		<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#flat-tv"></use></svg></div>
  		<div class="name">Input</div>
  		<div class="appLogo" ng-if="itemValue('Zone_1_Input')=='AirPlay'"><svg viewBox="0 0 440 100"><use xlink:href="/static/matrix-theme/AppIcons.svg#logoApple"></use></svg></div>
  		<div class="appLogo" ng-if="itemValue('Zone_1_Input')=='AV1'"><svg viewBox="0 0 440 100"><use xlink:href="/static/matrix-theme/AppIcons.svg#logoPs4"></use></svg></div>
  		<div class="appLogo" ng-if="itemValue('Zone_1_Input')=='AUDIO1'"><svg viewBox="0 0 440 100"><use xlink:href="/static/matrix-theme/AppIcons.svg#netflix"></use></svg></div>
      <div class="appLogo" ng-if="itemValue('Zone_1_Input')=='Spotify'"><svg viewBox="0 0 440 100"><use xlink:href="/static/matrix-theme/AppIcons.svg#spotify"></use></svg></div>

  		<div class="controlGroup">
  		  <div class="control" ng-class="{true: 'on'}[itemValue('Zone_1_Input', 'AirPlay')=='AirPlay']" ng-click="sendCmd('Zone_1_Input, 'AirPlay')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/matrixicons.svg#logoApple"></use></svg></div>
  		  <div class="control" ng-class="{true: 'on'}[itemValue('Zone_1_Input', 'AV1')=='AV1']" ng-click="sendCmd('Zone_1_Input, 'AV1')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#ps4"></use></svg></div>
  		  <div class="control" ng-class="{true: 'on'}[itemValue('Zone_1_Input', 'AUDIO1')=='AUDIO1']" ng-click="sendCmd('Zone_1_Input, 'AUDIO1')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/matrixicons.svg#logoNetflix"></use></svg></div>
        <div class="control" ng-class="{true: 'on'}[itemValue('Zone_1_Input', 'AV2')=='AV2']" ng-click="sendCmd('Zone_1_Input, 'AV2')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#flat-tv"></use></svg></div>
        <div class="control" ng-class="{true: 'on'}[itemValue('Zone_1_Input', 'Spotify')=='Spotify']" ng-click="sendCmd('Zone_1_Input, 'Spotify')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#spotify"></use></svg></div>
  	  </div>
  	</div>
  </div>

hc_008

It displays, yes, but the input buttons do not trigger the AVR inputs :frowning:

<div class="name">Input {{itemValue('Zone_1_Input')}}</div>

Sorry Harry, I’m not sure I’m following. I need to know why things are broken and where - a piece of code isn’t really helpful for me working out whats wrong and why

thank you though.