Raum-Modal: Fensterbild zeigt Hoehe und Neigung, Regler nach rechts

Die Regler standen neben den Fahrknoepfen - beim Antippen von "Auf" fand
der Daumen leicht den Schieber daneben. Jetzt stehen sie rechts aussen,
zwischen ihnen und den Knoepfen liegt das Fensterbild.

Das Bild zeigt jetzt beides. Die Hoehe schneidet ab: gezeichnet wird nur
der Teil des Fensters, den die Jalousie bedeckt, mit der Endschiene an
seiner Unterkante; darunter sieht man hinaus. Die Neigung bestimmt wie
bisher, wie dick eine Lamelle von vorn erscheint. Ein Rollladen ohne
Neigung bekommt volle Lamellenhoehe - er ist ja ein geschlossener Panzer.

Die Prozentzahl unter den Reglern ist weg; die Bahn ist dafuer von 5 auf
6,5 rem gewachsen. Was der Regler bewirkt, zeigt das Bild ohnehin besser
als eine Zahl.

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

restricted/roomControls.php

@@ -283,38 +283,53 @@ function reglerFeld($min, $max, $wert, $einheit, $beschriftung = "")
  * bewegt sich in seinen eigenen Koordinaten waagerecht, wird von jedem
  * Browser unterstuetzt und traegt dieselbe Gestaltung wie die liegenden.
  */
-function senkrechterRegler($cmd, $param, $wert, $titel, $oben, $unten)
+function senkrechterRegler($cmd, $param, $wert, $titel, $oben, $unten, $rolle)
 {
     $min = reglerMin($param);
     $max = reglerMax($param);
     $wert = reglerWert($wert, $min, $max);
+    // Keine Prozentzahl darunter: was der Regler bewirkt, zeigt das
+    // Lamellenbild daneben, und die gesparte Zeile macht die Bahn laenger.
     return "<div class='raum-regler raum-spalte' data-cmd='" . intval($cmd["id"]) . "'"
-         . " data-param='" . intval($param["id"]) . "'>"
+         . " data-param='" . intval($param["id"]) . "' data-rolle='" . $rolle . "'>"
          . "<span class='raum-name'>" . htmlspecialchars($titel) . "</span>"
          . "<span class='raum-ende'>" . htmlspecialchars($oben) . "</span>"
          . "<div class='raum-senkrecht'>" . reglerFeld($min, $max, $wert, "%", $titel) . "</div>"
          . "<span class='raum-ende'>" . htmlspecialchars($unten) . "</span>"
-         . "<span class='raum-regler-wert small fw-semibold'>" . $wert . "%</span>"
          . "</div>";
 }
 
 /**
- * Die sechs Lamellen neben dem Neigungsregler.
+ * Das Fenster, wie die Jalousie davor gerade steht.
  *
- * Bei 30 % oder 70 % sagt die Zahl nicht, ob man noch hinaussieht. Die
- * Streifen zeigen es: schmal mit Luft dazwischen heisst offen, geschlossen
- * liegen sie aneinander. Gezeichnet wird die Hoehe, die eine gekippte
- * Lamelle von vorn zeigt - genau das, was das Licht abhaelt. Die Hoehe setzt
- * lamellenZeichnen() in js/solar/homeMQTT.js.
+ * Zwei Zahlen in einem Bild: wie weit sie heruntergefahren ist und wie die
+ * Lamellen stehen. Weder "60 %" noch "30 %" sagt, ob man noch hinaussieht -
+ * das Bild sagt es.
+ *
+ * Die Hoehe schneidet ab: gezeichnet wird nur der Teil des Fensters, den die
+ * Jalousie bedeckt, mit der Endschiene an seiner Unterkante. Die Neigung
+ * bestimmt, wie dick eine Lamelle von vorn erscheint - w * sin(Winkel),
+ * genau das, was das Licht abhaelt. Beides setzt lamellenZeichnen() in
+ * js/solar/homeMQTT.js.
+ *
+ * Die Kennung des Beschnitts traegt die Geraetenummer: in einem Raum haengen
+ * mehrere dieser Bilder, und url(#...) findet sonst immer dasselbe.
  */
-function lamellenBild()
+function lamellenBild($actorId)
 {
-    $html = "<svg class='raum-lamellen' viewBox='0 0 100 60' preserveAspectRatio='none' aria-hidden='true'>";
+    $schnitt = "lamellen" . intval($actorId);
+    $html = "<svg class='raum-lamellen' viewBox='0 0 100 60' preserveAspectRatio='none' aria-hidden='true'>"
+          . "<defs><clipPath id='" . $schnitt . "'>"
+          . "<rect class='raum-abdeckung' x='0' y='0' width='100' height='60'></rect>"
+          . "</clipPath></defs>"
+          . "<g clip-path='url(#" . $schnitt . ")'>";
     foreach ([5, 15, 25, 35, 45, 55] as $mitte) {
         $html .= "<rect class='raum-lamelle' x='0' width='100' data-mitte='" . $mitte . "'"
                . " y='" . ($mitte - 1) . "' height='2'></rect>";
     }
-    return $html . "</svg>";
+    return $html . "</g>"
+         . "<rect class='raum-endschiene' x='0' y='57' width='100' height='3'></rect>"
+         . "</svg>";
 }
 
 /** Kippschalter mit dem Stand, den das Geraet zuletzt gemeldet hat. */
@@ -434,18 +449,18 @@ function zeichneBeschattung($d)
         }
         $html .= "</div>";
     }
+    // Erst das Bild, dann die Regler: neben den Fahrknoepfen faende der
+    // Daumen sonst beim Antippen gleich einen Schieber.
+    if ($position || $neigung) {
+        $html .= lamellenBild($d["id"]);
+    }
     if ($position) {
         $html .= senkrechterRegler($position, $position["params"][0], $standPos,
-                                   "Position", "oben", "unten");
+                                   "Position", "oben", "unten", "position");
     }
     if ($neigung) {
-        // Regler und Lamellenbild bilden ein Paar: das Bild sagt, was der
-        // Regler daneben bedeutet, und laeuft beim Ziehen mit.
-        $html .= "<div class='raum-neigung-block'>"
-               . senkrechterRegler($neigung, $neigung["params"][0], $standNeigung,
-                                   "Neigung", "auf", "zu")
-               . lamellenBild()
-               . "</div>";
+        $html .= senkrechterRegler($neigung, $neigung["params"][0], $standNeigung,
+                                   "Neigung", "auf", "zu", "neigung");
     }
     $html .= mehrMenue($rest);
     return $html . "</div>" . karteZu();