adminandClaude Opus 5
b0596721fa
Ob das Auto gerade rollt, stand bisher nur klein unter der Karte
("unterwegs - zuletzt: ..."). Im Bild selbst, wo man zuerst hinsieht, war es
nicht zu erkennen.
Waehrend der Fahrt liegt jetzt eine Strasse unter dem Wagen: dunkler Belag,
gestrichelte Markierungen in den Randstreifen neben den Raedern, zwei Reihen
Baumkronen, die aussen vorbeiziehen. Dazu vier Windstreifen - zwei neben dem
Wagen, zwei ueber ihn hinweg, heller und duenner, damit sie wie Luft wirken
und nicht wie ein Riss im Lack.
Beide Schleifen treffen sich selbst: die Striche wandern um eine
Strich-Lueckenlaenge (46), die Baumreihen um ihren Abstand (160) - danach
steht das Muster wieder wie zuvor, und man sieht keinen Sprung. Markierungen
und Baeume laufen mit derselben Geschwindigkeit, der Wind etwa anderthalbmal
so schnell; groessere Unterschiede lassen die Bewegungen auseinanderfallen.
Dazu ein Abzeichen "unterwegs" im Kopf der Kachel - fuer Vorleseprogramme und
fuer alle, die Bewegungen abgeschaltet haben; dann steht die Landschaft still
(prefers-reduced-motion).
Der Zustand kommt aus park_state der juengsten Zeile; der Broker kennt ihn
nicht, unter solarManager/ev* stehen nur Ladestand, Reichweite und Ladung.
Unterwegs fragt der Sammler alle vier Minuten, die Seite laedt jede Minute
nach - die Anzeige hinkt also um wenige Minuten hinterher.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
651 lines
35 KiB
PHP
651 lines
35 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="-16 -8 256 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"/>
|
||
</defs>
|
||
|
||
<!-- Die Straße, über die der Wagen fährt. Ganz zuerst
|
||
gezeichnet, damit alles andere darauf liegt.
|
||
|
||
Der Belag deckt die ganze Zeichenfläche, die
|
||
Fahrbahnmarkierungen laufen in den beiden Randstreifen
|
||
neben den Rädern - dort ist Platz, ohne dem Fahrzeug
|
||
ins Bild zu geraten. Die Striche wandern um genau eine
|
||
Strich-Lücke-Länge; danach steht das Muster wieder so
|
||
da wie zuvor, und die Schleife ist unsichtbar.
|
||
|
||
Dasselbe bei den Bäumen: ihr Abstand ist der Weg einer
|
||
Umdrehung. Die beiden Reihen laufen versetzt und
|
||
verschieden schnell, sonst fährt man durch eine Allee
|
||
aus Zwillingen. -->
|
||
<g class="strasse" aria-hidden="true">
|
||
<rect class="belag" x="-16" y="-8" width="256" height="516"/>
|
||
<g class="markierung">
|
||
<line x1="-2" y1="-60" x2="-2" y2="560"/>
|
||
<line x1="226" y1="-60" x2="226" y2="560"/>
|
||
</g>
|
||
<g class="baumreihe links">
|
||
<circle class="baum" cx="-9" cy="-100" r="6.5"/>
|
||
<circle class="baum" cx="-8" cy="60" r="5.5"/>
|
||
<circle class="baum" cx="-9" cy="220" r="6.5"/>
|
||
<circle class="baum" cx="-8" cy="380" r="6"/>
|
||
<circle class="baum" cx="-9" cy="540" r="6.5"/>
|
||
</g>
|
||
<g class="baumreihe rechts">
|
||
<circle class="baum" cx="233" cy="-20" r="6"/>
|
||
<circle class="baum" cx="233" cy="140" r="6.5"/>
|
||
<circle class="baum" cx="232" cy="300" r="5.5"/>
|
||
<circle class="baum" cx="234" cy="460" r="6.5"/>
|
||
</g>
|
||
</g>
|
||
|
||
<!-- Fahrtwind: zeigt an, dass das Fahrzeug gerade rollt.
|
||
Die Streifen laufen von vorn nach hinten, also im Bild
|
||
von oben nach unten - das Auto zeigt nach oben.
|
||
|
||
Je eine Spur läuft links und rechts am Wagen vorbei,
|
||
zwei weitere ziehen über ihn hinweg - der Wind macht
|
||
am Blech ja nicht halt. Die über dem Fahrzeug sind
|
||
heller und dünner, damit sie wie Luft darüber wirken
|
||
und nicht wie ein Riss im Lack; die Mitte bleibt frei,
|
||
dort stehen Ladestand und Reichweite.
|
||
|
||
Wenige Streifen mit ungleichem Takt: die Bewegung
|
||
kommt jetzt vor allem von der Straße darunter, der
|
||
Wind setzt nur noch einen Akzent.
|
||
|
||
Sichtbar nur, solange das SVG die Klasse "faehrt"
|
||
trägt (siehe zeichneFahrt()); aria-hidden, weil der
|
||
Zustand als Abzeichen im Kopf schon dasteht. -->
|
||
<g id="fahrtwind" class="fahrtwind" aria-hidden="true">
|
||
<line class="boe b1" x1="-6" y1="-120" x2="-6" y2="-60"/>
|
||
<line class="boe b6" x1="230" y1="-120" x2="230" y2="-70"/>
|
||
</g>
|
||
|
||
<!-- Räder. Vorderachse bei 860 mm, Hinterachse bei 3625 mm
|
||
ab Bugspitze - der Radstand von 2765 mm maßstäblich. -->
|
||
<g class="rad">
|
||
<rect x="5" y="68" width="21" height="58" rx="9"/>
|
||
<rect x="198" y="68" width="21" height="58" rx="9"/>
|
||
<rect x="5" y="362" width="21" height="58" rx="9"/>
|
||
<rect x="198" y="362" width="21" height="58" rx="9"/>
|
||
</g>
|
||
|
||
<!-- Karosserie -->
|
||
<path class="karosserie" d="M112 6
|
||
C150 6, 198 16, 204 50 C209 90, 212 160, 212 250
|
||
C212 340, 209 410, 204 450 C198 484, 150 494, 112 494
|
||
C74 494, 26 484, 20 450 C15 410, 12 340, 12 250
|
||
C12 160, 15 90, 20 50 C26 16, 74 6, 112 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="M22 46
|
||
C 30 17, 74 7, 112 7 C 150 7, 194 17, 202 46
|
||
C 196 24, 156 17, 112 17 C 68 17, 28 24, 22 46 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="36" y="30" width="9" height="13" rx="4"/>
|
||
<rect x="48" y="27" width="9" height="13" rx="4"/>
|
||
<rect x="60" y="25" width="9" height="13" rx="4"/>
|
||
<rect x="72" y="24" width="9" height="13" rx="4"/>
|
||
<rect x="143" y="24" width="9" height="13" rx="4"/>
|
||
<rect x="155" y="25" width="9" height="13" rx="4"/>
|
||
<rect x="167" y="27" width="9" height="13" rx="4"/>
|
||
<rect x="179" y="30" width="9" height="13" rx="4"/>
|
||
<rect class="rueck" x="40" y="462" width="52" height="13" rx="6"/>
|
||
<rect class="rueck" x="132" y="462" width="52" height="13" rx="6"/>
|
||
<title>Beleuchtung</title>
|
||
</g>
|
||
|
||
<!-- Motorhaube mit angedeuteter Mittelsicke -->
|
||
<g id="teil-bonnet" class="teil" tabindex="0" data-teil="bonnet">
|
||
<path d="M31 152 L193 152 L189 62 C169 40, 55 40, 35 62 Z"/>
|
||
<title>Motorhaube</title>
|
||
</g>
|
||
<path class="sicke" d="M112 60 L112 150"/>
|
||
|
||
<!-- Windschutzscheibe, Dach, Heckscheibe -->
|
||
<path class="scheibe" d="M34 156 L190 156 L178 200 L46 200 Z"/>
|
||
<rect class="dach" x="46" y="200" width="132" height="136" 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. -->
|
||
<g class="reling">
|
||
<line x1="54" y1="206" x2="54" y2="330"/>
|
||
<line x1="170" y1="206" x2="170" y2="330"/>
|
||
</g>
|
||
|
||
<path class="scheibe" d="M46 336 L178 336 L190 382 L34 382 Z"/>
|
||
<!-- Heckspoiler: ein Blatt über der Dachkante, in der Mitte
|
||
breit, zu den Enden auslaufend - so sitzt er auf der
|
||
Kante statt sie nachzuzeichnen. -->
|
||
<path class="spoiler" d="M44 336 C 74 327, 150 327, 180 336
|
||
C 150 344, 74 344, 44 336 Z"/>
|
||
|
||
<!-- ========================================================
|
||
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>
|
||
|
||
<!-- Heckklappe -->
|
||
<g id="teil-trunk" class="teil" tabindex="0" data-teil="trunk">
|
||
<path d="M34 384 L190 384 L186 458 C168 478, 56 478, 38 458 Z"/>
|
||
<title>Heckklappe</title>
|
||
</g>
|
||
|
||
<!-- Türen, jeweils mit Seitenfenster darin -->
|
||
<g id="teil-doors" class="teil" data-teil="doors">
|
||
<g tabindex="0"><rect x="12" y="202" width="23" height="74" rx="6"/><title>Tür vorn links</title></g>
|
||
<g tabindex="0"><rect x="12" y="278" width="23" height="66" rx="6"/><title>Tür hinten links</title></g>
|
||
<g tabindex="0"><rect x="189" y="202" width="23" height="74" rx="6"/><title>Tür vorn rechts</title></g>
|
||
<g tabindex="0"><rect x="189" y="278" width="23" height="66" 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="210" width="13" height="58" rx="4"/>
|
||
<rect x="17" y="286" width="13" height="50" rx="4"/>
|
||
<rect x="194" y="210" width="13" height="58" rx="4"/>
|
||
<rect x="194" y="286" width="13" height="50" rx="4"/>
|
||
<title>Seitenfenster</title>
|
||
</g>
|
||
|
||
<!-- Außenspiegel -->
|
||
<g class="spiegel">
|
||
<rect x="1" y="194" width="16" height="10" rx="5"/>
|
||
<rect x="207" y="194" 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. -->
|
||
<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="186" r="19"/>
|
||
<circle class="flaeche" cx="112" cy="186" 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 186)">
|
||
<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>
|
||
|
||
<!-- 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-->
|