Repository navigation
Beispielprojekt
Das Beispiel beschreibt einen möglichen Aufbau mit erfundenen Namen und Messwerten. Die genannten Sensoren/Aktoren werden dadurch nicht in FHEM angelegt. Wähle in deiner Installation passende vorhandene Devices.
Drei Seiten:
| Seite | Inhalt |
|---|---|
| Start | Uhr, Außentemperatur, Fensterstatus und Links zu den Themen. |
| Wohnen | Raumtemperatur, Thermostat, Lichtschalter und kurzer Hinweistext. |
| Energie | PV-Leistung, SolarFlow, Energiezähler und historisches Diagramm. |
Gestaltungsbeispiel, keine exakte Abbildung des Editors.
Die folgenden Aufnahmen vom 12.11.2026 stammen aus der vom Entwickler für die Dokumentation freigegebenen CMS-Instanz. Sie zeigen den Funktionsstand zu 1.9.0. Es wurden nur Seiten geöffnet, keine Geräte geschaltet oder Inhalte verändert. Die oben und unten beschriebenen Beispielnamen bleiben davon unabhängige Vorschläge.
Mehrere Widgettypen teilen das volle Seitenraster. Die Homeserver-Kachel zeigt mehrere Bild-/Textlinks innerhalb eines einzigen LinkWidgets.
Ein Textwidget kombiniert Bild, Formatierung und aktuelle Readingwerte. Thermostat und Messwertanzeigen stehen daneben.
Die unterschiedlich großen Widgets sind frei auf dem Raster angeordnet. Die Darstellung von Einheiten und Tabellen ist der aktuelle Stand; geplante Typografieverbesserungen sind nicht als bereits umgesetzt zu verstehen.
SolarFlow zeigt die vorhandenen Leistungswerte. Eine Tabelle bündelt die PV-Stränge, ein Diagramm den Temperaturverlauf.
- Installieren und CMS-Device öffnen.
- In Navigation bearbeiten die drei Seiten anlegen.
- Verständliche Navigationsbeschriftungen vergeben.
- Mit 12 oder 24 Rasterspalten beginnen.
- Einheitliches Theme und Titelausrichtung festlegen.
- Textwidget mit Begrüßung und einer kurzen Erklärung.
- Digitale Uhr mit Datum.
- Wertwidget für die Außentemperatur.
- Status-Symbol für ein Fenster.
- LinkWidget mit „Wohnen“ und „Energie“ als interne Ziele.
Für die Linkkacheln optionale neutrale Bilder im Assetmanager ablegen. Linktexte zunächst sichtbar lassen.
- Wertwidget für die Raumtemperatur.
- Thermostat mit Ist-/Sollwert und verfügbaren Betriebsarten.
- Schalter für eine ungefährliche Lampe.
- Textwidget mit einem Hinweis auf die Bedienung.
Vor dem ersten Schalten die tatsächlichen Befehle und FHEM-Rechte prüfen. Keine Heizung oder andere kritische Aktoren allein aufgrund eines Beispiels mit unbekannten Zuordnungen bedienen.
- Wertwidget für aktuelle PV-Leistung.
- SolarFlow mit passenden Leistungsreadings.
- Tabelle für fachlich zusammengehörige Energiezähler.
- Diagramm eines bereits geloggten numerischen Readings.
Leistung in W/kW und Energie in Wh/kWh unterscheiden. Die Einheit im Wertwidget korrigiert keine falsche Skalierung. Bei SolarFlow Netzbezug/Einspeisung und Laden/Entladen mit bekannten Zuständen testen.
Beispiel für eine überschaubare Ordnerstruktur:
Stammordner
├── Bilder
│ ├── Raeume
│ └── Symbole
└── Dokumente
└── Anleitungen
Im Assetmanager zunächst Bilder erstellen, hineingehen und dort die
Unterordner anlegen. Mehrfachupload direkt im gewünschten Zielordner starten.
Ein PDF kann beispielsweise über eine zusätzliche Dokumentkachel erreichbar sein.
- Kacheln grafisch anordnen und bei Bedarf automatisch verdichten.
- Auf Desktop gleiche verfügbare Breite in Editor und Vorschau vergleichen.
- Smartphone-Vorschau, Hoch-/Querformat und Burger-Menü prüfen.
- Lange Titel und große Werte ausprobieren.
- Alle internen Links und Dokumentdownloads testen.
Erst wenn der Entwurf stimmt: Datei → Entwurf veröffentlichen. Homepage neu laden und am tatsächlich verwendeten Tablet/Smartphone prüfen.
Nicht nur das Layout sichern, sondern auch Bilder, Dokumente und FHEM-Konfiguration. Eine Liste wichtiger Device-/Readingzuordnungen hilft bei späteren Änderungen. Keine Zugangsdaten in eine öffentlich zugängliche Anleitung schreiben.