Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[SKB]

@norb-0 Du nutzt wahrscheinlich die "Animations-Abhängigkeit" Punkte oder Zeit, richtig?
Dies ist nun so eingebaut, das die Punkte nicht "springen", wenn eine Werteänderung stattfindet. Sie werden animiert zusammengezogen und dann neu berechnet.

Sieht besser aus, als das sie springen.

[Norb 0]

@skb Ja genau, ich nutze die "Animations-Abhängigkeit" Dauer.
Da ich die Werte alle 5 Sekunden aktualisiere und die Animation teilweise sehr langsam ist bei niedrigen Werten, gibt das fürs Auge ein wahnsinniges Gezappel wenn die Punkte sich zusammenziehen.
Perfekt wäre natürlich wenn die Geschwindigkeit sich langsam an die Wertänderung anpasst ohne zu springen. Aber das ist natürlich jammern auf hohem Niveau :-)

[SKB]

@norb-0 Vorher war es so, das die Punkte gesprungen sind (Animation wird gestoppt, neu positioniert und wieder gestartet). Dies wird durch die Animation verhindert - weil sich die Punkte zusammen ziehen und dann an der neuen Position wieder starten (Punkte werden verkleinert, Animation wird gestoppt, Animation wird neu ausgerichtet, Punkte werden wieder größer und die Animation wieder gestartet). Ist quasi ein Überblenden.

Leider kann man bereits laufende Animation nicht stoppen oder zeitlich verlangsamen/verschnellern.

Dies hätte ich gerne eingebaut - allerdings technisch nicht machbar.

[Norb 0]

@skb Passt schon so, ich werde versuchen durch diverse Einstellungen das für mich beste herauszuholen.
Schon mal vielen Dank fürs Feedback.

[SKB]

@norb-0 Ich habe mir die Animation noch einmal angeschaut und sie etwas verbessert. Vielleicht passt es ja für dich auch.

Du könntest einmal direkt die Version von Github https://github.com/SKB-CGN/ioBroker.energiefluss-erweitert drüber installieren und einen manuellen Upload des Adapters machen.

Dann die Konfiguration und Live-Ansicht mit Strg+F5 neuladen und die Punkte sollten nun nur überblendet und nicht mehr auseinander gezogen werden.

[Norb 0]

@skb Sieht jetzt viel "entspannter" aus. Ich persönlich fand es damals besser, auch wenn Sprünge da waren.

Beispiel.MP4

[SKB]

@norb-0 Prima, wenn es entspannter ist.
Naja, Sprünge empfindet man ja auch immer als "stressig". Somit ist ja sanftes Überblenden auch angenehmer, denke ich.

[Norb 0]

@skb vielleicht kann man die Zeit des Überblendens etwas kürzer machen, dann wäre es ein sanfter Sprung. Nur mal so eine Idee.
Ansonsten großes Lob für den Adapter.

[SKB]

@norb-0 Die Zeit des Überblendens beträgt 350ms. Diese habe ich so gewählt, damit auch lange Linien nicht springen.

Du kannst auch selber diese Zeit etwas anpassen, wenn Du dir im Stile Tab eine Klasse wie folgt erstellst:

.animation_fade {
    transition: stroke .35s ease-out; /* .35s kannst Du hier z.B. für deine Überblendung verkürzen oder verlängern. .35s steht für 350ms */
}

[Norb 0]

@skb perfekt, ich teste mal ein bisschen um für mich die beste Variante rauszufinden.
Nochmals vielen Dank für die Einstellmöglichkeit.

[Merlin123]

Mir ist da eben bei einem Diagramm was seltsames aufgefallen.... ich habe noch zwei andere Instanzen, da sieht alles normal aus,

Zum einen sind die Icons viel zu klein. die sind 70x70... Zum anderen ist der Bearbeitungsbereich oben nicht nutzbar.
Neustart der Instanz ändert nichts.

[SKB]

@merlin123 Gehört aber wohl nicht zur 0.7.7, sondern zu einer neuen Beta Version, oder?

Wenn's in einer Instanz geht und in einer Anderen nicht, wird es wohl an dieser liegen.

Log der Browser-Konsole?
Zeigt die Live-Ansicht die richtige Größe der Icons?

[Merlin123]

@skb ups. stimmt... hier geht es ja um die 0.7.7. Hab die 0.8.1

Liveansicht ist ebenfalls fehlerhaft, da ist es mir aufgefallen....

update:
jetzt richtiges Log

functions.min.js?v=0.8.1:8 [Config] Using Instance: energiefluss-erweitert.1
functions.min.js?v=0.8.1:8 [Language] Detected System-Language: en-US
functions.min.js?v=0.8.1:8 [Config] Loaded additional file: /_socket/info.js
functions.min.js?v=0.8.1:8 {instance: 1, lowPerformance: false, theme: false, namespace: 'energiefluss-erweitert.1', hostname: '192.168.0.251', …}
socket.io.js:55 [2025-10-28T16:59:57.760Z] Try to connect
functions.min.js?v=0.8.1:8 [Config] Getting Instances
functions.min.js?v=0.8.1:8 [Socket] connected at 10/28/2025, 5:59:57 PM
functions.min.js?v=0.8.1:8 [Language] Trying to get language from system!
functions.min.js?v=0.8.1:8 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ functions.min.js?v=0.8.1:8
await in (anonymous)
e @ jquery-3.6.4.min.js:2
(anonymous) @ jquery-3.6.4.min.js:2
setTimeout
(anonymous) @ jquery-3.6.4.min.js:2
c @ jquery-3.6.4.min.js:2
fireWith @ jquery-3.6.4.min.js:2
fire @ jquery-3.6.4.min.js:2
c @ jquery-3.6.4.min.js:2
fireWith @ jquery-3.6.4.min.js:2
ready @ jquery-3.6.4.min.js:2
$ @ jquery-3.6.4.min.js:2
functions.min.js?v=0.8.1:8 [Language] Got it from ioBroker! Translating Texts to locale de!
functions.min.js?v=0.8.1:8 [Socket] subscribed to: energiefluss-erweitert.1.configuration,energiefluss-erweitert.1.data,system.adapter.energiefluss-erweitert.1.alive at 10/28/2025, 5:59:57 PM
functions.min.js?v=0.8.1:8 [Config] Trying to load configuration for instance 1 from state!
functions.min.js?v=0.8.1:8 [Config] Using direct load via iconify-API!
functions.min.js?v=0.8.1:8 [Config] Loading initial Data
functions.min.js?v=0.8.1:8 [Config] Single-Fill-Gradient added for: 7
functions.min.js?v=0.8.1:8 [Config] Single-Fill-Gradient added for: 13
functions.min.js?v=0.8.1:8 [Config] Single-Fill-Gradient added for: 31
functions.min.js?v=0.8.1:8 [Config] Border-Fill added for ID 5
functions.min.js?v=0.8.1:8 [Config] Configuration loaded in 64.69999998807907 ms
functions.min.js?v=0.8.1:8 [Config] Loaded additional file: js/iconify.min.js
nzblnk.js:24 [NZBDonkey] Nzblnk content script loaded successfully 

[SKB]

@merlin123 das ist nicht der Inhalt des EF. Das ist VIS.

Nur die Instanz öffnen - kein Frame, kein iFrame oder sonst was.

[Merlin123]

@skb ups. sorry... falsch verstanden. Hab es oben aktualisiert

[SKB]

@merlin123 sieht Anfangs völlig normal aus.
Allerdings ist dort ein nzblnk.js drin - was soll das sein?

[Merlin123]

@skb musste ich auch erstmal googeln....

Kommt von einer Chrome Extension.
wenn ich die deaktiviere ändert das aber nichts....

kann ich irgendwie alles in eine neue Instanz kopieren? Irgendwas ist mit der ja ganz seltsam.

[SKB]

@merlin123 Na, das sieht für mich auch komisch aus. Du kannst den Inhalt in eine neue Instanz kopieren - Datenpunkt configuration.

Allerdings denke ich nicht, das der Fehler im Inhalt der Instanz ist. Aber ein Test kann nicht schaden.

Ansonsten kannst du die Konfiguration auch hier einstellen und ich füge es mal bei mir ein - dann kann man vielleicht mehr sehen, wenn's keine geheimen Daten sind 😉

[Merlin123]

@skb Das sind Top-Secret Daten! :grinning:

{"basic":{"enable_grid":true,"enable_animation":false,"enable_area_catch":true,"enable_config_icon":true,"enable_last_id":false,"enable_icon_proxy":false,"enable_low_performance":false,"height":423,"width":433,"styles":"","font":{"family":"\"Arial\", sans-serif","size":"20","color":"","fill":"","align":"middle"},"rect":{"height":100,"width":100,"corners":10},"circle":{"radius":50},"elm":{"stroke_width":5,"color":"","fill":"","pos_x":50,"pos_y":50},"icon":{"height":24,"width":24,"color":""}},"calculation":{"battery":{"dod":null,"capacity":null,"percent":null,"charge":null,"charge_prop":false,"charge_kw":false,"discharge":null,"discharge_prop":false,"discharge_kw":false},"consumption":{"production":[-1],"production_kw":false,"gridFeed":null,"gridFeed_kw":false,"gridFeed_prop":false,"gridConsume":null,"gridConsume_kw":false,"gridConsume_prop":false,"batteryCharge":null,"batteryCharge_kw":false,"batteryCharge_prop":false,"batteryDischarge":null,"batteryDischarge_kw":false,"batteryDischarge_prop":false}},"animation":{"stroke":"#ffce4a","stroke_dasharray":"10 17 10 17 10  72","stroke_width":"6","animation_duration":"2000","stroke_linecap":"round","animation_timing_function":"linear"},"animation_configuration":{"dots":"3","distance":"17","length":"10"},"line":{"stroke_width":"8","stroke":"#000000"},"elements":{"5":{"position":5,"type":"rect","id":5,"rx":10,"height":150,"width":400,"pos_x":16,"pos_y":135,"fill":"none","color":"rgb(242, 14, 64)","stroke":2,"shadow":"rgba(0, 0, 0, 0.7)","frame":"_overlay","fill_type":-1,"fill_direction":90,"border_value":"#0E26FF","border_type":"value","border_direction":"cw","border_style":"round","border_max":35,"border_reverse":false,"border_start":0,"source":2,"threshold":0},"7":{"position":4,"type":"rect","id":7,"rx":10,"height":100,"width":100,"pos_x":317,"pos_y":309,"fill":"none","color":"rgb(161, 211, 67)","stroke":2,"shadow":"rgba(0, 0, 0, 0.7)","frame":"_overlay","fill_value":"rgb(161,211,67)","fill_type":"value","fill_direction":90,"fill_max":20,"border_type":-1,"border_direction":"cw","border_style":"round","border_reverse":false,"border_start":null,"source":1,"threshold":0,"override":{">100":{"fill":"#B5FF00"},"<100":{"fill":"none"}}},"9":{"position":4,"type":"text","subType":"datasource","id":9,"pos_x":368,"pos_y":391,"color":"none","fill":"rgb(0, 0, 0)","font_family":"Arial, sans-serif","font_size":18,"align":"middle","text":"ID 9","unit":"W","source":1,"source_option":-1,"source_display":"value","shadow":"","threshold":0,"calculate_kw":"none","counter_animation":false,"convert":false,"decimal_places":0,"action":"none","subtract":[-1],"add":[-1],"frame":"_overlay"},"12":{"position":3,"type":"icon","id":"12","icon":"material-symbols:heat-pump-outline","width":70,"height":70,"color":"rgba(0, 0, 0, 0.7)","pos_x":"330","pos_y":"315","shadow":"","source":-1,"threshold":0,"frame":"_overlay","action":"none"},"13":{"position":3,"type":"rect","id":13,"rx":10,"height":100,"width":100,"pos_x":13,"pos_y":309,"fill":"none","color":"rgb(161, 211, 67)","stroke":2,"shadow":"rgba(0, 0, 0, 0.7)","frame":"_overlay","fill_value":"#8CFF08","fill_type":"value","fill_direction":90,"fill_max":200,"border_type":-1,"border_direction":"cw","border_style":"round","border_reverse":false,"border_start":null,"source":0,"threshold":0,"override":{">100":{"fill":"#B5FF00"},"<100":{"fill":"none"}}},"20":{"position":2,"type":"rect","id":20,"rx":10,"height":100,"width":100,"pos_x":315,"pos_y":309,"fill":"none","color":"rgb(139, 65, 201)","stroke":0,"shadow":"","frame":"_overlay","fill_type":-1,"fill_direction":90,"border_type":-1,"border_direction":"cw","border_style":"round","border_reverse":false,"border_start":180,"source":-1,"threshold":0},"21":{"position":3,"type":"text","subType":"datasource","id":21,"pos_x":225,"pos_y":224,"color":"none","fill":"rgb(0, 0, 0)","font_family":"Arial, sans-serif","font_size":26,"align":"middle","text":"ID 21","unit":"°C","source":2,"source_option":-1,"source_display":"value","shadow":"","threshold":0,"calculate_kw":"none","counter_animation":false,"convert":false,"decimal_places":1,"action":"none","subtract":[-1],"add":[-1],"frame":"_overlay"},"22":{"position":2,"type":"text","subType":"datasource","id":22,"pos_x":59,"pos_y":392,"color":"none","fill":"rgb(0, 0, 0)","font_family":"Arial, sans-serif","font_size":18,"align":"middle","text":"ID 22","unit":"W","source":0,"source_option":-1,"source_display":"value","shadow":"","threshold":0,"calculate_kw":"none","counter_animation":false,"convert":false,"decimal_places":0,"action":"none","subtract":[-1],"add":[-1],"frame":"_overlay"},"23":{"position":2,"type":"icon","id":"23","icon":"cbi:pool-filter","width":70,"height":70,"color":"rgba(0, 0, 0, 0.7)","pos_x":"28","pos_y":"312","shadow":"","source":-1,"threshold":0,"frame":"_overlay","action":"none"},"26":{"position":1,"type":"text","subType":"datasource","id":26,"pos_x":356,"pos_y":113,"color":"none","fill":"rgb(0, 0, 0)","font_family":"Arial, sans-serif","font_size":26,"align":"middle","text":"ID 26","unit":"°C","source":3,"source_option":-1,"source_display":"value","shadow":"","threshold":0,"calculate_kw":"none","counter_animation":false,"convert":false,"decimal_places":1,"action":"none","subtract":[-1],"add":[-1],"frame":"_overlay"},"27":{"position":1,"type":"icon","id":"27","icon":"ph:sun-duotone","width":70,"height":70,"color":"rgb(250, 250, 62)","pos_x":"318","pos_y":"25","shadow":"","source":-1,"threshold":0,"frame":"_overlay","action":"none"},"28":{"position":1,"type":"image","id":"28","width":"300","height":"150","pos_x":"63","pos_y":"140","shadow":"","source":-1,"threshold":0,"href":"/vis-2.0/Voelker/Pool.jpg","preserveAspectRatio":"xMidYMid meet","frame":"_overlay","action":"none"},"29":{"position":0,"type":"icon","id":"29","icon":"mdi:robot-mower","width":70,"height":70,"color":"rgba(0, 0, 0, 0.7)","pos_x":"53","pos_y":"48","shadow":"","css_general":".rotateanimation0 {   -webkit-animation: rotation 20s infinite linear; }   @-webkit-keyframes rotation {   from {     -webkit-transform: rotate(0deg);   } to {      -webkit-transform: rotate(359deg);   } }","source":4,"threshold":0,"frame":"_overlay","action":"none","override":{"<50":{"display":"inline"},">50":{"display":"inline"}}},"30":{"position":0,"type":"text","subType":"datasource","id":30,"pos_x":89,"pos_y":115,"color":"none","fill":"rgb(0, 0, 0)","font_family":"Arial, sans-serif","font_size":18,"align":"middle","text":"ID 30","unit":"W","source":4,"source_option":-1,"source_display":"value","shadow":"","threshold":0,"calculate_kw":"none","counter_animation":false,"convert":false,"decimal_places":0,"action":"none","subtract":[-1],"add":[-1],"frame":"_overlay","override":{"<5":{"display":"none"},">5":{"display":"inline"}}},"31":{"position":0,"type":"rect","id":31,"rx":10,"height":100,"width":100,"pos_x":41,"pos_y":30,"fill":"none","color":"rgb(161, 211, 67)","stroke":2,"shadow":"rgba(0, 0, 0, 0.7)","frame":"_overlay","fill_value":"#8CFF08","fill_type":"value","fill_direction":"90","fill_max":"10","border_type":"-1","border_direction":"cw","border_style":"round","border_reverse":false,"border_start":null,"source":"4","threshold":0,"override":{">100":{"fill":"#B5FF00"},"<100":{"fill":"none"}}}},"defs":{"path_5_13":{"type":"def","id":"path_5_13","d":"M196 286  V 296.6   V 324 A 15 15 0 0 1 181 339  H 114","startSlot":"bottom_left","endSlot":"right_top"},"path_13_7":{"type":"def","id":"path_13_7","d":"M114 379  H 316","startSlot":"right_bottom","endSlot":"left_bottom"},"path_7_5":{"type":"def","id":"path_7_5","d":"M316 339  H 300   H 251 A 15 15 0 0 1 236 324  V 286","startSlot":"left_top","endSlot":"bottom_right"},"path_20_5":{"type":"def","id":"path_20_5","d":"M315 339  H 299.2   H 251 A 15 15 0 0 1 236 324  V 286","startSlot":"left_top","endSlot":"bottom_right"}},"lines":{"line_path_5_13":{"type":"line","id":"line_path_5_13","href":"#path_5_13","color":"rgb(0, 0, 0)","shadow":""},"line_path_13_7":{"type":"line","id":"line_path_13_7","href":"#path_13_7","color":"rgb(0, 0, 0)","shadow":""},"line_path_7_5":{"type":"line","id":"line_path_7_5","href":"#path_7_5","color":"rgb(0, 0, 0)","shadow":""},"line_path_20_5":{"type":"line","id":"line_path_20_5","href":"#path_20_5","color":"rgb(0, 0, 0)","shadow":"","override":{">49":{"display":"inline"},"<50":{"display":"none"}}}},"animations":{"anim_path_5_13":{"type":"animation","id":"anim_path_5_13","href":"#path_5_13","color":"rgb(0, 181, 221)","source":0,"threshold":50,"animation_properties":"positive","animation_option":false,"dots":0,"duration":0,"power":0,"animation_type":-1},"anim_path_13_7":{"type":"animation","id":"anim_path_13_7","href":"#path_13_7","color":"rgb(0, 181, 221)","source":0,"threshold":50,"animation_properties":"positive","animation_option":false,"dots":0,"duration":0,"power":0,"animation_type":-1},"anim_path_7_5":{"type":"animation","id":"anim_path_7_5","href":"#path_7_5","color":"rgb(0, 181, 221)","source":0,"threshold":50,"animation_properties":"positive","animation_option":false,"dots":0,"duration":0,"power":0,"animation_type":-1},"anim_path_20_5":{"type":"animation","id":"anim_path_20_5","href":"#path_20_5","color":"rgb(255, 0, 0)","source":1,"threshold":5,"animation_properties":"positive","animation_option":false,"dots":0,"duration":0,"power":0,"animation_type":-1,"override":{"<50":{"stroke":"none"},">50":{"stroke":"rgba(255, 0, 0,1)"}}}},"datasources":{"0":{"source":"alias.0.Garten.Poolpumpe.Power","alias":"Poolpumpe Leistung","factor":1},"1":{"source":"alias.0.Garten.Wärmepumpe.Power","alias":"Wärmepumpe","factor":1},"2":{"source":"alias.0.Garten.Pooltemperatur.ACTUAL","alias":"Pooltemperatur","factor":1},"3":{"source":"alias.0.Garten.Lufttemperatur.outdoortemp","alias":"Lufttemperatur","factor":1},"4":{"source":"alias.0.Garten.Poolroboter.Power","alias":"Poolroboter","factor":1}}}

[Merlin123]

@skb eine neue Instanz, wo ich die Konfig rein kopiere, sieht leider genauso aus. Auch der Bearbeitungsbereich oben...