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

[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.