Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[Momo1982]

Servus zam,
da die SuFu leider nicht zum entsprechenden Ergebnis geführt hat, möchte ich um euer Fachwissen bitten.

Ich habe aktuell die Herausforderung, dass ich die Farbe eines Icon anhand eines Wertes ändern möchte. Dieser Bereich soll in 3 Teile eingeteilt werden: Wert <= 5 = Farbe 1, Wert >= 25 = Farbe3, alles dazwischen Farbe2.
Für 2 Optionen ist es ja nicht weiter dramatisch, anbei der Code dafür: {b:Datenpunkt:MaxTemp;b>="25" ? "Farbe3" : "Farbe2"}
Meine Gedanke hier ist der folgende: {b:Datenpunkt:MaxTemp;b>="25" ? "#ffe312" : b<="5" ? "#39d6db" : "#a00d0d"} - funktioniert allerdings nicht. Kann hier jemand weiterhelfen?
Als Button wird hier der Typ "Button State" genutzt.

Danke schon mal im Voraus!

Pfiats eich

[Codierknecht]

@momo1982
Ich mache etwas ähnliches mit einem HTML-Widget und löse das mit CSS-Klassen.

<div class="machineIndicator">
  <div title="Geschirrspüler" class='{onOff:sonoff.0.NOUS_18281F.POWER;onOff=="true"?"machineOn":"machineOff"} {power:sonoff.0.NOUS_18281F.ENERGY_Power;(parseFloat(power) > 2)?"machineRed":"machineGreen"}' />
  <div title="Waschmaschine" class='{onOff:sonoff.0.NOUS_1821B4.POWER;onOff=="true"?"machineOn":"machineOff"} {power:sonoff.0.NOUS_1821B4.ENERGY_Power;(parseFloat(power) > 2)?"machineRed":"machineGreen"}' />
  <div title="Trockner" class='{onOff:sonoff.0.NOUS_C2FB6D.POWER;onOff=="true"?"machineOn":"machineOff"} {power:sonoff.0.NOUS_C2FB6D.ENERGY_Power;(parseFloat(power) > 2)?"machineRed":"machineGreen"}' />
</div>

.machineIndicator div {
    height: 10px;
    width: 10px;
    float: left;
    margin-right: 2px;
    border-radius: 5px;
    display: block;
}
.machineOff {
    background-color: gray;    
}
.machineOn.machineRed {
    background-color: orange;
}
.machineOn.machineGreen {
    background-color: forestgreen;    
}

Das Ganze dient als Indikator für online/offline/Betrieb einiger Geräte.

[Momo1982]

@codierknecht Das schaut erstmal ganz gut aus. Leider sind meine Kenntnisse in Sachen Programmierung eher rudimentär. Ich wäre daher sehr froh, wenn man dies über meinen o.g. Ansatz lösen könnte. :man-shrugging:

[Codierknecht]

@momo1982
Das hat mit "Programmierung" nicht wirklich zu tun.
Ist lediglich ein Stück HTML und etwas CSS.

Wozu ein Button?
Kann man den anklicken? Macht der dann was?
Wenn es nur um "Anzeigen" geht, ist ein Button an der Ecke das falsche Steuerelement.

[Homoran]

@codierknecht sagte in Material Design Widget: Farbe ändern eines Icons durch Wert:

Wenn es nur um "Anzeigen" geht, ist ein Button an der Ecke das falsche Steuerelement.

dafür gibt es bei Buttons aber oft die Option "nur lesen" damit sie als Anzeige nutzbar sind.

Regen anschalten kann ich damit auch nicht

[Codierknecht]

@homoran sagte in Material Design Widget: Farbe ändern eines Icons durch Wert:

dafür gibt es bei Buttons aber oft die Option "nur lesen" damit sie als Anzeige nutzbar sind.

Das widerspricht aber dann allen mir bekannten Regeln zum Thema UI/UX.
Ein Benutzer der einen Button sieht sollte davon ausgehen können, dass der auch klickbar ist und eine Aktion ausführt. Das ist ja Sinn und Zweck eines Button.
Ich jedenfalls würde für eine reine Anzeigefunktion ein anderes Design wählen.
Aber wer bin schon ich? ... :innocent: :joy:

Regen anschalten kann ich damit auch nicht

Du nimmst mir jede Illusion :anguished:

[Momo1982]

@codierknecht said in Material Design Widget: Farbe ändern eines Icons durch Wert:

Wozu ein Button?

Der Button ist als "Text" formatiert und kann nicht angeklickt werden und ist auch ned als ein solcher zu erkennen. Ist einfach nur ein Anzeigeobjekt.

Es gibt also aktuell keine Möglichkeit, mein Vorhaben wie o.g. umzusetzen? Das wäre natürlich schade. Dann müsste ich es doch mit CSS versuchen. Was auch nicht zu meinem daily business gehört. :joy: