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: "" };