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
+108
@@ -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); }
|
||||
|
||||
+30
-1
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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