Habpanel Widget Hintergrundfarbe

[ollis112]

Hallo liebe Gemeinde,

ich habe da mal wieder eine Frage.

Bei meinen Widgets für die Türen habe ich je nach Zustand (OPEN/CLOSED) eine andere Hintergrundfarbe.
z.Beispiel

Code: Alles auswählen

 ng-style="{
      'background-color': itemValue('item')=='ON' ? 'orange' : '#26FF33'
     }"

Ich möchte aber bei einem anderen Item, welches 5 verschiedene Zustände (String) zeigt,
auch 5 verschiedene HIntergrundfarben haben.

Kann mir bitte jemand erklären, ob und wie ich das machen kann.

Vielen Dank schon mal.

GRuß
Oliver

[Ralf.Kruppa]

Mich würde intesieren wie du das mit zwei Farben hinbekpmmen hast! Ich verzweifel da seit Tagen dran. Ich möchte es wie bei einer Schaltfläche nur das ich mehrere Werte darstellen möchte. Bitte mal den kompletten code. Danke

[ollis112]

Habe das so gelöst, und bekomme sogar noch den Status des Thermostates in % angezeigt

Code: Alles auswählen

<style>
  .green { background-color: green !important }
  .red { background-color: red }
  .blue  { background-color: blue }
  
</style>
<div class="red" ng-class="{green: itemValue('Termostat_Ess')=='0', 
                              red: itemValue('Termostat_Ess')>='1', 
                             blue: itemValue('Termostat_Ess')=='15'}"
	
   
   
          class="template-container"
     style="top:0;bottom:0;left:0;right:0;position:absolute">
  <div class="template-contents"> <div style="color: black">Esszimmer
    <widget-icon iconset="'eclipse-smarthome-classic'" icon="'radiator'"
     state="itemValue('Status_HZ_Ess')" size="50" center="true" />
  </div>
    <div  style="font-size:16pt;color:black" >
  {{itemValue('Status_HZ_Ess')}} %
</div>

Hoffe das hilft dir

Gruß
Oliver