adminandClaude Opus 5
b7c2bc82c7
Die Baumkronen neben der Fahrbahn sahen aus wie Erbsen und nicht wie eine Allee - sie sind raus. Stattdessen ist die Markierung jetzt richtig. Massstab: der Wagen ist 4,65 m lang und misst im Bild 488 Einheiten, eine Einheit ist also knapp ein Zentimeter (105 je Meter). Danach richten sich alle Masse: rechts Fahrbahnbegrenzung, durchgezogen links Leitlinie, 6 m Strich auf 12 m Luecke (630 auf 1260 Einheiten) beide 0,12 m breit, also 12,6 Einheiten Der Strich ist damit laenger als das Bild hoch ist, und zwischen zwei Strichen liegt mehr als eine Bildhoehe - genau so sieht eine Landstrasse aus dem Auto auch aus. Sichtbar ist eine Markierung dadurch etwa zwei Drittel der Zeit. Die Geschwindigkeit ist ebenfalls abgeleitet und nicht geraten: 875 Einheiten je Sekunde sind gut 30 km/h. Der Fahrtwind laeuft jetzt genauso schnell - ein Streifen, der die Fahrbahnmarkierung ueberholt, faellt sofort auf. Nicht massstaeblich bleibt die Breite der Fahrbahn: neben dem Wagen sind zwanzig Zentimeter Platz statt der drei Viertel Meter einer echten Spur. Dafuer muesste das Fahrzeug halb so gross gezeichnet werden, und darum geht es auf dieser Kachel nicht. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
649 lines
35 KiB
PHP
649 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.
|
||
|
||
Markiert wie eine deutsche Landstraße und maßstäblich
|
||
zum Fahrzeug: der Wagen ist 4,65 m lang und misst hier
|
||
488 Einheiten, eine Einheit ist also knapp ein
|
||
Zentimeter (105 Einheiten je Meter).
|
||
|
||
rechts Fahrbahnbegrenzung, durchgezogen
|
||
links Leitlinie, 6 m Strich auf 12 m Lücke
|
||
(630 und 1260 Einheiten)
|
||
beide 0,12 m breit, also 12,6 Einheiten
|
||
|
||
Der Strich ist damit länger als das Bild hoch ist -
|
||
genau so sieht es aus dem Auto auch aus. Sichtbar ist
|
||
eine Markierung dadurch etwa zwei Drittel der Zeit.
|
||
|
||
Nicht maßstäblich ist die Breite der Fahrbahn: neben
|
||
dem Wagen bleiben zwanzig Zentimeter Platz statt der
|
||
drei Viertel Meter einer echten Spur. Dafür müsste das
|
||
Fahrzeug halb so groß gezeichnet werden, und darum
|
||
geht es auf dieser Kachel nicht.
|
||
|
||
Die Leitlinie wandert um genau eine Strich-Lücken-
|
||
Länge (1890); danach steht das Muster wieder so da wie
|
||
zuvor, und die Schleife ist unsichtbar. Bei 875
|
||
Einheiten je Sekunde entspricht das gut 30 km/h. -->
|
||
<g class="strasse" aria-hidden="true">
|
||
<rect class="belag" x="-16" y="-8" width="256" height="516"/>
|
||
<line class="leitlinie" x1="-6" y1="-1900" x2="-6" y2="2400"/>
|
||
<line class="begrenzung" x1="230" y1="-8" x2="230" y2="508"/>
|
||
</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-->
|