Uebersicht: eigene Symbole fuer die Bewaesserungszonen

Troege als Pflanzkuebel (statt Einkaufskorb), Vorn als Baum im Gras,
Beete als Hochbeet - gezeichnet im Stil der uebrigen Symbole (ZONENBILDER
in energiefluss.js). Eine Zone kann weiter ein Bootstrap-Icon nutzen
(zeichen statt bild).

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

css/solar.css

@@ -3529,6 +3529,7 @@ svg.enf.enf-hoch { max-height: none; }
 
 /* --- Bewässerung --------------------------------------------------------- */
 .enf .enf-zone-glyph { font-family: bootstrap-icons; font-size: 17px; fill: currentColor; color: #6c757d; text-anchor: middle; dominant-baseline: central; transition: color .4s; }
+.enf .enf-zone-bild { color: #6c757d; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: color .4s; }
 .enf .enf-zone-name { font-size: 15px; fill: var(--ton-schrift-2, #9aa6ad); dominant-baseline: central; }
 .enf .enf-zone-status { font-size: 15px; font-weight: 600; fill: var(--ton-schrift, #e8ede9); text-anchor: end; dominant-baseline: central; font-variant-numeric: tabular-nums; }
 

js/solar/energiefluss.js

@@ -98,6 +98,35 @@
       <path d="M-3.6 3.4c1.2 1 2.4 1 3.6 0s2.4-1 3.6 0" class="enf-s-welle"/>`,
   };
 
+  /* Kleine Symbole für Zeilen in einem Kreis (Bewässerungszonen): 24er
+     Raster, Ecke oben links, Linien in currentColor. */
+  const ZONENBILDER = {
+    // Pflanzkübel mit Pflanze - ein Trog auf der Terrasse
+    kuebel: `
+      <path d="M12 12V7.2"/>
+      <path d="M12 9.6c-2.6.1-4.3-1.5-4.4-4.2 2.6-.1 4.3 1.5 4.4 4.2z"/>
+      <path d="M12 8.4c.1-2.7 1.8-4.3 4.4-4.2-.1 2.7-1.8 4.3-4.4 4.2z"/>
+      <rect x="4.6" y="12" width="14.8" height="2.8" rx=".8"/>
+      <path d="M6.2 14.8 7.6 21h8.8l1.4-6.2"/>`,
+    // Baum im Gras - der normale Garten
+    garten: `
+      <path d="M12 3.6a4.3 4.3 0 0 0-4.2 5.3 3.4 3.4 0 0 0 1.3 6.5h5.8a3.4 3.4 0 0 0 1.3-6.5A4.3 4.3 0 0 0 12 3.6z"/>
+      <path d="M12 15.4V20.6M12 18l2-1.8"/>
+      <path d="M3.5 20.6h17M6 20.6l-.7-1.9M7.6 20.6l.3-2.1M17.2 20.6l.6-2M18.6 20.6l.9-1.6"/>`,
+    // Hochbeet: Holzkasten auf Füßen, oben drei Pflanzen
+    hochbeet: `
+      <path d="M8 11V8.6"/>
+      <path d="M8 9.4c-1.5 0-2.4-.9-2.4-2.4 1.5 0 2.4.9 2.4 2.4z"/>
+      <path d="M12 11V6.4"/>
+      <path d="M12 8.6c-1.6 0-2.6-1-2.6-2.6 1.6 0 2.6 1 2.6 2.6z"/>
+      <path d="M12 7.6c0-1.6 1-2.6 2.6-2.6 0 1.6-1 2.6-2.6 2.6z"/>
+      <path d="M16 11V8.6"/>
+      <path d="M16 9.4c0-1.5.9-2.4 2.4-2.4 0 1.5-.9 2.4-2.4 2.4z"/>
+      <rect x="3.5" y="11" width="17" height="8.4" rx=".8"/>
+      <path d="M3.5 13.8h17M3.5 16.6h17" stroke-width="1.1"/>
+      <path d="M5.4 19.4v1.9M18.6 19.4v1.9"/>`,
+  };
+
   function etage(von, bis) {
     return `
       <rect x="-8" y="${von}" width="16" height="${bis - von}" class="enf-s-ebene"/>
@@ -347,8 +376,17 @@
         symbol.setAttribute("transform", `translate(0 ${-r * 0.5}) scale(1.4)`);
         k.zonen.forEach((z, i) => {
           const zy = -r * 0.1 + i * 25;
-          const glyph = el("text", { class: "enf-zone-glyph", x: -r * 0.52, y: zy }, koerper);
+          // Eigenes Symbol (ZONENBILDER) oder ein Zeichen aus Bootstrap Icons.
-          glyph.textContent = z.zeichen;
+          // updateWateringIndicator() färbt es über color und schreibt den
+          // Tooltip in das <title>.
+          let glyph;
+          if (z.bild && ZONENBILDER[z.bild]) {
+            glyph = el("g", { class: "enf-zone-bild", transform: `translate(${(-r * 0.52 - 9.6).toFixed(1)} ${(zy - 9.6).toFixed(1)}) scale(.8)` }, koerper);
+            glyph.innerHTML = ZONENBILDER[z.bild];
+          } else {
+            glyph = el("text", { class: "enf-zone-glyph", x: -r * 0.52, y: zy }, koerper);
+            glyph.textContent = z.zeichen || "";
+          }
           el("title", null, glyph).textContent = z.name;
           const nm = el("text", { class: "enf-zone-name", x: -r * 0.36, y: zy }, koerper);
           nm.textContent = z.name;

js/solar/energieflussKatalog.js

@@ -25,7 +25,8 @@
      skala     Leistung in W, bei der der Ring voll ist
      klick     {ansicht: "anlage"} oder {modal: "heater"} - Ziel beim Antippen
      optionen  Vorgabe für die Optionen, die in den Einstellungen änderbar sind
-     zonen     nur Bewässerung: die Anzeigen, die solarMQTT.js beschreibt
+     zonen     nur Bewässerung: die Anzeigen, die solarMQTT.js beschreibt;
+               je Zone bild (ZONENBILDER in energiefluss.js) oder zeichen
      lesen(m, opt)  liefert den Zustand aus den MQTT-Werten:
        leistung  W, bestimmt den Hauptwert und den Ring
        wert      Text statt der Leistung (optional)
@@ -296,9 +297,10 @@ const ENERGIEFLUSS_KATALOG = (function () {
       // Ids wie in wateringZones (solarMQTT.js) - dort werden Farbe, Text und
       // Tooltip gesetzt, hier nur die Stellen dafür angelegt.
       zonen: [
-        { name: "Tröge", zeichen: "\uF180", status: "wateringTroughStatus", symbol: "wateringTroughIcon" },
+        // bild: Symbol aus ZONENBILDER (energiefluss.js); zeichen: Zeichen aus Bootstrap Icons
-        { name: "Vorn", zeichen: "\uF3CE", status: "wateringFrontStatus", symbol: "wateringFrontIcon" },
+        { name: "Tröge", bild: "kuebel", status: "wateringTroughStatus", symbol: "wateringTroughIcon" },
-        { name: "Beete", zeichen: "\uF3CD", status: "wateringBedsStatus", symbol: "wateringBedsIcon" },
+        { name: "Vorn", bild: "garten", status: "wateringFrontStatus", symbol: "wateringFrontIcon" },
+        { name: "Beete", bild: "hochbeet", status: "wateringBedsStatus", symbol: "wateringBedsIcon" },
       ],
       lesen() {
         return { wert: "" };