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:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user