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>

js/solar/homeMQTT.js

@@ -229,6 +229,7 @@ function switchFloor(floor){
     // Schieberegler: waehrend des Ziehens nur die Anzeige, geschickt wird
     // erst beim Loslassen. Sonst bekaeme eine Jalousie bei jedem Pixel ein
     // neues Ziel und kaeme aus dem Anfahren nicht mehr heraus.
+    koerper.querySelectorAll(".raum-jalousie").forEach(lamellenZeichnen);
     koerper.querySelectorAll(".raum-regler").forEach(regler => {
       const schieber = regler.querySelector("input[type=range]");
       reglerAnzeigen(regler);
@@ -283,8 +284,8 @@ function switchFloor(floor){
    * Anzeige, gefuellte Bahn und Lamellenbild eines Reglers nachziehen.
    *
    * Was 0 % und 100 % bedeuten, steht bei den senkrechten Reglern als Wort
-   * an ihren Enden ("oben"/"unten", "auf"/"zu"); die Anzeige braucht deshalb
-   * nur noch die Zahl, und die ist beim Ziehen das Interessante.
+   * an ihren Enden ("oben"/"unten", "auf"/"zu"); eine Zahl steht dort nicht
+   * mehr - das Bild daneben zeigt beim Ziehen mehr als sie.
    */
   function reglerAnzeigen(regler) {
     const schieber = regler.querySelector("input[type=range]");
@@ -302,28 +303,53 @@ function switchFloor(floor){
     schieber.style.setProperty("--background-size",
                                ((wert - min) * 100 / (max - min)) + "%");
 
-    lamellenZeichnen(regler.closest(".raum-neigung-block"), wert, min, max);
+    lamellenZeichnen(regler.closest(".raum-jalousie"));
+  }
+
+  /** Der Stand eines der beiden Regler einer Jalousie, als Anteil 0..1. */
+  function reglerAnteil(jalousie, rolle, ersatz) {
+    const schieber = jalousie.querySelector("[data-rolle=" + rolle + "] input[type=range]");
+    if (!schieber) return ersatz;
+    const min = Number(schieber.min);
+    return (Number(schieber.value) - min) / (Number(schieber.max) - min);
   }
 
   /**
-   * Die Lamellen zur Neigung zeichnen.
+   * Das Fenster zeichnen, wie die Jalousie davor gerade steht.
    *
-   * Gezeichnet wird die Hoehe, die eine gekippte Lamelle von vorn zeigt:
-   * w * sin(Winkel). Bei 0 % steht sie waagerecht und man sieht nur ihre
-   * Kante, bei 100 % steht sie quer und deckt den Abstand zur naechsten
-   * vollstaendig ab - genau das, was das Licht abhaelt. Der Abstand von
-   * Mitte zu Mitte ist 10, die Lamelle 11 tief: ab etwa 65 % schliesst
+   * Zwei Zahlen in einem Bild. 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). Bei "auf" sieht man nur ihre Kante und viel
+   * Luft dazwischen, bei "zu" deckt sie den Abstand zur naechsten
+   * vollstaendig ab - genau das, was das Licht abhaelt. Von Mitte zu Mitte
+   * sind es 10 Einheiten, die Lamelle ist 11 tief; ab etwa 65 % schliesst
    * das Bild, so wie es die Jalousie auch tut.
+   *
+   * Ein Rollladen ohne Neigung bekommt volle Lamellenhoehe - er ist ja ein
+   * geschlossener Panzer.
    */
-  function lamellenZeichnen(block, wert, min, max) {
-    if (!block) return;
-    const anteil = (wert - min) / (max - min);
-    const hoehe = Math.max(1.6, 11 * Math.sin(anteil * Math.PI / 2));
-    block.querySelectorAll(".raum-lamelle").forEach(lamelle => {
+  function lamellenZeichnen(jalousie) {
+    if (!jalousie) return;
+    const bild = jalousie.querySelector(".raum-lamellen");
+    if (!bild) return;
+
+    const hoch = bild.viewBox.baseVal.height;
+    const abdeckung = hoch * reglerAnteil(jalousie, "position", 1);
+    const kippung = reglerAnteil(jalousie, "neigung", 1);
+    const dicke = Math.max(1.6, 11 * Math.sin(kippung * Math.PI / 2));
+
+    bild.querySelector(".raum-abdeckung").setAttribute("height", abdeckung);
+    bild.querySelectorAll(".raum-lamelle").forEach(lamelle => {
       const mitte = Number(lamelle.dataset.mitte);
-      lamelle.setAttribute("height", hoehe);
-      lamelle.setAttribute("y", mitte - hoehe / 2);
+      lamelle.setAttribute("height", dicke);
+      lamelle.setAttribute("y", mitte - dicke / 2);
     });
+    // Die Endschiene sitzt auf der Unterkante und bleibt im Bild, auch wenn
+    // die Jalousie ganz oben steht.
+    const schiene = bild.querySelector(".raum-endschiene");
+    const dick = schiene.height.baseVal.value;
+    schiene.setAttribute("y", Math.max(0, Math.min(hoch - dick, abdeckung - dick)));
   }
 
   /**