admin/Smart-Dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Uebersicht: eigene Symbole fuer die Bewaesserungszonen

Browse Source 
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>
This commit is contained in:
admin
2026-09-15 20:51:34 +02:00
co-authored by Claude Opus 5
parent 5f42309410
commit 896f0fac03
3 changed files with 47 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/solar/energiefluss.js
+40 -2
View File
@@ -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);
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 <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
+6 -4
View File
@@ -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: "" };