adminandClaude Opus 5
c6a879b424
Der Spoiler steht jetzt hinter der Heckklappe im Markup und liegt damit ueber deren Scheibe - am Auto sitzt er auf der Dachkante und damit vor dem Glas. Die Reling bleibt beim Dach, wo sie hingehoert. Die Reifen sind wieder schwarz. Unter zwei getoenten Flaechen bleibt davon wenig uebrig, vorn unter der Haube fast nichts - das ist so gewollt: von oben saehe man sie ohnehin nicht, sie stehen im Bild, damit die Achsen einen Ort haben. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
845 lines
47 KiB
PHP
845 lines
47 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, Spiegel
|
||
3. Glas+Licht Scheinwerfer, Rückleuchten, Wind-
|
||
schutzscheibe, Seitenfenster, Heck-
|
||
klappe samt Scheibe, darüber der
|
||
Heckspoiler
|
||
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. Sie liegt AUF dem Dach und steht 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 steht weiter unten, bei den Scheiben. -->
|
||
<g class="reling">
|
||
<line x1="53" y1="240" x2="53" y2="404"/>
|
||
<line x1="171" y1="240" x2="171" y2="404"/>
|
||
</g>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- Heckspoiler. Er liegt über der Heckscheibe, nicht
|
||
darunter: am Auto sitzt er auf der Dachkante und
|
||
damit vor dem Glas. Ein Blatt über dieser Kante, in
|
||
der Mitte breit, zu den Enden schmaler - dort aber
|
||
stumpf abgeschnitten, nicht spitz zulaufend. Zwei
|
||
Spitzen gaben ihm die Form eines Blattes; am Auto
|
||
hört er schlicht auf. -->
|
||
<path class="spoiler" d="M42 427 C 74 420, 150 420, 182 427
|
||
L182 433 C 150 440, 74 440, 42 433 Z"/>
|
||
|
||
<!-- ===== 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-->
|