Etagenschalter neu gestalten, Aussengelaende ruecken lassen

Das Rendering des Grundstuecks fuellt seinen Rahmen aus, die drei
Geschossbilder haben dagegen breiten schwarzen Rand - deshalb lagen die
Etagenschalter nur beim Aussengelaende auf dem Bild. Der Rand gehoert ins
Bild und nicht in home.php: dort einzurechnen haette auch OG, EG und UG
verschoben, und deren Kacheln sind auf die heutige Lage eingemessen. AG.png
bekommt links 114 durchsichtige Punkte, die sieben Kacheln sind mit
derselben Abbildung umgerechnet.

Die Schalter selbst waren ein duenner Ring in einem Amber (#aa7713), das in
css/solar.css nirgends vorkommt - und alle vier sahen immer gleich aus, die
aktive Etage war an ihnen nicht zu erkennen. Jetzt tragen sie dieselbe
Scheibe wie die Kacheln im Grundriss, die aktive bekommt die Akzentfarbe der
Schieberegler (#00788F), und switchFloor() zieht den Zustand mit. Dort
classList und nicht die Helfer addClass/removeClass weiter oben: deren
"el.className +=" wirkt auf SVG-Elementen nicht, className ist dort
schreibgeschuetzt.

Ausserdem sind sie kleiner. Mit halber Groesse beherrschten sie die linke
Seite, und das Bild musste umso weiter einruecken, um sie freizuhalten - bei
0,38 statt 0,50 bleibt mehr Plan uebrig. Die Groesse steht als eine Zahl in
home.php, Abstand und Bildrand folgen daraus.

Die Beschriftung sitzt jetzt ueber text-anchor und dominant-baseline im
Kreismittelpunkt. Vorher stand je Etage ein von Hand gesuchter Versatz im
Markup (62, 63, 64), und jede neue Etage haette einen neuen gebraucht.

Weggefallen: die Definition #floorBtn, die nur einmal benutzt wurde, und die
Animationen showOG/showEG/showUG, die ein bereits sichtbares Element von 0
auf 1 blendeten.

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

css/solar.css

@@ -967,3 +967,37 @@ input[type='range']::-webkit-slider-runnable-track {
    die Zustandszeile darunter soll trotzdem lesbar bleiben. */
 .log-liste .log-wahl.active .text-secondary,
 .log-liste .log-wahl.active .text-warning { color: rgba(255, 255, 255, .75) !important; }
+
+/* Etagenschalter im Grundriss der Home-Ansicht.
+
+   Vorher waren sie ein duenner Ring in einem Amber (#aa7713), das sonst
+   nirgends im Dashboard vorkommt - und alle vier sahen immer gleich aus,
+   die aktive Etage war an ihnen nicht zu erkennen. Jetzt tragen sie
+   dieselbe Scheibe wie die Kacheln im Grundriss, und die aktive Etage
+   bekommt die Akzentfarbe der Schieberegler. */
+.floorBtn { cursor: pointer; }
+
+.floorBtn circle {
+  fill: #0006;
+  stroke: #9aa0a6;
+  stroke-width: 4;
+  opacity: .55;
+  transition: stroke .25s ease, opacity .25s ease;
+}
+
+.floorBtn text {
+  font: 600 34px Poppins, system-ui, sans-serif;
+  fill: #9aa0a6;
+  opacity: .8;
+  transition: fill .25s ease, opacity .25s ease;
+  /* Der Kreis faengt den Klick, nicht die Beschriftung - sonst wandert der
+     Textcursor ueber die Schrift, sobald man sie streift. */
+  user-select: none;
+  pointer-events: none;
+}
+
+.floorBtn:hover circle { opacity: .8; }
+.floorBtn:hover text   { opacity: 1; }
+
+.floorBtn.active circle { stroke: #00788F; opacity: 1; }
+.floorBtn.active text   { fill: #e8ede9; opacity: 1; }

js/solar/homeMQTT.js

@@ -232,6 +232,15 @@ function switchFloor(floor){
   };
   inAnim.play();
   outAnim.play();
+
+  // Welche Etage gerade zu sehen ist, stand den Schaltern bisher nicht an -
+  // alle vier sahen immer gleich aus. classList und nicht die Helfer
+  // addClass/removeClass weiter oben: deren "el.className +=" wirkt auf
+  // SVG-Elementen nicht, dort ist className schreibgeschuetzt.
+  document.querySelectorAll(".floorBtn").forEach(function (schalter) {
+    schalter.classList.toggle("active", schalter.id === floor);
+  });
+
   currentFloor = floor;
 }
 

restricted/home.php

@@ -38,10 +38,6 @@
                 <svg viewBox="0 0 400 300" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
 
                   <defs>
-                    <g id="floorBtn">
-                      <path fill="transparent" stroke-width="4"
-                        d="M 99.86386438745993 22.00011880076356 A 50 50 0 1 0 100 22" />
-                    </g>
                     <g id="heater" filter="url(#shadow)" transform="translate(1.5,1),scale(0.2,0.2)" fill="#993311" stroke="#FF2211">
                       <path clip-path="M-22 2.24h42V22h-42z"
                         d="M16.543 8.028c-.023 1.503-.523 3.538-2.867 4.327.734-1.746.846-3.417.326-4.979-.695-2.097-3.014-3.735-4.557-4.627-.527-.306-1.203.074-1.193.683.02 1.112-.318 2.737-1.959 4.378C4.107 9.994 3 12.251 3 14.517 3 17.362 5 21 9 21c-4.041-4.041-1-7.483-1-7.483C8.846 19.431 12.988 21 15 21c1.711 0 5-1.25 5-6.448 0-3.133-1.332-5.511-2.385-6.899-.347-.458-1.064-.198-1.072.375" />
@@ -80,27 +76,38 @@
 <?php endforeach; ?>
 <?php
                     /*
-                     * Der Kreis ist 50 hoch und sitzt 11 unter der Oberkante
+                     * Groesse der Etagenschalter. Der Kreis ist im eigenen
-                     * seiner Gruppe. Bei drei Etagen bleibt es bei den
+                     * Koordinatensystem 88 Einheiten breit und reicht von 28
-                     * gewohnten 100 Einheiten Abstand; ab der vierten ruecken
+                     * bis 116 unter die Oberkante seiner Gruppe; alles andere
-                     * sie zusammen, sonst faellt die unterste aus der 300
+                     * folgt daraus. Sie waren einmal doppelt so gross und
-                     * hohen viewBox heraus.
+                     * beherrschten damit die linke Seite - und das Bild des
+                     * Aussengelaendes musste umso weiter einruecken, um sie
+                     * freizuhalten.
+                     */
+                    $mass = 0.38;
+                    $kreisUnten = 116 * $mass;
+
+                    /*
+                     * Bei drei Etagen bleibt es bei den gewohnten 100
+                     * Einheiten Abstand; ab der vierten ruecken sie zusammen,
+                     * sonst faellt die unterste aus der 300 hohen viewBox.
                      */
                     $abstand = count($etagen) > 1
-                             ? min(100, (295 - 61) / (count($etagen) - 1))
+                             ? min(100, (295 - $kreisUnten) / (count($etagen) - 1))
                              : 0;
-                    // Von Hand mittig gerueckt, je nach Breite der Buchstaben.
-                    $textX = ["OG" => 62, "EG" => 64, "UG" => 63, "AG" => 62];
 ?>
 <?php foreach ($etagen as $i => $etage): ?>
-                    <g id="<?= $etage ?>" onclick="switchFloor('<?= $etage ?>')" cursor="pointer"
+                    <g id="<?= $etage ?>" class="floorBtn<?= $_GET["floor"] == $etage ? " active" : "" ?>"
-                       transform="translate(0,<?= round($i * $abstand, 1) ?>), scale(0.50,0.50)">
+                       onclick="switchFloor('<?= $etage ?>')"
-                      <animate id="show<?= $etage ?>" begin=click attributetype="CSS" attributeName="opacity"
+                       transform="translate(0,<?= round($i * $abstand, 1) ?>), scale(<?= $mass ?>)">
-                        from=0 to=1 dur="0.1s" repeatCount="1" calcMode="spline" keyTimes="0;1"
+                      <!-- Die Beschriftung sitzt ueber text-anchor und
-                        keySplines=".1,0,.27,1" fill="freeze"></animate>
+                           dominant-baseline im Kreismittelpunkt. Vorher stand
-                      <use href="#floorBtn" stroke="#aa7713" />
+                           je Etage ein von Hand gesuchter Versatz im Markup
-                      <text fill="#aa7713" style="font: 3em sans-serif;"
+                           (62, 63, 64), und eine neue Etage brauchte einen
-                            transform="translate(<?= $textX[$etage] ?? 62 ?>,90)"><?= $etage ?></text>
+                           neuen. Aussehen und Zustand stehen in css/solar.css. -->
+                      <circle cx="50" cy="72" r="44" />
+                      <text x="50" y="72" text-anchor="middle"
+                            dominant-baseline="central"><?= $etage ?></text>
                     </g>
 <?php endforeach; ?>
 <?php foreach (floorsWithPlan() as $floor): ?>

restricted/rooms.php

@@ -107,7 +107,7 @@ $rooms = [
     // Die Namen muessen genau so lauten wie unter invertersN/name. Passt
     // einer nicht, schreibt homeMQTT.js die vorhandenen Namen in die
     // Browser-Konsole - dann steht dort, was hier hingehoert.
-    ["floor" => "AG", "mqtt" => "Carport EG",   "id" => "carport_eg", "x" => 156, "y" => 214,
+    ["floor" => "AG", "mqtt" => "Carport EG",   "id" => "carport_eg", "x" => 179, "y" => 207,
      "werte" => [
         ["wechselrichter" => ["Carport 1-6", "Carport 7-12", "Carport 13-16",
                               "Carport 17-19"],
@@ -116,7 +116,7 @@ $rooms = [
     // Am Carport OG haengt der go-e Charger. Die Ladeleistung ist das
     // Einzige, was sich hier messen laesst - und sie beantwortet die Frage,
     // die man sich vor dem Carport stellt: laedt gerade jemand?
-    ["floor" => "AG", "mqtt" => "Carport OG",   "id" => "carport_og", "x" => 38, "y" => 155,
+    ["floor" => "AG", "mqtt" => "Carport OG",   "id" => "carport_og", "x" => 72, "y" => 154,
      "werte" => [
         ["topic" => "solarManager/evPowerOG", "einheit" => "W", "stellen" => 0,
          "icon" => "ev-station"],
@@ -124,25 +124,34 @@ $rooms = [
     // Veranda und Terrasse gibt es zweimal, je Wohnpartei eine. In der
     // Draufsicht laege das obere Paar genau auf dem unteren - deshalb die
     // Schraegsicht, siehe restricted/aussenplan.php.
-    ["floor" => "AG", "mqtt" => "Veranda EG",   "id" => "veranda_eg", "x" => 156, "y" => 132, "werte" => []],
+    //
-    ["floor" => "AG", "mqtt" => "Veranda OG",   "id" => "veranda_og", "x" => 150, "y" => 92,
+    // Die beiden Veranden haben bewusst kein x/y: ihre Kacheln lagen auf der
-     "werte" => [
+    // Westfassade des Hauses so dicht beieinander, dass sie mehr gestiftet
-        ["wechselrichter" => ["Veranda OG2-4", "Veranda UG/OG1"],
+    // als erklaert haben. Als Raeume bleiben sie bestehen - Geraete sind
-         "feld" => "p_AC", "einheit" => "W", "stellen" => 0, "icon" => "sun"],
+    // ihnen zugeordnet und Automatiken laufen darauf, das haengt allein
-     ]],
+    // daran, dass sie hier stehen.
-    ["floor" => "AG", "mqtt" => "Terrasse EG",  "id" => "terrasse_eg", "x" => 212, "y" => 160, "werte" => []],
+    //
-    ["floor" => "AG", "mqtt" => "Terrasse OG",  "id" => "terrasse_og", "x" => 205, "y" => 122, "werte" => []],
+    // Kommen die Kacheln zurueck, sind es zwei Zahlen je Zeile (gemessen mit
-    ["floor" => "AG", "mqtt" => "Pergola",      "id" => "pergola",  "x" => 339, "y" => 108, "werte" => []],
+    // tools/kachelpositionen.php, zuletzt 156/132 und 150/92) und fuer die
+    // Veranda OG diese Wechselrichter:
+    //
+    //     ["wechselrichter" => ["Veranda OG2-4", "Veranda UG/OG1"],
+    //      "feld" => "p_AC", "einheit" => "W", "stellen" => 0, "icon" => "sun"]
+    ["floor" => "AG", "mqtt" => "Veranda EG",   "id" => "veranda_eg", "werte" => []],
+    ["floor" => "AG", "mqtt" => "Veranda OG",   "id" => "veranda_og", "werte" => []],
+    ["floor" => "AG", "mqtt" => "Terrasse EG",  "id" => "terrasse_eg", "x" => 229, "y" => 158, "werte" => []],
+    ["floor" => "AG", "mqtt" => "Terrasse OG",  "id" => "terrasse_og", "x" => 223, "y" => 124, "werte" => []],
+    ["floor" => "AG", "mqtt" => "Pergola",      "id" => "pergola",  "x" => 344, "y" => 111, "werte" => []],
     // In der Garage steht die Wattpilot der EG-Partei, siehe fahrzeuge() in
     // restricted/config.php. Ohne Kuerzel im Topic ist das die EG-Wallbox.
-    ["floor" => "AG", "mqtt" => "Garage",       "id" => "garage",   "x" => 103, "y" => 134,
+    ["floor" => "AG", "mqtt" => "Garage",       "id" => "garage",   "x" => 131, "y" => 135,
      "werte" => [
         ["topic" => "solarManager/evPower", "einheit" => "W", "stellen" => 0,
          "icon" => "ev-station"],
      ]],
     // Der Garten ist kein Bauteil wie die anderen, aber ein Ort: hier haengen
     // der Regensensor und die beiden Ventilsteuerungen.
-    ["floor" => "AG", "mqtt" => "Garten",       "id" => "garten",   "x" => 288, "y" => 180,
+    ["floor" => "AG", "mqtt" => "Garten",       "id" => "garten",   "x" => 298, "y" => 176,
      "werte" => [
         // gatherRainData.py im SolarManager legt auf Wetter/Regen ein JSON
         // mit tage1 bis tage7 und dem Stand des Sammlers. "tage1" ist der