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>
This commit is contained in:
Claude Opus 5
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user