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

[OliverIO]

@bytegetter

den timestamp und den lastchanged zeiten können über binding abgefragt werden

hier ein beispiel, am besten ersteinmal in einem html widget testen

{0_userdata.0.test.ts}<br>
{0_userdata.0.test.lc}<br>
{lc:0_userdata.0.test.lc;(new Date().getTime()-lc)>1000*60*60*24*5?"red":"green"}<br>

wenn alles funktioniert die letzte zeile ohne das <br> dann in die font color einstellung des widgets kopieren.

die zeiten in javascript werden in millisekunden notiert. im beispiel habe ich dann mal 5 tage genommen.

[Homoran]

@oliverio sagte in Nicht aktuelle Werte andersfarbig markieren:

lastchanged zeiten

@bytegetter logged zwar nur die geänderten Werte in SQL.
Deshalb ist der SQL DP nicht brauchbar um den letzten Kontakt zu prüfen.

Der Timestamp des Original DPs des Sensors ist da aussagekräftiger, insbesondere wenn der Wert längere Zeit unverändert bleibt.

[OliverIO]

@homoran
ich muss gestehen, dass ich den unterschied gar nicht kenne, da ich es nirgends selbst verwende.

dann einfach lc gegen ts austauschen, aber die grundlogik sollte klar sein.
als ergänzung auch nochmal was zum ternären operator von javascript, da der doch für anfänger etwas kryptisch ist.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator

einfach gesehen ist es einfach ein if this then that
also

(prüfung) ? (rückgabe wenn prüfung wahr) : (rückgabe wenn prüfung falsch)

wenn sein gehirn zur explosion bringen möchte kann man das auch unendlich verschachteln (aber ich glaube da gibt es wohl schon eine grenze von 255, bin mir aber nicht sicher)

(prüfung1) : (rückgabe1 wenn wahr) : ((prüfung2) ? (rückgabe2 wenn wahr) : (rückgabe 2 wenn falsch))

für die beliebten 3 werte abfragen hier im forum geht das noch, bei mehr würde ich dann lieber eine javascript funktion in das binding einsetzen. da kann man das schön ausführlich und strukturiert schreiben.

[Homoran]

@oliverio sagte in Nicht aktuelle Werte andersfarbig markieren:

ich muss gestehen, dass ich den unterschied gar nicht kenne

Das ist ganz einfach:
ts ist Timestamp der letzten Aktualisierung
lc ist Timestamp der letzten Änderung des Wertes (ich glaube in js wäre das ne)

[OliverIO]

@homoran

ok ts wird immer geändert, lc nur dann wenn es tatsächlich einen anderen wert enthält

[OliverIO]

hier mal noch die ergänzung mit javascript und angepasstem ts

{0_userdata.0.test.ts}<br>
{0_userdata.0.test.lc}<br>
{ts:0_userdata.0.test.ts;(new Date().getTime()-ts)>1000*60*60*24*5?"red":"green"}<br>
{ts:0_userdata.0.test.ts;testfunktion(ts)}<br>

hier die testfunktion für den javascript reiter

function testfunktion(ts) {
    let now = new Date().getTime();
    let diff=1000*60*60*24*5;
    if (now-ts>diff) {
        return "red";
    } else {
        return "green";
    }
}

[bytegetter]

@oliverio Wie muss ich das denn genau machen? Kommt das Javascript in VIS?

[OliverIO]

@bytegetter

hier die testfunktion für den javascript reiter

Hm hatte ich eigentlich geschrieben.
Ich mag es wenn man meine Texte sorgfältig liest

Ansonsten, was hast du probiert und welche Probleme sind entstanden?

[iobroker2001]

So eine Funktion hatte ich schon länger gesucht, aber bei mir schaltet weder das direkte Binding noch beim Umweg über die Funktion die Farbe zurück.
Sprich: Die Farbe ändert sich nur ein einziges Mal und dann nicht nach den 5000 ms zurück. Auch nicht durch einen Browserrefresh. Wie kann man einen erneuten Aufruf hinbekommen?
Ich möchte - wahrscheinlich im Gegensatz zum Threadersteller - bei jedem Update für ca. 5 s eine andere Farbe des Textes erreichen.

Im Widget steht bei CSS Font & Color dies hier:

{ts:hm-rpc.0.LEQ0098583.1.TEMPERATURE.ts;testfunktion(ts)}

Und bei den Scripten dies hier:

function testfunktion(ts) {
        let now = new Date().getTime();
            let diff=1000*5;
                if (now-ts>diff) {
                        return "red";
                            } else {
                                    return "green";
                                        }
        }

Der Widget-Typ ist Basic Number, VIS2.

[OliverIO]

@iobroker2001
die funktion wird immer nur dann ausgeführt, wenn das binding ausgeführt wird und das nur dann wenn sich ein wert ändert.

ok, dann sogar noch einfacher anhand eines html widgets und ohne so eine funktion

im css adapter trägst du das hier ein

.text-anim  {
  color: green;
  animation: toRed 5s forwards;
}
@keyframes toRed {
  0% {
    color: green;
  }
  /* diesen kommentarblock entfernen wenn du hartes umschalten haben willst
  99.999% {
    color: green;
  } 
*/
  100% {
    color: red;
  }
}

in einem html widget das hier

<span class="text-anim">
  {hm-rpc.0.LEQ0098583.1.TEMPERATURE}
</span>

das sorgt dafür das bei änderung die animation ausgeführt wird.
mit dem kommentarblock um den 99% wert, wird die animation fließend von grün nach rot berechnet. wenn du die kommentarzeichen entfernst, dann schaltet das schlagartig nach 5 sekunden um
du kannst bsw den mittleren wert auch erst bspw bei 60% setzen, dann bleibt die farbe 3 sekunden lang grün und dann tritt der verlauf nach rot ein. ds kommt daraf an wie oft sich der wert tatsächlich ändert.

wenn du ein anderes widget verwendest, muss man evtl das css anpassen, da das html eines anderen widgets anders aufgebaut ist

[iobroker2001]

@oliverio Vielen Dank!
Funktioniert mit einem HTML-Widget.

Jetzt muss ich "nur noch" herausfinden, wie das CSS für ein Basic-Number-Widget aussehen muss...:wink:

Dabei ist mir ein Fehler im VIS2-Editor aufgefallen, oder ich habe irgendetwas falsch bedient:
Im Reiter "CSS" konnte ich Deine ".text-anim"-CSS-Definition einbauen, aber als ich später noch mal daran eine Änderung machen wollte, ist die CSS-Seite komplett leer. Ist der Code irgendwo anders hinkopiert worden?

[OliverIO]

@iobroker2001

Schau dir mal den drop down an.

In vis 1 war noch das Problem das beim öffnen der gesamte Inhalt ausgewählt ist und man durch eine Eingabe leicht alles löscht.

In vis2 ist das glaube ich nicht so .
Wird auch nix kopiert

[iobroker2001]

@oliverio Da war ich wohl etwas blind, vielen Dank!
Musste manuell auf "Alle Projekte" umgestellt werden.
:+1: :+1: :+1:

[OliverIO]

@iobroker2001 sagte in Nicht aktuelle Werte andersfarbig markieren:

Jetzt muss ich "nur noch" herausfinden, wie das CSS für ein Basic-Number-Widget aussehen muss...

schlechte Nachrichten.
Ich habe es nicht hinbekommen.
Problem ist wahrscheinlich (habe da keine richtige Dokumentation gefunden):

• zum Aktualisieren wird canJS verwendet. canJS manipuliert direkt die Textnode im DOM mittels https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue geändert.
  Diese Änderung scheint wohl kein neues Rendern des eigentlichen HTML-Elements auszulösen, was dann auch dazu führt das die Animation nicht erneut ausgeführt wird. Aus Sicht der Effizienz super, ansonsten blöd.

Daher bleibt nur die Möglichkeit über ein html widget.
Wenn du besondere Formatierung des Wertes benötigst (Zeichen davor/danach, Nachkommastellen, etc.) kann ich dir helfen.

[iobroker2001]

@oliverio Vielen Dank für Deine Recherche und die Mühe!
Da hätte ich wohl Tage für gebraucht, ohne zu merken, dass es technisch nicht klappen kann.