adminandClaude Opus 5
df55a77d97
Die Raeder hatten fast halbrunde Enden (rx 11 bei 25 Einheiten Breite) und sahen dadurch aus wie Kapseln. Von oben ist eine Lauffläche ein Rechteck mit leicht gebrochenen Ecken - rx 5. Der Klimaknopf sass in der Mitte der Windschutzscheibe und damit dicht ueber der Prozentzahl des Ladestands; beide lasen sich als ein Block. Er sitzt jetzt im oberen Drittel der Scheibe (cy 206 statt 220). Die Zahl bleibt, wo sie ist: sie steht auf dem Goldenen Schnitt der Akkuplatte (108 + 270 * 0,618 = 275), und das war Absicht. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
769 lines
42 KiB
PHP
769 lines
42 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 16, die Räder stehen
|
||
zwischen 5 und 26): 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(16 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">
|
||
|
||
<!-- 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. -->
|
||
<g class="rad">
|
||
<rect x="4" y="58" width="25" height="78" rx="5"/>
|
||
<rect x="195" y="58" width="25" height="78" rx="5"/>
|
||
<rect x="4" y="352" width="25" height="78" rx="5"/>
|
||
<rect x="195" y="352" width="25" height="78" rx="5"/>
|
||
</g>
|
||
|
||
<!-- 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="M154 6
|
||
C186 9, 202 24, 205 52 C209 90, 212 160, 212 250
|
||
C212 340, 211 415, 206 452
|
||
C203 476, 192 494, 168 494
|
||
L56 494
|
||
C32 494, 21 476, 18 452
|
||
C13 415, 12 340, 12 250
|
||
C12 160, 15 90, 19 52
|
||
C22 24, 38 9, 70 6
|
||
L154 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"/>
|
||
|
||
<!-- 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,5 m
|
||
(268), Dachende bei 4,0 m (428). 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 268 L46 268 Z"/>
|
||
<rect class="dach" x="46" y="268" width="132" height="160" 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="274" x2="53" y2="424"/>
|
||
<line x1="171" y1="274" 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 ist
|
||
länger als die hintere (89 zu 79 Einheiten, also 85 zu
|
||
75 Zentimeter): die Trennfuge liegt bei 2,60 m, die
|
||
hintere Fuge bei 3,35 m, kurz vor dem Radlauf. Vorher
|
||
waren beide gleich lang und zusammen einen halben Meter
|
||
zu lang. -->
|
||
<g id="teil-doors" class="teil" data-teil="doors">
|
||
<g tabindex="0"><rect x="12" y="190" width="23" height="89" rx="6"/><title>Tür vorn links</title></g>
|
||
<g tabindex="0"><rect x="12" y="281" width="23" height="79" rx="6"/><title>Tür hinten links</title></g>
|
||
<g tabindex="0"><rect x="189" y="190" width="23" height="89" rx="6"/><title>Tür vorn rechts</title></g>
|
||
<g tabindex="0"><rect x="189" y="281" width="23" height="79" 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="198" width="13" height="73" rx="4"/>
|
||
<rect x="17" y="289" width="13" height="63" rx="4"/>
|
||
<rect x="194" y="198" width="13" height="73" rx="4"/>
|
||
<rect x="194" y="289" width="13" height="63" rx="4"/>
|
||
<title>Seitenfenster</title>
|
||
</g>
|
||
|
||
<!-- Außenspiegel -->
|
||
<g class="spiegel">
|
||
<rect x="1" y="205" width="16" height="10" rx="5"/>
|
||
<rect x="207" y="205" 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-->
|