FHEMWEB: Unterschied zwischen den Versionen

Aus FHEMWiki
K (Forumsbeiträge verlinkt)
K (Hinweis auf zwei Beiträge im Wiki, die sich mit HTTPS beschäftigen, ergänzt)
 
(25 dazwischenliegende Versionen von 10 Benutzern werden nicht angezeigt)
Zeile 2: Zeile 2:
|ModPurpose=Standard Fhem-Webfrontend
|ModPurpose=Standard Fhem-Webfrontend
|ModType=h
|ModType=h
<!-- |ModCategory= (noch?) nicht verwendet -->
<!-- |ModCmdRef=  wird automatisch generiert, sofern
der Seitentitel dem Modulnamen entspricht. Bei
alternativer Schreibweise (z.B.: Modulname beginnt
mit Kleinbuchstaben) muss ModCmdRef=modulName
angegeben werden, anderenfalls werden ungültige Links erzeugt.
-->
|ModForumArea=Frontends
|ModForumArea=Frontends
|ModTechName=01_FHEMWEB.pm
|ModTechName=01_FHEMWEB.pm
|ModOwner=rudolfkoenig ([http://forum.fhem.de/index.php?action=profile;u=8 Forum] / [[Benutzer Diskussion:Rudolfkoenig|Wiki]])
|ModOwner=Rudolf König/rudolfkoenig ({{Link2FU|8|Forum}}/[[Benutzer Diskussion:Rudolfkoenig|Wiki]])
}}
}}
{{Randnotiz|RNText=Eine FHEM-Installation kann mehrere FHEMWEB-Definitionen (mit je einem anderen Port) enthalten. Dies kann genutzt werden, um
* für andere Styles als f18 unterschiedliche Darstellungen für verschiedene Bildschirmgrößen zu erreichen, oder
* verschiedenen Darstellungen für mehrere Benutzer oder Anwendungsbereiche zu ermöglichen.}}
[[FHEMWEB]] ist das Standard Webfrontend von Fhem. Es implementiert auch einen einfachen Webserver (optional mit Basic-Auth und HTTPS). Aus historischen Gründen wird es auch als [[PGM2]] bezeichnet. FHEMWEB läuft voraussetzungslos.


[[FHEMWEB]] ist das Standard Webfrontend von Fhem, es implementiert auch einen einfachen Webserver (optional mit Basic-Auth und HTTPS). Aus historischen Gründen wird es auch als [[PGM2]] bezeichnet.
== Anpassungen ==
=== ''Themes'' ===
FHEMWEB kennt keine Themes im strengen Sinne. Man kann allerdings mit drei Dateien das Aussehen des Frontends anpassen.  


== Voraussetzungen ==
Zuerst ist ein Prefix zu vergeben, der das Theme beschreiben soll. Hier möge ''tufte'' als Beispiel dienen (siehe diesen {{Link2Forum|Topic=81637|Message=737465}}). Mit dem Attribut
keine.
:<code>attr <FHEMWEB-name> stylesheetPrefix tufte</code>
würde man das entsprechende Theme auswählen. Dieses Theme wiederum setzt voraus, dass sich im Verzeichnis /opt/fhem/www/pgm2 drei Daten mit folgenden Namen befinden:
* tuftestyle.css: Diese Datei steuert das Layout des Frontends.
* tuftesvg_style.css: Diese Datei steuert das Layout bei der Einbindung der SVG-Grafiken.
* tuftesvg_defs.svg: Diese Datei steuert das Layout des SVG-Grafikinhaltes.


== Anwendung ==
=== Define ===
siehe commandref.
=== Attribute ===
=== Attribute ===
siehe commandref.
FHEMWEB besitzt mehrere Attribute, die das Aussehen des Frontends verändern können und im Folgenden näher beschrieben werden.


== Anwendungsbeispiele ==
=== devStateIcon ===
=== devStateIcon ===
Das Attribut devStateIcon dient dazu, das anzuzeigende Icon eines Devices in Abhängigkeit vom Device-Status (STATE) in der Raumübersicht (room) festzulegen. Zudem kann man einstellen, was bei einem Klick auf das Icon geschieht. Details siehe [[devStateIcon]]
=== sortby ===
=== sortby ===
* Bespiel zur Sortierung mit sortby: {{Link2Forum|Topic=11940|Message=70664}
Mit sortby können Elemente im Frontend sortiert werden. Es gibt zwei Beiträge zur Sortierung mit sortby im Forum: {{Link2Forum|Topic=11940|Message=70664}} und {{Link2Forum|Topic=26733|Message=197127}}
 
=== title ===
Mit diesem Attribut kann der Titel der Seite gesetzt werden. Dadurch wird das globale Attribut "title" überschrieben, das ansonsten für alle FHEMWEB Instanzen gilt.
Im Forum gibt es ein Beispiel für einen dynamischen Seitentitel: {{Link2Forum|Topic=48668|Message=403260}}
 
=== menuEntries ===
Mit menuEntries können weitere Einträge im Menü aufgenommen werden. Beispielsweise kann man so den Backup-Befehl einbinden. Unter dem Link [[Backup#Backup_manuell_ausf.C3.BChren_.28Weboberfl.C3.A4che.29|Backup-Befehl in FHEM-Menü einbinden]] ist dies näher erläutert.
 
=== webCmd ===
=== webCmd ===
== Links ==
Durch Doppelpunkte getrennte Auflistung von Befehlen, die für FHEMWEB gelten sollen (funktioniert nicht mit smallscreen).
* Begriffserklärung zur Unterscheidung von eventMap, devStateIcon und webCmd mit Beispielen: {{Link2Forum|Topic=12080|Message=71651}}
 
=== widgetOverride ===
Mit diesem Attribut kann man Bedienelemente, die vom Modulautor eigentlich vorgesehen waren, verändern.  Dies gilt insbesondere für set-Befehle, mit denen Parameter verändert werden.
 
widgetOverride kennt mindestens zwei Parameter: Zuerst kommt der set-Befehl oder das webcmd, das überschrieben werden soll; dann ein Doppelpunkt und dann kommt das neu vorgesehene Bedienelement.
 
Beispiele:
* [[WifiLight#Color-Picker_aktivieren|Color-Picker]]
* [[EnOcean-FUD61NPN-Funk-Universal-Dimmaktor#Anzeige_eines_alternativen_Bedienelementes|knob]]
* usuzu (= universelle Zeitschaltuhr): {{Link2Forum|Topic=32660}}
* weitere [[FHEMWEB/Widgets]]
 
== Sicherheitsrelevante Anpassungen ==
=== csrfToken ===
FHEM hat mit der Version 5.8 eine Sicherheitsmaßnahme scharfgeschaltet, den csrfToken. Dieser Token wird bei jedem Neustart von FHEM neu gebildet.
Weitere Details finden sich im Wiki-Eintrag [[csrfToken-HowTo]]
 
=== apiWeb Instanz ===
Die apiWeb Instanz dient dazu, externe Zugriffe auf das FHEM System kontrolliert zu steuern.
Im Grunde wird nichts anderes gemacht, als eine zweite FHEM Webinstanz einzurichten, welche dann gesondert abgesichert wird.
 
Man legt sich hierfür eine FHEMWEB Instanz an:
 
<pre>
define apiWEB FHEMWEB 8088 global
attr apiWEB column Alarms: Apartment: Living: Bedroom: Kitchen: Sonos: Residents: Weather: Bathroom: Logs: Statistics: DashboardRoom: System: hidden: all:
attr apiWEB hiddenroom input,detail,save,Unsorted,Everything,CUL_HM,FS20,Commandref,style,Edit files,Select style,Logfile,Floorplans,Remote doc,FileLogs,Apartment,Bathroom,Bedroom,Kitchen,Living,Residents,System,Weather,Event monitor,NEW
attr apiWEB room hidden
attr apiWEB webname webhook
</pre>
 
Diese wird dann weiter mit Hilfe eines [[allowed]]-Devices abgesichert, in dem nur die tatsächlich benötigten Kommandos erlaubt werden und damit alle anderen nicht erlaubten (attr,define,get,set,...) automatisch nicht mehr zur Verfügung stehen:
<pre>
define allowedApiWEB allowed
attr allowedApiWEB allowedCommands set
attr allowedApiWEB allowedDevices Lampe1
attr allowedApiWEB validFor apiWEB
attr allowedApiWEB allowedIfAuthenticatedByMe 0
</pre>
 
Desweiteren ist dringend anzuraten, den Zugriff über TLS/SSL und HTTP Basic-Authentication weiter abzusichern. Nähere Informationen findet man hierzu in der {{Link2CmdRef|Anker=FHEMWEB}} unter dem Punkt HTTPS und in den Wiki-Beiträgen [[FHEM_mit_HTTPS_SSL-Zertifikat_und_eine_eigene_Zertifizierungsstelle]] und [[FHEMWEB_mit_Let's_Encrypt_Zertifikaten]].
 
Letztlich fehlt noch das entsprechende Attribut:
:<code>attr WEBhook HTTPS</code>


<!-- (Modulkategorie wird automatisch gesetzt) -->
Als nächstes aktivieren wir Benutzername+Passwort für den Zugriff. Die {{Link2CmdRef|Anker=allowed}} für allowed gibt auch hier unter dem Punkt basicAuth entsprechende Hinweise.


== Links ==
* Begriffserklärung zur Unterscheidung von [[eventMap]], [[devStateIcon]], [[webCmd]] und [[setList]] mit Beispielen in diesem {{Link2Forum|Topic=12080|LinkText=Forenthread}}
* [[Icons]]
* [[FHEMWEB/Widgets|FHEMWEB Widgets]]


[[Kategorie:FHEM Frontends]]
[[Kategorie:FHEM Frontends]]

Aktuelle Version vom 9. November 2023, 11:22 Uhr

FHEMWEB
Zweck / Funktion
Standard Fhem-Webfrontend
Allgemein
Typ Hilfsmodul
Details
Dokumentation EN / DE
Support (Forum) Frontends
Modulname 01_FHEMWEB.pm
Ersteller Rudolf König/rudolfkoenig (Forum /Wiki)
Wichtig: sofern vorhanden, gilt im Zweifel immer die (englische) Beschreibung in der commandref!
Info green.pngEine FHEM-Installation kann mehrere FHEMWEB-Definitionen (mit je einem anderen Port) enthalten. Dies kann genutzt werden, um
  • für andere Styles als f18 unterschiedliche Darstellungen für verschiedene Bildschirmgrößen zu erreichen, oder
  • verschiedenen Darstellungen für mehrere Benutzer oder Anwendungsbereiche zu ermöglichen.

FHEMWEB ist das Standard Webfrontend von Fhem. Es implementiert auch einen einfachen Webserver (optional mit Basic-Auth und HTTPS). Aus historischen Gründen wird es auch als PGM2 bezeichnet. FHEMWEB läuft voraussetzungslos.

Anpassungen

Themes

FHEMWEB kennt keine Themes im strengen Sinne. Man kann allerdings mit drei Dateien das Aussehen des Frontends anpassen.

Zuerst ist ein Prefix zu vergeben, der das Theme beschreiben soll. Hier möge tufte als Beispiel dienen (siehe diesen Beitrag). Mit dem Attribut

attr <FHEMWEB-name> stylesheetPrefix tufte

würde man das entsprechende Theme auswählen. Dieses Theme wiederum setzt voraus, dass sich im Verzeichnis /opt/fhem/www/pgm2 drei Daten mit folgenden Namen befinden:

  • tuftestyle.css: Diese Datei steuert das Layout des Frontends.
  • tuftesvg_style.css: Diese Datei steuert das Layout bei der Einbindung der SVG-Grafiken.
  • tuftesvg_defs.svg: Diese Datei steuert das Layout des SVG-Grafikinhaltes.

Attribute

FHEMWEB besitzt mehrere Attribute, die das Aussehen des Frontends verändern können und im Folgenden näher beschrieben werden.

devStateIcon

Das Attribut devStateIcon dient dazu, das anzuzeigende Icon eines Devices in Abhängigkeit vom Device-Status (STATE) in der Raumübersicht (room) festzulegen. Zudem kann man einstellen, was bei einem Klick auf das Icon geschieht. Details siehe devStateIcon

sortby

Mit sortby können Elemente im Frontend sortiert werden. Es gibt zwei Beiträge zur Sortierung mit sortby im Forum: Beitrag und Beitrag

title

Mit diesem Attribut kann der Titel der Seite gesetzt werden. Dadurch wird das globale Attribut "title" überschrieben, das ansonsten für alle FHEMWEB Instanzen gilt. Im Forum gibt es ein Beispiel für einen dynamischen Seitentitel: Beitrag

menuEntries

Mit menuEntries können weitere Einträge im Menü aufgenommen werden. Beispielsweise kann man so den Backup-Befehl einbinden. Unter dem Link Backup-Befehl in FHEM-Menü einbinden ist dies näher erläutert.

webCmd

Durch Doppelpunkte getrennte Auflistung von Befehlen, die für FHEMWEB gelten sollen (funktioniert nicht mit smallscreen).

widgetOverride

Mit diesem Attribut kann man Bedienelemente, die vom Modulautor eigentlich vorgesehen waren, verändern. Dies gilt insbesondere für set-Befehle, mit denen Parameter verändert werden.

widgetOverride kennt mindestens zwei Parameter: Zuerst kommt der set-Befehl oder das webcmd, das überschrieben werden soll; dann ein Doppelpunkt und dann kommt das neu vorgesehene Bedienelement.

Beispiele:

Sicherheitsrelevante Anpassungen

csrfToken

FHEM hat mit der Version 5.8 eine Sicherheitsmaßnahme scharfgeschaltet, den csrfToken. Dieser Token wird bei jedem Neustart von FHEM neu gebildet. Weitere Details finden sich im Wiki-Eintrag csrfToken-HowTo

apiWeb Instanz

Die apiWeb Instanz dient dazu, externe Zugriffe auf das FHEM System kontrolliert zu steuern. Im Grunde wird nichts anderes gemacht, als eine zweite FHEM Webinstanz einzurichten, welche dann gesondert abgesichert wird.

Man legt sich hierfür eine FHEMWEB Instanz an: 

define apiWEB FHEMWEB 8088 global
attr apiWEB column Alarms: Apartment: Living: Bedroom: Kitchen: Sonos: Residents: Weather: Bathroom: Logs: Statistics: DashboardRoom: System: hidden: all:
attr apiWEB hiddenroom input,detail,save,Unsorted,Everything,CUL_HM,FS20,Commandref,style,Edit files,Select style,Logfile,Floorplans,Remote doc,FileLogs,Apartment,Bathroom,Bedroom,Kitchen,Living,Residents,System,Weather,Event monitor,NEW
attr apiWEB room hidden
attr apiWEB webname webhook

Diese wird dann weiter mit Hilfe eines allowed-Devices abgesichert, in dem nur die tatsächlich benötigten Kommandos erlaubt werden und damit alle anderen nicht erlaubten (attr,define,get,set,...) automatisch nicht mehr zur Verfügung stehen: 

define allowedApiWEB allowed
attr allowedApiWEB allowedCommands set
attr allowedApiWEB allowedDevices Lampe1
attr allowedApiWEB validFor apiWEB
attr allowedApiWEB allowedIfAuthenticatedByMe 0

Desweiteren ist dringend anzuraten, den Zugriff über TLS/SSL und HTTP Basic-Authentication weiter abzusichern. Nähere Informationen findet man hierzu in der commandref/FHEMWEB unter dem Punkt HTTPS und in den Wiki-Beiträgen FHEM_mit_HTTPS_SSL-Zertifikat_und_eine_eigene_Zertifizierungsstelle und FHEMWEB_mit_Let's_Encrypt_Zertifikaten.

Letztlich fehlt noch das entsprechende Attribut:

attr WEBhook HTTPS

Als nächstes aktivieren wir Benutzername+Passwort für den Zugriff. Die commandref/allowed für allowed gibt auch hier unter dem Punkt basicAuth entsprechende Hinweise.

Links

Abgerufen von „http://wiki.fhem.de/w/index.php?title=FHEMWEB&oldid=38684“