animierte Linie

Jan Novak

unread,

Nov 21, 2023, 2:36:05 AM11/21/23

to

Hallo,

ich möchte für mein Hausüberwachung eine Linie zwischen zwei Bildern
(z.B. Speicher < - > Netzstrom) anzeigen lassen, welche eine Animation
anzeigt, in welche Richtung der Strom gerade fliesst und dies auch mit
verschiedenen Farben und Geschwindigkeiten.

Ich habe das bisher mit "progress-bar" "progress-bar-animated-reverse"
usw. gemacht, dies gefällt mir aber nicht.

Mir würde eine Linie gefallen, auf welcher dicke "punkte" lang laufen
und somit die Richtung symbolisieren.

Leider habe ich so etwas bisher nirgends gefunden. Gibts da vielleicht
eine fertige Bibliothek?

Jan

Janis Papanagnou

unread,

Nov 21, 2023, 5:08:33 AM11/21/23

to

Solch einfache Animationen, wie du sie beschreibst, würde ich manuell
mit SVG formulieren; ist nicht viel Aufwand. Hier ein Beispiel mit nur
einem Punkt auf einem Balken:

<html>
<body>
<svg>
<rect id="leitung" x="50" y="50" width="250" height="20"/>
<circle id="strom" cx="60" cy="60" r="8" fill="red">
<animateTransform id="move"
attributeName="transform" type="translate"
from="0" to="230" dur="3s" repeatCount="indefinite"/>
</circle>
</svg>
</body>
</html>

Die Attribute (Farbe, Geschwindigkeit, etc.) kannst du per Javascript
natürlich auch dynamisch verändern. Und du kannst auch mehrere Punkte
nach Bedarf definieren (oder duplizieren).

Janis

Jan Novak

unread,

Nov 21, 2023, 8:29:41 AM11/21/23

to

Am 21.11.23 um 11:08 schrieb Janis Papanagnou:

> Solch einfache Animationen, wie du sie beschreibst, würde ich manuell
> mit SVG formulieren; ist nicht viel Aufwand. Hier ein Beispiel mit nur
> einem Punkt auf einem Balken:
>
> <html>
> <body>
> <svg>
> <rect id="leitung" x="50" y="50" width="250" height="20"/>
> <circle id="strom" cx="60" cy="60" r="8" fill="red">
> <animateTransform id="move"
> attributeName="transform" type="translate"
> from="0" to="230" dur="3s" repeatCount="indefinite"/>
> </circle>
> </svg>
> </body>
> </html>
>

Genau sowas suche ich. Mehr brauch ich gar nicht. Leider habe ich es
nicht hinbekommen, dass die Punkte von links alle 40 Pixel erscheinen
und rechts verschwinden (also nicht zurück springen)
Das ist mein erster Ansatz, vielleicht kannst du mir noch nen Tip geben.

<svg width="100%" height="100">

<rect x="0" y="0" width="200" height="10" fill="white" />


<circle cx="20" cy="5" r="5" fill="blue">
<animate attributeName="cx" values="20; 60; 100; 140; 180"
dur="4s" keyTimes="0; 0.25; 0.5; 0.75; 1" repeatCount="indefinite" />
</circle>

<circle cx="220" cy="5" r="5" fill="blue">
<animate attributeName="cx" values="220; 260; 300; 340; 380"
dur="4s" keyTimes="0; 0.25; 0.5; 0.75; 1" repeatCount="indefinite" />
</circle>
</svg>

Der erste Punkt fängt zu spät an und geht über den Balken hinaus.
Ich hätte gerne fortlaufende Punkte von links nach recht.

jan

Janis Papanagnou

unread,

Nov 21, 2023, 11:49:08 PM11/21/23

to

On 21.11.2023 14:29, Jan Novak wrote:
> Am 21.11.23 um 11:08 schrieb Janis Papanagnou:
>> Solch einfache Animationen, wie du sie beschreibst, würde ich manuell
>> mit SVG formulieren; ist nicht viel Aufwand. Hier ein Beispiel mit nur
>> einem Punkt auf einem Balken:

>>[...]

>
> Genau sowas suche ich. Mehr brauch ich gar nicht. Leider habe ich es
> nicht hinbekommen, dass die Punkte von links alle 40 Pixel erscheinen
> und rechts verschwinden (also nicht zurück springen)
> Das ist mein erster Ansatz, vielleicht kannst du mir noch nen Tip geben.

Ich bin bei dem Thema leider kein Fachmann; das Beispiel hatte
ich auch nur mal schnell zusammgestellt. Els Tipp: siehe unten.

> [...]

>
> Der erste Punkt fängt zu spät an und geht über den Balken hinaus.
> Ich hätte gerne fortlaufende Punkte von links nach recht.

Ich hatte bei meinem Beispiel die Koordinaten geeignet angepasst.

Man das könnte sicherlich auch über ein Cropping mittels viewBox
leisten, aber sauberer wäre schon, wenn man die Koordinaten der
Objekte entsprechend konsistent definiert.

Was mir an deinem Code auffält, ist, dass du einen Balken mit
width=200 definiert hast, der zweite deiner beiden circle animates
aber Werte über 200 definiert. Wenn das also dazu führt, dass
Punkte über das rectangle hinauswandern, so wundert es mich nicht.
Gleiches für den Punkt, der bei dir nicht wie das rectangle bei 0
anfängt sondern erst bei 20. :-)

Janis

Jan Novak

unread,

Nov 22, 2023, 12:58:42 AM11/22/23

to

Am 22.11.23 um 05:49 schrieb Janis Papanagnou:

>> Genau sowas suche ich. Mehr brauch ich gar nicht. Leider habe ich es
>> nicht hinbekommen, dass die Punkte von links alle 40 Pixel erscheinen
>> und rechts verschwinden (also nicht zurück springen)
>> Das ist mein erster Ansatz, vielleicht kannst du mir noch nen Tip geben.

> Was mir an deinem Code auffält, ist, dass du einen Balken mit
> width=200 definiert hast, der zweite deiner beiden circle animates
> aber Werte über 200 definiert. Wenn das also dazu führt, dass
> Punkte über das rectangle hinauswandern, so wundert es mich nicht.
> Gleiches für den Punkt, der bei dir nicht wie das rectangle bei 0
> anfängt sondern erst bei 20. :-)

Ich hatte da wild an den Daten gespielt, aber kein Ergebnis bekommen,
was meinem Wunsch entspräche. Ich möchte halt auch kein Studium zum
Thema SVG machen, wegen so einer Linie ;-)

Hab auch mal chatgpt gefragt, kam aber auch nicht das raus, was ich mir
wünsche ...

Jan