Seite 1 von 1
Widgets Background Farbe
Verfasst: 3. Aug 2022 11:24
von 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?
Re: Widgets Background Farbe
Verfasst: 3. Aug 2022 23:41
von 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.
Re: Widgets Background Farbe
Verfasst: 10. Aug 2022 12:39
von manes
Prima und Danke,
das klappt so.
Re: Widgets Background Farbe
Verfasst: 10. Aug 2022 12:52
von 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)
Re: Widgets Background Farbe
Verfasst: 10. Aug 2022 13:00
von 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
Re: Widgets Background Farbe
Verfasst: 10. Aug 2022 13:34
von 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.
Re: Widgets Background Farbe
Verfasst: 10. Aug 2022 14:40
von 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.....
Re: Widgets Background Farbe
Verfasst: 18. Aug 2022 15:40
von 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:
Re: Widgets Background Farbe
Verfasst: 19. Aug 2022 10:26
von SRX
Das Widget sieht gut aus, würdest Du das zur Verfügung stellen wollen?