Lastfluss, Energie animierte Gif

[Asgothian]

@captainchaos666

Du brauchst:

• Je ein Bild für jeden "Schritt" der Animation
• Ein Programm um die Bilder zu einem animierten Gif zusammen zu setzen.

Einmal googeln brachte das hier.

A.

[liv-in-sky]

@captainchaos666

geh auch ohne gif - mit svg

Spoiler

[{"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 viewBox=\"0 0 700 200\">\n\t\t<path class=\"loading3\" d=\"m5,0 h600\" />\n\t\t\n\t\t</svg>\n\t\t\n\t\t\t\t\n\t\t<style>\n\t\t\n\t\t.loading3 {\n\tfill: none;\n\tstroke: #20f824;\n\tstroke-width: 50;\n\tstroke-dasharray: 30 10;\n\tanimation: strokeAni .4s infinite linear;\n}\n\n.inner {\n\tstroke: #c32e04;\n\tanimation-direction: reverse;\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":"231px","top":"199px","width":"320px","height":"30px","transform":"rotate(180deg)"},"widgetSet":"basic"},{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"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 viewBox=\"0 0 700 200\">\n\t\t<path class=\"loading1\" d=\"m5,0 h600\" />\n\t\t\n\t\t</svg>\n\t\t\n\t\t\n\t\t<style>\n\t\t\n\t\t.loading1 {\n\tfill: none;\n\tstroke: #f82023;\n\tstroke-width: 50;\n\tstroke-dasharray: 30 10;\n\tanimation: strokeAni .7s infinite linear;\n}\n\n.inner {\n\tstroke: #c32e04;\n\tanimation-direction: reverse;\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":"271px","top":"250px","width":"320px","height":"35px","color":"","transform":""},"widgetSet":"basic"},{"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 viewBox=\"0 0 700 200\">\n\t\t<path class=\"loading2\" d=\"m5,0 h600\" />\n\t\t\n\t\t</svg>\n\t\t\n\t\t\n\t\t<style>\n\t\t\n\t\t.loading2 {\n\tfill: none;\n\tstroke: #20f824;\n\tstroke-width: 50;\n\tstroke-dasharray: 30 10;\n\tanimation: strokeAni .4s infinite linear;\n}\n\n.inner {\n\tstroke: #c32e04;\n\tanimation-direction: reverse;\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>\t\t"},"style":{"left":"511px","top":"162px","width":"320px","height":"30px","transform":"rotate(90deg)"},"widgetSet":"basic"}]

[liv-in-sky]

@Glasfaser

wollt noch fragen, ob du das weißt. ich nutze nur eine bestimmte länge und habe gerade festgestellt: zieht man das widget größer, werden die "strokes" auch größer - ich würde gerne mehr "strokes" bekommen, damit bei änderung der länge des widgets nicht der maßstab der "strokes" verloren geht

[Glasfaser]

@liv-in-sky

Binn gerade nicht Online ...

Ich kenne das von hier , vielleicht kannst du damit etwas anfangen .

https://forum.iobroker.net/topic/43770/data-flow-animation-html-widgets

[liv-in-sky]

@glasfaser

ich glaube daher habe ich es kopiert - der threadersteller hat aber am 6.Juli das letzte mal im forum geschrieben

ich suche mal via google weiter

[sigi234]

@captainchaos666

Ev. mit Inventwo Design Widgets

[{"tpl":"i-vis-image-new","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","iCornerRadiusUL":"0","iCornerRadiusUR":"0","iCornerRadiusLR":"0","iCornerRadiusLL":"0","iImgRotation":"0","iOpacityCtn":"1","iImgBlinkFalse":"0","iImgBlinkTrue":"0","iImgColorFalse":"#00fa48","iImgColorTrue":"#00fa48","iImgScaleType":"iRepeat","iImgTileSize":"6","iShadowSpread":"2","iShadowSpreadInner":"2","iShadowBlur":"7","iShadowColor":"#14fa29","iShadowColorActive":"#0bef0e","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,"iImageFalse":"/vis-icontwo/Animated/Arrows/arrow2.gif","iImageTrue":"/vis-icontwo/Animated/Arrows/arrow2.gif","iImgColorInvertFalse":false,"iFlipImage":true},"style":{"left":"73px","top":"65px","z-index":"5","width":"255px","height":"14px"},"widgetSet":"vis-inventwo"},{"tpl":"i-vis-image-new","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","iCornerRadiusUL":"0","iCornerRadiusUR":"0","iCornerRadiusLR":"0","iCornerRadiusLL":"0","iImgRotation":"0","iOpacityCtn":"1","iImgBlinkFalse":"0","iImgBlinkTrue":"0","iImgColorFalse":"#fa0300","iImgColorTrue":"#fa0300","iImgScaleType":"iRepeat","iImgTileSize":"6","iShadowSpread":"2","iShadowSpreadInner":"2","iShadowBlur":"7","iShadowColor":"#14fa29","iShadowColorActive":"#0bef0e","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,"iImageFalse":"/vis-icontwo/Animated/Arrows/arrow2.gif","iImageTrue":"/vis-icontwo/Animated/Arrows/arrow2.gif","iImgColorInvertFalse":false},"style":{"left":"73px","top":"100px","z-index":"5","width":"255px","height":"14px"},"widgetSet":"vis-inventwo"}]

[liv-in-sky]

@sigi234

hi sigi - bin der antwort mit der vergrößerung schon auf der spur

habe schon gesehen, dass du die pfeile wolltest - theoretisch sollten die auch in svg funktionieren - bin noch nicht ganz durchgestiegen, wie das mit pfeilen funktioniert - aber dein widget ist auch nicht schlecht

[liv-in-sky]

@glasfaser

die größe ziehen und den maßstab beibehalen klappt

[Glasfaser]

@liv-in-sky

sieht schick aus , jetzt fehlt noch , das man die png tauschen kann , ja nach Bedarf ,

Pfeile , Punkt ..

Spoiler

[liv-in-sky]

@glasfaser

genau das versuche ich gerade

[liv-in-sky]

um das ganze noch abzuschliessen
das mit den pfeilen geht damit nicht - habe dafür leider keine lösung gefunden

aber man kann auch komlexe, bzw gewinkelte "fluss-zeichnungen" anfertigen
ich würde das ganze widget über ein script steuern und nicht mit "sichtbarkeit" arbeiten, wenn z.b 2 übereinander liegen sollen , sondern das script schreibt den html code in einen datenpunkt und dieser dp wird dann über binding angezeigt - das script kontrolliert somit, was angezeigt wird

z.b.

Spoiler

[{"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=\"loading10\" 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.loading10 {\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\n\tanimation-direction: reverse;\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":"1068px","top":"476px","width":"530px","height":"234px","transform":"rotate(180deg)"},"widgetSet":"basic"},{"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=\"loading8\" d=\"M50 0 L50 200 L250 200 L250 100 L400 100 L400 200 L500 200 L500 55 \" />\n\t\t  \n          <circle cx=\"50%\" cy=\"50%\" r=\"4\" fill=\"white\"/>\n\t\t</svg>\n\t\t\n\t\t\n\t\t<style>\n\t\t\n\t\t.loading8 {\n\tfill: none;\n\tstroke: #20f824;\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\n\tanimation-direction: reverse;\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":"1048px","top":"714px","width":"530px","height":"234px"},"widgetSet":"basic"}]

gerade linien, die den maßstab einhalten:

Spoiler

[{"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=\"10\">\n\t\t<path class=\"loading9\" d=\"m5,0 h900\" />\n\t\t\n\t\t</svg>\n\t\t\n\t\t\n\t\t<style>\n\t\t\n\t\t.loading9 {\n\tfill: none;\n\tstroke: #20f824;\n\tstroke-width: 10;\n\tstroke-dasharray: 15 5;\n\tanimation: strokeAni .7s infinite linear;\n}\n\n.inner {\n\tstroke: #c32e04;\n\tanimation-direction: reverse;\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":"48px","top":"939px","width":"584px","height":"21px"},"widgetSet":"basic"},{"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=\"10\">\n\t\t<path class=\"loading7\" d=\"m5,0 h900\" />\n\t\t\n\t\t</svg>\n\t\t\n\t\t\n\t\t<style>\n\t\t\n\t\t.loading7 {\n\tfill: none;\n\tstroke: red;\n\tstroke-width: 10;\n\tstroke-dasharray: 15 5;\n\tanimation: strokeAni .7s infinite linear;\n}\n\n.inner {\n\tstroke: #c32e04;\n\tanimation-direction: reverse;\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":"1403px","top":"535px","width":"491px","height":"42px","transform":"rotate(90deg)"},"widgetSet":"basic"}]

[bibabuz]

@liv-in-sky

Deine Idee hier ist genau das, was ich aktuell suche. Ich bin allerdings daran gescheitert, den Code in meine Vis einzubauen... Welches Element brauche ich denn dafür? Danke für Deine Hilfe!

[Glasfaser]

@dominik_l sagte in Lastfluss, Energie animierte Gif:

Welches Element brauche ich denn dafür?

Klapp jeweils die "Spoiler" auf , dort sind die Widget zum Importieren hinterlegt .

[bibabuz]

@glasfaser
danke für die super schnelle Antwort! Dann hab ich es grundsätzlich schon richtig gemacht. Die Widgets erscheinen auch in der Objektliste, aber werden nicht angezeigt... muss ich vorher noch bestimmte pakete installieren? Viele Grüße!

[Glasfaser]

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

[Glasfaser]

@dominik_l

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

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

[bibabuz]

@glasfaser
Danke nochmal, dann mach ich mich darüber her.
So schaut meine vis aus... nichts zu sehen, Widgets sind aber eigentlich da...

[Glasfaser]

@dominik_l

markiere mal ein , die Widgets sind ziemlich weit rechts eingestellt

dann siest du rechts

[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