Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Data flow animation html widgets

    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

    Data flow animation html widgets

    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      spaceduck @liv-in-sky last edited by

      @liv-in-sky
      Danke, genau was ich gesucht habe!

      1 Reply Last reply Reply Quote 0
      • W
        warp735 @liv-in-sky last edited by

        @liv-in-sky

        Weiß jemand wie ich die "Flussrichtung", also von rechts nach links umstellen kann?

        liv-in-sky 1 Reply Last reply Reply Quote 0
        • liv-in-sky
          liv-in-sky @warp735 last edited by

          @warp735 ohne viel in google zu suchen:

          Image 010.png

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

            Ich habe das ein wenig optimiert und ein wenig dokumentiert.
            den folgenden block in ein html-widget eintragen

            <script>
            //anpassen der farbe über folgende css anweisung im css-tab von vis
            // #w00000 mit der widgetnummer tauschen
            /*
            #w00000 path {
               stroke: #00ff00;
            }
            */
            //so können auch die anderen eigenschaften verändert werden
            //    	stroke-width: 10;          //breite des strichs
            //    	stroke-dasharray: 30 10;   //verhältnis von strich zu pause
            //    	stroke-dasharray: 30 10 10 10 // es können auch andere muster //erzeugt werden.
            //    	ggfs muss dann aber das zeitverhalten der animation angepasst //werden
            //->animation in andere richtung laufen lassen
            //einfach in das feld CSS-Klasse dieses widgets das wort
            reverse
            //eintragen
            */
            </script>
            
            <svg viewBox="0 0 700 200">
               <path class="normal" d="m5,0 h700" />
            </svg>
            <style>
               .normal {
               	fill: none;
               	stroke: #306f91;
               	stroke-width: 10;
               	stroke-dasharray: 30 10;
               	animation: strokeAni .7s infinite linear;
               }
               .reverse path {
                   animation-direction: reverse;
               }
               @keyframes strokeAni {
               	0% {
               		stroke-dashoffset: 40;
               	}
               	100% {
               		stroke-dashoffset: 0;
               	}
               }
            </style>
            

            1 Reply Last reply Reply Quote 1
            • R
              rvs11 last edited by rvs11

              Ich habe einige Linien auf meine vis dank euch erstellt und zeigen mir an ob eine Pumpe läuft oder nicht.
              Nun möchte ich dies gerne für meine PV-Anlage auch machen.
              Würde gerne je nachdem wie hoch die Leistung ist die diese Linien schneller laufen lassen.
              Hab es mit Sichtbarkeit der widgets gemacht.
              Leider ist es so das wenn man einen Wert dazwischen benötig z.B von 1kW bis 2kW das mit der Sichtbarkeit nicht mehr funktioniert da ich keinen Bereich angeben kann.
              Gibt es eine möglichkeit das Style vom dem Widget über eine Skipt zu ändern sprich die Animationsgeschwindigkeit?

              liv-in-sky sigi234 OliverIO 3 Replies Last reply Reply Quote 0
              • liv-in-sky
                liv-in-sky @rvs11 last edited by

                @rvs11

                einfacher weg:
                du kannst das ganze widget in einen datenpunkt schreiben - über ein blockly (indem du den html code "erzeugst") kannst du den ganzen html code so anpassen, wie du willst und diesen in den datenpunkt speichern

                als widget nimmst du dann ein html standard-widget mit binding des datenpunktes - so wird immer angezeigt, was im dp steht

                1 Reply Last reply Reply Quote 0
                • sigi234
                  sigi234 Forum Testing Most Active @rvs11 last edited by

                  @rvs11 sagte in Data flow animation html widgets:

                  Nun möchte ich dies gerne für meine PV-Anlage auch machen.

                  https://forum.iobroker.net/topic/55627/test-adapter-energiefluss-v0-8-x-github-latest?_=1659862573833

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

                    @rvs11
                    Die animations Geschwindigkeit
                    Ist im css definiert.
                    In meinem Beispiel oben ist es .7s
                    Also 0,7 Sekunden für einen Durchlauf.
                    Die Zeit kannst du auch anpassen.
                    Wenn du es dynamisch machen willst dann kannst du das auch per binding und einem datenpunkt machen
                    Das würde dann so aussehen

                    
                       	animation: strokeAni .{JavaScript.0.animationspeed}s infinite linear;
                    
                    

                    Im datenpunkt könntest du dann ganze Zahlen von 1 bis 9 schreiben.
                    1 ist am schnellsten

                    1 Reply Last reply Reply Quote 0
                    • R
                      rvs11 last edited by

                      Danke für eure Antworten.

                      Mein Problem ist das ich mich im Java leider gar nicht gut auskenne (Eigentlich gar nicht ) :).
                      Mir fehlen auch irgendwie die zusammenhänge.
                      C Programmierung ist kein Problem - Programmiere Mikrocontroller
                      Wie ich einen HTML Code für das Widget generiere ist mir völlig unbekannt.
                      Ich möchte gerne eben den Stromfluß (Richtung) wie auch Geschwindigkeit und Farbe je nach PV Leistung bzw. Bezug vom Stromanbieter anzeigen lassen.
                      Aber wie gesagt wie ich einem Widget dies im Java übergebe, keine Ahnung.

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

                        @rvs11
                        Den für dich einfachsten Weg habe ich geschrieben.
                        Welcher Teil davon ist unklar?

                        1 Reply Last reply Reply Quote 0
                        • R
                          rvs11 last edited by

                          @oliverio
                          Hab jetzt ein wenig herum Probiert.

                          Im neu erzeugten Datenpunkt wird nun die Zeit eingetragen mit welcher die Animation laufen soll.

                          Leider wird im vis nichts geändert.

                          //________________________________________________________________
                          //Script jede Sekunde ausfuehren
                          schedule('* * * * * *', Animation_aktualisieren);
                          //________________________________________________________________
                          
                          //animation_aktualisieren();  //Nur für Testzwecke (wird sonst immer Aufgerufen)
                          
                          
                          function Animation_aktualisieren() {
                          //______________________________________________________________________________________
                          
                              //Einlese-Datenpunkte - müssen natürlich an die eigene Konstellation angepasst werden!
                              var Leistung_Stromanbieter      = getState('0_userdata.0.Testdatenpunkte.Kelag_Strom').val ;           // 
                              var Leistung_Haus               = getState('0_userdata.0.Testdatenpunkte.Haus_Stromverbrauch').val ;              //
                              var Leistung_PV_West            = getState('0_userdata.0.Testdatenpunkte.PV_Solar_West').val ;    // 
                              var Leistung_PV_Ost             = getState('0_userdata.0.Testdatenpunkte.PV_Solar_Ost').val ;       // 
                              var Leistung_PV_Gesamt          = getState('0_userdata.0.Testdatenpunkte.PV_Solar_Gesamt').val ;           // 
                              var Leistung_Akku               = getState('0_userdata.0.Testdatenpunkte.PV_Batterie_Ladestrom').val ;           // 
                          
                              var sschnell = "0.4";
                              var slangsam = "1.2";
                          
                          //Werte überprüfen
                          if (Leistung_Stromanbieter > 50 && Leistung_Stromanbieter < 1000) {
                              setState('0_userdata.0.Animationen.Animation_Geschwindigkeit_Stromanbieter',sschnell);   //0,4 und 1,2s
                          }
                          else {
                            setState('0_userdata.0.Animationen.Animation_Geschwindigkeit_Stromanbieter',slangsam);  
                          }
                          
                          
                          
                          }
                          

                          Und im Widget

                          <svg width="50" height="50">
                          		<path class="Ein_10_1999W_kelag_bezug_test" d="m0,50 L50,0" />
                          		
                          		</svg>
                          		
                          		
                          		<style>
                          		
                          		.Ein_10_1999W_kelag_bezug_test {
                          	fill: none;
                          	stroke: #f82023;
                          	stroke-width: 5;
                          	stroke-dasharray: 15 5;
                              
                              animation: strokeAni .{0_userdata.0.Animationen.Animation_Geschwindigkeit_Stromanbieter}s infinite linear;
                          	animation-direction: normal;
                          }
                          
                          @keyframes strokeAni {
                          	0% {
                          		stroke-dashoffset: 40;
                          	}
                          	100% {
                          		stroke-dashoffset: 0;
                          	}
                          }
                          
                          		
                          		</style>
                          

                          Was ist da falsch?

                          1 Reply Last reply Reply Quote 0
                          • R
                            rvs11 last edited by

                            Hab den Fehler gefunden
                            Bei

                            animation: strokeAni .{0_userdata.0.Animationen.Animation_Geschwindigkeit_Stromanbieter}s infinite linear;

                            War dieser Punkt zuviel 🙂

                            Nun hat sich ein weiteres Problem aufgetan.
                            Jede Sekunde (ich rufe das Skrip jede Sekunde auf) stockt die Animation (scheint als Startet sie immer wieder neu)
                            Darf ich den Datenpunkt nicht alle Sekunden beschreiben?

                            1 Reply Last reply Reply Quote 0
                            • R
                              rvs11 last edited by

                              So nun auch diesen Fehler behoben 🙂

                              Ich beschreibe den Datenpunkt nur dann wenn er einen anderen Wert bekommen soll
                              Danke für eure Hilfe

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

                                @rvs11
                                Ja sobald du die Animationskonfiguration änderst
                                Startet der Browser die Animation von vorn.

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

                                Support us

                                ioBroker
                                Community Adapters
                                Donate

                                486
                                Online

                                31.9k
                                Users

                                80.2k
                                Topics

                                1.3m
                                Posts

                                8
                                20
                                4249
                                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