Fahrzeugbild zeigt die Fahrt: Strasse, Baeume, etwas Fahrtwind

Ob das Auto gerade rollt, stand bisher nur klein unter der Karte
("unterwegs - zuletzt: ..."). Im Bild selbst, wo man zuerst hinsieht, war es
nicht zu erkennen.

Waehrend der Fahrt liegt jetzt eine Strasse unter dem Wagen: dunkler Belag,
gestrichelte Markierungen in den Randstreifen neben den Raedern, zwei Reihen
Baumkronen, die aussen vorbeiziehen. Dazu vier Windstreifen - zwei neben dem
Wagen, zwei ueber ihn hinweg, heller und duenner, damit sie wie Luft wirken
und nicht wie ein Riss im Lack.

Beide Schleifen treffen sich selbst: die Striche wandern um eine
Strich-Lueckenlaenge (46), die Baumreihen um ihren Abstand (160) - danach
steht das Muster wieder wie zuvor, und man sieht keinen Sprung. Markierungen
und Baeume laufen mit derselben Geschwindigkeit, der Wind etwa anderthalbmal
so schnell; groessere Unterschiede lassen die Bewegungen auseinanderfallen.

Dazu ein Abzeichen "unterwegs" im Kopf der Kachel - fuer Vorleseprogramme und
fuer alle, die Bewegungen abgeschaltet haben; dann steht die Landschaft still
(prefers-reduced-motion).

Der Zustand kommt aus park_state der juengsten Zeile; der Broker kennt ihn
nicht, unter solarManager/ev* stehen nur Ladestand, Reichweite und Ladung.
Unterwegs fragt der Sammler alle vier Minuten, die Seite laedt jede Minute
nach - die Anzeige hinkt also um wenige Minuten hinterher.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

css/solar.css

@@ -1131,6 +1131,114 @@ input[type='range']::-webkit-slider-runnable-track {
   stroke-width: 2;
 }
 
+/* --- Strasse ------------------------------------------------------------
+   Sichtbar nur waehrend der Fahrt. Sie traegt die eigentliche Bewegung: der
+   Belag dunkelt die Flaeche ab, die Markierungen laufen in den Randstreifen
+   neben den Raedern, die Baeume ziehen aussen vorbei.
+
+   Beide Schleifen sind so gebaut, dass sie sich selbst treffen: die Striche
+   wandern um eine Strich-Lueckenlaenge (26 + 20 = 46), die Baumreihen um
+   ihren Abstand (160). Nach einem Durchlauf steht das Muster wieder wie
+   zuvor - deshalb sieht man keinen Sprung.
+
+   Alle drei laufen mit derselben Geschwindigkeit von rund 180 Einheiten je
+   Sekunde: Markierungen und Baeume gehoeren zur selben Landschaft, und ein
+   Baum, der langsamer zurueckbleibt als der Strich daneben, faellt sofort
+   auf. */
+.skoda-auto .strasse { display: none; }
+.skoda-auto.faehrt .strasse { display: block; }
+
+.skoda-auto .strasse .belag {
+  fill: rgba(8, 10, 12, 0.35);
+}
+
+.skoda-auto .strasse .markierung line {
+  stroke: rgba(232, 237, 233, 0.35);
+  stroke-width: 3;
+  stroke-dasharray: 26 20;
+  animation: skoda-markierung 0.26s linear infinite;
+}
+
+.skoda-auto .strasse .baum {
+  fill: rgba(96, 140, 104, 0.55);
+  stroke: rgba(52, 84, 60, 0.7);
+  stroke-width: 1.2;
+}
+.skoda-auto .strasse .baumreihe { animation: skoda-baeume 0.9s linear infinite; }
+/* Die rechte Reihe etwas langsamer und mit Vorlauf - sonst stehen sich die
+   Baeume paarweise gegenueber. */
+.skoda-auto .strasse .rechts { animation-duration: 1.05s; animation-delay: -0.4s; }
+
+@keyframes skoda-markierung {
+  from { transform: translateY(0); }
+  to   { transform: translateY(46px); }
+}
+@keyframes skoda-baeume {
+  from { transform: translateY(0); }
+  to   { transform: translateY(160px); }
+}
+
+/* --- Fahrtwind ----------------------------------------------------------
+   Vier Streifen neben dem Wagen, die von vorn nach hinten laufen. Sichtbar
+   nur, solange zeichneFahrt() dem SVG die Klasse "faehrt" gibt.
+
+   Die Laenge der Streifen steckt im Markup (y1/y2), die Bewegung hier: jede
+   Spur laeuft in eigenem Takt und mit eigenem Vorlauf ueber das Bild, sonst
+   marschieren die vier im Gleichschritt und es sieht nach Zebrastreifen aus
+   statt nach Fahrt. Der Weg reicht von weit oberhalb bis weit unterhalb der
+   viewBox (-8 bis 508), damit kein Streifen im Bild entsteht oder endet. */
+.skoda-auto .fahrtwind { display: none; }
+.skoda-auto.faehrt .fahrtwind { display: block; }
+/* Die Streifen ueber dem Wagen liegen ueber den beiden Knoepfen; sie duerfen
+   deren Beruehrungen nicht abfangen. */
+.skoda-auto .fahrtwind-oben { pointer-events: none; }
+
+.skoda-auto .fahrtwind line {
+  stroke: rgba(var(--skoda-blech), 0.75);
+  stroke-width: 4;
+  stroke-linecap: round;
+  animation: skoda-fahrtwind 1.1s linear infinite;
+}
+/* Vier Spuren, jede mit eigenem Takt und Vorlauf. Der Wind zieht etwa
+   anderthalbmal so schnell wie die Landschaft: schneller, weil Luft ueber den
+   Wagen streicht, aber nicht so viel schneller, dass die beiden Bewegungen
+   auseinanderfallen. */
+.skoda-auto .fahrtwind .b1 { animation-duration: 2.40s; animation-delay: -0.30s; opacity: .5; }
+.skoda-auto .fahrtwind .b6 { animation-duration: 2.60s; animation-delay: -1.70s; opacity: .5; }
+
+/* Ueber dem Fahrzeug: heller, duenner, durchsichtiger. Der Wind zieht ueber
+   das Blech hinweg - er soll sich darauf legen, nicht hineinschneiden. Die
+   Streifen stehen dafuer in einer eigenen Gruppe am Ende des SVG (siehe
+   dort); ihre geringe Deckung haelt Ladestand und Umrisse lesbar. */
+.skoda-auto .fahrtwind .ueber {
+  stroke: rgba(232, 237, 233, 0.85);
+  stroke-width: 3;
+}
+.skoda-auto .fahrtwind .b7  { animation-duration: 2.30s; animation-delay: -0.60s; opacity: .34; }
+.skoda-auto .fahrtwind .b10 { animation-duration: 2.70s; animation-delay: -1.20s; opacity: .34; }
+
+@keyframes skoda-fahrtwind {
+  from { transform: translateY(0); }
+  to   { transform: translateY(680px); }
+}
+
+/* Wer Bewegung abbestellt hat, bekommt sie nicht - aber auch keine leere
+   Stelle: die Streifen stehen dann ruhig neben dem Wagen, und das Abzeichen
+   "unterwegs" im Kopf der Kachel sagt es ohnehin in Worten. */
+@media (prefers-reduced-motion: reduce) {
+  .skoda-auto .fahrtwind line {
+    animation: none;
+    transform: translateY(250px);
+    opacity: .45;
+  }
+  /* Strasse und Baeume bleiben stehen - zu sehen ist dann eine Standaufnahme
+     statt einer Fahrt, und das Abzeichen "unterwegs" sagt den Rest. */
+  .skoda-auto .strasse .markierung line,
+  .skoda-auto .strasse .baumreihe {
+    animation: none;
+  }
+}
+
 .skoda-auto .rad rect     { fill: rgba(18, 20, 24, 0.9); }
 .skoda-auto .spiegel rect { fill: rgba(var(--skoda-blech), 0.55); }
 .skoda-auto .spoiler      { fill: rgba(var(--skoda-blech), 0.55); }

js/solar/skodaMQTT.js

@@ -426,7 +426,16 @@ function liveWerte() {
     klima: stand ? stand.ac_state : null,
     // null heißt: das Fahrzeug meldet den Zustand des Schlosses selbst nicht.
     verriegelt: (stand && stand.locked !== null && stand.locked !== undefined)
-      ? Number(stand.locked) === 1 : null
+      ? Number(stand.locked) === 1 : null,
+    /*
+     * Fährt gerade. Kommt allein aus der Tabelle - der Broker kennt den
+     * Parkzustand nicht, unter solarManager/ev* stehen nur Ladestand,
+     * Reichweite und Ladung. Der Sammler fragt das Fahrzeug unterwegs alle
+     * vier Minuten, die Seite lädt jede Minute nach: die Anzeige hinkt also
+     * um wenige Minuten hinterher. Für "rollt gerade" reicht das; ein
+     * Tachometer ist es nicht.
+     */
+    faehrt: !!(stand && stand.park_state === "IN_MOTION")
   };
 }
 
@@ -538,6 +547,25 @@ function zeichneAbzeichen(w) {
   }
 }
 
+/**
+ * Fahrt anzeigen: Fahrtwind am Fahrzeug, Abzeichen im Kopf der Kachel.
+ *
+ * Zwei Wege für dieselbe Aussage, und beide werden gebraucht. Die Streifen
+ * sieht man aus dem Augenwinkel, ohne zu lesen - dafür sind sie da. Wer die
+ * Seite vorgelesen bekommt oder Bewegungen abgeschaltet hat, hat von ihnen
+ * nichts; deshalb steht es zusätzlich als Wort neben Schloss und Ladezustand.
+ */
+function zeichneFahrt(w) {
+  const bild = $("skodaAuto");
+  if (bild) {
+    bild.classList.toggle("faehrt", w.faehrt);
+  }
+  const abzeichen = $("skodaUnterwegs");
+  if (abzeichen) {
+    abzeichen.hidden = !w.faehrt;
+  }
+}
+
 /**
  * Herkunft des Ladestroms: was die Anlage im Augenblick liefert, gegen das,
  * was die Wallbox zieht. Ohne Ladung hat der Balken nichts zu teilen und
@@ -570,6 +598,7 @@ function zeichneLive() {
   zeichneKlimaknopf(w);
   zeichneKennzahlen(w);
   zeichneAbzeichen(w);
+  zeichneFahrt(w);
   zeichneLadequelle(w);
 }
 

restricted/skoda.php

@@ -58,6 +58,8 @@
             <div class="card-header pb-0 pt-1">
               <h3 class="card-title">Übersicht</h3>
               <div class="card-tools d-flex align-items-center gap-2">
+                <!-- Nur unterwegs sichtbar; zeichneFahrt() blendet es ein. -->
+                <span class="badge text-bg-info" id="skodaUnterwegs" hidden>unterwegs</span>
                 <span class="badge text-bg-secondary" id="skodaSchloss">–</span>
                 <span class="badge text-bg-secondary" id="skodaLadeZustand">–</span>
               </div>
@@ -108,6 +110,64 @@
                             d="M0 0 C 1.5 -4, 5 -7, 7.5 -5 C 9.6 -3.2, 5.5 -0.8, 0 0 Z"/>
                     </defs>
 
+                    <!-- Die Straße, über die der Wagen fährt. Ganz zuerst
+                         gezeichnet, damit alles andere darauf liegt.
+
+                         Der Belag deckt die ganze Zeichenfläche, die
+                         Fahrbahnmarkierungen laufen in den beiden Randstreifen
+                         neben den Rädern - dort ist Platz, ohne dem Fahrzeug
+                         ins Bild zu geraten. Die Striche wandern um genau eine
+                         Strich-Lücke-Länge; danach steht das Muster wieder so
+                         da wie zuvor, und die Schleife ist unsichtbar.
+
+                         Dasselbe bei den Bäumen: ihr Abstand ist der Weg einer
+                         Umdrehung. Die beiden Reihen laufen versetzt und
+                         verschieden schnell, sonst fährt man durch eine Allee
+                         aus Zwillingen. -->
+                    <g class="strasse" aria-hidden="true">
+                      <rect class="belag" x="-16" y="-8" width="256" height="516"/>
+                      <g class="markierung">
+                        <line x1="-2"  y1="-60" x2="-2"  y2="560"/>
+                        <line x1="226" y1="-60" x2="226" y2="560"/>
+                      </g>
+                      <g class="baumreihe links">
+                        <circle class="baum" cx="-9" cy="-100" r="6.5"/>
+                        <circle class="baum" cx="-8" cy="60"   r="5.5"/>
+                        <circle class="baum" cx="-9" cy="220"  r="6.5"/>
+                        <circle class="baum" cx="-8" cy="380"  r="6"/>
+                        <circle class="baum" cx="-9" cy="540"  r="6.5"/>
+                      </g>
+                      <g class="baumreihe rechts">
+                        <circle class="baum" cx="233" cy="-20" r="6"/>
+                        <circle class="baum" cx="233" cy="140" r="6.5"/>
+                        <circle class="baum" cx="232" cy="300" r="5.5"/>
+                        <circle class="baum" cx="234" cy="460" r="6.5"/>
+                      </g>
+                    </g>
+
+                    <!-- Fahrtwind: zeigt an, dass das Fahrzeug gerade rollt.
+                         Die Streifen laufen von vorn nach hinten, also im Bild
+                         von oben nach unten - das Auto zeigt nach oben.
+
+                         Je eine Spur läuft links und rechts am Wagen vorbei,
+                         zwei weitere ziehen über ihn hinweg - der Wind macht
+                         am Blech ja nicht halt. Die über dem Fahrzeug sind
+                         heller und dünner, damit sie wie Luft darüber wirken
+                         und nicht wie ein Riss im Lack; die Mitte bleibt frei,
+                         dort stehen Ladestand und Reichweite.
+
+                         Wenige Streifen mit ungleichem Takt: die Bewegung
+                         kommt jetzt vor allem von der Straße darunter, der
+                         Wind setzt nur noch einen Akzent.
+
+                         Sichtbar nur, solange das SVG die Klasse "faehrt"
+                         trägt (siehe zeichneFahrt()); aria-hidden, weil der
+                         Zustand als Abzeichen im Kopf schon dasteht. -->
+                    <g id="fahrtwind" class="fahrtwind" aria-hidden="true">
+                      <line class="boe b1" x1="-6" y1="-120" x2="-6" y2="-60"/>
+                      <line class="boe b6" x1="230" y1="-120" x2="230" y2="-70"/>
+                    </g>
+
                     <!-- Räder. Vorderachse bei 860 mm, Hinterachse bei 3625 mm
                          ab Bugspitze - der Radstand von 2765 mm maßstäblich. -->
                     <g class="rad">
@@ -358,6 +418,18 @@
                       </g>
                       <title>Klima und Lüftung steuern</title>
                     </g>
+
+                    <!-- Der Teil des Fahrtwinds, der über das Fahrzeug zieht.
+                         Eigene Gruppe am Ende des Bildes, weil die Reihenfolge
+                         im Markup die Malreihenfolge ist - weiter oben lägen
+                         die Streifen unter der Karosserie und wären nicht zu
+                         sehen. pointer-events: none steht im Stylesheet: sie
+                         liegen über den beiden Knöpfen und dürfen deren
+                         Berührungen nicht abfangen. -->
+                    <g class="fahrtwind fahrtwind-oben" aria-hidden="true">
+                      <line class="boe ueber b7"  x1="62"  y1="-120" x2="62"  y2="-65"/>
+                      <line class="boe ueber b10" x1="163" y1="-120" x2="163" y2="-60"/>
+                    </g>
                   </svg>
 
                   <p class="skoda-hinweis">