Widget weiter abändern

[Pepe1907]

Hallo ihr Lieben,

bin seit einigen Tagen daran mein HabPanel mal einzurichten.
Da ich kein Widget gefunden habe, welches meinen Vorstellungen entspricht, für die Heizung habe ich angefangen ein ähnliches umzuschreiben.

Code: Alles auswählen

<div style="background-image: url('https://image.flaticon.com/icons/png/512/47/47556.png'); background-size: 100% 100%;">
<p style="font-size: 36pt">Wohnzimmer</p>
<div class="row">
  <div class="col-xs-4"><span><widget-icon iconset="'smarthome-set'" icon="'temperature'" /></span>Ist Temperatur</div>
  <div class="col-xs-4"><span><widget-icon iconset="'smarthome-set'" icon="'drop'" /></span>Luftfeuchtigkeit</div>
  <div class="col-xs-4"><span><widget-icon iconset="'smarthome-set'" icon="'thermostat'" /></span>Soll Temperatur</div>
</div>

<div class="row">
  <div class="col-xs-4"><span style="color: red; font-size: 28pt">{{itemValue('wohn_temp')}}°C</span></div>
  <div class="col-xs-4"><span style="color: cyan; font-size: 28pt">{{itemValue('wohn_feucht')}}%</span></div>
  <div class="col-xs-4"><span style="color: green; font-size: 28pt">{{itemValue('wohn_set_temp')}}°C</span></div>
</div>
<table class="table">
<tr>
  <td><p align="left" style="font-size: 14pt">Soll Temperatur ändern:</p></td>
	<td><button style="color: white; background: grey;font-size: 14pt" ng-click="sendCmd('wohn_set_temp', +itemValue('wohn_set_temp')-1)"-1>{{+itemValue('wohn_set_temp') - 1}}</button></td>
  <td><button align="right" style="color: white; background: grey;font-size: 14pt" ng-click)"sendCmd('wohn_set_temp', +itemValue('wohn_set_temp')+1)"+1>{{+itemValue('wohn_set_temp') + 1}}</button></td>
</tr>
  <tr>
  <td><p align="left" style="font-size: 14pt">Heizstatus:</p></td>
  <td><p align="right" style="color: grey; font-size: 14pt">{{itemValue('wohn_fire')}}</p></td></tr>
</table>
</div>

Jetzt habe ich ein Problem:
Ich würde für den Heizstatus gerne ein dynamisches Bild nehmen welches auf den Zustand reagiert. Eine Flamme die beim Zustand on rot ist und bei off ergraut.



Meine Idee ein JavaScript welches auf dem Status reagiert.

Code: Alles auswählen

 <tr>
  <td><a style="font-size: 14pt">Heizstatus:</a></td>
  <td><span style="color: grey; font-size: 14pt">
    <script>
        const heizt = ON;
        if ({{itemValue('bad_fire')}} == ON) {
                <p> Klappt</p>}
        else { 
        ({{itemValue('bad_fire')}})
        }

    </script></span></td></tr>
</table>

Leider klappt es nicht.
Ich hoffe euch konnte euch Profis mit meiner wahrscheinlich richtig dummen Idee erheitern.

[Pepe1907]

Code: Alles auswählen

<div style="background-image: url('https://image.flaticon.com/icons/png/512/47/47556.png'); background-size: 100% 100%;">
<p style="font-size: 36pt">Wohnzimmer</p>
<div class="row">
  <div class="col-xs-4"><span><widget-icon iconset="'smarthome-set'" icon="'temperature'" /></span>Ist Temperatur</div>
  <div class="col-xs-4"><span><widget-icon iconset="'smarthome-set'" icon="'drop'" /></span>Luftfeuchtigkeit</div>
  <div class="col-xs-4"><span><widget-icon iconset="'smarthome-set'" icon="'thermostat'" /></span>Soll Temperatur</div>
</div>

<div class="row">
  <div class="col-xs-4"><span style="color: red; font-size: 28pt">{{itemValue('wohn_temp')}}°C</span></div>
  <div class="col-xs-4"><span style="color: cyan; font-size: 28pt">{{itemValue('wohn_feucht')}}%</span></div>
  <div class="col-xs-4"><span style="color: green; font-size: 28pt">{{itemValue('wohn_set_temp')}}°C</span>
   
  </div>
</div>
<table class="table">
<tr>
  <td><p align="left" style="font-size: 14pt">Soll Temperatur ändern:</p></td>
	<td><button style="color: white; background: grey;font-size: 14pt" ng-click="sendCmd('wohn_set_temp', +itemValue('wohn_set_temp')-0.5)"-1>{{+itemValue('wohn_set_temp') - 0.5}}</button></td>
  <td><button align="right" style="color: white; background: grey;font-size: 14pt" ng-click="sendCmd('wohn_set_temp', +itemValue('wohn_set_temp')+0.5)"+1>{{+itemValue('wohn_set_temp') + 0.5}}</button></td>
</tr>
  <tr>
  <td><p align="left" style="font-size: 14pt">Heizstatus:</p></td>
  <td></td>
  <td><div ng-if="itemValue('wohn_fire')=='ON'">
  It's on!
    <img src="/static/on.png"/>
</div>

<div ng-if="itemValue('wohn_fire')=='OFF'">
  It's off!
    <img src="/static/off.png"/>
</div></td></tr>
</table>
</div>

Kann gerne genommen werden