Lastfluss, Energie animierte Gif

[bibabuz]

@glasfaser

und schon ist alles da. oh mei. DANKE!

[bibabuz]

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

Spoiler

 <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]

@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

[bibabuz]

@liv-in-sky

Funktioniert! Hätte man selber draufkommen können... Danke nochmals für die Hilfe in dem alten Thread!

(Pfeile waren die bisherige Lösung...)

[lucky51179]

@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

[Matze_HH]

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

[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

[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]

@wiesel-1

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

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

widget zum testen

[{"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"}]

[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]

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

[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!

[mguenther]

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

[mguenther]

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

[liv-in-sky]

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

[mguenther]

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

[mguenther]

Es gibt ein paar Tools im Internet, sehe ich gerade und das erste (https://boxy-svg.com), was ich genutzt hatte, erzeugt sowas:

Der Export kostet halt etwas, ich muss mal sehen, ob ich eine kostenlose Variante (Testversion o.ä.) hinbekomme. Muss dann nur noch sehen, wie ich das in das Widget integriere

[liv-in-sky]

@mguenther

hab ein wenig gespielt

das ist rausgekommen - nehme aber an, du hast schon was gefunden:

Spoiler

<svg width="900" height="610" >
   	/>
   	<defs>
      
   <linearGradient id='MyGradient1011' x1="0%" y1="0%" x2="0%" y2="100%">
     <stop offset='0%' stop-color='red' />
     <stop offset='100%' stop-color=' lightblue' />
   </linearGradient>
       </defs>
       <g transform="scale(1)" style="stroke:url(#MyGradient1011) " >
        <path class="loading1011" d="M 180,120 A 10,10 0 0,0 180,180 l280 0
                                    A 10,10 0 1,1 460,240 l-280 0
                                    A 10,10 0 0,0 180,300 l280 0
                                    A 10,10 0 1,1 460,360 l-280 0"/>
       </g>
        
        
  
   	</svg>
   	
   	
   	<style>
   	
   	.loading1011 {
   fill: none;
   
   	border-radius: 50%;
   stroke-width: 5;
   stroke-dasharray: 15 5;
   animation: strokeAni .7s infinite linear;
}

.inner {
   stroke: #c32e04;
 
   
}

@keyframes strokeAni {
   0% {
   	stroke-dashoffset: -40;
   }
   100% {
   	stroke-dashoffset: 0;
   }
}

   	
   	</style>

oder:

Spoiler

<svg width="600" height="510" >
   	
   <defs>    
   <linearGradient id='MyGradientFull' x1="0%" y1="0%" x2="0%" y2="100%">
     <stop offset='0%' stop-color='red' />
     <stop offset='100%' stop-color=' lightblue' />
   </linearGradient>
    </defs>
      
    <g transform="scale(1)" >
    
    
       <g  >
   	
   	
   	
                                         
        <path  class="loadingFull" d="M200,50  L200,95  
                                       A28,28 0 0,1 180,120
                                       A10,10 0 0,0 180,180 
                                       A10,10 0 0,0 180,180 l280 0
                                       A10,10 0 1,1 460,240 l-280 0
                                       A10,10 0 0,0 180,300 l280 0
                                       A10,10 0 1,1 460,360 l-320 0
   									
                                       "
            fill= "none" stroke-width="8" stroke-dasharray="15 5" 	
            stroke="url(#MyGradientFull)"								 
                                       />
         <path class="loadingFull" d="M140,360 A28,28 0 0,1 110,330 l0 -280
           " fill= "none" stroke-width="8" stroke-dasharray="15 5" stroke="lightblue"               
             
           /> 
                                     
       </g>
       
       <g>
         
 
   								  
   									  
   									  
     
   </g>   
   </g> </svg>

   	<style>
   	
   	.loadingFull {
    animation: strokeFull .7s infinite linear;
    }

@keyframes strokeFull {
   0% {
   	stroke-dashoffset: -40;
   }
   100% {
   	stroke-dashoffset: 0;
   }
   }
  </style>	
   	
   	

können beide verkleinert werden

[mguenther]

@liv-in-sky

boah - ich werd bekloppt... Ich war unterwegs und wollte mich jetzt damit auseinandersetzen.
Danke dir - wie immer. Ich schau es mir an und arbeite mich rein...

[liv-in-sky]

@mguenther

diese A commands sind ein "gefriggel"