fhem-cms – Die Smart-Home-Visualisierung mit integrierten CMS-Funktionen

[stefan.apetz]

Was ist fhem-cms?

Die Idee dahinter ist eine strikte Trennung von Backend und Frontend, kombiniert mit den Vorzügen eines echten Content-Management-Systems (CMS). Reine Steuerungs-UIs bieten oft zu wenig Raum für freien Text, Dokumentationen, Notizen oder statische Medien. 
Bei klassischen CMS fehlt wiederum die Echtzeit-Anbindung an FHEM.

fhem-cms schließt diese Lücke. Ihr könnt damit Dashboards erstellen, die sowohl reaktive Smart-Home-Widgets als auch redaktionelle Inhalte (freie Textbausteine, Anleitungen für die Familie, Bilder etc.) nahtlos in einem attraktiven, responsiven Design vereinen.

Der aktuelle Stand (Frisches Release 0.1.0)

Das Projekt steht noch am Anfang (MVP-Stadium), ist aber bereits voll funktionstüchtig und bringt einen durchdachten Workflow mit (inkl. Entwurfs- und Veröffentlichungs-Modus sowie automatischen Backups).

Die Highlights:

• Echter WYSIWYG-Texteditor mit Live-Fließtext-Platzhaltern: Textbausteine lassen sich wie in einem echten CMS formatieren (fett, kursiv, Farben, Listen, Tabellen) und mit Bildern bestücken.
• Das absolute Komfort-Feature: Ihr könnt FHEM-Readings direkt mitten in den Fließtext integrieren! Über einen {{ }}-Button öffnet sich eine komfortable, visuelle Suche. Ihr sucht einfach nach Device (Name, Alias, Typ, Raum) und wählt das gewünschte Reading aus einer Liste. Der Live-Wert wird als grüner, interaktiver Baustein (Chip) direkt in den Satz eingebettet und aktualisiert sich im Betrieb vollautomatisch in Echtzeit! Ein Klick auf den Chip öffnet die Suche zum nachträglichen Ändern.
• Freies HTML-Widget mit grafischer Platzhaltersuche: Es gibt zwar schon erste native Widgets (Thermostat, Wert-Anzeige, Schalter, Taster) – aber mit dem Freien HTML-Widget lässt sich bereits jetzt jedes beliebige FHEM-Device ansprechen! Ihr könnt dort eigenen HTML/CSS-Code hinterlegen. Auch hier müsst ihr keine kryptischen Codes tippen: Der Knopf ,,Platzhalter suchen und einfügen ..." öffnet dieselbe grafische Suche, filtert eure Devices und fügt den fertigen Code (wahlweise als {{...}} oder im FTUI-Attribut-Stil) exakt an der Cursorposition ein.
• Klassische Navigationsverwaltung: Seiten und Menüs werden über einen komfortablen Dialog angelegt, umbenannt oder per Drag & Drop umsortiert. Keine manuellen HTML-Verlinkungen mehr!

Wie sieht die Architektur aus?

• Backend: Ein schlankes, natives Perl-Modul (01_FHEMCMS.pm), das als Asset-Server dient, Layouts als JSON speichert und Events via WebSockets in Echtzeit an den Browser pusht.
• Frontend: Moderne, reine Web Components und Standard-JavaScript. Keine schweren Frameworks (wie React oder Angular), die in ein paar Jahren veraltet sind. Volle Performance, flüssiges Drag & Drop im 12-Spalten-Raster direkt auf der Oberfläche und saubere Skalierung vom Smartphone bis zum Wandtablet.

Installation

Das Modul wird unkompliziert als gemeinsames Repository über die FHEM-Update-Infrastruktur installiert:

Code Auswählen Erweitern

update add https://raw.githubusercontent.com/stapetz/fhem-cms/main/controls_fhem-cms.txt
update all https://raw.githubusercontent.com/stapetz/fhem-cms/main/controls_fhem-cms.txt
shutdown restart

Danach könnt ihr euer CMS-Device wie gewohnt definieren:

Code Auswählen Erweitern

define MyCMS fhemcms

Das Device wird automatisch im Raum FHEM CMS angelegt. Dort findet ihr direkt die Links "CMS starten" (für den Bearbeitungsmodus) und "Zeige Homepage" (für die reine, cleane Ansicht ohne Kopfzeilen oder Werkzeugleisten auf eurem Tablet).


Feedback gesucht!

Da das Projekt frisch geboren ist, freue ich mich riesig über Tester, Ideen, Kritik und natürlich Fehlerberichte. Schaut euch gerne auch die ausführlichen Dokumentationen im Repository an (docs/ANWENDER.md und docs/PLATZHALTER.md).

Fehler und Feature-Wünsche könnt ihr auch direkt drüben bei GitHub als Issue einkippen:

👉 in GIThub ein Issue melden


Was haltet ihr von dem Ansatz? Welche Widgets vermisst ihr als Erstes?
Viele Grüße

[stefan.apetz]

Neue Version / Ergänzungen:


2026-11-05 - Diagramm-Widget, Tabelle mit Alias und Bezeichnern, Schreibfehler-Protokoll (0.4.0)

Neues Widget Diagramm: Verlauf eines geloggten Readings aus DbLog oder FileLog mit Einheit, wählbarem Zeitraum und Granularität. Die Tabelle zeigt den FHEM-Alias und erlaubt eigene Zeilenbezeichner. Abgewiesene Schreibbefehle werden protokolliert, die Schieberegler-Kachel ist in kleiner Größe lesbar.
S40 - Diagramm
S41 - Readingsgroup / Tabelle
S34 - Schieberegler
S06 - FHEM-Backend-Grundlage implementieren

2026-11-05 - Slider, Uhr, Status-Symbol, Tabelle, Themes und Layout-Verbesserungen (0.3.0)

Neue Widgets: Schieberegler, Uhr/Datum, Status-Symbol und Readings-Tabelle. Hell/Dunkel-Theme pro Gerät, Bildgröße per Ziehpunkt, einheitliches Skalierverhalten der Kacheln und Dialog zum bestätigten Löschen der CMS-Daten. Konfigurationen werden automatisch auf Schema 4 migriert.
S34 - Schieberegler
S36 - Status-Symbol
S38 - Uhr / Datum
S41 - Readingsgroup / Tabelle

2026-11-04 - 48-Spalten-Raster (0.2.0)

Das Layout-Raster wurde auf 48 Spalten verfeinert. Bestehende Konfigurationen werden automatisch migriert; Position und Größe von Kacheln und Navigation bleiben erhalten.
S46 - Freieres, feineres Layout

2026-10-31 - First release 0.1.0

First public version of fhem-cms: pages with navigation, text blocks with placeholders, thermostat, value, free HTML, switch and button widgets, draft and publish workflow.
S01 - MVP-Umfang und Referenzumgebung festlegen
S08 - Redaktionellen Textbaustein umsetzen
S09 - Lesendes FHEM-Widget und Live-Zustände umsetzen
S17 - Schlanke Seite ohne Kopfbereich
S20 - Navigationspunkte: Größe und Beschriftung
S21 - Texteditor: Farben
S22 - Aufgeräumte Werkzeugleiste und Meldungen
S23 - Gitternetz im Bearbeitungsmodus
S24 - Werkzeugleiste links, Meldungsbox
S25 - Wert-Anzeige (Device, Reading, Einheit, Icon)
S27 - Menüs öffnen beim Überfahren
S30 - Thermostat schreibt wie das ThermostatDashboard und skaliert
S33 - Taster / Befehlsknopf

2026-10-31 - Text placeholders accept formatting

[Prof. Dr. Peter Henning]

Interessant - aber was ist der Use Case?

LG

pah