Vollbildanzeige fuer den Raspberry Pi (800 x 480)

index.php?action=anzeige: Uebersicht, Anlage und Speicher ohne Kopf und Seitenleiste, schmale Leiste links, immer quer. Nach zwei Minuten ohne Beruehrung zurueck zur Uebersicht, MQTT verbindet still neu (Punkt in der Leiste), alle sechs Stunden neu laden. Standard "ruhig" fuer den Pi 3B+ (nur Fluesse, grobe Stufen, kein Mauszeiger); &animation=1 und &maus=1. Dafuer: - Seitentabelle kennt "eigen" (Vorlage ist eine ganze Seite) - Energiefluss: Optionen hochkantUnter und klickFilter; Anlage: hochkantUnter - Bewaesserungszustand aus solarMQTT.js nach bewaesserungAnzeige.js, von Solar-Seite und Anzeige gemeinsam genutzt - Speicher: "voll/leer" mit Tag ("morgen 21:52", "in 3 Tagen") Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-15 19:15:46 +02:00
parent 377aa03637
commit b8b2e66fd0
10 changed files with 503 additions and 180 deletions
@@ -0,0 +1,122 @@
+/* ==========================================================================
+   Vollbildanzeige (restricted/anzeige.php): Übersicht, Anlage und Speicher
+   für ein festes Display, z.B. den Raspberry Pi mit 800 x 480.
+
+   Dieselben Bausteine wie auf der Solar-Seite, nur anders verdrahtet:
+   - immer quer (hochkantUnter: 0), das Display steht quer
+   - antippbar sind nur Kreise, die eine andere Ansicht öffnen; Bedienfenster
+     (Heizstab, Wallbox) gibt es hier nicht
+   - nach LEERLAUF ohne Berührung zurück zur Übersicht
+   - MQTT verbindet nach einem Abbruch still neu; der Punkt unten in der
+     Leiste zeigt den Zustand (grün verbunden, gelb keine frischen Werte,
+     rot getrennt). Kein alert() - am Display ist niemand, der ihn wegklickt.
+   - alle NEU_LADEN Stunden lädt die Seite neu, damit ein Browser, der
+     wochenlang läuft, keinen Speicher ansammelt und Änderungen am Code
+     ankommen
+   ========================================================================== */
+
+var mqttData = {};
+
+(function () {
+  "use strict";
+
+  const ADRESSE = "wss://mqtt.nas.el-wa.org:443";   // wie in solarMQTT.js
+  const LEERLAUF = 2 * 60000;
+  const NEU_LADEN = 6 * 3600000;
+  const TAKT = typeof anzeigeRuhig !== "undefined" && anzeigeRuhig ? 2000 : 1000;
+  const VERALTET = 30000;
+  const THEMEN = [
+    "solarManager/#",
+    "Gartenwasser/vorn/Timers", "Gartenwasser/vorn/status", "Gartenwasser/vorn/WateringToday",
+    "Gartenwasser/hinten/Timers", "Gartenwasser/hinten/status", "Gartenwasser/hinten/WateringToday",
+  ];
+
+  const $ = id => document.getElementById(id);
+  let bild = null, anlage = null, speicher = null;
+  let leerlaufUhr = null, geplant = false, verbunden = false, letzteDaten = 0;
+
+  function zeige(name) {
+    document.querySelectorAll("[data-anzeige]").forEach(b => b.setAttribute("aria-pressed", b.dataset.anzeige === name ? "true" : "false"));
+    document.querySelectorAll("[data-anzeige-flaeche]").forEach(f => { f.hidden = f.dataset.anzeigeFlaeche !== name; });
+    wachHalten();
+  }
+
+  function wachHalten() {
+    clearTimeout(leerlaufUhr);
+    leerlaufUhr = setTimeout(() => zeige("fluss"), LEERLAUF);
+  }
+
+  function zustand() {
+    const punkt = $("anzeigeVerbindung");
+    const frisch = Date.now() - letzteDaten < VERALTET;
+    const klasse = "anzeige-punkt" + (verbunden && frisch ? " gut" : verbunden ? " warn" : "");
+    if (punkt.className !== klasse) {
+      punkt.className = klasse;
+      punkt.title = verbunden && frisch ? "verbunden" : verbunden ? "verbunden, aber keine frischen Werte" : "Verbindung getrennt – wird neu aufgebaut";
+    }
+  }
+
+  function uhr() {
+    const d = new Date();
+    const text = String(d.getHours()).padStart(2, "0") + ":" + String(d.getMinutes()).padStart(2, "0");
+    if ($("anzeigeUhr").textContent !== text) $("anzeigeUhr").textContent = text;
+  }
+
+  function aktualisieren() {
+    if (geplant) return;
+    geplant = true;
+    setTimeout(() => {
+      geplant = false;
+      bild.aktualisieren(mqttData);
+      anlage.aktualisieren(mqttData);
+      speicher.aktualisieren(mqttData);
+    }, TAKT);
+  }
+
+  function verbinden() {
+    const client = mqtt.connect(ADRESSE, { rejectUnauthorized: false, reconnectPeriod: 5000, connectTimeout: 15000 });
+    client.on("connect", () => {
+      verbunden = true;
+      client.subscribe(THEMEN);
+      zustand();
+    });
+    const weg = () => { verbunden = false; zustand(); };
+    client.on("close", weg);
+    client.on("offline", weg);
+    client.on("error", () => {});
+    client.on("message", (topic, nachricht) => {
+      mqttData[topic] = nachricht;
+      if (topic.endsWith("/Timers")) wateringTimersLastSeen[topic] = Date.now();
+      if (topic === "solarManager/P_Load") {
+        letzteDaten = Date.now();
+        aktualisieren();
+      }
+    });
+  }
+
+  document.addEventListener("DOMContentLoaded", () => {
+    const bewaesserung = () => wateringSymboleSetzen(id => document.getElementById(id));
+
+    bild = new Energiefluss($("anzeige-fluss"), {
+      einstellungen: typeof energieflussEinstellungen !== "undefined" ? energieflussEinstellungen : {},
+      hochkantUnter: 0,
+      klickFilter: k => !!k.klick.ansicht,
+      onKlick: k => zeige(k.klick.ansicht),
+      onGezeichnet: bewaesserung,
+    });
+    bild.zeichnen();
+    anlage = new Anlage($("anzeige-anlage"), { hochkantUnter: 0 });
+    anlage.zeichnen();
+    speicher = new Speicher($("anzeige-speicher"));
+    speicher.zeichnen();
+
+    document.querySelectorAll("[data-anzeige]").forEach(b => b.addEventListener("click", () => zeige(b.dataset.anzeige)));
+    document.addEventListener("pointerdown", wachHalten, { passive: true });
+
+    setInterval(() => { uhr(); zustand(); bewaesserung(); }, 1000);
+    uhr();
+    zustand();
+    verbinden();
+    setTimeout(() => location.reload(), NEU_LADEN);
+  });
+})();