Solar: neue Energiefluss-Uebersicht, anpassbar je Haus

Das feste realtime.svg ist ersetzt durch einen Katalog
(js/solar/energieflussKatalog.js: jeder Kreis einmal, samt Werten aus MQTT)
und einen Renderer (js/solar/energiefluss.js): Ringe mit Segmenten,
Fluesse als Boegen mit laufenden Punkten, Fuellstandswelle fuer Batterie
und Auto, animierte Symbole, Plaketten, Hochkant-Ansicht auf schmalen
Schirmen. Hierarchie und Lage wie bisher: Quellen -> Wechselrichter ->
Verbrauch -> OG/EG/UG -> Wallboxen, Heizstab.

Einstellungen -> Uebersicht: Kreise ein/aus (Kinder ruecken eine Ebene
hoeher), Namen, Lage per Ziehen in der Vorschau, PV-Flaechen. Gespeichert
werden nur Abweichungen in homeMesh.energiefluss.

Der PV-Lageplan hinter der Sonne liegt unveraendert als assets/img/pvplan.svg
und ist ueber den Umschalter Uebersicht/Anlage erreichbar.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-15 16:42:52 +02:00
co-authored by Claude Opus 5
parent 5ed3a0796e
commit a59277e33e
14 changed files with 1812 additions and 1148 deletions
+43
View File
@@ -33,6 +33,7 @@ require_once(__DIR__ . "/skodaKeys.php");
$reiter = [
["id" => "preise", "titel" => "Preise", "symbol" => "bi-currency-euro"],
["id" => "grundriss", "titel" => "Grundriss", "symbol" => "bi-house"],
["id" => "energiefluss", "titel" => "Übersicht", "symbol" => "bi-diagram-3"],
["id" => "kacheln", "titel" => "Home-Kacheln", "symbol" => "bi-grid-1x2"],
["id" => "geraete", "titel" => "Geräte", "symbol" => "bi-house-gear"],
["id" => "fahrzeug", "titel" => "Fahrzeug", "symbol" => "bi-ev-front"],
@@ -162,6 +163,48 @@ try {
</div>
<?= reiterFlaecheZu() ?><!-- /Grundriss -->
<!-- ================================================== Übersicht ==== -->
<!-- Die Energiefluss-Übersicht der Solar-Seite. Welche Kreise es gibt,
steht im Katalog (js/solar/energieflussKatalog.js); hier wird nur
eingestellt, was dieses Haus davon abweicht - gespeichert in
homeMesh.energiefluss. Vorschau und Liste zeichnet
js/solar/energieflussEinstellungen.js. -->
<?= reiterFlaecheAuf("energiefluss", $reiterOpt) ?>
<div class="card mb-4" id="energieflussKarte">
<div class="card-header pb-2 pt-2">
<h3 class="card-title"><i class="bi bi-diagram-3 me-2"></i>Energiefluss-Übersicht</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" id="energieflussNeuLaden" title="Änderungen verwerfen">
<i class="bi bi-arrow-counterclockwise"></i>
</button>
</div>
</div>
<div class="card-body">
<p class="text-secondary small mb-3">
Kreise, die es in diesem Haus nicht gibt, werden ausgeschaltet hängen andere
daran, rücken sie eine Ebene nach oben. In der Vorschau lassen sich die Kreise
mit der Maus verschieben. Auf schmalen Bildschirmen dreht die Übersicht sich
von selbst hochkant. Die Werte in der Vorschau sind Beispiele.
</p>
<div class="row g-4">
<div class="col-12 col-xl-7">
<div class="enf-vorschau" id="energieflussVorschau"></div>
</div>
<div class="col-12 col-xl-5">
<div id="energieflussListe">
<p class="text-secondary small mb-0">Wird geladen …</p>
</div>
</div>
</div>
</div>
<div class="card-footer d-flex flex-wrap align-items-center gap-3">
<button type="button" class="btn btn-primary" id="energieflussSpeichern">Speichern</button>
<button type="button" class="btn btn-outline-secondary" id="energieflussZuruecksetzen">Alles auf Katalog zurücksetzen</button>
<span class="small" id="energieflussHinweis"></span>
</div>
</div>
<?= reiterFlaecheZu() ?><!-- /Übersicht -->
<!-- ================================================ Home-Kacheln ==== -->
<!-- Der Inhalt kommt aus js/solar/settings.js: eine Karte je Etage, darin
je Raum eine Zeile mit ihren Werten. Gezeichnet wird aus dem Modell,