From fe8630eb4fefa7dcc3a5e330f7260fe513821574 Mon Sep 17 00:00:00 2001 From: "m0@nas" Date: Wed, 16 Sep 2026 07:37:42 +0200 Subject: [PATCH] Ueberall dasselbe Beschattungs-Symbol (bi-beschattung) Raum-Modal, Zeitleiste und Automatik-Editor zeigten drei verschiedene Zeichen; bi-blinds gibt es in der Icon-Schrift gar nicht. Das neue Symbol liegt als CSS-Maske in solar.css und verhaelt sich wie ein Icon aus der Schrift. Co-Authored-By: Claude Opus 5 --- README.md | 1 + css/solar.css | 20 ++++++++++++++++++++ js/solar/autoActionFuncs.js | 10 ++++++---- restricted/roomControls.php | 6 ++---- restricted/zeitleiste.php | 2 +- 5 files changed, 30 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index b758850..27f94c8 100644 --- a/README.md +++ b/README.md @@ -888,6 +888,7 @@ ausgeliefert. | Kreis der Energiefluss-Übersicht aus, umbenennen, verschieben; PV-Flächen | Einstellungen → Übersicht (keine Codeänderung) | | Neuer Kreis in der Energiefluss-Übersicht (Gerät, Etage, Quelle) | ein Eintrag in `js/solar/energieflussKatalog.js`; neues Symbol dazu in `SYMBOLE` (`energiefluss.js`) | | Neues Symbol auf einer Kachel | Name eines Bootstrap-Icons ins Feld tippen. Vorschlagsliste: `kachelSymbole()` in `kacheln.php` | +| Symbol für eine Gerätegruppe (Raum-Modal, Zeitleiste, Editor) | ein Bootstrap-Icon in `raumGruppenTitel()` (`roomControls.php`), `zeitleisteBahnen()` (`zeitleiste.php`) und `GERAETE_SYMBOL` (`autoActionFuncs.js`) — überall dasselbe. Fehlt es in der Icon-Schrift, eine eigene Maske in `css/solar.css` anlegen (Vorbild: `bi-beschattung`) | | Neue Kennzahl in der Jahresstatistik | `KENNZAHLEN` **und** `kennzahlenAus()` in `ajax/getStats.php` — sonst nichts | | Neues Diagramm auf einer Seite | Karte in der Vorlage, ``, dazu ein Endpunkt nach dem Muster von `getProdData.php`, geladen mit `getData()` | | Neue Seite | Zeile in `$pages` (`index.php`), Vorlage unter `restricted/`, Skript unter `js/solar/` | diff --git a/css/solar.css b/css/solar.css index 18aba3a..7a10dcb 100644 --- a/css/solar.css +++ b/css/solar.css @@ -91,6 +91,26 @@ body.bg-body-tertiary, } .app-header { box-shadow: 0 1px 0 var(--ton-linie); } +/* --- Eigene Symbole ------------------------------------------------------ + Fuer Dinge, die Bootstrap Icons nicht kennt. Gezeichnet als Maske in + currentColor, damit sie sich wie ein Symbol aus der Schrift verhalten: + - Groesse, Farbe und Ausrichtung wie + bei allen anderen. bootstrap-icons.min.css laedt nach dieser Datei, daher + .bi doppelt im Selektor. + + bi-beschattung: Kasten, zwei Lamellen, Endleiste - ein Raffstore. Bewusst + nur vier Balken mit viel Luft dazwischen: mit Fuehrungsschienen und drei + Lamellen lief das Zeichen bei 16 px zu einem Block zusammen. Ueberall dasselbe: Raum-Modal, Zeitleiste, Editor. + -------------------------------------------------------------------------- */ +.bi.bi-beschattung::before { + content: ""; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Crect x=%221.5%22 y=%221.6%22 width=%2213%22 height=%222.6%22 rx=%22.9%22/%3E%3Crect x=%222.6%22 y=%225.7%22 width=%2210.8%22 height=%221.7%22 rx=%22.85%22/%3E%3Crect x=%222.6%22 y=%228.6%22 width=%2210.8%22 height=%221.7%22 rx=%22.85%22/%3E%3Crect x=%221.5%22 y=%2211.8%22 width=%2213%22 height=%222.6%22 rx=%22.9%22/%3E%3C/svg%3E") center / contain no-repeat; + mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Crect x=%221.5%22 y=%221.6%22 width=%2213%22 height=%222.6%22 rx=%22.9%22/%3E%3Crect x=%222.6%22 y=%225.7%22 width=%2210.8%22 height=%221.7%22 rx=%22.85%22/%3E%3Crect x=%222.6%22 y=%228.6%22 width=%2210.8%22 height=%221.7%22 rx=%22.85%22/%3E%3Crect x=%221.5%22 y=%2211.8%22 width=%2213%22 height=%222.6%22 rx=%22.9%22/%3E%3C/svg%3E") center / contain no-repeat; +} + /* --- Karten -------------------------------------------------------------- Eine Karte ist eine Flaeche, kein Kasten: ein Ton heller als der Grund, eine Haarlinie als Rand, kein Schlagschatten. Der Schatten trennte frueher, was diff --git a/js/solar/autoActionFuncs.js b/js/solar/autoActionFuncs.js index e46a9dd..414ef8d 100644 --- a/js/solar/autoActionFuncs.js +++ b/js/solar/autoActionFuncs.js @@ -392,10 +392,12 @@ function standardWert(spec) { * bekommt den Chip - lieber ein neutrales Zeichen als ein falsches. */ const GERAETE_SYMBOL = { - "Außenjalousie": "bi-shadows", - "Rollladen": "bi-shadows", - "Screen": "bi-shadows", - "Pergola": "bi-umbrella", + // Alles, was beschattet, traegt dasselbe Zeichen wie im Raum-Modal und in + // der Zeitleiste (bi-beschattung, css/solar.css). + "Außenjalousie": "bi-beschattung", + "Rollladen": "bi-beschattung", + "Screen": "bi-beschattung", + "Pergola": "bi-beschattung", "ESP32 Thermostat": "bi-thermometer-half", "Temperatur": "bi-thermometer-half", "Heizung": "bi-fire", diff --git a/restricted/roomControls.php b/restricted/roomControls.php index dac0b8e..13568c6 100644 --- a/restricted/roomControls.php +++ b/restricted/roomControls.php @@ -178,9 +178,7 @@ function bedienform($d) function raumGruppenTitel() { return [ - // "bi-blinds" gibt es in der eingebundenen Icon-Version nicht - die - // Kachel blieb leer. Ein eigenes Zeichen: Fensterrahmen mit Lamellen. - "beschattung" => ["Beschattung", "", "#60afbf"], + "beschattung" => ["Beschattung", "bi-beschattung", "#60afbf"], "heizung" => ["Heizung", "bi-thermometer-half", "#e5624f"], "licht" => ["Licht", "bi-lightbulb", "#f7c000"], "schalter" => ["Schalten", "bi-toggle-on", "#6cbe58"], @@ -219,7 +217,7 @@ function zeichneGruppen($gruppen, $fertig = []) foreach ($vorhanden as $form => $titel) { $leiste .= ""; diff --git a/restricted/zeitleiste.php b/restricted/zeitleiste.php index 8eb6cb6..00f3ec8 100644 --- a/restricted/zeitleiste.php +++ b/restricted/zeitleiste.php @@ -38,7 +38,7 @@ function zeitleisteBahnen() { return [ "licht" => ["titel" => "Licht", "symbol" => "bi-lightbulb"], - "beschattung" => ["titel" => "Beschattung", "symbol" => "bi-window-split"], + "beschattung" => ["titel" => "Beschattung", "symbol" => "bi-beschattung"], "heizung" => ["titel" => "Heizung", "symbol" => "bi-thermometer-half"], "bewaesserung" => ["titel" => "Bewässerung", "symbol" => "bi-droplet"], "schalter" => ["titel" => "Schalter", "symbol" => "bi-toggle-on"],