adminandClaude Opus 5
8f040dec19
Alle Masse nachgerechnet und gegen die Werksangaben gestellt. Massstab sind
104,97 Einheiten je Meter (4649 mm auf 488 Einheiten).
Zeichnung Fahrzeug Abweichung
Laenge 4649 4649 0 mm
Breite Karosserie 1877 1879 -2
Spiegelbreite 2147 2147 0
Radstand 2763 2765 -2
Spurweite 1581 1585 -4
Reifendurchmesser 743 744 -1
Ueberhang vorn 905 903 +2
Ueberhang hinten 981 981 0
Der grosse Fehler war die Spur: die Raeder standen 1820 mm auseinander statt
1585 und ragten damit acht Einheiten ueber die Flanke hinaus. Sie stehen
jetzt innerhalb des Umrisses, wie am Auto - dort ist die Karosserie 1879 mm
breit und Spur plus Reifenbreite 1820 mm.
Damit sie trotzdem zu sehen sind, stehen sie im Markup hinter der Karosserie
statt davor: das Blech ist durchscheinend gezeichnet. Von oben saehe man die
Raeder in Wirklichkeit gar nicht - hier gilt dieselbe Freiheit wie bei der
Akkuplatte, die auch durch den Boden zu sehen ist.
Kleiner dazu: Vorderachse vier Einheiten nach hinten (903 statt 871 mm
Ueberhang), Karosserie um 26 mm schmaler, Spiegel um 32 mm breiter, und die
Bananenschale liegt weiter in der linken Radspur, die jetzt woanders ist.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
796 lines
44 KiB
PHP
796 lines
44 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. -->
|
||
<g id="wagen">
|
||
|
||
<!-- 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"/>
|
||
|
||
<!-- 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: die
|
||
Karosserie ist durchscheinend gezeichnet - und sie
|
||
stehen im Markup hinter ihr, sonst schluckt das Blech
|
||
sie doch. 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>
|
||
|
||
<!-- 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"/>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- Motorhaube mit angedeuteter Mittelsicke -->
|
||
<g id="teil-bonnet" class="teil" tabindex="0" data-teil="bonnet">
|
||
<path d="M31 172 L193 172 L190 66 C176 48, 48 48, 34 66 Z"/>
|
||
<title>Motorhaube</title>
|
||
</g>
|
||
<path class="sicke" d="M112 62 L112 168"/>
|
||
|
||
<!-- Windschutzscheibe, Dach, Heckscheibe.
|
||
|
||
Die Stationen stammen aus der Seitenansicht des
|
||
Fahrzeugs, umgerechnet mit 105 Einheiten je Meter:
|
||
Scheibenfuss bei 1,6 m (y 172), 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. Vorher begann das Dach
|
||
schon bei 1,85 m und endete bei 3,15 m - das Glashaus
|
||
sass ein knappes Dreiviertel Meter zu weit vorn und war
|
||
zu kurz, und mit ihm Reling und Spoiler.
|
||
|
||
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. -->
|
||
<path class="scheibe" d="M34 176 L190 176 L178 232 L46 232 Z"/>
|
||
<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: nach innen gerückt,
|
||
nicht auf dessen Seitenkanten, und sie bleibt zwischen
|
||
den Scheiben - vorn hinter der Windschutzscheibe, hinten
|
||
am Spoiler. Läge sie bündig auf den Kanten, ergäbe sie
|
||
mit Platte und Spoiler ein geschlossenes Rechteck, und
|
||
das sieht aus wie ein Fensterrahmen. Die runden Enden
|
||
kommen von der Strichstärke, nicht aus der Geometrie. -->
|
||
<!-- ========================================================
|
||
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.
|
||
|
||
Die Reihenfolge ist Absicht und gilt ohne Ausnahme:
|
||
die Platte liegt ÜBER allem, was nur Blech und Glas ist
|
||
- Karosserie, Haube, beide Scheiben, Dach, Reling,
|
||
Spoiler -, und UNTER allem, was Zustand zeigt oder
|
||
bedient wird: Türen, Fenster, Klappen, Licht und die
|
||
beiden Knöpfe. Eine offene Klappe muss sichtbar
|
||
bleiben, auch wenn die Batterie darunter liegt - der
|
||
Zustand hat Vorrang vor der Anzeige.
|
||
|
||
Deshalb steht dieser Block hier und nicht weiter oben:
|
||
stand er vor der Heckscheibe, lag die Platte über der
|
||
Windschutzscheibe, aber unter der Heckscheibe, und die
|
||
Relingstäbe schwammen auf 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>
|
||
|
||
<!-- Dachreling und Heckspoiler stehen erst hier, nach der
|
||
Akkuplatte: sie liegen auf dem Dach, die Platte liegt
|
||
im Fahrzeugboden. Weiter oben im Markup lagen sie unter
|
||
der halbdurchsichtigen Platte und verblassten darin -
|
||
von den Relingholmen war fast nichts mehr zu sehen.
|
||
|
||
Die Holme sitzen ein Stück innerhalb der Dachkanten,
|
||
wie am Auto, und laufen zwischen den beiden Scheiben.
|
||
Der Spoiler ist ein Blatt über der hinteren Dachkante:
|
||
in der Mitte breit, zu den Enden auslaufend - so sitzt
|
||
er auf der Kante, statt sie nachzuzeichnen. -->
|
||
<g class="reling">
|
||
<line x1="53" y1="240" x2="53" y2="424"/>
|
||
<line x1="171" y1="240" x2="171" y2="424"/>
|
||
</g>
|
||
<path class="spoiler" d="M42 430 C 74 420, 150 420, 182 430
|
||
C 150 440, 74 440, 42 430 Z"/>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- Anhängerkupplung: Hals und Kugel, mehr sieht man von
|
||
oben nicht. Sie bleibt innerhalb der Heckkante - stand
|
||
sie darüber hinaus, las sich der Umriss an dieser
|
||
Stelle wie unterbrochen. -->
|
||
<g class="kupplung">
|
||
<rect x="109" y="474" width="6" height="13" rx="3"/>
|
||
<circle cx="112" cy="489" r="4"/>
|
||
</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>
|
||
<g id="teil-windows" class="teil teil-fenster" data-teil="windows">
|
||
<rect x="17" y="196" width="13" height="76" rx="4"/>
|
||
<rect x="17" y="286" width="13" height="60" rx="4"/>
|
||
<rect x="194" y="196" width="13" height="76" rx="4"/>
|
||
<rect x="194" y="286" width="13" height="60" rx="4"/>
|
||
<title>Seitenfenster</title>
|
||
</g>
|
||
|
||
<!-- Außenspiegel -->
|
||
<g class="spiegel">
|
||
<rect x="-0.7" y="196" width="16" height="10" rx="5"/>
|
||
<rect x="208.7" y="196" width="16" height="10" rx="5"/>
|
||
</g>
|
||
|
||
<!-- ========================================================
|
||
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 sitzt im oberen Drittel der Scheibe, nicht in deren
|
||
Mitte: darunter steht der Ladestand, und zwischen Knopf
|
||
und Zahl braucht es Luft, sonst lesen sich beide 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="206" r="19"/>
|
||
<circle class="flaeche" cx="112" cy="206" 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 206)">
|
||
<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-->
|