Fhem-cms: Unterschied zwischen den Versionen
Update: neue Version 1.8.0 |
Neue Version 1.11.0 |
||
| (2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 10: | Zeile 10: | ||
| Typ | | Typ | ||
| Inoffizielles Modul; Installation aus externer Updatequelle. | | Inoffizielles Modul; Installation aus externer Updatequelle. | ||
|- style="background-color:#FFFFFF" | |||
| Aktuelle stabile Version | |||
| [https://github.com/stapetz/fhem-cms/releases/tag/v1.11.0 1.11.0] | |||
|- style="background-color:#EFEFFF" | |- style="background-color:#EFEFFF" | ||
! colspan="2" | Details | ! colspan="2" | Details | ||
| Zeile 31: | Zeile 34: | ||
'''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. | '''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. | Dieser Artikel beschreibt den stabilen Funktionsstand '''1.11.0''' und das aktuelle Seitenformat '''Schema 5'''. Das ausführliche, bebilderte [https://github.com/stapetz/fhem-cms/wiki GitHub-Handbuch] enthält zusätzliche Beispiele und Widgetaufnahmen. | ||
'''Neu in 1.11.0:''' VolvoConnect-Fahrzeugwidget mit Kompakt-/Vollansicht und anpassbaren Detailkarten, Solar und Energiefluss mit Ertragskarten, einheitliches Widgetdesign, bessere Safari-/Mobilansicht, Geräte zuerst hinzufügen, diskrete Set-Auswahl, breite Dialoge und geprüfte HTML/SVG/CSS-Einbettungen. Die Vorschau zeigt kein Bearbeitungsraster; Liveupdates erhalten die Scrollposition. Das Fahrzeugwidget setzt ausschließlich das Modul [[VolvoConnect]] voraus; siehe die [https://github.com/stapetz/fhem-cms/wiki/VolvoConnect-Widget bebilderte Anleitung mit Modulinstallation]. | |||
'''Seit Version 1.10.0:''' Die zentrale Seite | |||
<code>/fhem/fhem-cms/admin.html</code> listet CMS-Devices und getrennt davon | |||
verwaiste CMS-Dateistrukturen. Erst nach <code>attr <CMS> adminMenu 1</code> | |||
fuehrt im Dateimenue des jeweiligen CMS | |||
'''Globale FHEM-CMS Administration''' dorthin. Checkbox-Auswahl und die | |||
Bestaetigung <code>DELETE</code> erlauben Purge mit anschliessendem Delete | |||
(nur bei erfolgreichem Purge) bzw. separat die Bereinigung verwaister Daten. | |||
Konfiguration, Entwurf, Sicherungen und Medien werden unwiderruflich entfernt. | |||
Fremde Dateien und Symlinks bleiben gesperrt. Es gelten FHEMWEB-Rechte und | |||
die konfigurierte CSRF-Einstellung: Bei explizitem <code>csrfToken none</code> | |||
entfaellt die Tokenpruefung, andernfalls bleibt sie erforderlich. | |||
Kein automatisches Backup und kein globales <code>save</code>. | |||
Nach vollstaendig erfolgreicher Loeschung laedt die Seite automatisch neu. | |||
Bei Fehlern und Teilerfolgen bleiben die Einzelergebnisse sichtbar. | |||
'''CMS oeffnen''' steht als rechtsbuendiger Button in der jeweiligen CMS-Zeile. | |||
Nach Updates die Seite neu laden; versionierte Asset-URLs vermeiden alte Styles und Skripte | |||
aus dem Browsercache. | |||
Ohne Attribut oder bei <code>adminMenu 0</code> fehlt der Menuepunkt. | |||
Nach Attributaenderung die CMS-Seite neu laden. Dies steuert nur den | |||
Menueeintrag; direkte Zugriffe unterliegen weiterhin den FHEMWEB-Rechten. | |||
Beim Menueaufruf uebernimmt die Administration das aktuelle Theme, das | |||
Seitenhintergrundbild und die Liquid-Glass-Werte des aufrufenden CMS. | |||
Direktaufrufe ohne Darstellungskontext bleiben im dunklen Standardtheme. | |||
'''Seit Version 1.10.0:''' Magic verwendet das | |||
mitgelieferte Strandfoto als Hintergrund aller erzeugten Seiten, auch der | |||
Startseite. Das Bild liegt danach als normales Medium im jeweiligen CMS und | |||
kann ueber die Seiteneinstellungen ersetzt oder entfernt werden. | |||
Leere Seiten und Seiten aus dem gefuehrten Einrichtungsassistenten starten | |||
ohne Hintergrundbild. Bestehende Seiten werden nicht automatisch geaendert. | |||
Neu in 1.10.0: Widgets und Seiten duplizieren, wiederverwendbare Widgetvorlagen, | |||
direktes Loeschen im Entwurf, aufgabenbezogene Widgetdialoge mit | |||
Geraete-/Reading-Vorschlaegen, konsistente Statusfarben, DbLog-Abfragen im | |||
Hintergrund sowie der verbesserte Einrichtungsassistent und die globale | |||
Administration. | |||
__TOC__ | __TOC__ | ||
| Zeile 57: | Zeile 99: | ||
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. | 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. | ||
=== Live-Werte: WebSocket empfohlen, nicht erforderlich === | |||
Das CMS nutzt HTTP-Anfragen zum Laden und Speichern sowie zum Senden von | |||
Gerätebefehlen. Für zeitnahe Wertänderungen öffnet es zusätzlich eine eigene | |||
WebSocket-Verbindung zum FHEMWEB-Inform-Endpunkt. Bei HTTPS verwendet es | |||
<code>wss://</code>, bei HTTP <code>ws://</code>. | |||
'''WebSockets sind keine Pflichtvoraussetzung.''' Ohne nutzbare WebSocket-Verbindung | |||
bleibt die Oberfläche bedienbar; Gerätewerte werden per HTTP-Polling im | |||
30-Sekunden-Takt nachgelesen. WebSocket-Ereignisse lösen ein früheres Nachladen | |||
aus; das regelmäßige Polling bleibt zusätzlich aktiv. | |||
Dieses Polling ist '''nicht das FHEMWEB-Longpoll-Verfahren'''. Das CMS verwendet | |||
keinen eigenen Longpoll-Transport. Eine vorhandene Longpoll-Einstellung allein | |||
ist daher kein Grund, FHEMWEB für das CMS umzustellen: Ohne WebSocket arbeitet | |||
es mit dem beschriebenen HTTP-Polling weiter. | |||
Für möglichst unmittelbare Aktualisierungen muss ein vorgeschalteter Reverse | |||
Proxy WebSocket-Upgrades und langlebige Verbindungen zum FHEMWEB-Endpunkt | |||
weiterleiten. Im Browser zeigt der Netzwerkbereich unter '''WS''' bei erfolgreichem | |||
Verbindungsaufbau den Status <code>101 Switching Protocols</code>. Fehlt diese | |||
Verbindung, zuerst Proxy, Anmeldung und Verbindung prüfen; nicht den | |||
FHEMWEB-Zugriffsschutz abschalten. | |||
'''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. | '''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. | ||
| Zeile 62: | Zeile 128: | ||
* Eine ausgeblendete Navigation oder eine Seite ohne Editor ist '''keine Zugriffssperre'''. | * Eine ausgeblendete Navigation oder eine Seite ohne Editor ist '''keine Zugriffssperre'''. | ||
* <code>?mode=edit</code> schaltet die Ansicht um, ist aber keine Berechtigungsprüfung. | * <code>?mode=edit</code> schaltet die Ansicht um, ist aber keine Berechtigungsprüfung. | ||
* | * Das FHEM-CMS ist bewusst kein klassisches Mehrbenutzer-CMS, sondern ein leichtgewichtiges Frontend, um schnell FHEM-Oberflächen und redaktionelle Texte zu erstellen. Eigene CMS-Konten, Rollen und persönliche Entwürfe gehören deshalb nicht zum Kernumfang. | ||
* Alle über FHEMWEB berechtigten Bearbeiter arbeiten am selben CMS-Datenbestand. Gleichzeitige Bearbeitungen können zu Konflikten führen; Anmeldung und Zugriffsschutz bleiben Aufgabe von FHEMWEB. | |||
* Bedienelemente können reale Geräte schalten. Auch die Vorschau ist nicht automatisch ein Simulationsmodus. | * 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. | * Zugangsdaten, Tokens und sensible Metadaten gehören nicht in öffentliche Widgets, Screenshots oder Fehlerberichte. | ||
| Zeile 69: | Zeile 136: | ||
Erstelle zunächst eine vollständige Sicherung deiner FHEM-Installation. | Erstelle zunächst eine vollständige Sicherung deiner FHEM-Installation. | ||
'''Empfehlung für Live-Werte:''' Ermögliche WebSocket-Verbindungen zum | |||
FHEMWEB-Inform-Endpunkt; das CMS baut sie selbst auf. Ein Reverse Proxy muss | |||
WebSocket-Upgrades und langlebige Verbindungen weiterleiten. | |||
Nach dem Öffnen des CMS kannst du im Browser unter '''Netzwerk → WS''' | |||
den Verbindungsaufbau prüfen (<code>101 Switching Protocols</code>). | |||
'''Keine Pflichtvoraussetzung:''' Ohne WebSocket bleibt das CMS bedienbar | |||
und liest Gerätewerte alle '''30 Sekunden per HTTP-Polling''' neu ein. | |||
Dies ist kein FHEMWEB-Longpoll; eine vorhandene Longpoll-Einstellung allein | |||
muss für das CMS nicht umgestellt werden. | |||
Die folgenden Befehle gibst du in die '''FHEM-Befehlszeile''' ein, nicht in ein Betriebssystemterminal: | Die folgenden Befehle gibst du in die '''FHEM-Befehlszeile''' ein, nicht in ein Betriebssystemterminal: | ||
| Zeile 107: | Zeile 184: | ||
</pre> | </pre> | ||
Verwende bevorzugt die erzeugten Device-Links, da Host, Port und Webname von deiner Installation abhängen. Die Modulversion findest du im Internal '''VERSION'''. | 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 == | == 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. | 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. Für Temperatur-Readings, die in DbLog oder FileLog protokolliert werden, ergänzt der Assistent ein Verlaufsdiagramm; DbLog wird bevorzugt. Ohne nachgewiesene Protokollierung wird kein Diagramm angelegt. Der Assistent veröffentlicht nichts; Bedienelemente können reale Geräte steuern. | ||
'''Seit Version 1.10.0:''' Temperaturvorschlaege setzen einen gueltigen numerischen | |||
Istwert voraus. Eine gepunktete Linie unter dem Spinner zeigt die erledigten | |||
Einrichtungsschritte. Die DbLog-Pruefung nutzt nur die gespeicherten Readings | |||
statt eines zusaetzlichen Jahresverlaufs; auch aeltere Daten gelten als | |||
Nachweis. Abfragefehler bleiben sichtbar und verhindern die automatische Erstellung. | |||
Die folgenden Schritte beschreiben den manuellen Ausbau mit leerer Startseite oder bei einer bestehenden Einrichtung: | Die folgenden Schritte beschreiben den manuellen Ausbau mit leerer Startseite oder bei einer bestehenden Einrichtung: | ||
# Öffne am CMS-Device '''CMS starten'''. | # Öffne am CMS-Device '''CMS starten'''. | ||
# Wähle ''' | # Wähle '''Einfügen → Widget hinzufügen → Wert'''. | ||
# Suche ein vorhandenes FHEM-Device und wähle dessen gewünschtes Reading. | # Suche ein vorhandenes FHEM-Device und wähle dessen gewünschtes Reading. | ||
# Trage einen Titel und gegebenenfalls eine Einheit ein, beispielsweise „Außentemperatur“ und „°C“. | # Trage einen Titel und gegebenenfalls eine Einheit ein, beispielsweise „Außentemperatur“ und „°C“. | ||
| Zeile 148: | Zeile 231: | ||
* '''Entwurf verwerfen''' entfernt den Entwurf, nicht die Live-Konfiguration. | * '''Entwurf verwerfen''' entfernt den Entwurf, nicht die Live-Konfiguration. | ||
Ein CMS-Device hat '''einen gemeinsamen Entwurf''', nicht einen eigenen je Browser. | Ein CMS-Device hat '''einen gemeinsamen Entwurf''', nicht einen eigenen je Browser. Speichert ein anderer Bearbeiter zwischenzeitlich, weist die Versionsprüfung einen veralteten Speicherversuch zurück, statt den neueren Stand zu überschreiben. Lade bei einem Konflikt den aktuellen Zustand neu und übernimm deine Änderungen erneut. Eine Bearbeitungssperre oder Anzeige, wer gerade bearbeitet, gibt es nicht. | ||
{| class="wikitable" | {| class="wikitable" | ||
| Zeile 171: | Zeile 254: | ||
* Zum Löschen einer Seite entfernst oder verschiebst du zunächst ihre Widgets und änderst referenzierende LinkWidget-Kacheln. | * 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 letzte verbleibende Seite kann nicht einfach entfernt werden. | ||
* Seit Version 1.10.0: Eine Seite kann mit Widgets und Layout dupliziert und als Entwurf gespeichert werden; die Live-Seite bleibt unverändert. | |||
* Seit Version 1.10.0: Das X am Widget entfernt dieses nach Bestätigung direkt aus dem Entwurf; die veröffentlichte Seite bleibt zunächst unverändert. | |||
* Die Navigation lässt sich horizontal oder vertikal ausrichten, verschieben und skalieren. | * Die Navigation lässt sich horizontal oder vertikal ausrichten, verschieben und skalieren. | ||
* Bei Platzmangel erscheint ein aufklappbares Burger-Menü. | * 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. | * Eine vergrößerte gemeinsame Navigation kann kollidierende Widgets auf allen Seiten nach unten verschieben. | ||
| Zeile 179: | Zeile 265: | ||
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. | 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. | ||
''' | '''Ansicht → 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. | ||
'''Einfügen''' enthält Widget hinzufügen, Gerät hinzufügen und Widget-Vorlagen. Die freigegebene globale FHEM-CMS Administration steht unter '''Bearbeiten'''. '''Ansicht → Raster anzeigen''' merkt die letzte Auswahl dauerhaft pro CMS im verwendeten Browser, auch für spätere Besuche; auf anderen Geräten gilt die dortige Auswahl. | |||
=== Theme-Manager und Hintergrundbilder === | === Theme-Manager und Hintergrundbilder === | ||
| Zeile 205: | Zeile 293: | ||
=== Fenstergröße, Zoom und mobile Ansicht === | === Fenstergröße, Zoom und mobile Ansicht === | ||
Navigation und Widgets skalieren gemeinsam mit der verfügbaren Breite. Browserzoom vergrößert | Navigation und Widgets skalieren gemeinsam mit der verfügbaren Breite. | ||
'''Seit Version 1.9.0 (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. | 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. | |||
'''Seit Version 1.9.0 (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. | 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übersicht == | ||
'''Konfigurationsdialoge (ab 1.11.0):''' Alle Widgettypen verwenden dieselbe Desktopbreite bis 1100 Pixel, auf kleinen Bildschirmen responsiv. Die Höhe folgt dem Inhalt; lange Formulare bleiben scrollbar. Geräte- und Medienauswahldialoge behalten eigene Größen. Tabellen-Einheiten und Vorschläge stehen über die volle Breite in einer eigenen Zeile unter den übrigen Feldern, im Ein- und Mehr-Device-Modus. | |||
'''Widget-IDs (ab 1.11.0):''' Schema-5-Widgets besitzen CMS-weit eindeutige IDs, auch nach Widget-/Seitenkopien und Vorlagenübernahme. Bestehende Duplikate werden beim nächsten Entwurfsspeichern oder Veröffentlichen eindeutig gemacht, ohne Inhalte, Raster oder Seitenlinks zu verlieren. Lesen allein verändert keine Dateien. Bisher kollidierende Widgets können zwischen Seiten verschoben werden; die Live-Konfiguration bleibt bis zur Veröffentlichung erhalten. | |||
=== Gerät zuerst hinzufügen (ab 1.11.0) === | |||
Unter '''Einfügen → Gerät hinzufügen''' zuerst nach Name, Alias, Typ oder Raum suchen und ein Gerät wählen. Danach werden passende Widgets anhand seiner Readings und Set-Angebote vorgeschlagen; Thermostatkanäle werden berücksichtigt. Ein bloßes Thermometer erhält keinen Thermostat- oder Slider-Vorschlag. '''Textbaustein''' und '''Freies HTML''' stehen immer bereit, '''Diagramm''' nur bei bestätigten geloggten numerischen Readings. Prüfungsfehler bleiben sichtbar; über '''Gerät ändern''' ist eine erneute Prüfung möglich. | |||
Nach der Widgetwahl öffnet sich der gewohnte Konfigurationsdialog mit änderbaren Vorgaben. Erst '''Speichern''' schreibt den Entwurf; '''Abbrechen''' kehrt zur Vorschlagsliste zurück. Geräteauswahl und Abbruch speichern oder schalten nichts. '''Widget hinzufügen''' bleibt unverändert verfügbar. | |||
Wartungsbefehle für Batteriewechsel, Aufwecken oder Werksreset ergeben keinen Tastervorschlag. Schalter benötigen angebotene An-/Aus-Befehle und einen passenden <code>on</code>- oder <code>off</code>-Status. Slider und Auswahllisten verlangen zusätzlich ein zuordenbares Statusreading. Die automatische Auswahl ist bewusst zurückhaltend; eigene Zuordnungen bleiben über '''Widget hinzufügen''' möglich. | |||
=== Verfügbare Widgets === | |||
'''Neu ab 1.11.0:''' '''Wert auswählen''' zeigt diskrete Set-Angebote wie <code>mode:auto,eco,boost</code> als Dropdown oder kompakte Buttons. Optionale Anzeigenamen machen technische Werte lesbar, etwa „Sparbetrieb“ für <code>eco</code>; gesendet bleibt der technische Wert. Gerät, Befehl und optionales Statusreading lassen sich im Standarddialog einstellen. Der Typ erscheint auch bei '''Gerät hinzufügen''', wenn passende Set-Wertelisten vorhanden sind. Slider- und Freitextdeklarationen sind keine diskreten Listen. Nur in der Ansicht werden aktuell angebotene Befehle/Werte gesendet; während einer Anfrage sind die Bedienelemente gesperrt, Fehler bleiben sichtbar. Im Editor wird nicht geschaltet. | |||
{| class="wikitable" | {| class="wikitable" | ||
| Zeile 229: | Zeile 354: | ||
|- | |- | ||
| Schieberegler || Einen Set-Befehl mit Sliderdeklaration bedienen; Bereich und Schrittweite vom Device. | | Schieberegler || Einen Set-Befehl mit Sliderdeklaration bedienen; Bereich und Schrittweite vom Device. | ||
|- | |||
| Wert auswählen || Diskrete Set-Werte als Dropdown oder kompakte Buttons mit optionalen Anzeigenamen bedienen. | |||
|- | |- | ||
| Tabelle || Mehrere Readings mit eigenen Bezeichnern, Einheiten, Überschriften und optionaler Summe. | | Tabelle || Mehrere Readings mit eigenen Bezeichnern, Einheiten, Überschriften und optionaler Summe. | ||
| Zeile 235: | Zeile 362: | ||
|- | |- | ||
| SolarFlow || Leistungen zwischen PV, Haus, Netz und Batterie sowie optional den Batterieladestand visualisieren. | | SolarFlow || Leistungen zwischen PV, Haus, Netz und Batterie sowie optional den Batterieladestand visualisieren. | ||
|- | |||
| Solar und Energiefluss || PV, Haus, Batterie und Netz mit optionalen Tages-/Gesamterträgen; nur zugeordnete Messwerte anzeigen. | |||
|- | |||
| VolvoConnect || Fahrzeug-Kompaktkachel mit Info-Popup oder eingebettete Vollansicht; ausschließlich zusammen mit dem FHEM-Modul [[VolvoConnect]]. | |||
|- | |- | ||
| Anrufliste || Anrufe eines <code>FB_CALLLIST</code>-Devices mit wählbaren Spalten anzeigen. | | Anrufliste || Anrufe eines <code>FB_CALLLIST</code>-Devices mit wählbaren Spalten anzeigen. | ||
| Zeile 246: | Zeile 377: | ||
Alle Widgetaufnahmen und Einstellungsdialoge findest du in der [https://github.com/stapetz/fhem-cms/wiki/Widgets bebilderten Widgetübersicht]. | Alle Widgetaufnahmen und Einstellungsdialoge findest du in der [https://github.com/stapetz/fhem-cms/wiki/Widgets bebilderten Widgetübersicht]. | ||
=== VolvoConnect: Fahrzeugwidget und Modul === | |||
'''Das VolvoConnect-Widget funktioniert ausschließlich mit dem FHEM-Modul [[VolvoConnect]] aus [https://github.com/stapetz/fhem-modules/tree/main/docs/volvo stapetz/fhem-modules].''' Es ersetzt weder das Modul noch dessen Volvo-Anmeldung und verbindet sich nicht selbst mit der Volvo-API. | |||
Zuerst das Modul nach der [https://github.com/stapetz/fhem-modules/blob/main/docs/volvo/DOKUMENTATION.md Installations- und Betriebsanleitung] einrichten. Danach unter '''Einfügen → Widget hinzufügen → VolvoConnect''' das zugehörige Device wählen; Readingnamen und Gruppen werden automatisch übernommen. Im Widgetdialog erklärt das Informationssymbol neben dem Modulhinweis die Einrichtung. | |||
Die kleine Kachel zeigt Akkustand, Reichweite und Verbindungsstatus. Das '''Informationssymbol''' öffnet die Fahrzeugdetails, das '''Aktionssymbol''' die verfügbaren Fahrzeugbefehle. Bei ausgeschaltetem '''Zeige Detaildaten im Popup''' erscheinen die Detailkarten direkt im Widget. Im Editor lassen sich Karten über '''Anordnung bearbeiten''' verschieben, skalieren, ein-/ausblenden und automatisch anordnen; einzelne Readings sind ebenfalls schaltbar, ausgenommen die festen Energiewerte und der Verbindungsstatus. '''Übernehmen''' speichert im CMS-Entwurf und lässt das Detailfenster offen. Erst die CMS-Veröffentlichung übernimmt die Änderung in die Liveansicht. | |||
Die [https://github.com/stapetz/fhem-cms/wiki/VolvoConnect-Widget bebilderte GitHub-Wiki-Anleitung] zeigt Kompakt- und Vollansicht und beschreibt Modulinstallation, Widgetbedienung und Grenzen. Fahrzeugaktionen können reale Auswirkungen haben; nur bewusst auslösen. Keine VIN, Zugangsdaten oder Standortdaten veröffentlichen. | |||
=== Geräte und Befehle richtig zuordnen === | === Geräte und Befehle richtig zuordnen === | ||
'''Devicewechsel in Tabellen (ab 1.11.0):''' Die Geräteauswahl lädt die Readings frisch aus FHEM und belegt das Reading neu vor, statt die vorherige manuelle Auswahl zu übernehmen. Dies gilt für das gemeinsame Device sowie einzelne Mehr-Device-Zeilen. Eigene Bezeichner bleiben erhalten; Abbrechen speichert nichts. | |||
'''Automatische Tabellenbezeichner (ab 1.11.0):''' Ohne eigene Beschriftung wird bei Werten aus einem Device der Readingname angezeigt, bei mehreren Devices '''Gerätename: Readingname''' (nicht der Alias). Maßgeblich sind die tatsächlichen Quellen, nicht der Dialogmodus. Der leere Bezeichner zeigt die Vorgabe als Platzhalter und passt sie bei Quellen-/Readingwechsel sowie Hinzufügen/Entfernen an. Eigene Bezeichner bleiben beim Speichern und Neuladen erhalten. Das Leeren des Feldes aktiviert wieder die automatische Beschriftung. | |||
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. | 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. | ||
| Zeile 302: | Zeile 447: | ||
Das innere Linkraster ist unabhängig vom äußeren Seitenraster. Ein „neues Fenster“ kann aufgrund von Browserregeln auch als Tab erscheinen. | 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 == | == Text, Bilder und Live-Platzhalter == | ||
| Zeile 357: | Zeile 534: | ||
</pre> | </pre> | ||
Erlaubtes HTML wird geprüft und bereinigt. Skripte, Iframes, | Erlaubtes HTML wird gegen Positivlisten geprüft und bereinigt. Seit 1.11.0 sind Kommentare, passive Struktur, Flex/Grid, sichere Links/Bilder, statisches SVG und Iframes erlaubt. CSS hat eine Positivliste für Eigenschaften, Funktionen und At-Regeln; moderne Selektoren (<code>:hover</code>, <code>:has()</code>, Attributselektoren), Variablen, Gradienten, Filter und Animationen bleiben möglich. Alle Positionierungsarten inklusive fixed bleiben auf die Kachel begrenzt; <code>z-index</code> maximal 100 (nur ganze Zahlen/auto). Unbekannte CSS-Eigenschaften, <code>:host</code>, Skripte im eigenen HTML, Eventhandler, Formulare und aktive SVG-Inhalte bleiben gesperrt. | ||
Iframes haben keine Anbieter-/Hostliste: beliebige HTTP-/HTTPS-Ziele und relative Pfade, auch als einzelner URL-Reading-Platzhalter. Alle Frames erhalten die feste Sandbox <code>allow-scripts</code> ohne Originfreigabe, Popups oder Topnavigation, ohne Seiten-Referrer. Anbieter-/Browserregeln wie X-Frame-Options, CSP, Mixed Content oder benötigte Storage-Rechte können Einbettungen weiterhin blockieren. Für OpenStreetMap den HTML-Einbettungscode mit <code>/export/embed.html</code> verwenden. CSS-<code>url()</code> und <code>@import</code> bleiben mit lokalen/HTTP-/HTTPS-URLs offen; importierte Inhalte und ihre weiteren Ressourcen werden nicht durch Positivliste/z-index-Prüfung geprüft. Nur vertrauenswürdige Styles verwenden. | |||
<code>data-value="{{Device:power|int}}"</code> und <code>data-state="{{Device:state}}"</code> setzen Livewerte als sicheren Attributtext für CSS-Selektoren; kein HTML. <code>data-cms-*</code> bleibt intern reserviert, außer <code>data-cms-class</code>. Sprungmarken <code>#id</code> und <code>:target</code> wirken widgetlokal, ohne den CMS-Seitenrouter zu verändern. | |||
Numerische Reading-Platzhalter sind in Inline-Styles möglich, etwa <code>style="width:{{MeinElch:state_batteryChargeLevel|int}}%;"</code>. Erlaubte Filter: <code>int</code>, <code>round(0)</code> bis <code>round(6)</code>. Kartenkoordinaten können als <code>marker={{MeinElch:location_latitude}}%2C{{MeinElch:location_longitude}}</code> im Querystring der Einbettungs-URL stehen. Zahlen und Koordinatengrenzen werden bei jeder Anzeige geprüft; ungültige Werte zeigen einen Hinweis statt CSS oder Kartenquelle zu setzen. Domain/Pfad bleiben fest. <code>scroll-behavior:smooth</code> ist erlaubt. Der <code>map</code>-Filter akzeptiert <code>on=An</code> und <code>on:An</code>. | |||
<pre><nowiki><img src="{{MeinElch:vehicle_images_exteriorImageUrl}}" alt="Fahrzeug" width="100%"></nowiki></pre> | |||
Bildquellen und Links dürfen lokale Pfade oder HTTP-/HTTPS-URLs sein. Ein einzelner ungefilterter Reading-Platzhalter als gesamter <code>src</code>- oder <code>href</code>-Wert wird bei jeder Anzeige aufgelöst und erneut geprüft. Ungültige oder fehlende URLs erzeugen einen sichtbaren Hinweis statt einer Anfrage. Externe Bilder kontaktieren ihren Anbieter ohne Seiten-Referrer; Links in neuen Tabs dürfen den CMS-Tab nicht steuern. Keine <code>javascript:</code>-, <code>data:</code>- oder protokollrelativen URLs. | |||
=== Lokale Fahrzeugkarte (ab 1.11.0) === | |||
<pre><nowiki><div id="volvo-map" data-map="vehicle" data-latitude="{{MeinElch:location_latitude}}" data-longitude="{{MeinElch:location_longitude}}" data-zoom="16" style="width:100%;height:175px"></div></nowiki></pre> | |||
Die lokal ausgelieferte Leaflet-Karte zeigt ein weißes Auto an den Live-Koordinaten. Ein Standortwechsel zentriert die Karte; unveränderte Readings erhalten Zoom und Kartenausschnitt. Zoom 2–19, Standard 16. Ungültige/fehlende Koordinaten und Kachelfehler werden sichtbar gemeldet. Kartenkacheln kommen weiterhin extern von OpenStreetMap; die Kachelanfragen übertragen den dargestellten Bereich an den Anbieter. Die Karte ist nicht offline. | |||
== Assetmanager: gemeinsame Bilder und Dokumente == | == Assetmanager: gemeinsame Bilder und Dokumente == | ||
| Zeile 371: | Zeile 564: | ||
* Ganze Ordner werden nicht per Drop importiert. | * Ganze Ordner werden nicht per Drop importiert. | ||
* Identische Dateien können wiederverwendet werden und bleiben dann gegebenenfalls in ihrem bisherigen Ordner. | * Identische Dateien können wiederverwendet werden und bleiben dann gegebenenfalls in ihrem bisherigen Ordner. | ||
* Eine Assetsuche ist in Version 1. | * Eine Assetsuche ist in Version 1.9.0 noch nicht enthalten. | ||
=== Dateidetails und Aktionen === | === Dateidetails und Aktionen === | ||
| Zeile 385: | Zeile 578: | ||
* '''Löschen''' erfordert eine Bestätigung und ist bei vorhandenen Verwendungen gesperrt. | * '''Löschen''' erfordert eine Bestätigung und ist bei vorhandenen Verwendungen gesperrt. | ||
* Ordner lassen sich nur löschen, wenn sie leer sind. | * 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. | '''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. | ||
| Zeile 433: | Zeile 658: | ||
* Aktualisierung alle fünf Minuten; Abfragecache 30 Sekunden. | * Aktualisierung alle fünf Minuten; Abfragecache 30 Sekunden. | ||
Seit 1.10.0 werden DbLog- und FileLog-Verläufe sowie die Erkennung protokollierter | |||
Readings in separaten Hintergrundprozessen abgefragt. FHEMs Hauptschleife wartet | |||
nicht auf die Abfrage; Gerätebedienung und Automatisierungen können weiterlaufen. | |||
Identische laufende Anfragen werden zusammengefasst. Höchstens vier Worker | |||
arbeiten gleichzeitig; insgesamt sind bis zu 32 laufende oder wartende Aufträge | |||
vorgesehen. Ein Worker hat ein Zeitlimit von 20 Sekunden. | |||
Das Diagramm zeigt einen Ladezustand; Fehler und Zeitüberschreitungen bleiben | |||
sichtbar. Ohne verfügbare Hintergrundverarbeitung gibt es einen Fehler statt | |||
einer blockierenden Ersatzabfrage. CPU-, Datenbank- und Datenträgerlast entfallen | |||
dadurch nicht; bei großen Datenmengen bleiben passende Zeiträume und eine | |||
effiziente Aufzeichnung wichtig. | |||
== Updates == | == Updates == | ||
Aktuelle Version vom 14. November 2026, 23:23 Uhr
| FHEMCMS – fhem-cms | |
|---|---|
| Zweck / Funktion | |
| Browserbasierte Bedienoberfläche mit grafischem Seiteneditor, Widgets, Live-Werten und Assetmanager. | |
| Allgemein | |
| Typ | Inoffizielles Modul; Installation aus externer Updatequelle. |
| Aktuelle stabile Version | 1.11.0 |
| 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.11.0 und das aktuelle Seitenformat Schema 5. Das ausführliche, bebilderte GitHub-Handbuch enthält zusätzliche Beispiele und Widgetaufnahmen.
Neu in 1.11.0: VolvoConnect-Fahrzeugwidget mit Kompakt-/Vollansicht und anpassbaren Detailkarten, Solar und Energiefluss mit Ertragskarten, einheitliches Widgetdesign, bessere Safari-/Mobilansicht, Geräte zuerst hinzufügen, diskrete Set-Auswahl, breite Dialoge und geprüfte HTML/SVG/CSS-Einbettungen. Die Vorschau zeigt kein Bearbeitungsraster; Liveupdates erhalten die Scrollposition. Das Fahrzeugwidget setzt ausschließlich das Modul VolvoConnect voraus; siehe die bebilderte Anleitung mit Modulinstallation.
Seit Version 1.10.0: Die zentrale Seite
/fhem/fhem-cms/admin.html listet CMS-Devices und getrennt davon
verwaiste CMS-Dateistrukturen. Erst nach attr <CMS> adminMenu 1
fuehrt im Dateimenue des jeweiligen CMS
Globale FHEM-CMS Administration dorthin. Checkbox-Auswahl und die
Bestaetigung DELETE erlauben Purge mit anschliessendem Delete
(nur bei erfolgreichem Purge) bzw. separat die Bereinigung verwaister Daten.
Konfiguration, Entwurf, Sicherungen und Medien werden unwiderruflich entfernt.
Fremde Dateien und Symlinks bleiben gesperrt. Es gelten FHEMWEB-Rechte und
die konfigurierte CSRF-Einstellung: Bei explizitem csrfToken none
entfaellt die Tokenpruefung, andernfalls bleibt sie erforderlich.
Kein automatisches Backup und kein globales save.
Nach vollstaendig erfolgreicher Loeschung laedt die Seite automatisch neu.
Bei Fehlern und Teilerfolgen bleiben die Einzelergebnisse sichtbar.
CMS oeffnen steht als rechtsbuendiger Button in der jeweiligen CMS-Zeile.
Nach Updates die Seite neu laden; versionierte Asset-URLs vermeiden alte Styles und Skripte
aus dem Browsercache.
Ohne Attribut oder bei adminMenu 0 fehlt der Menuepunkt.
Nach Attributaenderung die CMS-Seite neu laden. Dies steuert nur den
Menueeintrag; direkte Zugriffe unterliegen weiterhin den FHEMWEB-Rechten.
Beim Menueaufruf uebernimmt die Administration das aktuelle Theme, das
Seitenhintergrundbild und die Liquid-Glass-Werte des aufrufenden CMS.
Direktaufrufe ohne Darstellungskontext bleiben im dunklen Standardtheme.
Seit Version 1.10.0: Magic verwendet das mitgelieferte Strandfoto als Hintergrund aller erzeugten Seiten, auch der Startseite. Das Bild liegt danach als normales Medium im jeweiligen CMS und kann ueber die Seiteneinstellungen ersetzt oder entfernt werden. Leere Seiten und Seiten aus dem gefuehrten Einrichtungsassistenten starten ohne Hintergrundbild. Bestehende Seiten werden nicht automatisch geaendert.
Neu in 1.10.0: Widgets und Seiten duplizieren, wiederverwendbare Widgetvorlagen, direktes Loeschen im Entwurf, aufgabenbezogene Widgetdialoge mit Geraete-/Reading-Vorschlaegen, konsistente Statusfarben, DbLog-Abfragen im Hintergrund sowie der verbesserte Einrichtungsassistent und die globale Administration.
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.
Live-Werte: WebSocket empfohlen, nicht erforderlich
Das CMS nutzt HTTP-Anfragen zum Laden und Speichern sowie zum Senden von
Gerätebefehlen. Für zeitnahe Wertänderungen öffnet es zusätzlich eine eigene
WebSocket-Verbindung zum FHEMWEB-Inform-Endpunkt. Bei HTTPS verwendet es
wss://, bei HTTP ws://.
WebSockets sind keine Pflichtvoraussetzung. Ohne nutzbare WebSocket-Verbindung bleibt die Oberfläche bedienbar; Gerätewerte werden per HTTP-Polling im 30-Sekunden-Takt nachgelesen. WebSocket-Ereignisse lösen ein früheres Nachladen aus; das regelmäßige Polling bleibt zusätzlich aktiv.
Dieses Polling ist nicht das FHEMWEB-Longpoll-Verfahren. Das CMS verwendet keinen eigenen Longpoll-Transport. Eine vorhandene Longpoll-Einstellung allein ist daher kein Grund, FHEMWEB für das CMS umzustellen: Ohne WebSocket arbeitet es mit dem beschriebenen HTTP-Polling weiter.
Für möglichst unmittelbare Aktualisierungen muss ein vorgeschalteter Reverse
Proxy WebSocket-Upgrades und langlebige Verbindungen zum FHEMWEB-Endpunkt
weiterleiten. Im Browser zeigt der Netzwerkbereich unter WS bei erfolgreichem
Verbindungsaufbau den Status 101 Switching Protocols. Fehlt diese
Verbindung, zuerst Proxy, Anmeldung und Verbindung prüfen; nicht den
FHEMWEB-Zugriffsschutz abschalten.
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=editschaltet die Ansicht um, ist aber keine Berechtigungsprüfung.- Das FHEM-CMS ist bewusst kein klassisches Mehrbenutzer-CMS, sondern ein leichtgewichtiges Frontend, um schnell FHEM-Oberflächen und redaktionelle Texte zu erstellen. Eigene CMS-Konten, Rollen und persönliche Entwürfe gehören deshalb nicht zum Kernumfang.
- Alle über FHEMWEB berechtigten Bearbeiter arbeiten am selben CMS-Datenbestand. Gleichzeitige Bearbeitungen können zu Konflikten führen; Anmeldung und Zugriffsschutz bleiben Aufgabe von FHEMWEB.
- 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.
Empfehlung für Live-Werte: Ermögliche WebSocket-Verbindungen zum
FHEMWEB-Inform-Endpunkt; das CMS baut sie selbst auf. Ein Reverse Proxy muss
WebSocket-Upgrades und langlebige Verbindungen weiterleiten.
Nach dem Öffnen des CMS kannst du im Browser unter Netzwerk → WS
den Verbindungsaufbau prüfen (101 Switching Protocols).
Keine Pflichtvoraussetzung: Ohne WebSocket bleibt das CMS bedienbar
und liest Gerätewerte alle 30 Sekunden per HTTP-Polling neu ein.
Dies ist kein FHEMWEB-Longpoll; eine vorhandene Longpoll-Einstellung allein
muss für das CMS nicht umgestellt werden.
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. Für Temperatur-Readings, die in DbLog oder FileLog protokolliert werden, ergänzt der Assistent ein Verlaufsdiagramm; DbLog wird bevorzugt. Ohne nachgewiesene Protokollierung wird kein Diagramm angelegt. Der Assistent veröffentlicht nichts; Bedienelemente können reale Geräte steuern.
Seit Version 1.10.0: Temperaturvorschlaege setzen einen gueltigen numerischen Istwert voraus. Eine gepunktete Linie unter dem Spinner zeigt die erledigten Einrichtungsschritte. Die DbLog-Pruefung nutzt nur die gespeicherten Readings statt eines zusaetzlichen Jahresverlaufs; auch aeltere Daten gelten als Nachweis. Abfragefehler bleiben sichtbar und verhindern die automatische Erstellung.
Die folgenden Schritte beschreiben den manuellen Ausbau mit leerer Startseite oder bei einer bestehenden Einrichtung:
- Öffne am CMS-Device CMS starten.
- Wähle Einfügen → Widget hinzufügen → Wert.
- Suche ein vorhandenes FHEM-Device und wähle dessen gewünschtes Reading.
- Trage einen Titel und gegebenenfalls eine Einheit ein, beispielsweise „Außentemperatur“ und „°C“.
- Bestätige mit Speichern.
- Verschiebe das Widget am Punktgriff und ändere seine Größe am Griff unten rechts.
- Ergänze bei Bedarf ein Textwidget als Überschrift oder Einleitung.
- Kontrolliere den Entwurf unter Ansicht → Vorschau und in der Geräte-Vorschau.
- Wähle Datei → Entwurf veröffentlichen.
- Ö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. Speichert ein anderer Bearbeiter zwischenzeitlich, weist die Versionsprüfung einen veralteten Speicherversuch zurück, statt den neueren Stand zu überschreiben. Lade bei einem Konflikt den aktuellen Zustand neu und übernimm deine Änderungen erneut. Eine Bearbeitungssperre oder Anzeige, wer gerade bearbeitet, gibt es nicht.
| 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.
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.
- Seit Version 1.10.0: Eine Seite kann mit Widgets und Layout dupliziert und als Entwurf gespeichert werden; die Live-Seite bleibt unverändert.
- Seit Version 1.10.0: Das X am Widget entfernt dieses nach Bestätigung direkt aus dem Entwurf; die veröffentlichte Seite bleibt zunächst unverändert.
- 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.
Ansicht → 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.
Einfügen enthält Widget hinzufügen, Gerät hinzufügen und Widget-Vorlagen. Die freigegebene globale FHEM-CMS Administration steht unter Bearbeiten. Ansicht → Raster anzeigen merkt die letzte Auswahl dauerhaft pro CMS im verwendeten Browser, auch für spätere Besuche; auf anderen Geräten gilt die dortige Auswahl.
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. Seit Version 1.9.0 (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.
Seit Version 1.9.0 (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
Konfigurationsdialoge (ab 1.11.0): Alle Widgettypen verwenden dieselbe Desktopbreite bis 1100 Pixel, auf kleinen Bildschirmen responsiv. Die Höhe folgt dem Inhalt; lange Formulare bleiben scrollbar. Geräte- und Medienauswahldialoge behalten eigene Größen. Tabellen-Einheiten und Vorschläge stehen über die volle Breite in einer eigenen Zeile unter den übrigen Feldern, im Ein- und Mehr-Device-Modus.
Widget-IDs (ab 1.11.0): Schema-5-Widgets besitzen CMS-weit eindeutige IDs, auch nach Widget-/Seitenkopien und Vorlagenübernahme. Bestehende Duplikate werden beim nächsten Entwurfsspeichern oder Veröffentlichen eindeutig gemacht, ohne Inhalte, Raster oder Seitenlinks zu verlieren. Lesen allein verändert keine Dateien. Bisher kollidierende Widgets können zwischen Seiten verschoben werden; die Live-Konfiguration bleibt bis zur Veröffentlichung erhalten.
Gerät zuerst hinzufügen (ab 1.11.0)
Unter Einfügen → Gerät hinzufügen zuerst nach Name, Alias, Typ oder Raum suchen und ein Gerät wählen. Danach werden passende Widgets anhand seiner Readings und Set-Angebote vorgeschlagen; Thermostatkanäle werden berücksichtigt. Ein bloßes Thermometer erhält keinen Thermostat- oder Slider-Vorschlag. Textbaustein und Freies HTML stehen immer bereit, Diagramm nur bei bestätigten geloggten numerischen Readings. Prüfungsfehler bleiben sichtbar; über Gerät ändern ist eine erneute Prüfung möglich.
Nach der Widgetwahl öffnet sich der gewohnte Konfigurationsdialog mit änderbaren Vorgaben. Erst Speichern schreibt den Entwurf; Abbrechen kehrt zur Vorschlagsliste zurück. Geräteauswahl und Abbruch speichern oder schalten nichts. Widget hinzufügen bleibt unverändert verfügbar.
Wartungsbefehle für Batteriewechsel, Aufwecken oder Werksreset ergeben keinen Tastervorschlag. Schalter benötigen angebotene An-/Aus-Befehle und einen passenden on- oder off-Status. Slider und Auswahllisten verlangen zusätzlich ein zuordenbares Statusreading. Die automatische Auswahl ist bewusst zurückhaltend; eigene Zuordnungen bleiben über Widget hinzufügen möglich.
Verfügbare Widgets
Neu ab 1.11.0: Wert auswählen zeigt diskrete Set-Angebote wie mode:auto,eco,boost als Dropdown oder kompakte Buttons. Optionale Anzeigenamen machen technische Werte lesbar, etwa „Sparbetrieb“ für eco; gesendet bleibt der technische Wert. Gerät, Befehl und optionales Statusreading lassen sich im Standarddialog einstellen. Der Typ erscheint auch bei Gerät hinzufügen, wenn passende Set-Wertelisten vorhanden sind. Slider- und Freitextdeklarationen sind keine diskreten Listen. Nur in der Ansicht werden aktuell angebotene Befehle/Werte gesendet; während einer Anfrage sind die Bedienelemente gesperrt, Fehler bleiben sichtbar. Im Editor wird nicht geschaltet.
| 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. |
| Wert auswählen | Diskrete Set-Werte als Dropdown oder kompakte Buttons mit optionalen Anzeigenamen bedienen. |
| 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. |
| Solar und Energiefluss | PV, Haus, Batterie und Netz mit optionalen Tages-/Gesamterträgen; nur zugeordnete Messwerte anzeigen. |
| VolvoConnect | Fahrzeug-Kompaktkachel mit Info-Popup oder eingebettete Vollansicht; ausschließlich zusammen mit dem FHEM-Modul VolvoConnect. |
| 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.
VolvoConnect: Fahrzeugwidget und Modul
Das VolvoConnect-Widget funktioniert ausschließlich mit dem FHEM-Modul VolvoConnect aus stapetz/fhem-modules. Es ersetzt weder das Modul noch dessen Volvo-Anmeldung und verbindet sich nicht selbst mit der Volvo-API.
Zuerst das Modul nach der Installations- und Betriebsanleitung einrichten. Danach unter Einfügen → Widget hinzufügen → VolvoConnect das zugehörige Device wählen; Readingnamen und Gruppen werden automatisch übernommen. Im Widgetdialog erklärt das Informationssymbol neben dem Modulhinweis die Einrichtung.
Die kleine Kachel zeigt Akkustand, Reichweite und Verbindungsstatus. Das Informationssymbol öffnet die Fahrzeugdetails, das Aktionssymbol die verfügbaren Fahrzeugbefehle. Bei ausgeschaltetem Zeige Detaildaten im Popup erscheinen die Detailkarten direkt im Widget. Im Editor lassen sich Karten über Anordnung bearbeiten verschieben, skalieren, ein-/ausblenden und automatisch anordnen; einzelne Readings sind ebenfalls schaltbar, ausgenommen die festen Energiewerte und der Verbindungsstatus. Übernehmen speichert im CMS-Entwurf und lässt das Detailfenster offen. Erst die CMS-Veröffentlichung übernimmt die Änderung in die Liveansicht.
Die bebilderte GitHub-Wiki-Anleitung zeigt Kompakt- und Vollansicht und beschreibt Modulinstallation, Widgetbedienung und Grenzen. Fahrzeugaktionen können reale Auswirkungen haben; nur bewusst auslösen. Keine VIN, Zugangsdaten oder Standortdaten veröffentlichen.
Geräte und Befehle richtig zuordnen
Devicewechsel in Tabellen (ab 1.11.0): Die Geräteauswahl lädt die Readings frisch aus FHEM und belegt das Reading neu vor, statt die vorherige manuelle Auswahl zu übernehmen. Dies gilt für das gemeinsame Device sowie einzelne Mehr-Device-Zeilen. Eigene Bezeichner bleiben erhalten; Abbrechen speichert nichts.
Automatische Tabellenbezeichner (ab 1.11.0): Ohne eigene Beschriftung wird bei Werten aus einem Device der Readingname angezeigt, bei mehreren Devices Gerätename: Readingname (nicht der Alias). Maßgeblich sind die tatsächlichen Quellen, nicht der Dialogmodus. Der leere Bezeichner zeigt die Vorgabe als Platzhalter und passt sie bei Quellen-/Readingwechsel sowie Hinzufügen/Entfernen an. Eigene Bezeichner bleiben beim Speichern und Neuladen erhalten. Das Leeren des Feldes aktiviert wieder die automatische Beschriftung.
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 gegen Positivlisten geprüft und bereinigt. Seit 1.11.0 sind Kommentare, passive Struktur, Flex/Grid, sichere Links/Bilder, statisches SVG und Iframes erlaubt. CSS hat eine Positivliste für Eigenschaften, Funktionen und At-Regeln; moderne Selektoren (:hover, :has(), Attributselektoren), Variablen, Gradienten, Filter und Animationen bleiben möglich. Alle Positionierungsarten inklusive fixed bleiben auf die Kachel begrenzt; z-index maximal 100 (nur ganze Zahlen/auto). Unbekannte CSS-Eigenschaften, :host, Skripte im eigenen HTML, Eventhandler, Formulare und aktive SVG-Inhalte bleiben gesperrt.
Iframes haben keine Anbieter-/Hostliste: beliebige HTTP-/HTTPS-Ziele und relative Pfade, auch als einzelner URL-Reading-Platzhalter. Alle Frames erhalten die feste Sandbox allow-scripts ohne Originfreigabe, Popups oder Topnavigation, ohne Seiten-Referrer. Anbieter-/Browserregeln wie X-Frame-Options, CSP, Mixed Content oder benötigte Storage-Rechte können Einbettungen weiterhin blockieren. Für OpenStreetMap den HTML-Einbettungscode mit /export/embed.html verwenden. CSS-url() und @import bleiben mit lokalen/HTTP-/HTTPS-URLs offen; importierte Inhalte und ihre weiteren Ressourcen werden nicht durch Positivliste/z-index-Prüfung geprüft. Nur vertrauenswürdige Styles verwenden.
data-value="Vorlage:Device:power" und data-state="Vorlage:Device:state" setzen Livewerte als sicheren Attributtext für CSS-Selektoren; kein HTML. data-cms-* bleibt intern reserviert, außer data-cms-class. Sprungmarken #id und :target wirken widgetlokal, ohne den CMS-Seitenrouter zu verändern.
Numerische Reading-Platzhalter sind in Inline-Styles möglich, etwa style="width:Vorlage:MeinElch:state batteryChargeLevel%;". Erlaubte Filter: int, round(0) bis round(6). Kartenkoordinaten können als marker=Vorlage:MeinElch:location latitude%2CVorlage:MeinElch:location longitude im Querystring der Einbettungs-URL stehen. Zahlen und Koordinatengrenzen werden bei jeder Anzeige geprüft; ungültige Werte zeigen einen Hinweis statt CSS oder Kartenquelle zu setzen. Domain/Pfad bleiben fest. scroll-behavior:smooth ist erlaubt. Der map-Filter akzeptiert on=An und on:An.
<img src="{{MeinElch:vehicle_images_exteriorImageUrl}}" alt="Fahrzeug" width="100%">
Bildquellen und Links dürfen lokale Pfade oder HTTP-/HTTPS-URLs sein. Ein einzelner ungefilterter Reading-Platzhalter als gesamter src- oder href-Wert wird bei jeder Anzeige aufgelöst und erneut geprüft. Ungültige oder fehlende URLs erzeugen einen sichtbaren Hinweis statt einer Anfrage. Externe Bilder kontaktieren ihren Anbieter ohne Seiten-Referrer; Links in neuen Tabs dürfen den CMS-Tab nicht steuern. Keine javascript:-, data:- oder protokollrelativen URLs.
Lokale Fahrzeugkarte (ab 1.11.0)
<div id="volvo-map" data-map="vehicle" data-latitude="{{MeinElch:location_latitude}}" data-longitude="{{MeinElch:location_longitude}}" data-zoom="16" style="width:100%;height:175px"></div>
Die lokal ausgelieferte Leaflet-Karte zeigt ein weißes Auto an den Live-Koordinaten. Ein Standortwechsel zentriert die Karte; unveränderte Readings erhalten Zoom und Kartenausschnitt. Zoom 2–19, Standard 16. Ungültige/fehlende Koordinaten und Kachelfehler werden sichtbar gemeldet. Kartenkacheln kommen weiterhin extern von OpenStreetMap; die Kachelanfragen übertragen den dargestellten Bereich an den Anbieter. Die Karte ist nicht offline.
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.
Seit 1.10.0 werden DbLog- und FileLog-Verläufe sowie die Erkennung protokollierter Readings in separaten Hintergrundprozessen abgefragt. FHEMs Hauptschleife wartet nicht auf die Abfrage; Gerätebedienung und Automatisierungen können weiterlaufen. Identische laufende Anfragen werden zusammengefasst. Höchstens vier Worker arbeiten gleichzeitig; insgesamt sind bis zu 32 laufende oder wartende Aufträge vorgesehen. Ein Worker hat ein Zeitlimit von 20 Sekunden. Das Diagramm zeigt einen Ladezustand; Fehler und Zeitüberschreitungen bleiben sichtbar. Ohne verfügbare Hintergrundverarbeitung gibt es einen Fehler statt einer blockierenden Ersatzabfrage. CPU-, Datenbank- und Datenträgerlast entfallen dadurch nicht; bei großen Datenmengen bleiben passende Zeiträume und eine effiziente Aufzeichnung wichtig.
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.