Rocksolid Light

groups  faq  privacy  How to post  login

Message-ID:  

You will live to see your grandchildren.

rocksolid / de.comp.lang.javascript / Re: animierte Linie

SubjectAuthor
* animierte LinieJan Novak
`* Re: animierte LinieJanis Papanagnou
 `* Re: animierte LinieJan Novak
  `* Re: animierte LinieJanis Papanagnou
   `- Re: animierte LinieJan Novak

1
Subject: animierte Linie
From: Jan Novak
Newsgroups: de.comp.lang.javascript
Organization: MB-NET.NET for Open-News-Network e.V.
Date: Tue, 21 Nov 2023 07:36 UTC
Path: i2pn2.org!i2pn.org!weretis.net!feeder8.news.weretis.net!news.mb-net.net!open-news-network.org!.POSTED!not-for-mail
From: rep...@gmail.com (Jan Novak)
Newsgroups: de.comp.lang.javascript
Subject: animierte Linie
Date: Tue, 21 Nov 2023 08:36:02 +0100
Organization: MB-NET.NET for Open-News-Network e.V.
Message-ID: <ujhml3$2pbt0$1@gwaiyur.mb-net.net>
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8; format=flowed
Content-Transfer-Encoding: 8bit
Injection-Date: Tue, 21 Nov 2023 07:36:03 -0000 (UTC)
Injection-Info: gwaiyur.mb-net.net;
logging-data="2928544"; mail-complaints-to="abuse@open-news-network.org"
User-Agent: Mozilla Thunderbird
Cancel-Lock: sha1:3OqWR7wW0B+GgK+MHO/+G7YULAg= sha256:L5rTEzqOUNfgGMAWJIC1phhSzWt5xW0i71tSHgdcf3M=
sha1:O28ipiNwSJRT7Kl++7/q68xuP6U= sha256:2Bvolat/h+IZZibhSRS2vITi58oDcsSyrLXvsJJTeg0=
Content-Language: de-DE
View all headers

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

Subject: Re: animierte Linie
From: Janis Papanagnou
Newsgroups: de.comp.lang.javascript
Organization: A noiseless patient Spider
Date: Tue, 21 Nov 2023 10:08 UTC
References: 1
Path: i2pn2.org!i2pn.org!eternal-september.org!feeder3.eternal-september.org!news.eternal-september.org!.POSTED!not-for-mail
From: janis_pa...@hotmail.com (Janis Papanagnou)
Newsgroups: de.comp.lang.javascript
Subject: Re: animierte Linie
Date: Tue, 21 Nov 2023 11:08:30 +0100
Organization: A noiseless patient Spider
Lines: 40
Message-ID: <ujhviu$pkaj$1@dont-email.me>
References: <ujhml3$2pbt0$1@gwaiyur.mb-net.net>
MIME-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 8bit
Injection-Date: Tue, 21 Nov 2023 10:08:30 -0000 (UTC)
Injection-Info: dont-email.me; posting-host="3f14ec3713512a8ba38d2eb7397f3566";
logging-data="840019"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX18coP3SVSy71y0EwVJ6p5Nn"
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:45.0) Gecko/20100101
Thunderbird/45.8.0
Cancel-Lock: sha1:96vQnBhANINJ2HSGWrQ96vrgm4c=
X-Enigmail-Draft-Status: N1110
In-Reply-To: <ujhml3$2pbt0$1@gwaiyur.mb-net.net>
View all headers

On 21.11.2023 08:36, Jan Novak wrote:
> 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?

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

Subject: Re: animierte Linie
From: Jan Novak
Newsgroups: de.comp.lang.javascript
Organization: MB-NET.NET for Open-News-Network e.V.
Date: Tue, 21 Nov 2023 13:29 UTC
References: 1 2
Path: i2pn2.org!i2pn.org!usenet.goja.nl.eu.org!3.eu.feeder.erje.net!feeder.erje.net!news.mb-net.net!open-news-network.org!.POSTED!not-for-mail
From: rep...@gmail.com (Jan Novak)
Newsgroups: de.comp.lang.javascript
Subject: Re: animierte Linie
Date: Tue, 21 Nov 2023 14:29:38 +0100
Organization: MB-NET.NET for Open-News-Network e.V.
Message-ID: <ujibc3$2qls6$2@gwaiyur.mb-net.net>
References: <ujhml3$2pbt0$1@gwaiyur.mb-net.net> <ujhviu$pkaj$1@dont-email.me>
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8; format=flowed
Content-Transfer-Encoding: 8bit
Injection-Date: Tue, 21 Nov 2023 13:29:39 -0000 (UTC)
Injection-Info: gwaiyur.mb-net.net;
logging-data="2971526"; mail-complaints-to="abuse@open-news-network.org"
User-Agent: Mozilla Thunderbird
Cancel-Lock: sha1:Gsmtm9vHAmBGaEVH6iz5wzQGgUo= sha256:426cnvBfJkiER/Sq892GRchBnXQcsBzFDkmlULDPi0E=
sha1:wxqKyi/I3WRjG2WaIQF+uGBnpiI= sha256:T6D/xonEBiH2Y9fe/kPxiBURIZSQqz9M2GlXttvl6u4=
Content-Language: de-DE
In-Reply-To: <ujhviu$pkaj$1@dont-email.me>
View all headers

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">
<!-- Weißer Balken -->
<rect x="0" y="0" width="200" height="10" fill="white" />

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

Subject: Re: animierte Linie
From: Janis Papanagnou
Newsgroups: de.comp.lang.javascript
Organization: A noiseless patient Spider
Date: Wed, 22 Nov 2023 04:49 UTC
References: 1 2 3
Path: i2pn2.org!i2pn.org!eternal-september.org!feeder3.eternal-september.org!news.eternal-september.org!.POSTED!not-for-mail
From: janis_pa...@hotmail.com (Janis Papanagnou)
Newsgroups: de.comp.lang.javascript
Subject: Re: animierte Linie
Date: Wed, 22 Nov 2023 05:49:04 +0100
Organization: A noiseless patient Spider
Lines: 35
Message-ID: <ujk181$178fc$1@dont-email.me>
References: <ujhml3$2pbt0$1@gwaiyur.mb-net.net> <ujhviu$pkaj$1@dont-email.me>
<ujibc3$2qls6$2@gwaiyur.mb-net.net>
MIME-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 8bit
Injection-Date: Wed, 22 Nov 2023 04:49:05 -0000 (UTC)
Injection-Info: dont-email.me; posting-host="5fed2192fdbf07e7d5f7221a01745de7";
logging-data="1286636"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX1/2tWVRn4x7ifabh6w9qr6H"
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:45.0) Gecko/20100101
Thunderbird/45.8.0
Cancel-Lock: sha1:ToqdYbJnw5YYgGSAOCYs/AH8tkQ=
In-Reply-To: <ujibc3$2qls6$2@gwaiyur.mb-net.net>
X-Enigmail-Draft-Status: N1110
X-Mozilla-News-Host: news://news.eternal-september.org
View all headers

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

Subject: Re: animierte Linie
From: Jan Novak
Newsgroups: de.comp.lang.javascript
Date: Wed, 22 Nov 2023 05:58 UTC
References: 1 2 3 4
Path: i2pn2.org!i2pn.org!news.nntp4.net!.POSTED!not-for-mail
From: rep...@gmail.com (Jan Novak)
Newsgroups: de.comp.lang.javascript
Subject: Re: animierte Linie
Date: Wed, 22 Nov 2023 06:58:39 +0100
Message-ID: <ujk5ag$35rqe$2@news.nnpt4.net>
References: <ujhml3$2pbt0$1@gwaiyur.mb-net.net> <ujhviu$pkaj$1@dont-email.me>
<ujibc3$2qls6$2@gwaiyur.mb-net.net> <ujk181$178fc$1@dont-email.me>
Mime-Version: 1.0
Content-Type: text/plain; charset=UTF-8; format=flowed
Content-Transfer-Encoding: 8bit
X-Trace: eJwljUEKwjAQAM/6iiUnBVND0kppKRS8e1I8xzSNhXY3mK3i760652EG/StliJHzDD3XECnxgEFa52hGbsStp0d07dveibLOi3q9GimEr9NZto0wxpTqoEUNkx1G6WiKox2Qk2RqxJz80m3xv+H42wjYw9V3O9AaTvQErbQBVVRFWeUKpFqAzeV83H4AzfAx0w==
User-Agent: Mozilla Thunderbird
Cancel-Lock: sha1:nIyRvFwJDR1wfozzkMsuMNPAJoQ=
In-Reply-To: <ujk181$178fc$1@dont-email.me>
Content-Language: de-DE
X-Abuse-Contact: "https://abuse.nntp4.net"
View all headers

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

rocksolid / de.comp.lang.javascript / Re: animierte Linie

1
server_pubkey.txt

rocksolid light 0.9.136
clearnet tor