Widgets Background Farbe

[manes]

Hi,
ich habe in einem Widget eine Abfrage für Background

Code: Alles auswählen

style:
    background: '=(items.GenericMQTTThing_esp7CEB52Feuchtigkeit.state >= "60 %") ? "red" : "green"'

hier sind jetzt nur 2 farben möglich. Gibt es einen Weg evtl. auch mehr Farben darzustellen? Also bis x % die Farbe, bei x bis x die und über x dann die?

[peter-pan]

Das sollte gehen:

Code: Alles auswählen

style:
    background: '=(items.GenericMQTTThing_esp7CEB52Feuchtigkeit.state >= "60 %") ? "red" : (items.GenericMQTTThing_esp7CEB52Feuchtigkeit.state >= "40 %")  ? "green" : (items.GenericMQTTThing_esp7CEB52Feuchtigkeit.state >= "20 %") ? "blue" : "purple" '

Ich hab's nicht getestet.

[manes]

Prima und Danke,
das klappt so.

[peter-pan]

Gerne. Du musst halt nur aufpassen, dass beim Vergleichen die Reihenfolge eingehalten wird. ( > 80, > 60, > 40....bzw. < 40, < 60, < 80) und ob das Item mit einer UoM (z.B. %) behaftet ist. Dann wäre evtl. noch eine zusätzl. Funktion/Umwandlung möglich/nötig (parseFloat bzw. parseInteger)

[manes]

jetzt würde mich nur noch interessieren, ob und wie man den Text farblich anpassen könnte. Ähnlich wir den Hintergrund. Ich habe eine Kombi aus Temperatur und Luftfeuchtigkeit in der Widgetanzeige. Ich würde gerne den Text (muß nicht alles sein. Wäre schön, wenn bestimmte Textabschnitte genommen werden könnte) andersfarbig machen, abhängig von der Temperatur. z.B. Header o.ä. Leider fand ich nichts zu Textfarben.

Code: Alles auswählen

uid: sensoren_bad
tags: []
props:
  parameters:
    - label: Headline
      name: headline
      required: false
      type: TEXT
    - label: Headline Color
      name: headlinecolor
      required: false
  parameterGroups: []
timestamp: Aug 10, 2022, 12:46:53 PM
component: oh-label-cell
config:
  action: group
  actionGroupPopupItem: Dachgeschoss
  expandable: false
  footer: = " Luftfeuchtigkeit " + items.GenericMQTTThing_esp7C627AFeuchtigkeitBadezimmer.state + " %"
  header: Badezimmer
  icon: f7:thermometer
  item: GenericMQTTThing_esp7C627ATemperaturBadezimmer
  style:
    background: '=(items.GenericMQTTThing_esp7C627AFeuchtigkeitBadezimmer.state > "70 %") ? "red" : (items.GenericMQTTThing_esp7C627AFeuchtigkeitBadezimmer.state > "50 %") ? "green" : (items.GenericMQTTThing_esp7C627AFeuchtigkeitBadezimmer.state > "30 %") ? "yellow" : "purple"'
  subtitle: Temperatur
  trendItem: GenericMQTTThing_esp7C627ATemperaturBadezimmer

[peter-pan]

..hier mal zwei Standard-Widgets, mit etwas "zusätzlichem" Code, ohne gleich ein Custom Widget zu erstellen.

Yaml-Code -Beisp.1:

Code: Alles auswählen

component: oh-label-cell
config:
  action: analyzer
  actionAnalyzerChartType: month
  actionAnalyzerCoordSystem: time
  actionAnalyzerItems:
    - esp_32v3_02_smoke1
  color: green
  icon: oh:siren
  item: esp_32v3_02_smoke1
  on: "true"
  stateStyle:
    color: red
  style:
    background: blue
  title: Co² Werte Büro
  trendGradient:
    - green
  trendItem: esp_32v3_02_smoke1

Yaml-Code Beisp.2:

Code: Alles auswählen

component: oh-label-cell
config:
  action: analyzer
  actionAnalyzerChartType: month
  actionAnalyzerCoordSystem: time
  actionAnalyzerItems:
    - HMIPAussensensorNord1ACTUALTEMPERATURE
    - radiator_valve_01_Temp
  footer: "='Batterie: '+items.HMIPAussensensorNord0LOWBAT.displayState"
  icon: oh:humidity
  item: HMIPAussensensorNord1ACTUALTEMPERATURE
  label: "='Temperatur: '+items.HMIPAussensensorNord1ACTUALTEMPERATURE.state + '
    Feuchte.:  ' + items.HMIPAussensensorNord1HUMIDITY.state"
  stateStyle:
    color: blue
    fontSize: 23px
  title: Aussensensor Nord
  trendGradient:
    - red
  trendItem: HMIPAussensensorNord1ACTUALTEMPERATURE

Das sieht dann so aus:

cell.jpg

Das ganze geht dann mit dem Parameter/Befehl "stateStyle", den du mit "Edit Yaml" hinzufügen kannst.

[manes]

Danke, auch das mit dem stateStyle klappt prima. Mußte zwar erst ein wenig probieren, aber jetzt ist es ok. Auch mit den verschiedenen Farben für verschiedene Wert.
Das macht immer mehr Spass.....

[lukima61]

Hallo Community,
ich habe ein ähnliche Problem, bei dem ich nicht weiterkomme. Ich habe ein Widget gebaut, in dem ich die oh-list-item Komponente einsetze. Die Textfarbe definiere ich über color: white, das klappt auch für title und subtitle, aber leider nicht für footer. Hat das schon mal jemand geschafft oder kann man die Footertextfarbe nicht ändern?

oh-forum1.png

UPDATE
Habe es gefunden, das Zauberwort heißt: --f7-list-item-footer-text-color:

[SRX]

Das Widget sieht gut aus, würdest Du das zur Verfügung stellen wollen?