Fhem-cms

FHEMCMS – fhem-cms
Zweck / Funktion
Browserbasierte Bedienoberfläche mit grafischem Seiteneditor, Widgets, Live-Werten und Assetmanager.
Allgemein
Typ	Inoffizielles Modul; Installation aus externer Updatequelle.
Details
Dokumentation	GitHub-Wiki / Anwenderhandbuch
Modulname	01_FHEMCMS.pm
Ersteller / Betreuung	stapetz
Projekt	GitHub-Repository
Wichtig: Zugriffsschutz wird in FHEM/FHEMWEB eingerichtet.

fhem-cms ergänzt FHEM um eine frei gestaltbare Bedienoberfläche im Browser. Du kombinierst Gerätewerte, Bedienelemente, Texte, Bilder und Links auf eigenen Seiten. Das Layout erstellst du grafisch, ohne dafür eine komplette HTML-Oberfläche programmieren zu müssen.

Dieser Artikel beschreibt den stabilen Funktionsstand 1.9.0 und das aktuelle Seitenformat Schema 5. Das ausführliche, bebilderte GitHub-Handbuch enthält zusätzliche Beispiele und Widgetaufnahmen.

Neu in 1.9.0: interne Seiten als Modal-Popup, Bildbearbeitung mit Varianten, automatische LinkWidget-Größe mit bestätigter Platzschaffen-Vorschau sowie volle Rasterbreite und verbesserte mobile Navigation.

Idee und Funktionsumfang

Statt technische Geräteseiten einzeln aufzurufen, ordnest du Informationen nach Räumen oder Themen:

• Eine Startseite zeigt wichtige Zustände und Schnellzugriffe.
• Raumseiten bündeln Temperatur, Heizung, Beleuchtung und Fensterkontakte.
• Energieübersichten verbinden Tabellen, historische Diagramme und SolarFlow.
• Informationsseiten enthalten Anleitungen, Bilder und aktuelle FHEM-Werte im Fließtext.
• Linkkacheln führen zu anderen CMS-Seiten, Webseiten oder Dokumenten.

Das FHEM-Modul übernimmt Datenzugriff und Speicherung; der Browser stellt die Oberfläche dar. Das CMS verwendet FHEMWEB und dessen Sitzung. Ein zusätzlicher Cloud-Dienst ist nicht erforderlich.

FHEM bleibt für Geräte, Automatisierungen, Berechtigungen und die Aufzeichnung historischer Daten zuständig. Das CMS ersetzt diese Funktionen nicht.

Voraussetzungen und Sicherheit

• FHEM 6.5 oder neuer und ein laufendes FHEMWEB.
• Ein aktueller Browser mit ES-Modulen, Web Components und HTML-Dialogen.
• Schreibrechte des FHEM-Betriebssystemkontos in den CMS-Daten- und Medienverzeichnissen.
• Für historische Diagramme: bereits vorhandene Aufzeichnungen in DbLog oder FileLog.

Die Projektanleitung nennt Perl 5.40 als getestete Umgebung, nicht als einzig mögliche Laufzeit. Für die normale Installation brauchst du weder Node.js noch einen eigenen Frontend-Build.

Wichtig: FHEMWEB ist die Sicherheitsgrenze. Es gibt keine separate CMS-Anmeldung. Richte Anmeldung, geschützten Transport und passende FHEM-Rechte ein, bevor du die Oberfläche außerhalb eines vertrauenswürdigen Netzes verwendest.

• Eine ausgeblendete Navigation oder eine Seite ohne Editor ist keine Zugriffssperre.
• ?mode=edit schaltet die Ansicht um, ist aber keine Berechtigungsprüfung.
• Eine eigenständige CMS-Rollenverwaltung für Leser und Bearbeiter ist nicht vorauszusetzen.
• Bedienelemente können reale Geräte schalten. Auch die Vorschau ist nicht automatisch ein Simulationsmodus.
• Zugangsdaten, Tokens und sensible Metadaten gehören nicht in öffentliche Widgets, Screenshots oder Fehlerberichte.

Installation

Erstelle zunächst eine vollständige Sicherung deiner FHEM-Installation.

Die folgenden Befehle gibst du in die FHEM-Befehlszeile ein, nicht in ein Betriebssystemterminal:

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

Die Adresse zeigt auf eine Controls-Datei, nicht direkt auf die Moduldatei. Dadurch werden Modul, Perl-Helfer und Frontend zusammen installiert. Der Neustart unterbricht FHEM kurz.

Nach dem Neustart legst du ein CMS-Device an:

define CMS fhemcms

CMS ist ein Beispielname. Ersetze ihn bei Bedarf in allen Befehlen durch deinen eigenen Device-Namen. Speichere anschließend die FHEM-Konfiguration.

Das Device erscheint standardmäßig im Raum FHEM CMS:

Einstieg am Device	Funktion
CMS starten	Öffnet den Bearbeitungsmodus.
Zeige Homepage	Öffnet den veröffentlichten Stand.
get CMS url	Zeigt den relativen Homepagepfad.

Bei FHEMWEB-Webname fhem und Device CMS lauten typische Pfade:

/fhem/fhem-cms/CMS/index.html
/fhem/fhem-cms/CMS/index.html?mode=edit

Verwende bevorzugt die erzeugten Device-Links, da Host, Port und Webname von deiner Installation abhängen. Die Modulversion findest du im Internal VERSION, auch bei fehlgeschlagener Initialisierung. Die Versionsangabe allein bestätigt keine erfolgreiche Initialisierung.

Erste Seite erstellen

Bei einer neuen, leeren Konfiguration erscheint der Einrichtungsassistent. Du kannst leer beginnen, Räume und Geräte mit Vorschau auswählen oder mit Magic - auf gut Glück einen Entwurf erzeugen. Magic berücksichtigt höchstens acht Räume mit je acht Widgets und nur unterstützte Geräte. Nicht erkannte Geräte lassen sich später im Editor ergänzen. Der Assistent veröffentlicht nichts; Bedienelemente können reale Geräte steuern. Automatische Temperaturverläufe werden nicht angelegt.

Die folgenden Schritte beschreiben den manuellen Ausbau mit leerer Startseite oder bei einer bestehenden Einrichtung:

1. Öffne am CMS-Device CMS starten.
2. Wähle Bearbeiten → Widget hinzufügen → Wert.
3. Suche ein vorhandenes FHEM-Device und wähle dessen gewünschtes Reading.
4. Trage einen Titel und gegebenenfalls eine Einheit ein, beispielsweise „Außentemperatur“ und „°C“.
5. Bestätige mit Speichern.
6. Verschiebe das Widget am Punktgriff und ändere seine Größe am Griff unten rechts.
7. Ergänze bei Bedarf ein Textwidget als Überschrift oder Einleitung.
8. Kontrolliere den Entwurf unter Ansicht → Vorschau und in der Geräte-Vorschau.
9. Wähle Datei → Entwurf veröffentlichen.
10. Öffne die Homepage neu.

Device- und Reading-Namen werden nicht automatisch angelegt. Wähle die tatsächlich vorhandenen Quellen deiner FHEM-Installation.

Editor, Entwurf und Veröffentlichung

Ansicht	Angezeigter Stand	Zweck
Homepage ohne Modusparameter	Live	Veröffentlichte Oberfläche bedienen.
?mode=edit	Entwurf bzw. Ausgangsstand	Seiten und Widgets bearbeiten.
?mode=preview	Entwurf	Entwurf ohne Editorwerkzeuge prüfen.

Speichern ist nicht Veröffentlichen:

• Speichern im Widgetdialog übernimmt Änderungen in den Entwurf.
• Verschieben und Skalieren werden automatisch als Entwurf gespeichert.
• Abbrechen verwirft noch nicht gespeicherte Dialogeingaben.
• Entwurf veröffentlichen ersetzt den Live-Stand; der bisherige Live-Stand wird gesichert.
• Entwurf verwerfen entfernt den Entwurf, nicht die Live-Konfiguration.

Ein CMS-Device hat einen gemeinsamen Entwurf, nicht einen eigenen je Browser. Bei Konflikten oder einer unklaren Speicherbestätigung lädst du den aktuellen Zustand neu, statt mehrfach zu speichern.

Menü	Typische Aufgaben
Datei	Veröffentlichen, Verwerfen, Assetmanager, Sicherungen und Wiederherstellung.
Bearbeiten	Seiteneinstellungen, Widget hinzufügen, Widgets automatisch anordnen.
Ansicht	Vorschau und Rasteranzeige.

Die Widgetwerkzeuge erscheinen auf Mausgeräten beim Überfahren oder Tastaturfokus; auf Touchgeräten ohne Hover bleiben sie sichtbar. Über den Stift öffnest du die Einstellungen, über den Seitenwechselknopf verschiebst du ein Widget auf eine andere Seite.

Ausnahme Assetmanager: Uploads, Umbenennen, Verschieben und Löschen gelten sofort, unabhängig vom Seitenentwurf.

Seiten, Navigation und Layout

Die Navigation ist ein gemeinsames Widget für alle Seiten des CMS-Devices. Öffne dessen Stiftsymbol, um Seiten zu erstellen, umzubenennen, umzusortieren oder in der Navigation auszublenden.

• Ausgeblendete Seiten bleiben über ihren Link erreichbar und sind nicht geschützt.
• Zum Löschen einer Seite entfernst oder verschiebst du zunächst ihre Widgets und änderst referenzierende LinkWidget-Kacheln.
• Die letzte verbleibende Seite kann nicht einfach entfernt werden.
• Die Navigation lässt sich horizontal oder vertikal ausrichten, verschieben und skalieren.
• Bei Platzmangel erscheint ein aufklappbares Burger-Menü. Bei vertikaler Navigation wird es auf Touchgeräten und in der Geräte-Vorschau unabhängig von der Ausrichtung verwendet; es liegt über den Widgets, ohne Platz im Inhaltsfluss zu belegen. Beim Drehen wird die verfügbare Breite neu ausgewertet.
• Bei horizontaler Navigation werden Einträge bei knappem Platz in der Höhe um höchstens 20 Prozent verkleinert; reicht der Platz auch dann nicht, erscheint das Burger-Menü.
• Eine vergrößerte gemeinsame Navigation kann kollidierende Widgets auf allen Seiten nach unten verschieben.

Unter Bearbeiten → Seiteneinstellungen legst du Theme, Widgetrahmen, globale Titelausrichtung und Rasterdichte fest. Möglich sind 12, 24, 48, 96 oder 192 Spalten. Die gemeinsamen Einstellungen gelten für alle Seiten des CMS-Devices.

Widgettitel lassen sich global links, zentriert oder rechts ausrichten. Ob ein Titel sichtbar ist, bestimmst du weiterhin am einzelnen Widget. Frei formatierte Überschriften im Textinhalt sind davon unabhängig.

Bearbeiten → Widgets automatisch anordnen rückt die Widgets der aktuellen Seite nach oben und links. Größen und Inhalte bleiben erhalten; die Änderung landet im Entwurf.

Theme-Manager und Hintergrundbilder

Unter Bearbeiten → Seiteneinstellungen stehen Forest Green, Hell, Liquid Glass, OLED Black und Catppuccin Mocha zur Auswahl. Das frühere Theme „Dunkel“ heißt jetzt „Forest Green“; bestehende Einstellungen bleiben erhalten. Das Theme gilt für alle Seiten des CMS-Devices.

Für jedes Theme lässt sich über den Assetmanager ein Hintergrundbild für die aktuelle Seite auswählen oder entfernen. Auf der Startseite kann Bild auf allen Seiten verwenden aktiviert werden: Das Bild der ersten Seite gilt dann gemeinsam; individuelle Bilder der anderen Seiten bleiben gespeichert. Nach dem Ausschalten werden diese wieder verwendet. Hat die erste Seite kein Bild, erscheint der jeweilige Theme-Hintergrund. Verwendete Bilder sind im Assetmanager gegen Löschen geschützt.

Für Liquid Glass regeln Liquid-Effekt und Transparenz die Darstellung auf allen Seiten. Die Smartphone-Vorschau zeigt Änderungen an der aktuellen Seite und dem wirksamen Hintergrund unmittelbar. Speichern übernimmt die Einstellungen in den Entwurf, Abbrechen verwirft sie; erst Veröffentlichen macht den Entwurf live. Hohe Transparenz kann die Lesbarkeit abhängig vom Bild verringern.

Fenstergröße, Zoom und mobile Ansicht

Navigation und Widgets skalieren gemeinsam mit der verfügbaren Breite. Noch nicht veröffentlicht (stapetz/fhem-cms#155): Das Seitenraster nutzt die gesamte verfügbare Inhaltsbreite, auch auf breiten Monitoren und beim Browserzoom. Kleine Außenabstände und sichere Bildschirmränder bleiben erhalten. Der Editor passt die Spaltenbreite ein, statt rechts Fläche freizulassen oder seitliches Scrollen zu verlangen. Gespeicherte Rasteranteile bleiben gleich; Zoom vergrößert daher nicht mehr zwingend die gesamte Kachel. Homepage und Vorschau können bei kleinerer CSS-Breite früher umbrechen; Mindestgrößen für lesbare Inhalte bleiben erhalten. Zoom und Resize schreiben keine Layoutdaten.

Bis einschließlich 600 Pixel Inhaltsbreite ordnen Homepage und Vorschau die Widgets in Leserichtung mit Zeilenumbruch an. Der Editor bleibt zum präzisen Positionieren beim exakten Raster. Das Drehen des Geräts verändert keine gespeicherten Rasterpositionen.

Im schmalen Smartphone-Hochformat nutzen Widgets die gesamte verfügbare Breite; im kurzen Querformat erhalten sie mindestens 40 Prozent.

Noch nicht veröffentlicht (stapetz/fhem-cms#141): Homepage und Vorschau brechen auch im schmalen Desktopbrowser bis 80 rem Inhaltsbreite (bei Standardschrift 1280 Pixel) um. Breite Desktopansichten und das exakte Bearbeitungsraster bleiben erhalten. Im kurzen Phone-Querformat füllen die Kacheln ihre Zeilen vollständig: zwei kleinere nebeneinander oder eine alleinstehende Diagrammkachel über die ganze Breite. Phone-Hochformat und Tablet-Regeln bleiben erhalten. Die Startseite fordert die volle Bildschirmfläche an und schützt Inhalte über die sicheren Bildschirmränder, ohne diese zum normalen Seitenabstand zu addieren. Die Vorschau simuliert keine Kamera-Aussparung; dafür bleibt die Prüfung auf dem echten Gerät nötig.

Prüfe vor der Veröffentlichung Desktop, Smartphone, Hoch-/Querformat und Browserzoom. Die Geräte-Vorschau hilft dabei, ersetzt aber nicht jeden Test auf dem Zielgerät.

Widgetübersicht

Widget	Aufgabe und wichtige Hinweise
Wert	Ein einzelnes Reading mit optionalem Icon und Einheit groß anzeigen; keine Gerätebedienung.
Uhr / Datum	Browserzeit digital oder analog darstellen; Datum, Sekunden und Wochentag optional.
Status-Symbol	Exakte Readingwerte passenden Icons und Farben zuordnen; reine Anzeige.
Thermostat	Ist-/Solltemperatur, Sollwertregler, Betriebsart, Ventil und Batterie je nach verfügbaren Geräteinformationen.
Schalter	Mit den angebotenen An-/Aus-Befehlen schalten; Standarddarstellung „Nur Symbol“, Beschriftung optional.
Taster	Einen angebotenen Befehl ohne Parameter auslösen, etwa toggle; Standardsymbol passend zum Befehl.
Schieberegler	Einen Set-Befehl mit Sliderdeklaration bedienen; Bereich und Schrittweite vom Device.
Tabelle	Mehrere Readings mit eigenen Bezeichnern, Einheiten, Überschriften und optionaler Summe.
Diagramm	Geloggte numerische Messwerte aus DbLog oder FileLog darstellen.
SolarFlow	Leistungen zwischen PV, Haus, Netz und Batterie sowie optional den Batterieladestand visualisieren.
Anrufliste	Anrufe eines FB_CALLLIST-Devices mit wählbaren Spalten anzeigen.
Text	Formatierten Text, Bilder, Links, Tabellen und Live-Platzhalter kombinieren.
Freies HTML	Bereinigtes HTML mit Live-Werten und zustandsabhängigen Farben; keine freie Skriptausführung.
LinkWidget	Interne Seiten, externe Webseiten oder Dokumente als Text-/Bildkacheln anbieten.

Alle Widgetaufnahmen und Einstellungsdialoge findest du in der bebilderten Widgetübersicht.

Geräte und Befehle richtig zuordnen

Nach einem Gerätewechsel prüfst du die neu angebotenen Readings und Set-Befehle. Beim Thermostat richten sich Solltemperaturbereich und Betriebsarten nach dem ausgewählten Gerät; gegebenenfalls werden dessen Kanäle berücksichtigt.

Schalter und Taster sind im Editor nicht zum Schalten vorgesehen. In der normalen Ansicht können sie reale Geräte bedienen.

Ein Slider benötigt eine passende Deklaration in der Set-Liste, beispielsweise:

pct:slider,0,1,100

Das bedeutet Minimum 0, Schrittweite 1 und Maximum 100. Eine reine Werteliste genügt dafür derzeit nicht. Slideränderungen werden 1,5 Sekunden nach der letzten Bewegung gesendet.

Einheiten sind meist Beschriftungen, keine Umrechnung. Die Auswahl „kWh“ wandelt einen Readingwert in Wh nicht automatisch um.

Anrufliste

Im Schema-5-Editor ein FB_CALLLIST-Device auswählen. Standardmäßig werden fünf Anrufe mit Status, Name oder Nummer, Datum/Uhrzeit und Dauer angezeigt. Die Anzahl ist von 1 bis 20 und die sichtbaren Spalten sind einstellbar. Das Device bestimmt Reihenfolge und verfügbare Anzahl. Ist genau ein FB_CALLLIST-Device vorhanden, wird es beim Anlegen vorausgewählt. Bei mehreren Devices erfolgt die Auswahl im Dialog. Die Anfangshöhe richtet sich nach der gewählten Anzahl; spätere Änderungen der Anzahl ändern die Widgetgröße nicht automatisch.

Am Device muss create-readings 1 gesetzt sein; visible-columns muss die benötigten Spalten enthalten, number-of-calls begrenzt die bereitgestellten Einträge. Das Widget ändert keine Device-Attribute. Fehlende Readings und Spalten werden angezeigt. Unbekannte Status werden neutral dargestellt; ein fehlgeschlagener ausgehender Anruf ist nicht zuverlässig als „besetzt“ unterscheidbar. Anrufdaten sind persönlich: Zugriff auf CMS und FHEMWEB entsprechend schützen.

SolarFlow

Die PV-Leistung ist Pflicht; andere Quellen sind optional. Du kannst Werte aus einem Device oder aus mehreren Devices zuordnen. Ohne Hausverbrauchsreading kann der Hausverbrauch berechnet werden.

Bei einem von Magic vorgeschlagenen SolaxModbus-Gerät ist die Berechnung zunächst ausgeschaltet, wenn sich der Hausverbrauch nicht eindeutig zuordnen lässt. Sie kann in der Widget-Konfiguration bewusst aktiviert werden.

• Netzleistung: negativ bedeutet Bezug, positiv Einspeisung.
• Batterieleistung: positiv bedeutet Laden, negativ Entladen.
• Die W-/kW-Einstellung muss zu den Quellreadings passen.
• Fehlende Netz-/Batteriequellen blenden die betreffende Station aus.

Prüfe die Richtung an einem bekannten Betriebszustand; Hersteller verwenden nicht immer dieselbe Vorzeichenkonvention.

LinkWidget

Ein LinkWidget enthält 1 bis 200 Kacheln. Jede Kachel braucht einen Linktext, auch wenn dieser ausgeblendet ist. Ziele sind interne CMS-Seiten, externe HTTP-/HTTPS-Adressen und Dokumente aus dem Assetmanager.

Im Einstellungsdialog ordnest du die Kacheln in einem eigenen 12-Spalten-Raster an. Verschieben erfolgt am Griff, Skalieren an der Ecke. Überlappungen sind nicht speicherbar.

Das innere Linkraster ist unabhängig vom äußeren Seitenraster. Ein „neues Fenster“ kann aufgrund von Browserregeln auch als Tab erscheinen.

Seit Version 1.9.0: Beim Speichern passt sich die äußere Widgetgröße an das belegte Rechteck der Linkkacheln an. Bei einem neuen Widget belegt ein einzelner Link mit 4 × 3 inneren Feldern bei 12 Seitenspalten 4 × 3 äußere Felder; ein sichtbarer Widgettitel ergänzt eine Zeile. Feinere Seitendichten skalieren die Außenmaße. Bestehende Widgets behalten ihren bisherigen Maßstab für Breite und Höhe, auch nach manueller Größenänderung. Unveränderte Linkflächen behalten ihre Außenmaße; veränderte belegte Flächen passen diese proportional und auf ganze Rasterfelder gerundet an. Ein volles inneres 12-Spalten-Raster bedeutet nicht volle Seitenbreite. Leere Randspalten und -zeilen werden nicht angezeigt, Abstände zwischen Kacheln bleiben erhalten. Die Außenposition ändert sich nicht. Braucht das LinkWidget mehr Platz, zeigt Speichern eine Vorher-/Nachher-Vorschau der Seite. Betroffene Widgets werden markiert und benannt, auch bei nötigen Folgeverschiebungen. Erst Platz schaffen und speichern übernimmt das gewachsene LinkWidget und die gezeigten Verschiebungen nach unten gemeinsam in den Entwurf. Inhalte, Größen und horizontale Positionen anderer Widgets bleiben erhalten; Navigation und andere Seiten ändern sich nicht. Zurück zur Linkbearbeitung erhält alle Eingaben und Bilder; Abbrechen schreibt nichts. An Seiten-/Höhengrenzen oder bei einer Kollision mit der Navigation bleibt der Dialog mit einer Meldung offen: Kacheln verkleinern oder das äußere Widget verschieben. Ausgewählte Bilder erscheinen sofort auf den Kacheln im Bearbeitungsraster; Bild entfernen entfernt dort auch die Vorschau.

Seit Version 1.9.0: Interne Linkkacheln können statt eines Seitenwechsels ein Popup in kleiner, mittlerer oder großer Breite öffnen. Es zeigt die Zielseite mit Live-Daten über der aktuellen Seite. Schließen ist mit ×, Escape oder Klick außerhalb möglich. Ein weiteres Popup innerhalb des geöffneten Popups wird abgewiesen. Die Änderung gehört zum Seitenentwurf; bestehende Links wechseln weiterhin die Seite. Beim Rollback passende Code- und Konfigurationssicherungen gemeinsam wiederherstellen.

Text, Bilder und Live-Platzhalter

Das Textwidget bietet einen WYSIWYG-Editor mit Textformatierung, Überschriften, Listen, Farben, Links, Bildern und Tabellen.

• Über Bild öffnest du den gemeinsamen Assetmanager.
• Ein eingefügtes Bild kannst du anklicken, links/mittig/rechts ausrichten und proportional skalieren.
• Über {{ }} fügst du einen Live-Platzhalter ein.
• Im Editor erscheint dieser als grüner Baustein; ein Klick darauf öffnet seine Einstellungen.
• In der normalen Ansicht wird der Baustein durch den aktuellen Wert ersetzt.

Platzhalterbeispiele

{{Garten:temperature|round(1)|suffix( °C)}}
{{Fenster:state|map(open=Offen,closed=Geschlossen)|default(unbekannt)}}

Für eine Energieinformationsseite beispielsweise:

{{virtualSolar:pv_total_power|suffix( W)}}
{{virtualSolar:EnergyTotal|round(2)|suffix( kWh)}}

Die Device- und Readingnamen sind Beispiele. Wähle deine tatsächlichen Quellen. Filter werden von links nach rechts angewendet:

Filter	Wirkung
round(n)	Auf 0 bis 6 Nachkommastellen runden.
int	Nachkommastellen abschneiden.
upper, lower	Groß-/Kleinschreibung.
default(Text)	Ersatztext bei leerem Wert.
prefix(Text), suffix(Text)	Text oder Einheit ergänzen.
map(on=An,off=Aus)	Readingwerte auf eigene Texte abbilden.

Die Sonderwerte @alias, @name und @type liefern Geräteinformationen. Je Inhaltswidget sind höchstens 20 verschiedene Devices vorgesehen.

Freies HTML

Freies HTML unterstützt Platzhalter und alternativ Elemente mit device- und reading-Attributen:

<h3>Garten</h3>
<p>Temperatur: {{Garten:temperature|round(1)|suffix( °C)}}</p>
<span device="Garten" reading="humidity" filter="int|suffix( %)"></span>

Erlaubtes HTML wird geprüft und bereinigt. Skripte, Iframes, Ereignisattribute und beliebige externe Inhalte sind nicht vorgesehen. Für Bilder und Links verwendest du das Textwidget oder LinkWidget.

Assetmanager: gemeinsame Bilder und Dokumente

Über Datei → Assetmanager verwaltest du Dateien unabhängig vom gerade bearbeiteten Widget. Textwidget und LinkWidget verwenden denselben Katalog des CMS-Devices.

Ordner und Upload

• Die große Übersicht zeigt direkte Unterordner und Dateien des geöffneten Ordners.
• Ein Klick auf eine Ordnerkachel öffnet den Ordner; über den Pfad navigierst du zurück.
• Ordner erstellen legt einen Unterordner am aktuellen Ort an.
• Mehrfachauswahl und Drag-and-drop laden Dateien direkt in den geöffneten Ordner.
• Ganze Ordner werden nicht per Drop importiert.
• Identische Dateien können wiederverwendet werden und bleiben dann gegebenenfalls in ihrem bisherigen Ordner.
• Eine Assetsuche ist in Version 1.9.0 noch nicht enthalten.

Dateidetails und Aktionen

Wähle eine Datei, um ihre Eigenschaften rechts zu öffnen:

• Umbenennen ändert den Anzeigenamen; die Dateiendung bleibt geschützt.
• Die physischen Dateien behalten ihre Hash-Dateinamen; bestehende Verweise bleiben erhalten.
• Verschieben öffnet die grafische Zielordnerauswahl. Diesen Ordner verwenden führt die Aktion sofort aus.
• Ein Klick auf die Bildvorschau öffnet das Original in voller Größe.
• Bei vorhandenen EXIF-Daten öffnet das i ein Informationsfenster.
• Verwendungen anzeigen nennt Fundstellen in gespeicherten Live- und Entwurfsseiten.
• Löschen erfordert eine Bestätigung und ist bei vorhandenen Verwendungen gesperrt.
• Ordner lassen sich nur löschen, wenn sie leer sind.

Seit Version 1.9.0: Bilder lassen sich per Bild bearbeiten zuschneiden und verkleinern. Die Auflösung des Quellbildes wird angezeigt; die Ausschnittgröße bezieht sich auf Pixel im Quellbild, die Ausgabegröße auf die finale Auflösung der neuen Variante. Sie entspricht zunächst dem Ausschnitt und kann nicht größer als dieser sein. Das Crop-Symbol über dem Bild aktiviert die Auswahl per Maus oder Touch. Den Rahmen innen verschieben, an den acht Rand- und Eckgriffen skalieren oder außerhalb einen neuen Ausschnitt aufziehen; numerische Zuschnittsfelder entfallen. Rahmen und Griffe lassen sich auch mit Pfeiltasten bedienen (mit Umschalt: 10 Pixel). Die kompakte Option Seitenverhältnis beibehalten erscheint nur beim aktiven Zuschneidewerkzeug neben OK/Abbrechen und hält das Verhältnis der aktuellen Auswahl fest. Die getrennte, zunächst aktivierte Option bei der Ausgabegröße führt beim Ändern von Breite oder Höhe die andere Dimension passend zum Ausschnitt nach; ohne Haken sind beide Werte frei wählbar. Reines Verkleinern benötigt keinen Zuschneidemodus. OK bestätigt den Ausschnitt, Abbrechen verwirft ihn. Erst Variante erstellen lädt das Ergebnis als neue Variante hoch; das Original bleibt unverändert. Rechts stehen Original und Varianten mit Dateigröße und Bildmaßen (Breite × Höhe in Pixeln) zur Auswahl. Der Detailkopf zeigt diese Angaben für das ausgewählte Bild. Schließen und gegebenenfalls Auswählen stehen über der Administration. Neu laden liegt in der Administration und liest Änderungen aus anderen Fenstern ein oder wiederholt einen fehlgeschlagenen Ladevorgang. Eigene Änderungen erscheinen automatisch. Varianten können einzeln gelöscht werden und folgen beim Verschieben dem Original. Nach Löschen des Originals bleiben sie als eigenständige Bilder erhalten. Der Verwendungsschutz gilt für jede Datei einzeln. Animierte GIFs und APNGs werden nicht bearbeitet; einzelne GIF-Bilder werden als PNG gespeichert. Bildmetadaten werden nicht in Varianten übernommen. Grenzen: 8192 Pixel je Seite und 16 Megapixel sowie die konfigurierten Uploadlimits. Für einen Rollback gehören Programmstand, Assetkatalog und Dateien derselben Sicherung zusammen.

Assetaktionen gelten sofort. Abbrechen eines Widgetdialogs oder Verwerfen des Seitenentwurfs macht Uploads, Umbenennungen oder Löschungen nicht rückgängig. „Bild entfernen“ im Widget entfernt dagegen nur den Verweis, nicht die Datei.

Die Verwendungsprüfung umfasst nicht beliebige externe Links, ungespeicherte Dialoge oder ältere Konfigurationsbackups.

Formate, Grenzen und Datenschutz

Bereich	Standard
Bilder	PNG, JPEG, GIF; bis 3 MiB je Datei.
Dokumente	Unter anderem PDF, Office-Dateien, ODT/ODS/ODP, TXT und CSV; bis 20 MiB je Datei.
Gesamtspeicher	500 MiB je CMS-Device.

Die Administration erlaubt Anpassungen. Technische Obergrenzen sind 50 MiB je Datei, 2048 MiB Gesamtspeicher, 2000 Assets, 200 Ordner und 10 Ordnerebenen. Aktive Web-/Skriptformate bleiben gesperrt.

Dokumente werden als Download angeboten; es gibt keine Office-Vorschau und keinen Virenscanner. EXIF-Daten werden lokal im Browser gelesen, aber nicht aus dem Original entfernt. Entferne sensible Kamera-/GPS-Daten vor dem Upload selbst.

Siehe Assetmanager-Anleitung mit Screenshots.

Historische Diagramme

Das Diagrammwidget zeichnet nicht selbst auf. Das Reading muss numerisch sein und bereits in DbLog oder FileLog aufgezeichnet werden.

Bei automatischer Quellenauswahl hat eine passende DbLog-Quelle Vorrang vor FileLog. Bei mehreren Quellen kannst du am CMS-Device gezielt zuordnen:

attr CMS historySource dblog
attr CMS dbLog MeinDbLog

Alternativ:

attr CMS historySource filelog
attr CMS fileLog MeinFileLog

Die genannten Logdevices müssen existieren und korrekt eingerichtet sein. Die Befehle legen keine Datenbank oder Logdatei an.

• Zeiträume: 24 Stunden, 7 Tage, 30 Tage oder 365 Tage.
• Granularität: automatisch, Rohdaten, 15 Minuten, 1 Stunde oder 1 Tag.
• Höchstens 400 dargestellte Punkte; größere Mengen werden mit Mittelwert und Min-/Max-Band zusammengefasst.
• Aktualisierung alle fünf Minuten; Abfragecache 30 Sekunden.

DbLog-Abfragen sind synchron und können FHEM blockieren. Beginne mit kurzen Zeiträumen und öffne nicht unnötig viele große Jahresdiagramme gleichzeitig.

Updates

Für den produktiven Einsatz verwendest du die stabile Quelle main:

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

Prüfe anschließend Updateprotokoll und Internal VERSION und lade den Browser vollständig neu.

Bei ausschließlich geänderten Frontenddateien genügt nach entsprechender Releaseanweisung:

set CMS rebuild

Das erneuert die generierte Startseite und die Frontend-Versionsparameter. Es löscht keine Seiten oder Entwürfe. Nach Änderungen des Perl-Moduls oder seiner Helfer ist ein FHEM-Neustart erforderlich.

dev ist für bewusst durchgeführte Tests vorgesehen. Ein Wechsel zwischen Entwicklungs- und stabilem Stand ist kein garantierter Daten-Rollback. Installiere nicht versehentlich beide Updatequellen parallel für dieselben Dateien.

Sicherungen und ältere Installationen

Eine vollständige Sicherung umfasst FHEM-Konfiguration, CMS-Live-Stand, Entwurf, Konfigurationsbackups, Bilder, Dokumente sowie zusammenpassende Modul- und Frontenddateien.

Automatische CMS-Konfigurationsbackups enthalten keine Assetdateien. Die Wiederherstellung eines älteren Seitenstands holt gelöschte Bilder nicht zurück.

Unter Datei → Sicherungen / Wiederherstellung prüfst du ein Backup und kannst es nach Bestätigung der externen Sicherung wiederherstellen. Ein vorhandener Entwurf muss vorher bewusst veröffentlicht oder verworfen werden. Die Wiederherstellung ersetzt den Live-Stand.

Alte Layouts auf Schema 5 umstellen

Neue Devices beginnen bereits mit Schema 5 und 12 Spalten. Bei älteren Installationen kann Jetzt umstellen erscheinen.

Vorher vollständig sichern: Die Umstellung schreibt Daten und vergibt Positionen und Größen neu. Widgets und Einstellungen bleiben erhalten; Live und ein vorhandener Entwurf werden getrennt umgestellt. Der Entwurf wird nicht automatisch veröffentlicht.

Alternativ zum Editorbutton:

set CMS layoutupgrade

Es gibt dabei keine zusätzliche Bestätigung. Nach der Umstellung arbeitest du Positionen und Größen im Editor nach. Bei einem Fehler prüfst du Log, Sicherungen und Umstellungsjournal; überschreibe die Daten nicht durch manuelle JSON-Schreibversuche.

Wichtige Dateien und Diagnose

Die Pfade beziehen sich auf das FHEM-Modulverzeichnis; <Device> steht für deinen CMS-Device-Namen.

Pfad	Inhalt
FHEM/01_FHEMCMS.pm	Modul.
FHEM/lib/FHEMCMS/Assets.pm	Serverseitige Assetverwaltung.
www/fhem-cms/	Gemeinsames Frontend.
www/fhem-cms/<Device>/index.html	Generierte Startseite; nicht manuell bearbeiten.
www/fhem-cms/<Device>/media/	Bilder.
fhem-cms-data/<Device>/config.json	Live-Konfiguration.
fhem-cms-data/<Device>/draft.json	Vorhandener Entwurf.
fhem-cms-data/<Device>/assets.json	Assetkatalog.
fhem-cms-data/<Device>/assets/	Private Dokumentdateien.

Nützliche lesende FHEM-Befehle:

get CMS url
get CMS status
get CMS backups
get CMS layoutformat

Konfiguration, Katalog, generierte Startseite und Hash-Dateien nicht unabhängig voneinander bearbeiten. Fehlende Daten in einer bestehenden Installation nicht durch Löschen und erneutes Definieren „reparieren“; zuerst Sicherung und Rechte prüfen.

Häufige Fragen

Problem	Prüfung / Abhilfe
Homepage zeigt alte Inhalte	Entwurf veröffentlichen und Homepage neu laden.
Nach Update erscheint altes Verhalten	Vollständige Controls-Quelle, Neustart bzw. rebuild und Browsercache prüfen.
Gedankenstrich statt Readingwert	Exakte Device-/Readingnamen, Kanalzuordnung und vorhandenen Wert prüfen.
„Veraltet seit …“	Verbindung, FHEMWEB-Anmeldung und Rechte prüfen; ein alter Wert ist keine aktuelle Bestätigung.
Schalter reagiert im Editor nicht	Gewollt; zur Bedienung die normale Ansicht verwenden.
Gerät fehlt beim Schieberegler	Set-Liste muss einen Slider anbieten.
Diagrammreading fehlt	Aufzeichnung in DbLog/FileLog und bei FileLog die Regexp prüfen.
Einheit stimmt, Zahlenwert nicht	Reading-Skalierung prüfen; Einheitenbeschriftung rechnet nicht um.
Datei bleibt nach Abbrechen bestehen	Upload ist sofort wirksam und nicht Teil des Seitenentwurfs.
Datei lässt sich nicht löschen	Verwendungen in Live und Entwurf prüfen und zunächst entfernen.
Speicherzustand unklar oder Konflikt	Aktuellen Stand neu laden, nicht mehrfach blind speichern.

Weiterführende Dokumentation und Support

• Projekt und Quellcode
• Vollständiges Anwenderhandbuch
• Widgetübersicht mit Screenshots und Einstellungsdialogen
• Textwidget am Solax-Beispiel
• Assetmanager
• Platzhalter und freies HTML
• Sicherungen und Umstellung
• Veröffentlichungen
• Fehlerberichte und Weiterentwicklungen

Nenne bei Fehlerberichten Version, Browser, Ansichtsmodus, erwartetes und tatsächliches Verhalten sowie reproduzierbare Schritte. Bei Layoutproblemen helfen Fensterbreite und Zoomfaktor. Entferne Zugangsdaten und private Informationen aus Logs und Screenshots.