Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Farbliche Animation für die VIS

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    Farbliche Animation für die VIS

    This topic has been deleted. Only users with topic management privileges can see it.
    • A
      andi2204 last edited by

      Hallo miteinander,

      ich versuche nun seit Tagen eine Lösung für folgendes Problem zu finden:

      Für einige Werte in der VIS (1), soll eine farbliche Animation/gerne auch als reines „blinken“ erfolgen, sobald sich der Wert verändert/aktualisiert hat. Nach dem was ich so gelesen haben, kann man das entweder über das sog. Binding oder direkt in der CSS lösen?!

      Gibt es Unterschiede in der Perfomance des Systems, wenn man 50 Werte ständig Animiert oder per blinken visualisiert?
      Hat jemand bereits was vergleichbares umsetzten können? Falls ja wie kann man das Umsetzen ohne das System unnötig zu belasten?

      Danke und viele Grüße aus Süddeutschland

      Andi

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

        @andi2204

        hier vom prinzip her, die animation kannst du dann ja selber anpassen

        1. im css reiter die folgenden 2 anweisungen ergänzen.
          einmal die animation und zum 2. die css klasse namens newValue deren die animation zugewiesen ist.
          Wenn man eine helle Oberfläche hat, dann color:#fff mit color:black tauschen
        .newValue {
            animation: newValueAnimation 2s ease-in-out;
        }
        @keyframes newValueAnimation {
            0% {
                color: green;
            }
            100% {
                color: #fff;
            }
        }
        
        1. widget hinzufügen (ich habe ein einfaches string widget genommen)
        2. datenpunkt auswählen
        3. im abschnitt generell im feld CSS Klasse das folgende Binding eintragen
          den datenpunkt anpassen und den selben den du in 3 ausgewählt hast eintragen
        {val:0_userdata.0.datenpunkt.b1;"newValue"}
        

        das sollte dann bei jeder änderung die animation auslösen.
        Die Animation hab ich aus der Adminoberfläche genommen und vereinfacht.

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

          @oliverio

          1000 DANK OliverIO...hat super geklappt!

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

            @andi2204

            zur performance wollt ich auch noch was schreiben.
            die animation erfolgt ja komplett auf dem client,
            von daher beslastet es nur den browser.
            ich denke da wird es lange dauern bis man da was merkt.
            eher mit den vielen bindings, die sind etwas aufwändiger.
            aber 50 denke ich ist kein problem

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

            Support us

            ioBroker
            Community Adapters
            Donate

            449
            Online

            31.9k
            Users

            80.2k
            Topics

            1.3m
            Posts

            2
            4
            160
            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