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.
    • liv-in-sky
      liv-in-sky @spaceduck last edited by

      @spaceduck

      soweit ich mich erinnere - du musst in jedem widget die class loadingxx unbenennen - sonst überschneiden sich die classes

      Image 2.png

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

        @spaceduck

        hier haben wir auch ein wenig gespielt

        https://forum.iobroker.net/post/679546

        S 1 Reply Last reply Reply Quote 1
        • 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

                                    511
                                    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