Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Lastfluss, Energie animierte Gif

    NEWS

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Lastfluss, Energie animierte Gif

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

      @dominik_l sagte in Lastfluss, Energie animierte Gif:

      Die Widgets erscheinen auch in der Objektliste, aber werden nicht angezeigt...

      Was für eine Objektiste !?

      Die Widget erscheinen im Editor in deinem Projekt wo du das Widget importierst.

      24815e37-4157-456d-87d6-020db8357867-grafik.png

      1 Reply Last reply Reply Quote 1
      • Glasfaser
        Glasfaser @bibabuz last edited by

        @dominik_l

        Schau mal hier ... ist einfacher .. wenn du nur Pfeile brauchst

        https://forum.iobroker.net/topic/54898/senec-speicher-vis?_=1653739345286

        B 1 Reply Last reply Reply Quote 1
        • B
          bibabuz @Glasfaser last edited by

          @glasfaser
          Danke nochmal, dann mach ich mich darüber her.
          So schaut meine vis aus... nichts zu sehen, Widgets sind aber eigentlich da...
          7bbf7d94-fc7c-4884-82de-f381cd12b148-grafik.png

          Glasfaser 1 Reply Last reply Reply Quote 0
          • Glasfaser
            Glasfaser @bibabuz last edited by

            @dominik_l

            markiere mal ein , die Widgets sind ziemlich weit rechts eingestellt

            561c8de1-b2fb-43f3-9659-8d75058f0200-grafik.png

            dann siest du rechts

            f10441c8-17bd-4cc5-9d00-0edf27a0c42b-grafik.png

            B 1 Reply Last reply Reply Quote 1
            • B
              bibabuz @Glasfaser last edited by

              @glasfaser

              und schon ist alles da. oh mei. DANKE!

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

                @liv-in-sky
                Jetzt hab ich doch nochmal eine Frage...

                
                 <svg width="900" height="10">
                		<path class="loading1" d="m5,0 h900" />
                		
                		</svg>
                		
                		
                		<style>
                		
                		.loading1 {
                	fill: none;
                	stroke: #20f824;
                	stroke-width: 10;
                	stroke-dasharray: 15 5;
                	animation: strokeAni XXXs infinite linear;
                }
                
                .inner {
                	stroke: #c32e04;
                	animation-direction: reverse;
                }
                
                @keyframes strokeAni {
                	0% {
                		stroke-dashoffset: 40;
                	}
                	100% {
                		stroke-dashoffset: 0;
                	}
                }
                
                		
                		</style>
                
                

                Ich würde gerne die Laufgeschwindigkeit der Animation von einem Objektwert abhängig machen. Hab lange rumprobiert, war aber nicht erfolgreich... Hast Du einen Tipp für mich? Würde mich freuen!

                Viele Grüße

                Dominik

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

                  @dominik_l

                  ich denke mal am einfachsten ist es, du machst dir ein blockly und der html teil , den du sonst im widget hast, schreibst du in einen datenpunkt (den du selbst auch anlegst) als variable. d.h. du setzt den html-teil im blockly so zusammen, wie du ihn brauchst

                  in der vis nimmst du dann ein html widget und darin als html teil nimmst du den datenpunkt über ein binding - also den datenpunkt in geschw. klammern z.b.

                  {0_userdata.0.test.test....}
                  

                  so kannst du alles im blockly setzen (je nach trigger) und dann in den dp schreiben, was dann in der vis aktualisiert wird

                  B H 2 Replies Last reply Reply Quote 1
                  • B
                    bibabuz @liv-in-sky last edited by

                    @liv-in-sky

                    Funktioniert! Hätte man selber draufkommen können... Danke nochmals für die Hilfe in dem alten Thread!
                    28551548-10dd-4ec8-bea5-614e054b0d57-grafik.png
                    (Pfeile waren die bisherige Lösung...)

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

                      @glasfaser Habe das mit den Linien eingebaut wo oder wie könnte ich das schalten mit einen true oder false Befehl von meine Objekten ?

                      dann wäre es klasse für mich

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

                        @liv-in-sky
                        Gibt es eine Anleitung, wie man diese Animation in die Vis bekommt? Stehe total auf dem Schlauch ... 🙂

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

                          @matze_hh

                          es gibt mittlerwiele einen adapter für solche flow zeichnungen (energiefluss adapter)

                          die beispiele hier gehören in ein html widget - bzw sind die widgets hier zum download und import in den posts

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

                            @liv-in-sky

                            Hallo,

                            mit welchem Befehl bekomme ich die SVG rückwärtslaufend hin.
                            Bzw. wie sind die Gegenbefehle? Reverse <> ???
                            Rotate(°deg) kann ich für meine verwinkelte Leitung nicht verwenden.
                            Kann man dafür einen Befehl im Feld Transform einsetzen oder geht das nur im Code?

                            Danke und Grüße Wiesel

                            P.s.: Coole Sache mit dieser Spielerei ;-)...

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

                              @wiesel-1

                              der reverse hat keine wirkung - ist wohl ein überbleibsel meiner tests

                              was aber funktioniert ist den stroke-dashoffset ins minus zu ändern

                              Image 162.png

                              script-vis20.gif

                              [{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"<svg width=\"900\" height=\"210\">\n\t\t<path class=\"loading101\" d=\"M50 0 L50 200 L250 200 L250 100 L400 100 L400 200 L500 200 L500 55 \" />\n\t\t  \n        \n\t\t</svg>\n\t\t\n\t\t\n\t\t<style>\n\t\t\n\t\t.loading101 {\n\tfill: none;\n\tstroke: lightblue;\n\t\tborder-radius: 50%;\n\tstroke-width: 5;\n\tstroke-dasharray: 15 5;\n\tanimation: strokeAni .7s infinite linear;\n}\n\n.inner {\n\tstroke: #c32e04;\n  animation-direction: reverse;\n\t\n}\n\n@keyframes strokeAni {\n\t0% {\n\t\tstroke-dashoffset: 40;\n\t}\n\t100% {\n\t\tstroke-dashoffset: 0;\n\t}\n}\n\n\t\t\n\t\t</style>"},"style":{"left":"523px","top":"880px","width":"530px","height":"234px","transform":"rotate(180deg)"},"widgetSet":"basic"}]
                              

                              W M 2 Replies Last reply Reply Quote 0
                              • W
                                Wiesel 1 @liv-in-sky last edited by Wiesel 1

                                @liv-in-sky

                                Danke für den Tip. Wenn ich das Widget einfüge und das Vorzeichen bei stroke-dashoffset setze, fangen alle meine Leitungen an Rückwärts zu laufen ;-)... Ich hab ein kleines Heizungssystem damit ausgerüstet. Also Vor und Rücklauf. Und diese sollen entsprechend fließen. Die Loadings sind bereits mit einzelnen Nr. entkoppelt. Erstaunlich, das dein Loading auch meine anderen bereits bestehenden Systeme mit ändert.

                                Ich teste weiter. Ist auf jeden Fall ein Ansatz. Alternativ muss ich die einzelnen Koordinatenpunkte rückwärts anordnen ;-(...

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

                                  @wiesel-1 du musst das strokeani auch umbenennen
                                  Damit es nur für dieses Widget gültig ist

                                  W M 2 Replies Last reply Reply Quote 0
                                  • W
                                    Wiesel 1 @liv-in-sky last edited by Wiesel 1

                                    @liv-in-sky

                                    Spitze!!! Genau das war es. 2x strokeani mit eigener Nummer gekennzeichnet und die Befehlsketten sind entkoppelt. Jetzt visualisiert jeder Strang so wie er soll. Die Striche gefallen mir dabei sogar noch besser wie die Pfeile.

                                    Viele Dank für die Hilfe!

                                    1 Reply Last reply Reply Quote 1
                                    • M
                                      mguenther @liv-in-sky last edited by

                                      @liv-in-sky

                                      bekommt man es auch irgendwie hin, dass z.B. ein Farbverlauf in der Linie noch hinzugefügt werden kann?

                                      Beispiel:
                                      die gestrichelte Linie startet mit Rot und endet irgendwann mit Blau. Ich habe im Internet mir SVG angeschaut, bin aber noch nicht dahintergekommen. In einem Rechteck ist ein Farbverlauf wohl möglich.

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

                                        @liv-in-sky
                                        Ich ergänze gleich meine 2. Frage. Ich bekomme es einfach nicht hin. Es gibt ja neben der Linie auch andere geometrische Formen.
                                        Wie könnte ich denn z.B. die Reihenfolge Linie, Halbkreis, Linie, Halbkreis, Linie... oder Linie, Ellipse, Halbkreis, Ellipse... erzeugen?

                                        Worauf möchte ich hinaus? Im Prinzip suche ich etwas wie so:
                                        89f6c19e-0cac-4c62-beb7-c6ee5dce6f69-image.png

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

                                          @mguenther sorry - aber so tief bin ich da nicht eingestiegen - wenn du eine lösung gefunden hast - gerne hier posten

                                          M 2 Replies Last reply Reply Quote 1
                                          • M
                                            mguenther @liv-in-sky last edited by

                                            @liv-in-sky sagte in Lastfluss, Energie animierte Gif:

                                            @mguenther sorry - aber so tief bin ich da nicht eingestiegen - wenn du eine lösung gefunden hast - gerne hier posten

                                            alles gut, danke dir - wie immer. Dachte, du schüttelst das so einfach aus dem Ärmel - ich teste weiter...

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            783
                                            Online

                                            31.7k
                                            Users

                                            79.8k
                                            Topics

                                            1.3m
                                            Posts

                                            template vis
                                            15
                                            69
                                            11420
                                            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