Anzeige fuer den Pi ist jetzt die Solar-Seite im Anzeige-Modus

Statt einer eigenen Vorlage mit nachgebauter Verdrahtung: ?action=anzeige ist der Eintrag solar mit "anzeige" => true. header.php laesst Kopfleiste und Menue weg und setzt die schmale Leiste (neu: Diagramme), footer.php den Fuss; die Realtime-Karte fuellt einen Bildschirm, Diagramme folgen darunter. Damit gehen am Display auch die Bedienfenster (Heizstab, Wallboxen, Bewaesserung) und die Diagramme - alles aus solarMQTT.js. anzeige.js bleibt fuer Leerlauf, Verbindungspunkt, Uhr und Neuladen; restricted/anzeige.php, "eigen" in index.php und klickFilter entfallen. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-15 20:22:35 +02:00
parent b8b2e66fd0
commit 2e66bdeff5
9 changed files with 159 additions and 193 deletions
@@ -1,60 +0,0 @@
-<?php
-/**
- * Vollbildanzeige für ein festes Display, gedacht für den Raspberry Pi mit
- * dem 7-Zoll-Display (800 x 480) im Kioskmodus:
- *
- *   index.php?action=anzeige              ruhige Animationen, kein Mauszeiger
- *   index.php?action=anzeige&animation=1  alle Animationen (schnellere Geräte)
- *   index.php?action=anzeige&maus=1       Mauszeiger sichtbar (zum Einrichten)
- *
- * Eine eigene Seite ohne Kopf, Seitenleiste und die Karten der Solar-Seite:
- * links eine schmale Leiste mit Übersicht, Anlage und Speicher, rechts die
- * Ansicht auf voller Höhe. Gezeichnet wird mit denselben Bausteinen wie auf
- * der Solar-Seite (energiefluss.js, anlage.js, speicher.js); verdrahtet
- * werden sie von js/solar/anzeige.js.
- *
- * index.php bindet für diese Seite weder header.php noch footer.php ein
- * ("eigen" in der Seitentabelle) - deshalb steht der Kopf hier selbst.
- */
-require_once(__DIR__ . "/energiefluss.php");
-
-$ruhig = empty($_GET["animation"]);
-$maus  = !empty($_GET["maus"]);
-?>
-<!doctype html>
-<html lang="de" data-bs-theme="dark">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-  <title>Energiefluss</title>
-  <link rel="icon" type="image/png" href="assets/img/favicon.png" />
-  <link rel="stylesheet" href="assets/fonts/font_poppins.css" />
-  <link rel="stylesheet" href="css/bootstrap-icons.min.css" />
-  <link rel="stylesheet" href="./css/solar.css?v=<?= filemtime("css/solar.css") ?>" />
-</head>
-<body class="anzeige<?= $ruhig ? " anzeige-ruhig" : "" ?><?= $maus ? "" : " anzeige-ohne-maus" ?>">
-  <nav class="anzeige-leiste" aria-label="Ansicht">
-    <button type="button" data-anzeige="fluss" aria-pressed="true" title="Übersicht"><i class="bi bi-diagram-3"></i></button>
-    <button type="button" data-anzeige="anlage" aria-pressed="false" title="Anlage"><i class="bi bi-grid-3x2-gap"></i></button>
-    <button type="button" data-anzeige="speicher" aria-pressed="false" title="Speicher"><i class="bi bi-battery-half"></i></button>
-    <div class="anzeige-fuss">
-      <span class="anzeige-punkt" id="anzeigeVerbindung" title="Verbindung wird aufgebaut"></span>
-      <span class="anzeige-uhr" id="anzeigeUhr"></span>
-    </div>
-  </nav>
-  <main class="anzeige-inhalt">
-    <div class="anzeige-flaeche" data-anzeige-flaeche="fluss" id="anzeige-fluss"></div>
-    <div class="anzeige-flaeche" data-anzeige-flaeche="anlage" id="anzeige-anlage" hidden></div>
-    <div class="anzeige-flaeche" data-anzeige-flaeche="speicher" id="anzeige-speicher" hidden></div>
-  </main>
-  <script>
-    // Abweichungen dieses Hauses vom Katalog, siehe restricted/energiefluss.php.
-    const energieflussEinstellungen = <?= json_encode((object)energieflussLaden(), JSON_UNESCAPED_UNICODE) ?>;
-    const anzeigeRuhig = <?= $ruhig ? "true" : "false" ?>;
-  </script>
-  <script src="js/mqtt.min.js"></script>
-<?php foreach ($page["scripts"] as $script): ?>
-  <script src="<?= $script ?>?v=<?= filemtime($script) ?>"></script>
-<?php endforeach; ?>
-</body>
-</html>
@@ -1,3 +1,4 @@
+<?php if (empty($page["anzeige"])): ?>
 <!--begin::Footer-->
 <footer class="app-footer">
  <!--begin::To the end-->
@@ -12,6 +13,7 @@
  <!--end::Copyright-->
 </footer>
 <!--end::Footer-->
+<?php endif; ?>
 <div class="modal fade" id="modalEV" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
@@ -59,9 +59,34 @@ if (!isset($_GET["floor"]))
 <!--end::Head-->
 <!--begin::Body-->

-<body class="layout-fixed sidebar-expand-lg bg-body-tertiary" data-bs-theme="dark">
+<?php
+// Anzeige-Modus (?action=anzeige, siehe index.php): dieselbe Seite fuer ein
+// festes Display, ohne Kopfleiste und Menue, dafuer mit schmaler Leiste.
+// ?animation=1 schaltet alle Animationen ein, ?maus=1 den Mauszeiger.
+$anzeige = !empty($page["anzeige"]);
+$koerperKlassen = "layout-fixed sidebar-expand-lg bg-body-tertiary";
+if ($anzeige) {
+    $koerperKlassen .= " anzeige" . (empty($_GET["animation"]) ? " anzeige-ruhig" : "")
+                     . (empty($_GET["maus"]) ? " anzeige-ohne-maus" : "");
+}
+?>
+<body class="<?= $koerperKlassen ?>" data-bs-theme="dark">
+<?php if ($anzeige): ?>
+    <!-- Leiste der Anzeige; verdrahtet in js/solar/anzeige.js -->
+    <nav class="anzeige-leiste" aria-label="Ansicht">
+        <button type="button" data-anzeige="fluss" aria-pressed="true" title="Übersicht"><i class="bi bi-diagram-3"></i></button>
+        <button type="button" data-anzeige="anlage" aria-pressed="false" title="Anlage"><i class="bi bi-grid-3x2-gap"></i></button>
+        <button type="button" data-anzeige="speicher" aria-pressed="false" title="Speicher"><i class="bi bi-battery-half"></i></button>
+        <button type="button" data-anzeige="diagramme" aria-pressed="false" title="Diagramme"><i class="bi bi-graph-up"></i></button>
+        <div class="anzeige-fuss">
+            <span class="anzeige-punkt" id="anzeigeVerbindung" title="Verbindung wird aufgebaut"></span>
+            <span class="anzeige-uhr" id="anzeigeUhr"></span>
+        </div>
+    </nav>
+<?php endif; ?>
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
+<?php if (!$anzeige): ?>
        <!--begin::Header-->
        <nav class="app-header navbar navbar-expand bg-body">
            <!--begin::Container-->
@@ -213,4 +238,5 @@ if (!isset($_GET["floor"]))
            </div>
            <!--end::Sidebar Wrapper-->
        </aside>
-        <!--end::Sidebar-->
+        <!--end::Sidebar-->
+<?php endif; ?>