CSS-Datei für die HomeMatic CCU in Verbindung mit dem FireFox Addon Stylus.
Ein modernes Design:
für die etwas in die Jahre gekommene Oberfläche der HomeMatic WebUI:
Die CSS-Datei benötigt keine Installation auf der CCU. Stattdessen wird diese über FireFox-Addon Stylus eingebunden. Dieses "überschreibt" die vorhandenen Style-Sheets, die von der CCU geladen werden, direkt im Browser.
Nach der Installation von Stylus wird die CCS-Datei in Stylus importiert:
und den Inhalt der CSS-Datei einfügen:
danach ist eine Anpassung der IP-Adressen, auf die IP bzw. URL der CCU, in den einzelnen Code-Bereichen nötig:
.
Hierzu noch ein schönes Video von Verdrahtet auf YouTube
Nach dem Import sieht man in Stylus mehrere Code-Bereiche:
- Changelog, CSS-Variablen zum einfachen Anpassen und des Drucklayouts
- Allgemeine Stile
- die restlichen Stile
- das Hintergrundbild
Für einen Ausdruck werden per CSS die Kopf- und Fußzeilen der Seite ausgeblendet, sowie alles auf schwarz / weiß gesetzt.
Um ein sauberes Ergebnis zu bekommen, sollten in den Druckeinstellungen von FireFox zusätzlich "Hintergrund drucken" deaktiviert werden:
Bitte auch die Diskussion dazu im HomeMatic-Forum beachten.
Die Reihenfolge entspricht keiner Priorität.
- Button "Geräte löschen" korrigieren
- Anleitung vervollständigen
- CSS-Variablen vervollständigen
- Status / Geräte-Controls überarbeiten
- Status / Geräte: Modus Auto / Manu
- Status / Gewerke
- Status / Räume
- Status / Favoriten
- Status / Systemprotokoll - Header
- Direkte Verknüpfungen
- Einstellungen - Unterpunkte Header
- Popup - Allgemeine Geräteeinstellungen
- Popups - Kanalauswahl / Geräteauswahl usw.
- Geräteeinstellungen / Formular-Inputs verbergen
- zweites Design: "Hell"
Optional:
- als Addon?
- wenn es ein Addon wird: Die Geräte-Bilder durch Fotos ersetzen?
- Auf CUx erweitern?
Thorsten Willert
Das ganze steht unter der Apache 2.0 Lizenz. .
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent