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

[metaxa]

Liebe Mitstreiter und -innen!

Ich möchte den Timestamp laufend überprüfen. Sollte die letzte Aktualisierung länger als 30 Minuten aus sein, dann stelle die Farbe des Feldes auf rote Schrift.

Die Überprüfung mit einem Skript schaffe ich sicher um einen DP zu befüllen. Sagen wir nach 15min wird die Schrift gelb, nach 30 Minuten rot, oder so.....

Aber mit welchen Widget kann ich die Textfarbe dynamich ändern?

Schriftfarbe schaffe ich, aber woher den Wert??

Kann mir da bitte jemand helfen? tia, mxa

[OliverIO]

@metaxa

das bekommst du mit binding hin, ist aber ein klein wenig tricky.
leider wird die zeit von vis nicht kontinuierlich verifiziert.
widgets werden immer nur dann angepasst wenn sich ein state-value ändert.
daher kannst du nun nicht das eigentlich richtige attrubut lc eines states dafür nehmen.

aber mit folgender lösung kommst du da ganz gut hin.

als erstes legst du im css reiter die folgende animation an

.greentored div[data-oid] {
  color: green;
  animation: textToRed 0s linear forwards;
  animation-delay: 10s;
}

@keyframes textToRed {
  from { color: green; }
  to   { color: red; }
}

die sorgt dafür, das jeder wert der mit der css klasse greentored versehen ist, ändert seine Farbe in der angegebenen Zeit (hier sind es 10 Sekunden.
Die CSS-Eigenschaft animation-delay kennt ale einheit nur ms und s, daher musst du deine 30 Minuten in Sekunden angeben.

Als nächstes gehst du in dein widget (das css ist nun für die Html-Struktur des widget basic- ValueList html style angepasst, andere widget typen muss man das dann ändern.
Im Feld General - CSS Class trägst du nun folgenden Binding ein
Der Datnpunkt muss dem Datenpunkt deines widgets entsprechen

{val:0_userdata.0.val2;"greentored"}

Da eine Wertänderung die CSS-Animation nicht neu startet, muss die CSS-Klasse erneut geschrieben werden (auch wenn sie gleich lautet), das startet dann die Animation neu.

Die Animation ist so definiert:
Ausgangsfarbe ist grün (color: green;)
Warte 10 Sekunden (animation-delay: 10s;)
Führe dann die Animation textToRed aus.
In dieser ist dann definiert, das die Farbe von green nach red geändert wird.

[metaxa]

@OliverIO WOW, da bin ich jetzt echt perplex!

Bitte gib mir paar Tage Zeit zum Verstehen und den Versuch deine wahnsinnig aufwendige Lösungsbeschreibung umzusetzen!

(In meinen nächtlichen Überlegungen kam ich schon zum Schluss es mit sich überlagernden zwei Feldern in verschiedenen Schriftfarben, Sichtbarkeit und der Steuerung über ein Script zu lösen.)

Danke, mxa

[OliverIO]

@metaxa

Die Lösung ist eigentlich einfach.
Ich hab nur viel geschrieben :)

[metaxa]

@OliverIO witzig, ich habe - glaube ich - deine Logik verstanden, mache aber scheinbar mehrere Fehler in der Umsetzung:

So sieht es jetzt aus:

copy+paste, sollten keine Typos sein

Im Widget habe ich den Temperatursensor in der CSS Klasse und bei Objekt ID eingetragen.

Leider bleibt in der Runtime das Feld leer.

Kannst du mir bitte nochmals behilflich sein?
Danke, mxa

[OliverIO]

@metaxa

sieht eigentlich gut aus
so sieht es bei mir aus

Für das video habe ich die Zeit auf 2 Sekunden verkürzt
22a11ef9-b07e-4b06-aef7-021c3c2e9195-20260117-1324-00.7450640.mp4

mit den developer tools des browsers kann man sehen das die css klasse auch korrekt eingetragen ist

Der Wert sollte immer angezeigt werden, da das css das gar nicht beeinflusst

[metaxa]

@OliverIO Kaum aktualisiert man auch den Runtimetab, funktioniert es auch (Smilie der sich auf den Kopf haut)!
Danke für deine geniale Lösung!

Nur mein ursprünglich angedachter Wunsch ist damit leider nicht umgesetzt, ich wollte ja die Farbe der Anzeige des letzten Zeitstempels ändern. Habe mich wahrscheinlich ungenau in der Fragestellung ausgedrückt.

Habe mich jetzt länger mit "Binding" beschäftigt, sehr hilfreich ist diese Seite https://www.machs-smart.de/iobroker-bindings-farben-berechnungen-abfragen/.

Mit einem kleinen Script und einem HilfsDP setze ich die gewüschte Zeit und Farbe:

In VIS dann im Widget

unter CSS Font & Text / Color wird das Binding zum HilfsDP eingetragen:

Lieben Dank nochmals an @oliverio, deine Lösung ist viel eleganter und kommt ohne extra DP und ohne Script aus.
mxa