[SOLVED] HABPANEL: Self-written button stopped working after upgrade to 2.3?

Apps & Services HABPanel
1

I have a power button as follows:

<div class="icon backdrop" ng-class="{backdrop: backdrop, center: center, inline: inline}" style="width: 75%; height: 75%; margin: auto">
  <img height="100%" ng-class="{ colorize: colorize }" class="icon-tile-backdrop ng-scope colorize" ng-src="/static/icons/pipes.svg" src="/static/icons/pipes.svg"></img>
</div>
  
<div class="widget" ng-if="itemValue('Pumpe_Warmwasser')=='OFF'" ng-click="sendCmd('Pumpe_Warmwasser', 'ON')">
    <div class="power-off" ><svg width="36" height="36" viewBox="0 0 16 16"><use xlink:href="/static/icons/001-power-off.svg#Capa_1"></use></svg></div>
    <div class="data_text">AUS</div>
</div>
<div class="widget" ng-if="itemValue('Pumpe_Warmwasser')=='ON'" ng-click="sendCmd('Pumpe_Warmwasser', 'OFF')">
    <div class="power-on" ><svg width="36" height="36" viewBox="0 0 16 16"><use xlink:href="/static/icons/001-power-on.svg#Capa_1"></use></svg></div>
    <div class="data_text">AN</div>
</div>

I moved my environment to a different server some weeks ago. A couple of days ago I updated the system to 2.3. Thus, I’m not sure if the mirgation caused to the new server caused the button to sop working, or the upgrade to 2.3.
I did not change any line of code, so I’m wondering what is wrong.
Anyone had a similar experience already?

2

Can’t say much about the code-lines, however did you copy the icons to the new server?

3

The lines are from the new server. I actually re-imported them again. No change though.

4

Ok, found my issue.
The backdrop image needs to be within the button definition. That works.

<div ng-if="itemValue('Pumpe_Warmwasser')=='OFF'" >
	<button class="btn bnt-lg"
        style="background: transparent; font-size: 12px"
        ng-click="sendCmd('Pumpe_Warmwasser', 'ON')">
  	  <div class="power-off" ><svg width="32" height="32" viewBox="0 0 16 16"><use xlink:href="/static/icons/001-power-on.svg#Capa_1"></use></svg></div>
    	<div class="data_text">AN</div>
    	<div class="icon backdrop" ng-class="{backdrop: backdrop, center: center, inline: inline}" style="width: 100%; height: 100%; margin: auto">
  			<img height="100%" ng-class="{ colorize: colorize }" class="icon-tile-backdrop ng-scope colorize" ng-src="/static/icons/pipes.svg" src="/static/icons/pipes.svg"></img>
			</div>
	</button>
</div>

<div ng-if="itemValue('Pumpe_Warmwasser')=='ON'" >
	<button class="btn btn-lg"
        style="background: transparent; font-size: 12px"
        ng-click="sendCmd('Pumpe_Warmwasser', 'OFF')">
  	  <div class="power-off" ><svg width="32" height="32" viewBox="0 0 16 16"><use xlink:href="/static/icons/001-power-off.svg#Capa_1"></use></svg></div>
    	<div class="data_text">AUS</div>
      <div class="icon backdrop" ng-class="{backdrop: backdrop, center: center, inline: inline}" style="width: 100%; height: 100%; margin: auto">
  			<img height="100%" ng-class="{ colorize: colorize }" class="icon-tile-backdrop ng-scope colorize" ng-src="/static/icons/pipes.svg" src="/static/icons/pipes.svg"></img>
			</div>
	</button>
</div>