German Linie animieren (flowline, Energieflussdiagramm), hat jemand eine Idee?

spunky1a

Member
Hallo,

ich will ein Flussdiagramm darstellen, wie dieses hier, es läuft als html mit animierten svg-Linien:

diese html habe ich in ein webview geladen, da läuft es auch flüssig, wenn ich allerdings die Energiedaten aktualisiere kommt es zu Rucklern:

Die Daten werden in einer 2sec-timer-Schleife und per
WebViewExtras1.executeJavascript(WebView1, $"Netzbezug1('${Round(netzbezug)}')"$) ):
aktualisiert, das funktioniert also nicht.

Hat jemand eine andere Idee wie man das besser realisieren kann?
 

BlueVision

Active Member
Licensed User
Longtime User
Hallo, ich bin jetzt nicht der große SVG-Experte.
Aber SVG's sind skalierbare Vektorgrafiken. Vektoren müssen errechnet werden und ich denke das kostet unter Umständen zu viel Prozessorzeit.
Sofern die animierte Grafik immer gleich bleibt (also alle "Streams" jederzeit gleichmäßig "fließen"), würde ich das folgendermaßen probieren:

Ersetze die animierte Grafik durch mehrere Einzelbilder die über den Timer in eine Imageview geladen werden. Verringere das Timerintervall solange, bis Du eine einigermassen flüssige Bewegung siehst, das muss jetzt nicht im 10tel-Sekunden-Takt erfolgen, Hauptsache regelmäßig. Das muss ja vielleicht auch nicht unbedingt "fließen", sondern kann auch mit einem Stop-Motion-Effekt ganz nett aussehen. Abhängig von einer Variablen im Timer adressierst Du die Einzelbilder und lädst sie in die Imageview. Das geht sehr schnell. Sind die Bilder durchgezählt, Variable zurücksetzen, die darzustellenden Werte aktualisieren und der ganze Quatsch beginnt von vorn.

Ich habe mit diesem Prinzip eine animierte Grafik im Ladebildschirm einer App realisiert, das ist ein sich durchblätterndes Buch, welches das Laden von Daten verdeutlicht. Sieht sehr flüssig aus und es passieren trotzdem noch viele Sachen asynchron abseits der eigentlich Animation. Der Ansatz mit dem Timer an sich ist schon korrekt, das garantiert Dir eine flüssige Bewegung in der Animation. packe aber nicht zu viele Sachen in die Timerroutine

Vielleicht wäre das ja auch eine Lösung in Deinem Fall.

Nachtrag:
Das ist natürlich davon abhängig, wie Deine Programmumgebung selbst aussieht. Das Darstellen einer derartigen Animation in einer Webview mit einer Animation ist vielleicht vom Ansatz her schon zu aufwendig.
Die Werte müssen ja auch irgendwie in die Ansicht mit rein, und das ist vielleicht dann in diesem Fall ein Problem.
Eine Imageview, richtig skaliert mit ein paar darüber gesetzten Labeln hat den gleichen Effekt. Aber das Update der Daten und die Animation sind auf diese Weise schon einmal von einander entkoppelt. Probiere es einfach mal aus.
 
Last edited:
Upvote 0

spunky1a

Member
ich habe mir jetzt was brauchbares gebastelt, damit werde ich erstmal weitermachen. Falls noch jemand eine Idee hat oder das vorhandene vereinfachen oder verbessern kann, dann gerne...
 

Attachments

  • test2.zip
    28.2 KB · Views: 39
Upvote 0

spunky1a

Member
ok, es funktioniert leider auch nicht besser, die Ruckler kommen durch die verzögerte Modbus-Abfrage mit der ich die Werte von den Geräten auslese. :(
 
Upvote 0

spunky1a

Member
ich lass jetzt die Animation weg und hab ein paar Pfeile dran gemacht, das passt erstmal für mich.

Weiß jemand wie man die untere Buttonleiste (Menü, Home, Back) einfärben kann?

1705825898743.png
 
Upvote 0

BlueVision

Active Member
Licensed User
Longtime User
Sieht auch gut aus. Außerdem spart das ne Menge Akkulaufzeit ohne Animation. Aber daran liegt's bei Dir ja nicht, wie ich sehe...
 
Upvote 0
Top