Seite 1 von 1

Habpanel Widget Hintergrundfarbe

Verfasst: 11. Jan 2019 16:06
von 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

Re: Habpanel Widget Hintergrundfarbe

Verfasst: 28. Apr 2019 19:43
von 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

Re: Habpanel Widget Hintergrundfarbe

Verfasst: 28. Apr 2019 19:58
von 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