adminandClaude Opus 5
01bcbfffc1
Die Relingholme enden hinten bei 3,79 m statt 3,98 m: am Auto laufen sie ueber dem Radlauf aus, der Spoiler sitzt ein Stueck dahinter. Der Spoiler selbst ist an den Enden stumpf abgeschnitten statt spitz - die Spitzen gaben ihm die Form eines Blattes, am Auto hoert er schlicht auf. Die Spiegel ruecken von 1,81 m auf 1,62 m, also an den Fuss der A-Saeule, und die vorderen Seitenscheiben laufen bis 1,66 m nach vorn mit. Vorher stand dort ein Stueck Blech, das es nicht gibt. Die Anhaengerkupplung steht wieder hinten heraus - die Kugel rund neun Zentimeter hinter der Heckkante, so wie am Auto. Dass das nicht wie ein Loch im Umriss aussieht, liegt jetzt an der Farbe: ganz schwarz, damit erkennbar ein Anbauteil und kein fehlendes Blech. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
841 lines
46 KiB
PHP
841 lines
46 KiB
PHP
<?php
|
||
/*
|
||
* Škoda-Dashboard.
|
||
*
|
||
* Zwei Datenwege, bewusst getrennt:
|
||
*
|
||
* MQTT Ladestand, Verriegelung, Reichweite, Ladezustand und
|
||
* Wallbox-Leistung kommen laufend über solarManager/# und
|
||
* aktualisieren die Anzeige sofort.
|
||
*
|
||
* ajax/skoda.php Alles, was nur in der Tabelle steht - Türen, Fenster,
|
||
* Licht, Kilometerstand, Position, Klima - sowie sämtliche
|
||
* Auswertungen. Wird beim Laden und danach minütlich geholt.
|
||
*
|
||
* Solange kein Fahrzeug angebunden ist, bleibt die Tabelle leer; jeder
|
||
* Abschnitt zeigt dann seinen Leerzustand statt eines Fehlers.
|
||
*
|
||
* Die Fahrzeuggrafik ist eine maßstäbliche Draufsicht des Enyaq:
|
||
* 4648 x 1877 mm, Radstand 2765 mm, daraus das Seitenverhältnis 2,48:1 und
|
||
* die Lage der Achsen. Kein Foto, sondern ein Schema - die Teile sollen
|
||
* ihren Zustand zeigen, nicht das Auto porträtieren.
|
||
*
|
||
* Der Ladestand ist Teil dieser Grafik und nicht mehr eine Anzeige daneben:
|
||
* die Akkuplatte im Fahrzeugboden füllt sich von hinten nach vorn, trägt die
|
||
* Zielmarke und nennt Prozent und Reichweite in ihrer Mitte. Alles, was sich
|
||
* nicht zeichnen lässt - Ladeleistung, Restzeit, Kilometerstand, Klima und
|
||
* die Herkunft des Ladestroms - steht als Kennzahl daneben.
|
||
*/
|
||
?>
|
||
<!--begin::App Main-->
|
||
<main class="app-main skoda-seite">
|
||
<div class="app-content-header">
|
||
<div class="container-fluid">
|
||
<div class="row align-items-center">
|
||
<div class="col-sm-8">
|
||
<h3 class="mb-0">Škoda</h3>
|
||
</div>
|
||
<div class="col-sm-4 text-sm-end">
|
||
<span class="skoda-alter text-secondary" id="skodaAlter"> </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="app-content">
|
||
<div class="container-fluid">
|
||
|
||
<!-- ================================================ Übersicht ==== -->
|
||
<!-- Eine Kachel, zwei Hälften: links das Fahrzeug, rechts die Zahlen
|
||
dazu. Der Ladestand steht nicht mehr als eigener Ring daneben,
|
||
sondern dort, wo er im Auto auch sitzt - in der Akkuplatte im
|
||
Fahrzeugboden. Ladestand, Ladeziel und Reichweite gehören zusammen
|
||
und stehen deshalb beieinander im Bild; alles, was sich nicht
|
||
zeichnen lässt, steht als Kennzahl daneben. -->
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="card mb-4 p-0 w-100">
|
||
<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>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="skoda-fahrzeug">
|
||
|
||
<!-- Das Fahrzeug als Anzeigeelement. Jedes Teil trägt seinen
|
||
Zustand selbst: offene Türen und Klappen leuchten
|
||
bernstein, Licht gelb, der Ladeanschluss pulst beim Laden.
|
||
Die Zustandszeile rechts benennt dasselbe in Worten und
|
||
hebt beim Überfahren das zugehörige Teil hervor - Farbe
|
||
allein soll die Aussage nicht tragen. -->
|
||
<div class="skoda-bild">
|
||
<svg id="skodaAuto" class="skoda-auto" viewBox="-35.2 -8 294.4 516"
|
||
role="img" aria-label="Draufsicht des Fahrzeugs mit Ladestand der Batterie und dem Zustand von Türen, Fenstern, Klappen und Licht">
|
||
|
||
<defs>
|
||
<!-- Der Verlauf der Füllung ist am Fahrzeug verankert,
|
||
nicht am Füllrechteck: sonst wanderte er mit dem
|
||
Ladestand mit und die Farbe unten änderte sich bei
|
||
jedem Prozentpunkt. Die Farbe selbst kommt aus
|
||
--akku-farbe, gesetzt von der Zustandsklasse am
|
||
SVG-Element; das Attribut hier ist der Rückfall. -->
|
||
<linearGradient id="akkuVerlauf" gradientUnits="userSpaceOnUse"
|
||
x1="0" y1="378" x2="0" y2="108">
|
||
<stop offset="0" stop-color="#7aa7c7" stop-opacity=".75"/>
|
||
<stop offset="1" stop-color="#7aa7c7" stop-opacity=".3"/>
|
||
</linearGradient>
|
||
|
||
<!-- Innenkontur der Platte: schneidet Füllung, Strömung
|
||
und Pegelkante auf die abgerundete Form zu. -->
|
||
<clipPath id="akkuInnen">
|
||
<rect x="50" y="108" width="124" height="270" rx="7"/>
|
||
</clipPath>
|
||
|
||
<!-- Auf Höhe des Ladestands beschnitten, damit die
|
||
Strömung nur im gefüllten Teil läuft. Das Rechteck
|
||
darin setzt zeichneAkku() mit. -->
|
||
<clipPath id="akkuPegel">
|
||
<rect id="akkuPegelFeld" x="50" y="378" width="124" height="0"/>
|
||
</clipPath>
|
||
|
||
<!-- Ein Flügel des Lüfterrads, um die eigene Nabe im
|
||
Ursprung gezeichnet. Das Rad setzt ihn dreimal um je
|
||
120 Grad versetzt ein. -->
|
||
<path id="klimaFluegel"
|
||
d="M0 0 C 1.5 -4, 5 -7, 7.5 -5 C 9.6 -3.2, 5.5 -0.8, 0 0 Z"/>
|
||
|
||
<!-- Ein Zipfel einer Bananenschale, von oben gesehen und
|
||
um den eigenen Ansatz im Ursprung gezeichnet. Die
|
||
Schale setzt ihn dreimal um je 120 Grad versetzt
|
||
ein - wie das Lüfterrad, nur krummer. -->
|
||
<path id="bananenZipfel"
|
||
d="M0 0 C 1 -3.2, 4.5 -6.5, 7.5 -5.2
|
||
C 9.5 -4.2, 8 -1.2, 3.5 0.6 Z"/>
|
||
</defs>
|
||
|
||
<!-- Die Straße, über die der Wagen fährt. Ganz zuerst
|
||
gezeichnet, damit alles andere darauf liegt.
|
||
|
||
Markiert wie eine deutsche Landstraße: rechts die
|
||
durchgezogene Fahrbahnbegrenzung, links die Leitlinie
|
||
mit 6 m Strich auf 12 m Lücke.
|
||
|
||
Gezeichnet ist die Straße im Viertel des
|
||
Fahrzeugmaßstabs. Maßstäblich (105 Einheiten je Meter,
|
||
aus 4,65 m Länge auf 488 Einheiten) wären die Striche
|
||
630 lang und 12,6 breit - dann füllen sie die Ränder
|
||
und ziehen den Blick vom Wagen weg. Vier Mal kleiner
|
||
bleibt das Verhältnis 1:2 erhalten, die Markierung
|
||
liest sich weiter als Leitlinie, und sie bleibt
|
||
Beiwerk statt Hauptsache:
|
||
|
||
links Leitlinie 157,5 Strich, 315 Lücke
|
||
rechts Fahrbahnbegrenzung, durchgezogen
|
||
beide 3,15 breit
|
||
|
||
Die Fahrbahn ist breiter als der Wagen, aber nicht so
|
||
breit wie eine echte Spur: die Zeichenfläche misst 294
|
||
Einheiten, gut ein Drittel mehr als das Fahrzeug, und
|
||
zwischen Rad und Markierung bleibt Platz für den
|
||
Fahrtwind.
|
||
|
||
Die Leitlinie wandert um genau eine Strich-Lücken-
|
||
Länge (472,5); danach steht das Muster wieder so da wie
|
||
zuvor, und die Schleife ist unsichtbar. 437 Einheiten
|
||
je Sekunde entsprechen in diesem Maßstab gut 60 km/h -
|
||
die Striche ziehen im selben Takt vorbei wie zuvor,
|
||
nur ruhiger. -->
|
||
<g class="strasse" aria-hidden="true">
|
||
<rect class="belag" x="-35.2" y="-8" width="294.4" height="516"/>
|
||
<line class="leitlinie" x1="-23.7" y1="-520" x2="-23.7" y2="1020"/>
|
||
<line class="begrenzung" x1="247.7" y1="-8" x2="247.7" y2="508"/>
|
||
</g>
|
||
|
||
<!-- Ostergruß: ganz selten liegt eine Bananenschale auf
|
||
der Fahrbahn, und der Wagen kommt kurz ins Schleudern.
|
||
Ausgelöst wird das in js/solar/skodaMQTT.js, gezeichnet
|
||
wird es hier.
|
||
|
||
Sie liegt in der linken Radspur (x 29, die Räder stehen
|
||
zwischen 16,5 und 41,5): unter dem Reifen hat sie ihre
|
||
Wirkung, und dass der Wagen danach nach rechts
|
||
ausbricht, passt zur Seite, auf der er den Halt
|
||
verliert.
|
||
|
||
Im Markup steht sie zwischen Straße und Fahrzeug, wird
|
||
also von der Karosserie verdeckt, sobald der Wagen
|
||
darüberrollt - so, wie es sich gehört. -->
|
||
<g class="bananenschale" aria-hidden="true">
|
||
<g class="schale" transform="translate(29 0) scale(1.4)">
|
||
<use href="#bananenZipfel"/>
|
||
<use href="#bananenZipfel" transform="rotate(120)"/>
|
||
<use href="#bananenZipfel" transform="rotate(240)"/>
|
||
<circle class="strunk" r="1.6"/>
|
||
</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 seitlichen liegen zwischen
|
||
Rad und Fahrbahnmarkierung: auf derselben Linie wie
|
||
die Begrenzung sähen sie aus wie eine zweite,
|
||
gestrichelte Markierung statt wie Luft. 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="0" y1="-120" x2="0" y2="-60"/>
|
||
<line class="boe b6" x1="224" y1="-120" x2="224" y2="-70"/>
|
||
</g>
|
||
|
||
<!-- Alles ab hier ist das Fahrzeug selbst, zusammengefasst
|
||
in einer Gruppe: nur so kann es als Ganzes schleudern,
|
||
ohne die Straße mitzudrehen. -->
|
||
<!-- Alles ab hier ist das Fahrzeug selbst, zusammengefasst
|
||
in einer Gruppe: nur so kann es als Ganzes schleudern,
|
||
ohne die Straße mitzudrehen.
|
||
|
||
Die Malreihenfolge ist die Markup-Reihenfolge, und die
|
||
ist hier durchgehend als Schichtung gedacht - von unten
|
||
nach oben:
|
||
|
||
1. Fahrwerk Räder, Anhängerkupplung
|
||
2. Blech Karosserie, Tech-Deck, Haube, Dach,
|
||
Türen, Reling, Spoiler, Spiegel
|
||
3. Glas+Licht Scheinwerfer, Rückleuchten, Wind-
|
||
schutzscheibe, Seitenfenster, Heck-
|
||
klappe samt Scheibe
|
||
4. Akku die Antriebsbatterie über allem
|
||
|
||
Das ist keine Ansicht von oben, sondern ein Schnitt-
|
||
bild: unten das, was am Boden läuft, oben das, worum
|
||
es auf dieser Seite geht. Weil jede Lage nur getönt
|
||
ist, bleibt darunter alles sichtbar.
|
||
|
||
Die beiden Knöpfe (Klima, Ladeanschluss) stehen ganz
|
||
am Schluss, noch über dem Akku. Sie sind kein Teil des
|
||
Fahrzeugs, sondern Bedienung, und müssen deckend und
|
||
anklickbar bleiben. -->
|
||
<g id="wagen">
|
||
|
||
<!-- ===== 1. Fahrwerk =================================== -->
|
||
<!-- Räder. Vorderachse bei 860 mm, Hinterachse bei 3625 mm
|
||
ab Bugspitze - der Radstand von 2765 mm maßstäblich.
|
||
|
||
Auch der Reifen selbst ist es jetzt: 235/50 R20, das
|
||
sind 744 mm Durchmesser und 235 mm Breite, also 78 auf
|
||
25 Einheiten. Die Ecken sind nur leicht gebrochen - von
|
||
oben ist eine Lauffläche ein Rechteck, keine Kapsel. Gezeichnet waren 58 auf 21 - ein Viertel
|
||
zu klein. Das Rad ist im Bild der einzige Gegenstand
|
||
mit bekanntem Mass; ist es zu klein, wirkt alles andere
|
||
zu gross, allen voran die Schnauze.
|
||
|
||
Und sie stehen dort, wo die Spur sie hinstellt: 1585 mm
|
||
vorn, 1575 mm hinten, macht Radmitten bei x 29 und 195.
|
||
Der Unterschied zwischen den Achsen ist ein Zentimeter
|
||
und liegt unter dem, was hier ein Bildpunkt auflöst -
|
||
beide Achsen stehen deshalb gleich.
|
||
|
||
Damit liegen die Reifen INNERHALB des Umrisses, wie am
|
||
Auto auch: die Karosserie ist 1879 mm breit, Spur plus
|
||
Reifenbreite sind 1820 mm. Vorher standen sie acht
|
||
Einheiten über die Flanke hinaus, eine Spur von 1,82 m
|
||
statt 1,59 m.
|
||
|
||
Zu sehen sind sie trotzdem, obwohl sie ganz unten
|
||
liegen: die Karosserie ist durchscheinend gezeichnet.
|
||
Von oben saehe man sie in Wirklichkeit gar nicht; hier
|
||
gilt dieselbe Freiheit wie bei der Akkuplatte, die auch
|
||
durch den Boden zu sehen ist. -->
|
||
<g class="rad">
|
||
<rect x="16.5" y="62" width="25" height="78" rx="5"/>
|
||
<rect x="182.5" y="62" width="25" height="78" rx="5"/>
|
||
<rect x="16.5" y="352" width="25" height="78" rx="5"/>
|
||
<rect x="182.5" y="352" width="25" height="78" rx="5"/>
|
||
</g>
|
||
|
||
<!-- Anhängerkupplung: Hals und Kugel, mehr sieht man von
|
||
oben nicht. Sie steht hinten heraus, so wie am Auto -
|
||
die Kugel sitzt rund neun Zentimeter hinter der
|
||
Heckkante. Dass das nicht wie ein Loch im Umriss
|
||
aussieht, liegt an der Farbe: sie ist schwarz und
|
||
damit erkennbar ein Anbauteil, kein fehlendes Blech. -->
|
||
<g class="kupplung">
|
||
<rect x="109" y="480" width="6" height="19" rx="3"/>
|
||
<circle cx="112" cy="501" r="4.5"/>
|
||
</g>
|
||
|
||
<!-- ===== 2. Blech ====================================== -->
|
||
<!-- Karosserie.
|
||
|
||
Beide Enden sind stumpf: der Enyaq ist ein SUV, keine
|
||
Zigarre. Vorn schliesst eine Kante von 70 bis 154 ab,
|
||
hinten eine von 56 bis 168 - hinten breiter, wie am
|
||
Auto. Die Flanken bleiben bis
|
||
kurz vor den Schluss auf voller Breite (212 bei y=250,
|
||
noch 206 bei y=452), dann runden zwei Ecken auf eine
|
||
gerade Heckkante von 56 bis 168. Vorher lief das Heck
|
||
spiegelbildlich zur Front spitz zusammen - von oben
|
||
genau die Form, die ein Fliessheck hat. -->
|
||
<path class="karosserie" d="M153.4 6
|
||
C184.9 9, 200.7 24, 203.6 52 C207.5 90, 210.5 160, 210.5 250
|
||
C210.5 340, 209.5 415, 204.6 452
|
||
C201.6 476, 190.8 494, 167.2 494
|
||
L56.8 494
|
||
C33.2 494, 22.4 476, 19.4 452
|
||
C14.5 415, 13.5 340, 13.5 250
|
||
C13.5 160, 16.5 90, 20.4 52
|
||
C23.3 24, 39.1 9, 70.6 6
|
||
L153.4 6 Z"/>
|
||
|
||
<!-- Tech-Deck Face: die glänzend schwarze Blende über die
|
||
volle Bugbreite, die den Enyaq seit der Überarbeitung
|
||
kennzeichnet. Von oben sieht man ihre Oberkante, also
|
||
ein schmales Band, das zu den Kotflügeln hin ausläuft.
|
||
|
||
Schmal und nur halb deckend: die Blende steht am Auto
|
||
fast senkrecht, von oben ist sie deshalb ein Streifen
|
||
und keine Fläche. Als breites, fast schwarzes Band war
|
||
sie das dunkelste im Bild und las sich wie ein Loch.
|
||
Die Enden laufen spitz zusammen statt gerade abzu-
|
||
schneiden - ein gerader Schnitt ergab dort zwei Stufen,
|
||
die es am Auto nicht gibt. -->
|
||
<path class="techdeck" d="M19 52
|
||
C 23 26, 40 13, 70 10 L 154 10 C 184 13, 201 26, 205 52
|
||
C 199 33, 180 21, 154 20 L 70 20 C 44 21, 25 33, 19 52 Z"/>
|
||
|
||
<!-- Motorhaube mit angedeuteter Mittelsicke -->
|
||
<g id="teil-bonnet" class="teil" tabindex="0" data-teil="bonnet">
|
||
<path d="M31 146 L193 146 L190 66 C176 48, 48 48, 34 66 Z"/>
|
||
<title>Motorhaube</title>
|
||
</g>
|
||
<path class="sicke" d="M112 62 L112 142"/>
|
||
|
||
<!-- Windschutzscheibe, Dach, Heckscheibe.
|
||
|
||
Die Stationen stammen aus der Seitenansicht des
|
||
Fahrzeugs, umgerechnet mit 105 Einheiten je Meter:
|
||
Scheibenfuss bei 1,37 m (y 150), Dachanfang bei 2,15 m
|
||
(232), Dachende bei 4,0 m (428). Der Dachanfang liegt
|
||
damit etwa auf halber Laenge der Vordertuer - genau da,
|
||
wo die A-Saeule im Foto ans Dach stoesst. Gezeichnet
|
||
war er vorher am Tuerende.
|
||
|
||
Der Scheibenfuss liegt VOR der vorderen Tuerfuge
|
||
(1,46 m), nicht dahinter: am Auto beginnt die Scheibe
|
||
schon ueber dem Kotfluegel, die A-Saeule setzt erst
|
||
weiter hinten an. Damit endet die Haube bei 1,33 m
|
||
statt bei 1,58 m - die Schnauze wird um einen
|
||
Vierteilmeter kuerzer, ohne dass sich am Ueberhang
|
||
etwas aendert.
|
||
|
||
Das Dach durfte erst so weit nach hinten, seit
|
||
Heckscheibe und Heckklappe eine gemeinsame Flaeche
|
||
sind: als getrennte Schaltflaeche waere die Klappe
|
||
hier nur noch drei Zentimeter hoch und nicht mehr zu
|
||
treffen. -->
|
||
<rect class="dach" x="46" y="232" width="132" height="196" rx="10"/>
|
||
|
||
<!-- Kein Panoramadach: dieses Fahrzeug hat ein geschlossenes
|
||
Blechdach. Die Zustandszeile kennt es deshalb auch nicht
|
||
(TEILE in js/solar/skodaMQTT.js). -->
|
||
|
||
<!-- Dachreling und Heckspoiler. Sie liegen AUF dem Dach
|
||
und stehen deshalb direkt hinter ihm im Markup.
|
||
|
||
Die Holme sitzen ein Stück innerhalb der Dachkanten,
|
||
wie am Auto. Hinten enden sie vor dem Spoiler, nicht
|
||
an ihm: am Auto laufen die Holme über dem Radlauf aus,
|
||
der Spoiler sitzt ein Stück dahinter auf der Dachkante.
|
||
|
||
Der Spoiler ist ein Blatt über dieser Kante: in der
|
||
Mitte breit, zu den Enden schmaler - aber dort stumpf
|
||
abgeschnitten, nicht spitz zulaufend. Zwei Spitzen
|
||
gaben ihm die Form eines Blattes; am Auto hört er
|
||
schlicht auf. -->
|
||
<g class="reling">
|
||
<line x1="53" y1="240" x2="53" y2="404"/>
|
||
<line x1="171" y1="240" x2="171" y2="404"/>
|
||
</g>
|
||
<path class="spoiler" d="M42 427 C 74 420, 150 420, 182 427
|
||
L182 433 C 150 440, 74 440, 42 433 Z"/>
|
||
|
||
<!-- Türen, jeweils mit Seitenfenster darin.
|
||
|
||
Die vordere beginnt dicht hinter dem Vorderrad: ihre
|
||
Fuge liegt bei 1,52 m, das Rad endet bei 1,24 m - ein
|
||
knapper Vierteilmeter Blech dazwischen, so wie am Auto.
|
||
Vorher begann sie erst bei 1,75 m und liess dort eine
|
||
halbe Handbreit Luft, die es nicht gibt.
|
||
|
||
Die Fuge zwischen den Türen liegt bei 2,59 m, gemessen
|
||
an der B-Säule. Die hintere Tür reicht am Auto noch
|
||
über den Radlauf hinaus bis etwa 3,5 m; gezeichnet
|
||
endet sie am Radlauf, denn weiter hinten läge ihr Blech
|
||
im Bild auf dem Rad. -->
|
||
<g id="teil-doors" class="teil" data-teil="doors">
|
||
<g tabindex="0"><rect x="12" y="159" width="23" height="119" rx="6"/><title>Tür vorn links</title></g>
|
||
<g tabindex="0"><rect x="12" y="280" width="23" height="72" rx="6"/><title>Tür hinten links</title></g>
|
||
<g tabindex="0"><rect x="189" y="159" width="23" height="119" rx="6"/><title>Tür vorn rechts</title></g>
|
||
<g tabindex="0"><rect x="189" y="280" width="23" height="72" rx="6"/><title>Tür hinten rechts</title></g>
|
||
</g>
|
||
|
||
<!-- Außenspiegel. Sie sitzen am Fuß der A-Säule, also am
|
||
vorderen Ende der Tür (1,62 m) und nicht in deren
|
||
Mitte - von oben ist der Spiegel das erste, was nach
|
||
der Windschutzscheibe kommt. -->
|
||
<g class="spiegel">
|
||
<rect x="-0.7" y="176" width="16" height="10" rx="5"/>
|
||
<rect x="208.7" y="176" width="16" height="10" rx="5"/>
|
||
</g>
|
||
|
||
<!-- ===== 3. Glas und Licht ============================= -->
|
||
<!-- Scheinwerfer, vier Elemente je Seite wie beim Original,
|
||
dazu die Rückleuchten als durchgehendes Band. -->
|
||
<g id="teil-lights" class="teil teil-licht" data-teil="lights">
|
||
<rect x="30" y="29" width="9" height="13" rx="4"/>
|
||
<rect x="42" y="26" width="9" height="13" rx="4"/>
|
||
<rect x="54" y="25" width="9" height="13" rx="4"/>
|
||
<rect x="66" y="24" width="9" height="13" rx="4"/>
|
||
<rect x="149" y="24" width="9" height="13" rx="4"/>
|
||
<rect x="161" y="25" width="9" height="13" rx="4"/>
|
||
<rect x="173" y="26" width="9" height="13" rx="4"/>
|
||
<rect x="185" y="29" width="9" height="13" rx="4"/>
|
||
<!-- Die Rueckleuchten sitzen in den Heckecken und greifen
|
||
von der Klappe auf die Flanke ueber - so wie am Auto,
|
||
wo das Band um die Ecke laeuft. Weiter innen sahen
|
||
sie aus wie zwei Griffe in der Klappe. -->
|
||
<rect class="rueck" x="28" y="468" width="62" height="12" rx="6"/>
|
||
<rect class="rueck" x="134" y="468" width="62" height="12" rx="6"/>
|
||
<title>Beleuchtung</title>
|
||
</g>
|
||
|
||
<!-- Windschutzscheibe. Ihre Stationen stehen oben beim
|
||
Dach; hier liegt sie, weil Glas ueber dem Blech kommt.
|
||
Sie beginnt bei 1,37 m, also vor der vorderen Tuerfuge
|
||
bei 1,46 m, und endet mit dem Dachanfang auf halber
|
||
Laenge der Vordertuer. -->
|
||
<path class="scheibe" d="M34 150 L190 150 L178 232 L46 232 Z"/>
|
||
|
||
<!-- Seitenfenster. Sie sitzen in den Tueren, liegen im
|
||
Bild aber ueber ihnen: Glas ist die obere Lage.
|
||
|
||
Das vordere reicht bis dicht an die A-Saeule heran
|
||
(1,66 m) - am Auto beginnt es gleich hinter dem
|
||
Spiegeldreieck. Gezeichnet war es 16 Einheiten kuerzer
|
||
und liess vorn ein Stueck Blech stehen, das es nicht
|
||
gibt. -->
|
||
<g id="teil-windows" class="teil teil-fenster" data-teil="windows">
|
||
<rect x="17" y="180" width="13" height="92" rx="4"/>
|
||
<rect x="17" y="286" width="13" height="60" rx="4"/>
|
||
<rect x="194" y="180" width="13" height="92" rx="4"/>
|
||
<rect x="194" y="286" width="13" height="60" rx="4"/>
|
||
<title>Seitenfenster</title>
|
||
</g>
|
||
|
||
<!-- Heckklappe samt Heckscheibe: eine Flaeche, ein Zustand.
|
||
Die Scheibe sitzt in der Klappe und geht mit ihr auf,
|
||
also ist sie kein eigenes Teil - sie behaelt nur ihr
|
||
Aussehen (siehe .teil > .scheibe im Stylesheet).
|
||
|
||
Die Scheibe steht am Enyaq steil und wird nach unten
|
||
schmaler; lief sie nach hinten breiter aus, las sich
|
||
das von oben wie ein Fliessheck. -->
|
||
<g id="teil-trunk" class="teil" tabindex="0" data-teil="trunk">
|
||
<path class="scheibe" d="M46 428 L178 428 L172 460 L52 460 Z"/>
|
||
<path d="M52 462 L172 462 C180 470, 184 478, 183 481
|
||
C165 490, 59 490, 41 481 C40 478, 44 470, 52 462 Z"/>
|
||
<title>Heckklappe</title>
|
||
</g>
|
||
|
||
<!-- ===== 4. Antriebsbatterie =========================== -->
|
||
<!-- ========================================================
|
||
Antriebsbatterie - der Ladestand selbst.
|
||
|
||
Beim MEB liegt der Akku als flache Platte zwischen den
|
||
Achsen; genau dort sitzt sie hier auch, von 108 bis 378
|
||
über den Radstand. Gefüllt wird von hinten nach vorn,
|
||
also im Bild von unten nach oben - dieselbe Richtung,
|
||
in der jeder einen Füllstand liest.
|
||
|
||
Sie ist die oberste Lage des Fahrzeugs - siehe die
|
||
Schichtung oben am Anfang von #wagen. Das geht nur
|
||
auf, weil die Platte über dem Radstand liegt und in
|
||
x nur von 46 bis 178 reicht: Lichter, Fenster, Türen
|
||
und Heckklappe liegen alle davor, dahinter oder
|
||
daneben, keines davon verschwindet unter ihr.
|
||
|
||
Alles Veränderliche - Füllhöhe, Zielmarke, Zahlen und
|
||
Farbe - setzt zeichneAkku().
|
||
======================================================== -->
|
||
<g id="akku" class="akku">
|
||
<rect class="huelle" x="46" y="104" width="132" height="278" rx="10"/>
|
||
|
||
<g clip-path="url(#akkuInnen)">
|
||
<rect class="fuellung" id="akkuFuellung" x="50" y="378" width="124" height="0"/>
|
||
|
||
<!-- Ladestrom: Streifen, die im gefüllten Teil nach
|
||
vorn wandern. Nur beim Laden sichtbar. -->
|
||
<g class="stroemung" clip-path="url(#akkuPegel)">
|
||
<g class="bahn">
|
||
<rect x="50" y="430" width="124" height="3" rx="1.5"/>
|
||
<rect x="50" y="376" width="124" height="3" rx="1.5"/>
|
||
<rect x="50" y="322" width="124" height="3" rx="1.5"/>
|
||
<rect x="50" y="268" width="124" height="3" rx="1.5"/>
|
||
<rect x="50" y="214" width="124" height="3" rx="1.5"/>
|
||
<rect x="50" y="160" width="124" height="3" rx="1.5"/>
|
||
<rect x="50" y="106" width="124" height="3" rx="1.5"/>
|
||
<rect x="50" y="52" width="124" height="3" rx="1.5"/>
|
||
</g>
|
||
</g>
|
||
|
||
<!-- Pegelkante: die helle Linie oben auf der Füllung.
|
||
Sie macht den Stand auch dann ablesbar, wenn die
|
||
Fläche darunter nur schwach getönt ist. -->
|
||
<rect class="kante" id="akkuKante" x="50" y="377" width="124" height="2.5"/>
|
||
</g>
|
||
|
||
<!-- Modulfugen. Sie liegen auf 20, 40, 60 und 80 Prozent
|
||
und dienen damit zugleich als Skala. -->
|
||
<g class="fugen">
|
||
<line x1="50" y1="324" x2="174" y2="324"/>
|
||
<line x1="50" y1="270" x2="174" y2="270"/>
|
||
<line x1="50" y1="216" x2="174" y2="216"/>
|
||
<line x1="50" y1="162" x2="174" y2="162"/>
|
||
</g>
|
||
|
||
<!-- Ladeziel. Eine Ladung, die dort endet, ist kein
|
||
Fehler, sondern Absicht - deshalb steht die Marke im
|
||
Bild und nicht nur als Zahl daneben. -->
|
||
<g class="zielmarke" id="akkuZielMarke">
|
||
<line id="akkuZiel" x1="44" y1="108" x2="180" y2="108"/>
|
||
<text id="akkuZielText" x="174" y="102">Ziel –</text>
|
||
</g>
|
||
|
||
<!-- Ladestand und Reichweite in der Platte. Der dunkle
|
||
Umriss der Zahlen (paint-order) hält sie lesbar,
|
||
gleich ob Füllung oder leere Zelle dahinter liegt.
|
||
|
||
Die Höhe ist gerechnet, nicht geschätzt: die Platte
|
||
reicht von 108 bis 378, ist also 270 hoch; der
|
||
Goldene Schnitt von oben liegt bei 108 + 270 × 0,618
|
||
= 274,9. Dort sitzt die optische Mitte der beiden
|
||
Zeilen (Oberkante der Ziffern 246, Grundlinie der
|
||
Reichweite 303). Weiter oben klebten sie am
|
||
Klimaknopf, dessen Ring bei 205 endet - jetzt liegen
|
||
41 Einheiten Luft dazwischen. -->
|
||
<text class="wert" x="112" y="275">
|
||
<tspan id="akkuText">–</tspan><tspan class="einheit" dx="3">%</tspan>
|
||
</text>
|
||
<text class="neben" id="akkuNeben" x="112" y="303">–</text>
|
||
|
||
<title id="akkuTitel">Antriebsbatterie</title>
|
||
</g>
|
||
|
||
<!-- ===== Bedienung ===================================== -->
|
||
<!-- ========================================================
|
||
Steuerung: die beiden anklickbaren Stellen.
|
||
|
||
Bedient wird das, worum es geht - der Ladeanschluss für
|
||
das Laden, der Innenraum für Klima und Lüftung. Beide
|
||
tragen einen Ring als Hinweis darauf, dass sie mehr
|
||
sind als Anzeige, und öffnen ein Modal mit den
|
||
Befehlen.
|
||
|
||
Sie stehen bewusst NICHT in der Zustandszeile: die
|
||
zeigt, was ist. Diese beiden ändern etwas.
|
||
======================================================== -->
|
||
|
||
<!-- Der Weg des Ladestroms vom Anschluss in die Platte.
|
||
Läuft nur, solange geladen wird. -->
|
||
<path class="ladefluss" d="M199 399 C 192 393, 183 386, 176 376"/>
|
||
|
||
<!-- Ladeanschluss. Beim Enyaq sitzt die Klappe am hinteren
|
||
rechten Kotflügel.
|
||
|
||
Gleiche Bauweise wie der Klimaknopf: gestrichelter Ring,
|
||
deckende Scheibe, Zeichen darauf. Beides sind Knöpfe, also
|
||
sehen beide gleich aus - was sie unterscheidet, ist das
|
||
Zeichen und beim Laden die Farbe. Die deckende Scheibe ist
|
||
auch hier nötig, weil darunter die Akkuplatte durchläuft. -->
|
||
<g id="teil-plug" class="teil-stecker steuer" tabindex="0"
|
||
role="button" data-steuer="laden" aria-label="Laden steuern">
|
||
<circle class="ring" cx="203" cy="408" r="19"/>
|
||
<circle class="flaeche" cx="203" cy="408" r="13"/>
|
||
<path class="glyphe" d="M199 401 L207 407 L202 407 L207 415"/>
|
||
<title>Laden steuern</title>
|
||
</g>
|
||
|
||
<!-- Innenraum, auf der Windschutzscheibe: Klima und Lüftung.
|
||
Er steht auf deren Mitte (150 bis 232, also 191).
|
||
Darunter beginnt bei 246 der Ladestand; die 31
|
||
Einheiten dazwischen sind der Grund, warum er nicht
|
||
tiefer sitzt - sonst lesen sich Knopf und Zahl als
|
||
ein Block. -->
|
||
<g id="steuer-klima" class="steuer" tabindex="0"
|
||
role="button" data-steuer="klima" aria-label="Klima und Lüftung steuern">
|
||
<circle class="ring" cx="112" cy="196" r="19"/>
|
||
<circle class="flaeche" cx="112" cy="196" r="13"/>
|
||
<!-- Lüfterrad. Es dreht sich, solange die Klimatisierung
|
||
läuft; die Drehung sitzt in der inneren Gruppe, damit
|
||
sie die Verschiebung nach aussen nicht überschreibt. -->
|
||
<g class="luefter" transform="translate(112 196)">
|
||
<g class="blaetter">
|
||
<use href="#klimaFluegel"/>
|
||
<use href="#klimaFluegel" transform="rotate(120)"/>
|
||
<use href="#klimaFluegel" transform="rotate(240)"/>
|
||
</g>
|
||
<circle class="nabe" r="1.9"/>
|
||
</g>
|
||
<title>Klima und Lüftung steuern</title>
|
||
</g>
|
||
|
||
</g><!-- /#wagen -->
|
||
|
||
<!-- 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">
|
||
Ladeanschluss und Innenraum antippen, um zu steuern
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Alles, was sich nicht ins Bild zeichnen lässt. -->
|
||
<div class="skoda-daten">
|
||
|
||
<div class="skoda-kennzahlen">
|
||
<div class="kennzahl" id="skodaKachelLeistung">
|
||
<span class="zeichen"><i class="bi bi-lightning-charge-fill" aria-hidden="true"></i></span>
|
||
<span class="text">
|
||
<span class="k">Ladeleistung</span>
|
||
<span class="v" id="skodaLeistung">–</span>
|
||
<span class="neben" id="skodaLadeart"></span>
|
||
</span>
|
||
</div>
|
||
<div class="kennzahl" id="skodaKachelRestzeit">
|
||
<span class="zeichen"><i class="bi bi-hourglass-split" aria-hidden="true"></i></span>
|
||
<span class="text">
|
||
<span class="k">Restzeit</span>
|
||
<span class="v" id="skodaRestzeit">–</span>
|
||
<span class="neben" id="skodaFertig"></span>
|
||
</span>
|
||
</div>
|
||
<div class="kennzahl">
|
||
<span class="zeichen"><i class="bi bi-speedometer2" aria-hidden="true"></i></span>
|
||
<span class="text">
|
||
<span class="k">Kilometer­stand</span>
|
||
<span class="v" id="skodaKm">–</span>
|
||
</span>
|
||
</div>
|
||
<div class="kennzahl" id="skodaKachelKlima">
|
||
<span class="zeichen"><i class="bi bi-fan" id="skodaKlimaZeichen" aria-hidden="true"></i></span>
|
||
<span class="text">
|
||
<span class="k">Klima</span>
|
||
<span class="v" id="skodaKlima">–</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Woher der Strom gerade kommt: der Balken teilt die
|
||
Ladeleistung in den Anteil, den die PV deckt, und den
|
||
Rest aus dem Netz. Steht nur da, solange geladen wird -
|
||
ohne Ladung hat der Balken nichts zu teilen. -->
|
||
<div class="skoda-quelle" id="skodaQuelleBox" hidden>
|
||
<div class="kopf">
|
||
<span class="skoda-marke">Ladestrom</span>
|
||
<span class="summe" id="skodaQuelleText">–</span>
|
||
</div>
|
||
<div class="skoda-balken">
|
||
<div class="teil-pv" id="skodaAnteilPV"></div>
|
||
<div class="teil-netz" id="skodaAnteilNetz"></div>
|
||
</div>
|
||
<div class="legende">
|
||
<span><i class="pkt pv"></i>Sonne <b id="skodaQuellePV">–</b></span>
|
||
<span><i class="pkt netz"></i>Netz <b id="skodaQuelleNetz">–</b></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Was das Fahrzeug in Woche, Monat und Jahr gefahren ist.
|
||
Gerechnet aus dem Kilometerstand, nicht aus den erkannten
|
||
Fahrten - siehe ajax/skoda.php, ?was=strecke. -->
|
||
<div class="skoda-fahrleistung">
|
||
<span class="skoda-marke">Fahrleistung</span>
|
||
<div class="reihe" id="skodaFahrleistung"></div>
|
||
</div>
|
||
|
||
<!-- Zustandszeile: benennt in Worten, was die Farben im Bild
|
||
zeigen, und hebt beim Überfahren das Teil hervor. -->
|
||
<div class="skoda-zustand">
|
||
<span class="skoda-marke">Zustand</span>
|
||
<div class="skoda-teile" id="skodaTeile"></div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ================================================= Ladungen ==== -->
|
||
<div class="row">
|
||
<div class="col-xl-8 d-flex align-items-stretch">
|
||
<div class="card mb-4 p-0 w-100">
|
||
<div class="card-header pb-0 pt-1">
|
||
<h3 class="card-title">Verlauf der letzten Ladung</h3>
|
||
<div class="card-tools">
|
||
<span class="text-secondary small" id="skodaKurveZeit"></span>
|
||
</div>
|
||
</div>
|
||
<div class="card-body pb-1">
|
||
<div class="chart-container"><canvas id="skodaKurve"></canvas></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-4 d-flex align-items-stretch">
|
||
<div class="card mb-4 p-0 w-100">
|
||
<div class="card-header pb-0 pt-1">
|
||
<h3 class="card-title">Ladungen</h3>
|
||
</div>
|
||
<div class="card-body p-0">
|
||
<div class="skoda-liste" id="skodaLadungen"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================== Akkugesundheit == -->
|
||
<div class="row">
|
||
<div class="col-xl-8 d-flex align-items-stretch">
|
||
<div class="card mb-4 p-0 w-100">
|
||
<div class="card-header pb-0 pt-1">
|
||
<h3 class="card-title">Akkugesundheit</h3>
|
||
<div class="card-tools">
|
||
<span class="text-secondary small">kWh je 100 Ladestandsprozent</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-body pb-1">
|
||
<div class="chart-container"><canvas id="skodaGesundheit"></canvas></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-4 d-flex align-items-stretch">
|
||
<div class="card mb-4 p-0 w-100">
|
||
<div class="card-header pb-0 pt-1">
|
||
<h3 class="card-title">Befund</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="skoda-befund" id="skodaBefund">
|
||
<p class="text-secondary mb-0">Noch keine ausgewerteten Ladungen.</p>
|
||
</div>
|
||
<p class="text-secondary small mb-0 mt-3">
|
||
Gemessen wird am Wallbox-Zähler, die Ladeverluste sind also
|
||
enthalten. Absolut ist der Wert eine Näherung — aussagekräftig
|
||
ist sein Verlauf, denn ein alternder Akku bräuchte <em>weniger</em>
|
||
Kilowattstunden für dieselben hundert Prozentpunkte.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================ Standort ========== -->
|
||
<!-- Karte auf Leaflet. Die Kacheln kommen nicht unmittelbar von
|
||
OpenStreetMap, sondern über ajax/tile.php aus dem eigenen
|
||
Zwischenspeicher auf dem NAS - siehe dort, warum.
|
||
|
||
Die Fahrtlinien sind gestrichelt, und zwar mit Absicht: die API
|
||
liefert nur die letzte bekannte PARKposition, also Start und Ziel.
|
||
Die tatsächlich gefahrene Strecke kennt niemand, und eine
|
||
durchgezogene Linie auf einer Straßenkarte würde genau das
|
||
behaupten. -->
|
||
<div class="row">
|
||
<div class="col-xl-7 d-flex align-items-stretch">
|
||
<div class="card mb-4 p-0 w-100">
|
||
<div class="card-header pb-0 pt-1">
|
||
<h3 class="card-title">Standort und Fahrten</h3>
|
||
<div class="card-tools">
|
||
<button type="button" id="skodaKarteHeim" class="btn btn-tool"
|
||
title="Auf den aktuellen Standort zentrieren">
|
||
<i class="bi bi-geo-alt"></i>
|
||
</button>
|
||
<a href="#" id="skodaOsmLink" class="btn btn-tool" target="_blank"
|
||
rel="noopener noreferrer" title="Auf OpenStreetMap öffnen">
|
||
<i class="bi bi-box-arrow-up-right"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="card-body p-2">
|
||
<div id="skodaKarte" class="skoda-karte"></div>
|
||
<div class="d-flex justify-content-between align-items-center px-2 pt-2 pb-1">
|
||
<span class="text-secondary small" id="skodaStandort">–</span>
|
||
<span class="skoda-kartenlegende">
|
||
<span><i class="pkt jetzt"></i>jetzt</span>
|
||
<span><i class="pkt halt"></i>Halt</span>
|
||
<span><i class="lin"></i>Luftlinie</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-5 d-flex align-items-stretch">
|
||
<!-- Die Klasse zeigt-kwh / zeigt-prozent auf dieser Kachel
|
||
entscheidet, welche Einheit die Zeilen anzeigen. Beide Werte
|
||
stehen im Markup, umgeschaltet wird allein per CSS - so muss
|
||
beim Wechsel nichts neu gebaut werden, und die Auswahl
|
||
übersteht auch die minütliche Auffrischung der Liste. -->
|
||
<div class="card mb-4 p-0 w-100 zeigt-kwh" id="skodaFahrtenKachel">
|
||
<div class="card-header pb-0 pt-1">
|
||
<h3 class="card-title">Fahrten</h3>
|
||
<div class="card-tools d-flex align-items-center gap-2">
|
||
<!-- Text kommt aus zeigeVerbrauchsbasis(): der Verbrauch in
|
||
Kilowattstunden ist nicht gemessen, sondern aus dem
|
||
Ladestand und der eigenen Ladehistorie gerechnet. Womit
|
||
genau, steht im Titel dieses Elements. -->
|
||
<span class="text-secondary small" id="skodaVerbrauchBasis"></span>
|
||
<span class="skoda-umschalter" id="skodaEinheit" role="group"
|
||
aria-label="Einheit des Verbrauchs">
|
||
<button type="button" data-einheit="kwh" aria-pressed="true">kWh</button>
|
||
<button type="button" data-einheit="prozent" aria-pressed="false">%</button>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-body p-0">
|
||
<div class="skoda-liste" id="skodaFahrten"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</main>
|
||
<!--end::App Main-->
|