openHAB / HABPanel / Kachelfarbe nach Schaltzustand mit Button

[Frigoblue]

Hallo zusammen,

wer schon immer eine Möglichkeit gesucht hat, die Kachelhintergrundfarbe bei einem bestimmten Zustand eines Schalters zu verändern da hab ich eine 30 Zeilige Lösung. Es waren Schnipsel, die ich zusammengetragen habe. Es ist für einen Heizkörperthermostat mit vier Modus. Kann verändert werden. Den Code einfach in das Template-Widget einfügen und anpassen.

Code: Alles auswählen

<style>
  .green { background-color: green !important}
  .red { background-color: red }
  .blue  { background-color: blue }
  .black  { background-color: black }
</style>

<div class="blue" ng-class="{green: itemValue('Flur_Heizung_Modus_des_Heizkorperreglers')=='ECO', 
                             red:   itemValue('Flur_Heizung_Modus_des_Heizkorperreglers')=='BOOST', 
                             blue: itemValue('Flur_Heizung_Modus_des_Heizkorperreglers')=='COMFORT',
                             black: itemValue('Flur_Heizung_Modus_des_Heizkorperreglers')=='OFF'}"
     class="template-container"
     style="top:0;bottom:0;left:0;right:0;position:absolute">
</div>

<div>
            <div class="btn-group">
              <button type="button" ng-class="(itemValue('Flur_Heizung_Modus_des_Heizkorperreglers') == 'ECO') ? 'btn btn-success active':'btn btn-success'" ng-click="sendCmd('Flur_Heizung_Modus_des_Heizkorperreglers', 'ECO')">Eco</button>
            </div>
            <div class="btn-group">
              <button type="button" ng-class="(itemValue('Flur_Heizung_Modus_des_Heizkorperreglers') == 'COMFORT') ? 'btn btn-primary active':'btn btn-primary'" ng-click="sendCmd('Flur_Heizung_Modus_des_Heizkorperreglers', 'COMFORT')">Comfort</button>
            </div>
            <div class="btn-group">
              <button type="button" ng-class="(itemValue('Flur_Heizung_Modus_des_Heizkorperreglers') == 'BOOST') ? 'btn btn-danger active':'btn btn-danger'" ng-click="sendCmd('Flur_Heizung_Modus_des_Heizkorperreglers', 'BOOST')">Boost</button>
            </div>
            <div class="btn-group">
              <button type="button" ng-class="(itemValue('Flur_Heizung_Modus_des_Heizkorperreglers') == 'OFF') ? 'btn btn-secondary active':'btn btn-secondary'" ng-click="sendCmd('Flur_Heizung_Modus_des_Heizkorperreglers', 'OFF')">Aus</button>
            </div>
</div>

Vielleicht hilft es jemanden.

Gruß Uwe