Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Nicht aktuelle Werte andersfarbig markieren

    NEWS

    • Neues Video "KI im Smart Home" - ioBroker plus n8n

    • Neues Video über Aliase, virtuelle Geräte und Kategorien

    • Wir empfehlen: Node.js 22.x

    Nicht aktuelle Werte andersfarbig markieren

    This topic has been deleted. Only users with topic management privileges can see it.
    • OliverIO
      OliverIO @Homoran last edited by

      @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 1 Reply Last reply Reply Quote 1
      • Homoran
        Homoran Global Moderator Administrators @OliverIO last edited by 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 1 Reply Last reply Reply Quote 0
        • OliverIO
          OliverIO @Homoran last edited by

          @homoran

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

          1 Reply Last reply Reply Quote 1
          • OliverIO
            OliverIO last edited by

            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";
                }
            }
            
            B 1 Reply Last reply Reply Quote 0
            • B
              bytegetter @OliverIO last edited by

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

              OliverIO 1 Reply Last reply Reply Quote 0
              • OliverIO
                OliverIO @bytegetter last edited by

                @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?

                I 1 Reply Last reply Reply Quote 1
                • I
                  iobroker2001 @OliverIO last edited by 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 1 Reply Last reply Reply Quote 0
                  • OliverIO
                    OliverIO @iobroker2001 last edited by 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

                    I 1 Reply Last reply Reply Quote 1
                    • I
                      iobroker2001 @OliverIO last edited by

                      @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...😉

                      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?

                      ksnip_20250915-101257.png

                      OliverIO 2 Replies Last reply Reply Quote 0
                      • OliverIO
                        OliverIO @iobroker2001 last edited by

                        @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

                        I 1 Reply Last reply Reply Quote 1
                        • I
                          iobroker2001 @OliverIO last edited by iobroker2001

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

                          1 Reply Last reply Reply Quote 0
                          • OliverIO
                            OliverIO @iobroker2001 last edited by

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

                            I 1 Reply Last reply Reply Quote 1
                            • I
                              iobroker2001 @OliverIO last edited by

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

                              1 Reply Last reply Reply Quote 0
                              • First post
                                Last post

                              Support us

                              ioBroker
                              Community Adapters
                              Donate

                              566
                              Online

                              32.1k
                              Users

                              80.6k
                              Topics

                              1.3m
                              Posts

                              4
                              21
                              303
                              Loading More Posts
                              • Oldest to Newest
                              • Newest to Oldest
                              • Most Votes
                              Reply
                              • Reply as topic
                              Log in to reply
                              Community
                              Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                              The ioBroker Community 2014-2023
                              logo