Kacheln zeigen frei gewaehlte Messwerte, Heizung nur wo eine haengt

Drei Sachen an den Kacheln und am Raum-Modal.

Die Platzhalter sind nur noch Striche. Vorher stand dort "---- hPa",
gefuellt wurde die Zeile aber mit der Solltemperatur - eine Einheit, die
nie kam, an einer Stelle, die etwas anderes zeigt.

Der Heizungs-Reiter erscheint nur noch, wo auch ein Thermostat haengt.
Frueher entschied das "hat der Raum eine Kachel" - das stimmte, solange
nur Raeume mit Thermostat eine bekamen. Seit auch Kueche und Technik eine
haben, bekamen sie einen Regler fuer eine Heizung, die es dort nicht gibt.
Jetzt zaehlt, ob im Raum ein Geraet der Bedienform "heizung" steht.

Und eine Kachel zeigt jetzt ein bis drei frei gewaehlte Messwerte. In
restricted/rooms.php steht je Raum unter "werte", welche das sind: topic,
optional pfad (Schluessel in einer JSON-Nachricht), einheit, stellen. Ohne
Angabe bleibt es bei den drei Thermostatwerten samt Heizsymbol, also genau
wie bisher - nur diese Raeume zeichnen die Symbole ueberhaupt noch.

Alles kommt live ueber MQTT, auch die beiden Shelly-Zaehler: sie schicken
ihre sechzehn Werte als eine JSON-Nachricht auf Power_EG/status/em:0, aus
der "pfad" den gesuchten Schluessel greift. Der Browser meldet nicht mehr
fest "Raumtemp/#" an, sondern die Zweige, die die Raumtabelle nennt -
derzeit vier statt vierzig einzelner Topics.

Damit steht auf EG Technik die Leistung (gemessen 293 W), auf UG Technik
Leistung und Wasserzaehler (78 W, 400,4 m3). Raeume ohne Messwert tragen
ihren Namen und oeffnen den Raum; ein leeres Rechteck saehe aus wie ein
Fehler.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

ajax/room.php

@@ -84,18 +84,18 @@ $etage = $teile[0] ?? "";
 $name  = $teile[1] ?? "";
 $raumKey = $etage . "/" . $name;
 
-// Hat der Raum ein Thermostat? Nur dann gibt es etwas zu heizen.
+// Alles im Raum, sortiert nach Bedienform. Das Thermostat selbst wird nicht
-$hatThermostat = false;
+// als Karte gezeichnet: es wird zum Schieberegler im Heizungs-Reiter und
-foreach (allRooms() as $raum) {
+// braucht daneben keine zweite Bedienung - "Solltemperatur" stand sonst
-    if ($raum["floor"] === $etage && $raum["mqtt"] === $name) {
+// zweimal im Modal.
-        $hatThermostat = isset($raum["x"]);   // Kachel = Thermostat vorhanden
+//
-    }
+// Ob es einen Heizungs-Reiter gibt, entscheidet genau das: haengt in diesem
-}
+// Raum ein Thermostat? Frueher stand hier "hat der Raum eine Kachel" - das
-
+// stimmte, solange nur Raeume mit Thermostat eine bekamen. Seit auch Kueche
-// Alles im Raum, sortiert nach Bedienform. Das Thermostat selbst faellt
+// und Technik eine haben, bekamen sie einen Heizungsregler fuer eine
-// heraus: es wird oben zum Schieberegler und braucht daneben keine zweite
+// Heizung, die es dort nicht gibt.
-// Bedienung - "Solltemperatur" stand vorher zweimal im Modal.
 $katalog = deviceCatalog();
+$hatThermostat = false;
 $gruppen = [];
 foreach ($katalog as $d) {
     if ($d["room"] !== $raumKey) {
@@ -103,6 +103,7 @@ foreach ($katalog as $d) {
     }
     $form = bedienform($d);
     if ($form === "heizung") {
+        $hatThermostat = true;
         continue;
     }
     $gruppen[$form][] = $d;

js/solar/homeMQTT.js

@@ -13,7 +13,10 @@ const homeMQTT = {
 
         client.on("message", messageReceived);
         client.on("connect", function () {
-            client.subscribe("Raumtemp/#");
+            // Welche Zweige gebraucht werden, sagt die Raumtabelle: seit eine
+            // Kachel jeden Messwert zeigen kann, reicht Raumtemp allein nicht
+            // mehr. homeTopics kommt aus restricted/rooms.php.
+            homeTopics.forEach(function (topic) { client.subscribe(topic); });
         });
         client.on("error", function (error) {
             //alert("MQTT Error: " + error);
@@ -51,25 +54,67 @@ const homeSVG = {
     fillElementArray: function () {
         
     },
+    /**
+     * Eine Nachricht aus dem Baum holen. mqttData ist nach den Teilen des
+     * Topics verschachtelt, siehe setNestedProp() weiter oben.
+     */
+    ausTopic: function (mqttData, topic) {
+        return topic.split("/").reduce(function (zweig, teil) {
+            return zweig && zweig[teil];
+        }, mqttData);
+    },
+
+    /**
+     * Einen Kachelwert lesen und hinschreiben.
+     *
+     * "pfad" ist gesetzt, wenn das Geraet mehrere Werte in einer einzigen
+     * JSON-Nachricht schickt - die beiden Shelly-Zaehler tun das. "stellen"
+     * schneidet Nachkommastellen ab; ohne Angabe bleibt der Text so, wie das
+     * Geraet ihn meldet.
+     */
+    kachelWert: function (mqttData, wert) {
+        const roh = homeSVG.ausTopic(mqttData, wert.topic);
+        if (typeof roh === "undefined") return null;
+        let text = String(roh);
+        if (wert.pfad) {
+            try {
+                const daten = JSON.parse(text);
+                if (!(wert.pfad in daten)) return null;
+                text = String(daten[wert.pfad]);
+            } catch (fehler) {
+                return null;   // noch keine vollstaendige Nachricht
+            }
+        }
+        if (typeof wert.stellen === "number" && text !== "" && !isNaN(Number(text))) {
+            text = Number(text).toFixed(wert.stellen);
+        }
+        // Schmales Leerzeichen zwischen Zahl und Einheit, wie es sich gehoert.
+        return wert.einheit ? text + "\u2009" + wert.einheit : text;
+    },
+
     updateValuesMQTT: function (mqttData) {
-        // homeRooms liefert restricted/rooms.php (in home.php eingebettet).
+        // homeRooms liefert restricted/rooms.php (in home.php eingebettet),
-        // Jeder Raum bekommt die gleiche Behandlung - Raeume kommen dort dazu,
+        // mitsamt den Werten, die auf der Kachel stehen sollen. Jeder Raum
-        // nicht hier.
+        // bekommt die gleiche Behandlung - Raeume und ihre Werte kommen dort
+        // dazu, nicht hier.
         homeRooms.forEach(function (room) {
-            const values = mqttData["Raumtemp"]?.[room.floor]?.[room.mqtt];
-            if (!values) return;   // Topic noch nicht empfangen
             const el = (part) => document.getElementById(room.floor + "_" + part);
 
+            room.werte.forEach(function (wert, i) {
+                const text = homeSVG.kachelWert(mqttData, wert);
+                const feld = el("w" + i + "_" + room.id);
+                if (text !== null && feld) feld.innerHTML = text;
+            });
+
+            // Heizsymbol und Pufferbetrieb gibt es nur, wo ein Thermostat
+            // haengt - anderswo sind die Elemente gar nicht gezeichnet.
+            if (!room.heizung) return;
+            const values = mqttData["Raumtemp"]?.[room.floor]?.[room.mqtt];
+            if (!values) return;
             if (typeof (values["Heating"]) != "undefined")
                 el(room.id + "_heater").setAttribute("display", values["Heating"] == "false" ? "none" : "");
             if (typeof (values["mode"]) != "undefined")
                 el(room.id + "_buffer").setAttribute("display", values["mode"] == "Overheating" ? "" : "none");
-            if (typeof (values["Set Temp[degC]"]) != "undefined")
-                el("pres_" + room.id).innerHTML = Math.floor(values["Set Temp[degC]"]) + "\u2009\u00b0C";
-            if (typeof (values["Temp[degC]"]) != "undefined")
-                el("tmp_" + room.id).innerHTML = values["Temp[degC]"] + "\u2009\u00b0C";
-            if (typeof (values["rHum[%]"]) != "undefined")
-                el("hum_" + room.id).innerHTML = values["rHum[%]"] + "\u2009%rF";
         });
     }
 

restricted/home.php

@@ -107,15 +107,36 @@
                     </g>
 <?php foreach ($floors as $floor): ?>
                     <g id="<?= $floor ?>_Info" <?php if ($floor != "OG") echo 'opacity="0" '; ?><?php if($_GET["floor"] != $floor){echo "display='none'";} ?> >
-<?php   foreach (roomsOnFloor($floor) as $room): ?>
+<?php   foreach (array_map("mitWerten", roomsOnFloor($floor)) as $room): ?>
+<?php
+      /*
+       * Grundlinien je nach Anzahl der Werte. Die Kachel ist 19 hoch; mit
+       * drei Werten sind es dieselben Zeilen wie eh und je (klein, gross,
+       * klein), mit weniger ruecken sie in die Mitte.
+       */
+      $zeilen = [1 => [12], 2 => [9, 16], 3 => [5, 11.5, 16.5]];
+      $y = $zeilen[count($room["werte"])] ?? [];
+?>
                       <g transform="translate(<?= $room["x"] ?>,<?= $room["y"] ?>)" onclick="openHeaterSettings('<?= $floor ?>_<?= $room["mqtt"] ?>');" cursor="pointer">
                         <rect width="24" height="19" rx="5" fill="#0006" />
+<?php     if ($room["heizung"]): ?>
                         <use id="<?= $floor ?>_<?= $room["id"] ?>_heater" href="#heater" display="none" />
                         <use id="<?= $floor ?>_<?= $room["id"] ?>_buffer" href="#buffer" display="none" />
+<?php     endif; ?>
                         <text fill="#fff" style="font: 4px sans-serif;">
-                          <tspan id="<?= $floor ?>_pres_<?= $room["id"] ?>" y="5" x="12" text-anchor="middle">---- hPa</tspan>
+<?php     if (!$room["werte"]): ?>
-                          <tspan id="<?= $floor ?>_tmp_<?= $room["id"] ?>" x="12" dy="1em" font-size="1.6em" text-anchor="middle">--,- °C</tspan>
+                          <!-- Kein Messwert: die Kachel traegt ihren Namen und
-                          <tspan id="<?= $floor ?>_hum_<?= $room["id"] ?>" x="12" dy="1.2em" text-anchor="middle">-- %rF</tspan>
+                               oeffnet den Raum. Ein leeres Rechteck saehe aus
+                               wie ein Fehler. -->
+                          <tspan x="12" y="11.5" font-size="1.2em" text-anchor="middle"><?= htmlspecialchars($room["mqtt"]) ?></tspan>
+<?php     endif; ?>
+<?php     foreach ($room["werte"] as $i => $wert): ?>
+                          <!-- Der Platzhalter ist nur ein Strich: bevor der
+                               erste Wert da ist, soll hier keine Einheit
+                               stehen, die vielleicht gar nicht passt. -->
+                          <tspan id="<?= $floor ?>_w<?= $i ?>_<?= $room["id"] ?>" x="12" y="<?= $y[$i] ?>"
+                                 <?= empty($wert["gross"]) ? "" : 'font-size="1.6em"' ?> text-anchor="middle">&ndash;</tspan>
+<?php     endforeach; ?>
                         </text>
                       </g>
 <?php   endforeach; ?>
@@ -198,8 +219,11 @@
 
 <script>
   // Raumtabelle aus restricted/rooms.php - homeMQTT.js aktualisiert darueber
-  // die SVG-Kacheln, ohne die Raeume noch einmal aufzufuehren.
+  // die SVG-Kacheln, ohne die Raeume noch einmal aufzufuehren. In "werte"
-  const homeRooms = <?= json_encode(roomsWithTile()) ?>;
+  // steht, welche Messwerte eine Kachel zeigt; homeTopics sind die Zweige,
+  // die der Browser dafuer beim Broker anmelden muss.
+  const homeRooms = <?= json_encode(roomsWithTile(), JSON_UNESCAPED_UNICODE) ?>;
+  const homeTopics = <?= json_encode(tileTopics(), JSON_UNESCAPED_UNICODE) ?>;
 <?php if ($_GET["floor"] != "OG" && in_array($_GET["floor"], $floors)): ?>
   document.addEventListener('readystatechange', function () {
     if (event.target.readyState === 'complete') {

restricted/rooms.php

@@ -9,9 +9,15 @@
  *
  *   floor  Etage; bestimmt zugleich den Zweig Raumtemp/<floor>/
  *   mqtt   Name des Raums im MQTT-Baum: Raumtemp/<floor>/<mqtt>/...
- *   id     Kürzel in den SVG-Element-IDs: <floor>_tmp_<id>, <floor>_<id>_heater
+ *   id     Kürzel in den SVG-Element-IDs: <floor>_w0_<id>, <floor>_<id>_heater
  *   x, y   Position der Kachel im SVG (viewBox 400x300) - fehlt bei Räumen
  *          ohne Kachel
+ *   werte  Was auf der Kachel steht: bis zu drei Messwerte, jeder mit
+ *          topic, optional pfad (Schlüssel in einer JSON-Nachricht),
+ *          einheit und stellen (Nachkommastellen). Fehlt der Eintrag, sind
+ *          es die drei Thermostatwerte - Soll, Ist, Feuchte - wie bisher.
+ *          Eine leere Liste heisst: kein Messwert, die Kachel trägt nur
+ *          ihren Namen und öffnet den Raum.
  *
  * Ein Raum ohne x/y ist trotzdem ein Raum: Geräte lassen sich ihm zuordnen
  * (siehe die Spalte actors.room und den Zuordnungsdialog in der Karte
@@ -34,19 +40,35 @@ $rooms = [
     ["floor" => "OG", "mqtt" => "Schlafzimmer", "id" => "schlafen", "x" => 235, "y" => 70],
     ["floor" => "OG", "mqtt" => "Bad",          "id" => "bad",      "x" => 260, "y" => 120],
     ["floor" => "OG", "mqtt" => "Buero",        "id" => "buero",    "x" => 265, "y" => 175],
-    ["floor" => "OG", "mqtt" => "Kueche",       "id" => "kueche",   "x" => 122, "y" => 138],
+    // Kein Thermostat, und noch kein Gerät zugeordnet - die Kachel trägt
-    ["floor" => "OG", "mqtt" => "Technik",      "id" => "technik",  "x" => 173, "y" => 67],
+    // vorerst nur ihren Namen.
+    ["floor" => "OG", "mqtt" => "Kueche",       "id" => "kueche",   "x" => 122, "y" => 138,
+     "werte" => []],
+    ["floor" => "OG", "mqtt" => "Technik",      "id" => "technik",  "x" => 173, "y" => 67,
+     "werte" => []],
     ["floor" => "EG", "mqtt" => "Wohnzimmer",   "id" => "wozi",     "x" => 185, "y" => 150],
     ["floor" => "EG", "mqtt" => "Florian",      "id" => "kizi",     "x" => 130, "y" => 90],
     ["floor" => "EG", "mqtt" => "Schlafen",     "id" => "schlafen", "x" => 235, "y" => 80],
     ["floor" => "EG", "mqtt" => "Bad",          "id" => "bad",      "x" => 253, "y" => 130],
     ["floor" => "EG", "mqtt" => "Magdalena",    "id" => "buero",    "x" => 258, "y" => 180],
-    ["floor" => "EG", "mqtt" => "Kueche",       "id" => "kueche",   "x" => 126, "y" => 146],
+    ["floor" => "EG", "mqtt" => "Kueche",       "id" => "kueche",   "x" => 126, "y" => 146,
-    ["floor" => "EG", "mqtt" => "Technik",      "id" => "technik",  "x" => 172, "y" => 78],
+     "werte" => []],
+    // Der Shelly-Zähler des EG meldet seine Werte als JSON in einer einzigen
+    // Nachricht; "pfad" greift den Schlüssel daraus heraus.
+    ["floor" => "EG", "mqtt" => "Technik",      "id" => "technik",  "x" => 172, "y" => 78,
+     "werte" => [
+        ["topic" => "Power_EG/status/em:0", "pfad" => "total_act_power",
+         "einheit" => "W", "stellen" => 0, "gross" => true],
+     ]],
     ["floor" => "UG", "mqtt" => "Buero",        "id" => "buero",    "x" => 140, "y" => 140],
     ["floor" => "UG", "mqtt" => "Bad",          "id" => "bad",      "x" => 210, "y" => 80],
     ["floor" => "UG", "mqtt" => "Kueche",       "id" => "kueche",   "x" => 190, "y" => 195],
-    ["floor" => "UG", "mqtt" => "Technik",      "id" => "technik",  "x" => 238, "y" => 93],
+    ["floor" => "UG", "mqtt" => "Technik",      "id" => "technik",  "x" => 238, "y" => 93,
+     "werte" => [
+        ["topic" => "Power_UG/status/em:0", "pfad" => "total_act_power",
+         "einheit" => "W", "stellen" => 0, "gross" => true],
+        ["topic" => "wasser/main/value", "einheit" => "m³", "stellen" => 1],
+     ]],
 ];
 
 /**
@@ -72,7 +94,51 @@ function allRooms()
 /** Nur die Räume mit Kachel, für die Aktualisierungsschleife im Browser. */
 function roomsWithTile()
 {
-    return array_values(array_filter($GLOBALS["rooms"], function ($room) {
+    return array_values(array_map("mitWerten", array_filter($GLOBALS["rooms"], function ($room) {
         return isset($room["x"]);
-    }));
+    })));
+}
+
+/**
+ * Die Messwerte einer Kachel, fertig ausgeschrieben.
+ *
+ * Ohne eigene Angabe sind es die drei Thermostatwerte, die dort schon immer
+ * standen: Solltemperatur klein darüber, Isttemperatur gross, Feuchte klein
+ * darunter. Nur diese Räume bekommen auch die Symbole für "heizt" und
+ * "Pufferbetrieb" - anderswo gibt es nichts zu heizen.
+ */
+function mitWerten($room)
+{
+    if (isset($room["werte"])) {
+        $room["heizung"] = false;
+        $room["werte"] = array_slice($room["werte"], 0, 3);
+        return $room;
+    }
+    $zweig = "Raumtemp/" . $room["floor"] . "/" . $room["mqtt"] . "/";
+    $room["heizung"] = true;
+    $room["werte"] = [
+        ["topic" => $zweig . "Set Temp[degC]", "einheit" => "°C", "stellen" => 0],
+        ["topic" => $zweig . "Temp[degC]",     "einheit" => "°C", "gross" => true],
+        ["topic" => $zweig . "rHum[%]",        "einheit" => "%rF"],
+    ];
+    return $room;
+}
+
+/**
+ * Was der Browser beim Broker anmelden muss, damit die Kacheln laufen.
+ *
+ * Nicht die einzelnen Topics, sondern ihre Zweige: aus vierzig Anmeldungen
+ * für Raumtemp werden so vier insgesamt. Der Zweig bringt ausserdem mit,
+ * was die Kachel nebenbei braucht - "Heating" und "mode" stehen in keiner
+ * Werteliste, das Heizsymbol lebt aber davon.
+ */
+function tileTopics()
+{
+    $zweige = [];
+    foreach (roomsWithTile() as $room) {
+        foreach ($room["werte"] as $wert) {
+            $zweige[explode("/", $wert["topic"])[0] . "/#"] = true;
+        }
+    }
+    return array_keys($zweige);
 }