From 896f0fac035435a06aae867f5ec6b7684e1ac1a1 Mon Sep 17 00:00:00 2001 From: "m0@nas" Date: Tue, 15 Sep 2026 20:51:34 +0200 Subject: [PATCH] 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 --- css/solar.css | 1 + js/solar/energiefluss.js | 42 +++++++++++++++++++++++++++++++-- js/solar/energieflussKatalog.js | 10 ++++---- 3 files changed, 47 insertions(+), 6 deletions(-) diff --git a/css/solar.css b/css/solar.css index b8215a9..95f9a25 100644 --- a/css/solar.css +++ b/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; } diff --git a/js/solar/energiefluss.js b/js/solar/energiefluss.js index 4d777de..a52553c 100644 --- a/js/solar/energiefluss.js +++ b/js/solar/energiefluss.js @@ -98,6 +98,35 @@ `, }; + /* 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: ` + + + + + `, + // Baum im Gras - der normale Garten + garten: ` + + + `, + // Hochbeet: Holzkasten auf Füßen, oben drei Pflanzen + hochbeet: ` + + + + + + + + + + `, + }; + function etage(von, bis) { return ` @@ -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); - glyph.textContent = z.zeichen; + // Eigenes Symbol (ZONENBILDER) oder ein Zeichen aus Bootstrap Icons. + // updateWateringIndicator() färbt es über color und schreibt den + // Tooltip in das . + 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; diff --git a/js/solar/energieflussKatalog.js b/js/solar/energieflussKatalog.js index 0a8aa57..9746a2e 100644 --- a/js/solar/energieflussKatalog.js +++ b/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" }, - { name: "Vorn", zeichen: "\uF3CE", status: "wateringFrontStatus", symbol: "wateringFrontIcon" }, - { name: "Beete", zeichen: "\uF3CD", status: "wateringBedsStatus", symbol: "wateringBedsIcon" }, + // bild: Symbol aus ZONENBILDER (energiefluss.js); zeichen: Zeichen aus Bootstrap Icons + { name: "Tröge", bild: "kuebel", status: "wateringTroughStatus", symbol: "wateringTroughIcon" }, + { name: "Vorn", bild: "garten", status: "wateringFrontStatus", symbol: "wateringFrontIcon" }, + { name: "Beete", bild: "hochbeet", status: "wateringBedsStatus", symbol: "wateringBedsIcon" }, ], lesen() { return { wert: "" };