FHEMApp ist eine Web-Application zur Steuerung deiner Smarthome Umgebung. Sie wurde als Frontend für den Einsatz unter FHEM(tm) entwickelt. FHEMApp ist für den Betrieb auf unterschiedlichen Betriebssystemen und Geräten optimiert. FHEMApp kann sehr einfach konfiguriert werden, ohne das dafür Programmierkenntnisse erforderlich sind.
Beispiel für eine Startseite in der Desktopansicht
Beispiel für Geräte in der Desktopansicht
Beispiel für Grafiken in der Desktopansicht
Beispiel für Konfiguration von Templates
Beispiel für Konfiguration von Sprachvariablen
Für den Einsatz von FHEMApp wird FHEM(tm) benötigt. Weitere Informationen zu FHEM findest du unter https://fhem.de/
Die Installation von FHEMApp erfolgt in FHEM. Hierfür erstellst du in FHEM über den folgenden Befehl ein fhemapp-Device.
define myapp fhemapp fhemapp4
Das fhemapp-Device ist für das Laden und Speichern der Konfigurationsdaten von FHEMApp zuständig und dient zudem für die Installation und Updates von FHEMApp.
Bei der Installation wird automatisch ein neuer Ordner in deiner FHEM Installation unter /opt/fhem/www/ erstellt. In diesem wird FHEMApp installiert. Weiterhin wird in deiner FHEM Installation unter /opt/fhem/conf/ eine Konfigurationsdatei abgelegt, die alle Einstellungen enthält. Für jedes fhemapp-Device wird dabei eine separate Konfigurationsdatei erstellt. Diese erthält den Name des fhemapp-Devices (z.B. myapp_config.fhemapp)
In FHEM können mehrere fhemapp-Devices definiert werden. Hinter jedem Device wird eine separate Konfiguration gespeichert. Dies ermöglicht die Betrieb von beliebig vielen FHEMApp-Instanzen. Beim Aufruf von FHEMApp kann dann auf die jeweilige Instanz verwiesen.
Beispiel für zwei unterschiedliche FHEMApp-Instanzen in FHEM
Der Aufruf von FHEMApp erfolgt grundsätzlich über die gleiche URL, über die auch FHEM erreichbar ist. Die URL muss wie folgt aufgebaut sein, damit die richtige Installation und Instanz von FHEMApp aufgerufen wird.
http(s)://<fhem_ip>:<fhem_port>/fhem/<fhemapp_verzeichnis>/index.html#/<fhemapp_instanz>
Beispiel zum Aufruf von FHEMapp
http://fhem:8083/fhem/fhemapp4/index.html#/myapp
Wenn FHEMApp auf einem separaten Web-Server betrieben wird, dann muss die URL mit #/<fhem_instanz>
enden.
Es können zusätzliche Parameter als Querystring in der URL angegeben werden. Diese sind u.a. beim Betrieb von FHEMApp auf einem separaten Web-Server nötig.
Important
Beim Betrieb von FHEMApp auf einem separaten Web-Server müssen die Verbidungsparameter protocol
, server
, port
und path
angegeben werden!
Parameter | Beschreibung | Beispiel |
---|---|---|
protocol | WEB Protokoll über das FHEM erreichbar ist | http oder https |
server | url bzw. IP-Adresse unter der FHEM erreichbar ist | fhem |
port | Port über den FHEM erreichbar ist | 8083 |
path | Pfad der FHEM Installation | fhem |
dark | Festlegen ob FHEMApp im dunklen Farbschema geöffnet wird (siehe auch Farbschema) | 1 |
lang | Sprache in der FHEMApp geöffnet wird | de, en, ... |
xhr | Umschaltung auf Longpoll wenn Browser kein websocket unterstützt | 1 |
loglevel | Detailgrad der Protokollierung für Fehleranalyse über die Browserkonsole. Ab dem loglevel 7 wird die Kopfzeile von FHEMApp umgeschaltet und ein Infosymbol angzeigt. Bei Klick auf das Infosymbol werden weitere Systeminformationen von FHEMApp angezeigt. (1=status, 2=error, 3=warnings, 4=infos, 5=all request to fhem, 6=received events from fhem, 7=details, 8=all received events from FHEM) | 1...8 |
Beispiel zum Aufruf von FHEMapp mit zusätzlichen Parametern
http://fhem:8083/fhem/fhemapp4/index.html#/myapp/?dark=1&lang=en
Für die Konfiguration deiner FHEMApp-Instanz(en) bietet die App einen separaten Bereich, in dem alle Einstellungen vorgenommen werden können. Nach dem Erstellen einer neuen Instanz gelangst du beim ersten Aufruf von FHEMApp direkt zu den Einstellungen.
Für den späteren Zugriff auf die Einstellungen kann man den Menüpunkt im Optionsmenü aktivieren. Alternativ kann man auch direkt über den entsprechenden URL-Pfad ...<fhemapp_instanz>/settings/
auf die Einstellungen zugreifen.
Nachdem du Einstellungen in FHEMApp angepasst hast, müssen diese gespeichert werden. Dies erfolgt über den Button zum Speichern oben rechts im Einstellungsfenster. Hier kannst du Änderungen seit dem letzten Speichern auch wieder rückgängig machen.
In den Einstellungen für die Kopfzeile kann die Anzeige für das Datum und die Uhrzeit vom FHEM Server in der Desktopansicht aktiviert werden. Es kann das Navigationsmenü in der Desktopansicht optional ausgeblendet werden und die Anzeige der aktuellen Seite für die mobile Ansicht aktiviert werden. Weiterhin kann ein Hintergrundbild für die Kopfzeile festgelegt werden. Die Verwendung des Farbfilters mit einer CSS Linear Gradient Definition ermöglicht ein Anpassung des Hintergrundbildes an das festgelegte Farbschema.
In FHEMApp werden zwei Farbschemen (dunkel und hell) unterstützt. Die einzelnen Farben können für beide Farbschemen wie im Abschnitt Farben beschrieben, angepasst werden. Beim Öffnen von FHEMApp wird das Farbschema (dunkel bzw. hell) aus den Einstellungen des Browsers bzw. des Betriebssystems verwendet. Zusätzlich kann das Farbschema wie folgt gesteuert werden.
- über den URL-Parameter
dark
(siehe auch zusätzliche URL-Parameter) - über ein FHEM Reading
- über das Optionsmenü (siehe auch Optionsmenü)
Wenn das Farbschema über den URL-Parameter dark
festgelegt wird, dann wird FHEMApp in diesem geöffnet und die Browsereinstellung bzw. Betriebssystemeinstellung ignoriert.
Wenn das Farbschema über ein FHEM Reading gesteuert wird, dann wird die Browerseinstellung bzw. Betriebssystemeinstellung und (sofern festgelegt) der URL-Parameter dark
ignoriert. Jede Änderung des FHEM Reading hat dann eine Umschaltung aller gerade geöffneten FHEMApp's zur Folge. Das festgelegte FHEM Reading wird auf seinen Wahrheitswert geprüft. Wenn dieses zutrifft, dann wird FHEMApp in das dunkle Farbschema geschaltet. Ansonsten wird FHEMApp in das helle Farbschema geschaltet.
Parameter | Beschreibung |
---|---|
reading | siehe Parameter reading |
value | siehe Parameter value |
Die Umschaltung des Farbschema über das Optionsmenü kann zur Laufzeit immer erfolgen, wird jedoch nicht gespeichert.
Beim Starten von FHEMApp kann eine bestimmte Seite aus dem Navigationsmenü geöffnet werden. Diese Seite wird jedoch nur dann angezeigt, wenn die URL beim Aufruf von FHEMApp keinen Verweis auf eine bestimmte Seite (z.B. ...#/myapp/devices/Räume->Wohnzimmer...
) enthält.
Durch Aktivierung der folgenden Optionen wird das Optionsmenü oben rechts in der Kopfleiste eingeblendet. Beispiel für Optionsmenü
Option | Beschreibung |
---|---|
Tag/Nacht-Modus | Umschaltung zwischen hellem und dunklem Farbschema |
Seite aktualisieren | Neuladen von FHEMApp auslösen. Diese Option ist im Normalfall nicht nötig. Sie kann jedoch im Einzelfall helfen, wenn Panels bei Longpoll-verbindungen nicht aktualisiert werden |
Einstellungen | Aktiviert direkten Zugriff auf die Einstellungen von FHEMApp über das Optionsmenü |
Updates | der Punkt "Aktualisierung" wird angezeigt, sobald ein Update für FHEMApp verfügbar ist. Die Funktion prüft das Reading update_available . Damit sind Updates von FHEMApp einfach und direkt über FHEMApp möglich. Nachdem ein Update ausgeführt wurde, wird automatisch auch ein Reload von FHEMApp ausgeführt |
Sprachen | ermöglicht die Umstellung der Sprache. Siehe hierzu auch den Abschnitt Sprachen |
Neben den festen Optionen können im Optionsmenü auch FHEM Befehle hinterlegt werden. Es können beliebig viele FHEM Befehle im Optionsmenü hinterlegt werden. Jeder Befehl kann mit einer individuellen Beschriftung und optional mehrsprachig (siehe auch Sprachen) sowie mit einem Icon versehen werden. Zudem muss das vollständige FHEM-Kommando angegeben werden.
Alle Geräte die du in FHEM eingebunden hast, können innerhalb von FHEMApp in Panels angezeigt und gesteuert werden. Jedes Panel enthält drei Bereiche. Jeder Bereich enthält verschiedene Elemente. Jedes Element kann mit Readings, Attributes oder Internals von FHEM Devices verknüpft und abhängig von deren Werten gesteuert werden. Konfigurationen können auch als Vorlagen gespeichert und für mehrere Panels verwendet werden. Panels können in beliebigen Gruppen (z.B. nach Räumen oder Geräteart) zusammengefasst und dann über die Navigationsleiste zur Anzeige gebracht werden.
- Bereich status im oberen Teil des Panels
- Bereich main im mittleren Teil des Panels
- Bereich info im unteren Teil des Panels
Über die Einstellungen in FHEMApp kannst du neue Panels erstellen. Nachdem du ein neues Panel mit einem eindeutigem Name erstellt hast, wählst du eine passende Vorlage aus und verbindest das Panel mit mindestens einem FHEM Device. Je nach Vorlage kann es auch sein, dass du mehrere FHEM Devices verbinden musst.
Beispiel für die Definition von Devices in einem Panel
Alternativ kannst du ein Panel auch ohne Verwendung einer Vorlage (Template) konfigurieren. Hier musst du die erweiterte Ansicht aktivieren und kannst nur alle Elemente des Panels manuell konfigurieren.
Wenn du bei Verwendung einer Vorlage einzelne Elemente nur für das aktuelle Panel anpassen möchtest, kannst du ebenfalls die erweiterte Ansicht aktivieren.
Die Konfiguration der Elemente in den verschiedenen Bereichen des Panels erfolgt nach einem einheitlichen Definitions-Schema.
reading:value:prop1:prop2:...
Jede Definition beginnt mit den beiden Parametern reading
und value
. Diese dienen dazu, das Element mit einem FHEM-Device zu verbinden und optional auf einen bestimmten Wert zu prüfen. Folgende Beispiele zeigen, wie der Parameter reading
verwendet werden kann.
Beispiel | Beschreibung |
---|---|
state |
liefert das FHEM Reading state |
state-ts |
liefert den Zeitstempel des FHEM Readings state |
a-alias |
liefert das FHEM Attribut alias |
i-NAME |
liefert das FHEM Internal NAME |
Wenn ein Panel mit mehreren FHEM-Devices verbunden wird, dann muss der Schlüssel für das Device vorangestellt werden.
Beispiel | Beschreibung |
---|---|
valve-state |
liefert das FHEM Reading state vom Device das mit dem Schlüssel valve im Panel definiert ist |
thermo-measured-temp-ts |
liefert den Zeistempel für das FHEM Reading measured-temp vom Device das mit dem Schlüssel thermo im Panel definiert ist. |
Eine Definition wird verwendet, wenn der Parameter value
zutrifft. Bei der Prüfung wird grundsätzlich zwischen Zahlen und Text unterschieden. Bei Zahlen gilt immer reading >= value. Bei Text wird geprüft, ob dieser im Reading enthalten ist. Weiterhin können Definitionen mit Hilfe von regular expression geprüft werden.
Beispiel | Beschreibung |
---|---|
temperature:12:... |
trifft zu wenn das Reading größer oder gleich 12 ist |
state:on:... |
trifft zu wenn das Reading den Text on enthält |
state:^on:... |
triff zu wenn das Reading mit dem Text on beginnt |
state:^(?!on):... |
trifft zu wenn das Reading nicht den Wert on hat |
state::... |
Es erfolgt keine weitere Prüfung. die Definition wird verwendet. |
Wenn ein Element mehrere Definitionen enthält, dann wird immer die erste zutreffende Definition verwendet. Nachfolgende Definitionen werden ignoriert. Deshalb muss die Reihenfolge der Definitionen beachtet werden.
Beispiel für eine Element Definition
Folgende Schreibweisen sind für Definitionen zulässig.
Im folgenden Beispiel wurde das Panel mit zwei FHEM Devices temp:thermostat_wohnen
und valve:heizung_wohnen
verbunden.
Definition | Erklärung |
---|---|
state::... |
Wird dem Reading kein Device vorangestellt, so wird immer das erste im Panel definierte Device verwendet. |
temp-state::... |
Es wird das Device verwendet, welches dem Reading vorangestellt ist. |
::text:mdi-check |
Das Element wird mit keinem Reading verbunden und es werden zwei Parameter für das Element übergeben |
true |
Das Element wird mit keinem Reading verbunden und für den erste Parameter der Definition wird der Wert true übergeben |
Ersetzungen bieten die Möglichkeit, Werte innerhalb von Element-Definitionen zurückzugeben und zu formatieren. Folgende Möglichkeiten für Ersetzungen gibt es.
Ersetzung | gibt den Wert vom Parameter reading |
---|---|
%s | als Text zurück |
%n() | als Ganzzahl zurück |
%n(2) | als Zahl mit 2 Nachkommastellen zurück |
%n(0,1) | als Ganzzahl mit einem Offset von +1 zurück |
%n(1,-1.5) | als Zahl mit einer Nachkommastelle und einem Offset von -1,5 zurück |
%d() | als Zeitstempel im gewählten Sprachschema zurück |
%d(time) | als Zeitwert im gewählten Sprachschema zurück |
%d(date) | als Datum im gewählten Sprachschema zurück |
%d({ "weekday"\: "long" }) | als Wochentag im gewählten Sprachschema zurück (siehe auch Datumsformatierung) |
Ersetzung | Beschreibung |
---|---|
%t(on) | gibt die Übersetzung für die Variable on an. (siehe auch Sprachen) |
%v | liefert den aktuellen Wert von Slidern oder Menüeinträgen |
\: | wird zur Ausgabe von : innerhalb von Element-Definitionen verwendet |
Beispiel | Reading | Ausgabe | Hinweis |
---|---|---|---|
state::%s |
on | on | |
temperature::%n(0) |
12.5 | 13 | |
desired-temp::%n(1,2) |
22.5 | 24,5 | Komma und tausender Trennzeichen abhängig vom Sprachschema |
state-ts::%d() |
2023-12-17 17:53:32 | 17.12.2023 17:53:32 | abhängig vom Sprachschema |
state-ts::%d(time) |
2023-12-17 17:53:32 | 17:53:32 | abhängig vom Sprachschema |
state-ts::%d(date) |
2023-12-17 17:53:32 | 17.12.2023 | abhängig vom Sprachschema |
state-ts::%d({ "weekday"\: "long" }) |
2023-12-17 17:53:32 | Sonntag | abhängig vom Sprachschema |
state::%t(on) |
on | an | wenn unter Sprachen für die Variable on im deutschen Sprachschema an hinterlegt wurde |
temp::Temperatur\: %n(1)°C |
18.7 | Temperatur: 18,7°C |
In den allgemeinen Einstellungen für Panels wird festgelegt, ob eine Vorlage zur Darstellung des Panels verwendet werden soll und mit welchen FHEM Devices das Panel verknüpft ist. Weiterhin wird festgelegt, unter welchen Navigationspunkten das Panel zur Anzeige gebracht werden soll. Zusätzlich können verschiedene Einstellung zur Darstellung des Panels erfolgen.
Wenn für ein Panel keine Vorlage verwendet werden soll, oder bestimmte Einstellungen der Vorlage für das Panel angepasst werden sollen, kann die erweiterte Ansicht aktiviert werden.
Die devicekeys werden in Vorlagen definiert. Ein devicekey ist eine Variable, welche in einer Vorlage (Template) an Stelle eines konkreten FHEM-Devicenamen verwendet wird. Bei der späteren Verwendung der Vorlage, wird in der Panelkonfiguration jeder devicekey einem konkreten FHEM-Device zugeordnet.
Somit können Vorlagen für beliebig viele Panels verwendet werden. Die Defintion für einen Button, der einen bestimmten Befehl an FHEM sendet wird dann beispielsweise in Form von set switch on
statt set <fhem_device_name> on
in der betreffenden Definition hinterlegt. Die Variable switch
wird dabei als devicekey definiert und später in der Panelkonfigurtation mit dem tatsächlichen FHEM-Device <fhem_device_name>
verknüpft.
Für jede Vorlage muss mindestens ein devicekey festgelegt werden.
Parameter | Beschreibung |
---|---|
key | eindeutiger Schlüssel, der für Element-Definitionen an Stelle von festen FHEM-Devicenamen verwendet werden soll |
description | kurze Beschreibung des jeweiligen FHEM Devicetypen |
Liste der FHEM-Devices, die mit dem Panel verknüpft sind. Es muss mindestens ein FHEM-Device mit einem Panel verknüpft werden. (siehe auch neues Panel erstellen)
Parameter | Beschreibung |
---|---|
key | eindeutiger Schlüssel, der für Element-Definitionen benötigt wird |
device | Name des FHEM Device, mit dem das Panel verknüpft ist |
Optional kann eine Vorlage ausgewählt werden, die für die Darstellung des Panels verwendet werden soll. Elemente die im Panel (unter erweiterte Ansicht) definiert wurden, behalten ihre Gültigkeit auch wenn eine Vorlage verwendet wird. In diesem Fall werden die betreffenden Definitionen aus der Vorlage ignoriert.
Liste der Navigationspunkte, unter denen das Panel angezeigt wird. Im Gegensatz zu normalen Definitionen, werden hier alle Definitionen verwendet, deren Bedingungen zutreffen.
Parameter | Beschreibung |
---|---|
reading | siehe Parameter reading |
value | siehe Parameter value |
route | Navigationspunkt unter dem das Panel angezeigt werden soll. Die Angabe kann auf gleiche Weise wie im FHEM-Attribut room erfolgen. |
Beispiel | Beschreibung |
---|---|
::home |
Das Panel wird im Navigationsmenü unter dem Menüpunkt home angezeigt |
::groups->Licht |
Das Panel wird im Navigationsmenü innherhalb von groups unter Licht angezeigt |
::groups->Licht,rooms->Arbeiten |
Das Panel wird im Navigationsmenü unter groups und unter rooms in den jeweiligen Untergruppen Licht bzw. Arbeiten angezeigt. |
a-room::rooms->%s |
Das Panel wird im Navigationsmenü innerhalb von rooms unter dem Name angezeigt, der im zugeordneten FHEM Device im Attribut room hinterlegt ist. |
Panels können ausgeklappt werden sobald mehr als eine aktive Ebene im Bereich main enthalten. Weiterhin kann festgelegt werden, ob das Panel beim Laden bereits ausgeklappt sein soll und ob das Panel auf die voll Bildschirmgröße maximiert werden kann.
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
expandable | false | soll ausklappbar sein [boolean] |
expanded | false | ist beim Laden ausgeklappt [boolean] |
maximizable | false | kann auf volle Bildschirmgröße maximiert werden [boolean] |
Panels können in einer bestimmten Reihenfolge angezeigt werden. Hierfür kann ein beliebiger Sortierschlüssel festgelegt werden. Panels mit Sortierschlüssel werden immer zuerst angezeigt. Danach folgen alle Panels ohne Sortierschlüssel.
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
sortkey | Sortierschlüssel [string | number] |
Panels können ausgeblendet werden.
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
show | true | blendet Panel ein oder aus [string | number] |
Wenn innerhalb eines Panels viele unterschiedliche Icons mehrfach zum Einsatz kommen und diese zudem abhängig von readings sind, können Elementdefinitionen sehr groß werden. Hierfür kann das Mapping für Icons verwendet werden. Dazu kann eine Liste von Variablen erstellt und jeder Variable ein Icon zugewiesen werden.
Bei Verwendung des Mapping kann in allen Elementen, in denen Icons definiert werden können, die Variable statt dem Icon-Name verwendet werden.
Die Variable ist auch als Suchtext zu verstehen. Wenn beispielsweise in einem Wetter-Template ein reading verwendet werden soll, um verschiedene Wetterlagen als Icon darzustellen, kann der Wert des readings entsprechend geprüft werden.
Beispiel: reading = morgens stark bewölkt
- Definition = stark bewölkt:mdi-weather-partly-cloudy
. Es wird nach stark bewölkt im Wert des readings gesucht und wenn dieser Text enthalten ist, dann liefert das Mapping den Wert mdi-weather-partly-cloudy
zurück.
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
search | Variable bzw. Suchtext nach dem in einem Reading gesucht werden soll und das. [string] | |
icon | Name des Icons [string] |
Der Statusbereich befndet sich im oberen Teil. Er dient dazu, den Status und den Name des Panels (z.B. Licht Bad) anzuzeigen. Um den Zustand von Aktoren oder Senoren optisch einfach darzustellen können bis zu 2 Statusbars definiert werden. Weiterhin kann für den Statusbereich ein Hintergrundbild festgelegt werden.
Es wird ein farblich abgesetzter Streifen am oberen Ende des Panel angezeigt. Bei Definition von bar und bar2 befinden sich zwei farbliche Streifen nebeneinander am oberen Ende des Panels.
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
level | 0 | Wert definiert, welcher Anteil der Bar farblich hervorgehoben wird [number] |
color | success | Farbe in der die Bar hervorgehoben wird (siehe auch Farben) [string] |
min | 0 | Wenn der Bereich des Wertes nicht zwischen 0 und 100 liegt, kann kann der kleinste Wert festgelegt werden. Diese entspricht dann im Wertebereich 0 Prozent [number] |
max | 100 | Wenn der Bereich des Wertes nicht zwischen 0 und 100 liegt, kann kann der größte Wert festgelegt werden. Diese entspricht dann im Wertebereich 100 Prozent [number] |
reverse | false | Die Startrichtung in der die Bar farblich hervorgehoben wird, wird umgekehrt [boolean] |
Es wird ein Hintergrundbild im Statusbereich angezeigt. Das Bild wird unabhängig von seiner Größe in den Statusbereich eingepasst und skaliert, jedoch nicht verzerrt. Die Hintergrundbilder sollten jedoch keine zu hohen Auflösungen haben, um die Ladezeit des Panels nicht negativ zu beeinflussen.
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
url | URL die auf ein Bild verweist [string] |
Es wird ein Text auf der linken Seite im Statusbereich angezeigt.
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
title | Titel bzw. Name des Panels [string] |
Der Bereich Main befindet sich im mittleren Teil. Er enthält mindestens eine Ebene mit bis zu 5 Spalten. Jede Spalte kann zur Anzeige von Werten oder zur Steuerung von Aktoren verwendet werden.
Der Bereich Main erlaubt zudem die Definition mehrerer Ebenen. Diese können entweder umgeschaltet oder alle eingeblendet werden. (siehe auch Element expandable) Der Einsatz mehrerer Ebenen ist sinnvoll für komplexe Devices, in denen viele Werte angezeigt oder gesteuert werden soll.
Jede Ebene erfordert Grundeinstellungen. Über diese kann festgelegt werden, welche Spalten angezeigt werden sollen. Zudem können weitere Anzeigeeinstellungen für die jeweilige Ebene definiert werden.
Ebenen können ausgeblendet werden.
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
show | true | blendet Ebenen ein oder aus [string | number] |
Zeigt eine horizontale Trennlinie am unteren Ende der Ebene.
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
show | true | blendet Ebenen ein oder aus [string | number] |
Passt die Höhe der Ebene an.
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
height | 64px | gibt die Höhe der Ebene in Pixeln an [string] |
Legt fest, welche der 5 möglichen Spalten (left1, left2, mid, right1, right2) für die Ebene verwendet werden und was innerhalb der Spalte angezeigt werden soll.
Es stehen folgende Typen zur Verfügung
Typ | Beschreibung |
---|---|
none | Spalte wird nicht angezeigt |
button | Es kann ein Button zur Steuerung von Aktoren konfiguriert werden |
info | Es können bis zu 3 Textelemente und ein Icon zur Anzeige von Statuswerten konfiguriert werden |
slider | Es kann ein Slider zu Steuerung von Aktoren konfiguriert werden |
image | Es kann ein Bild über eine URL angezeigt werden |
iframe | Es kann ein HTML <iframe> über eine URL eingebettet werden |
menu | Es kann ein DropDown-Menü zur Steuerung verschiedener Aktoren bzw. Aktorwerte konfiguriert werden |
chart | Es kann ein Chart angezeigt werden |
colorpicker | Es kann ein Slider zur Steuerung von RGB Lights konfiguriert werden |
Zeigt eine vertikale Linie auf der rechten Seite der Spalte an.
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
divider | false | blendet die Trennlinie ein oder aus [boolean] |
Legt die Breite der Spalte fest.
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
size | Werte zwischen 1 und 12. Der Wert 12 entspricht der vollen Breite der Ebene. Die Summe aller size-Werte innerhalb einer Ebene sollte den Wert 12 nicht überschreiten. [number] |
Zeigt einen Button an, der folgendes ermöglicht. Das Auslösen der Befehle wird in click, longClick und longRelease konfiguriert.
- das Senden von FHEM Kommandos
- das Aufrufen von Navigationspunkten in FHEMApp
- das Aufrufen von beliebigen URLs
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
icon | Icon das agezeigt wird (siehe auch mdi Icons und Icon Mapping) [string] | |
disabled | false | legt fest ob der Button aktiv oder inaktiv ist [boolean] |
color | legt die Farbe für den Button fest (siehe auch Farben) [string] | |
variant | passt die Darstellung des Button an (outlined, tonal, plain) [string] |
Zeigt eine Statusbar über dem Button an.
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
level | 0 | Wert definiert, welcher Anteil der Bar farblich hervorgehoben wird [number] |
color | success | Farbe in der die Bar hervorgehoben wird (siehe auch Farben) [string] |
min | 0 | Wenn der Bereich des Wertes nicht zwischen 0 und 100 liegt, kann kann der kleinste Wert festgelegt werden. Diese entspricht dann im Wertebereich 0 Prozent [number] |
max | 100 | Wenn der Bereich des Wertes nicht zwischen 0 und 100 liegt, kann kann der größte Wert festgelegt werden. Diese entspricht dann im Wertebereich 100 Prozent [number] |
reverse | false | Die Startrichtung in der die Bar farblich hervorgehoben wird, wird umgekehrt [boolean] |
Legt den Befehl fest, der bei kurzem Drücken des Button ausgeführt wird.
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
cmd | FHEM Kommando, Route oder Link [string] | |
type | cmd | cmd, route, url [string] |
Beispiel | Erklärung |
---|---|
::set switch on |
sendet den Befehl set switch on an FHEM. Dabei wird im Panel unter dem Element devices nach dem Schlüssel switch gesucht und falls vorhanden, durch den Name des FHEM Devices ersetzt. Kann kein entsprechender Schlüssel gefunden werden, so wird der Befehl unverändert an FHEM gesendet. Es können auch mehrere Befehle (durch Semikolon getrennt) an FHEM gesendet werden. |
::home:route |
wechselt zum Navigationspunkt home in FHEMApp. Die angegebene Route muss existieren und der Route in der URL (.../devices/{route}/?...) entsprechen |
::panel=licht_bad:route |
wechselt zum Panel licht_bad in FHEMApp. Das angegebene Panel muss existieren |
::https\\://fhem.de:url |
wechsel direkt zu der URL https://fhem.de . Bei direkter Eingabe von URLs müssen Doppelpunkte entsprechend ersetzt werden. (siehe auch Ersetzungen) |
cam-link::%s:url |
wechsel direkt zu der URL, die im Device cam im Reading link hinterlegt ist |
Legt den Befehl fest, der bei langem Drücken des Button ausgeführt wird. Der Button muss dabei mindestens 1 Sekunde gedrückt werden.
Parameter siehe Button click
Legt den Befehl fest, der nach dem Loslassen des Button ausgeführt wird, wenn der Button mindestens 1 Sekunde gedrückt wurde.
Parameter siehe Button click
Zeigt einen Schieberegler an und sendet einen entsprechenden Befehl an FHEM.
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
cmd | FHEM Kommando. Die Ersetzung %v repräsentiert den aktuellen Wert des Sliders. (siehe auch Ersetzungen) [string] | |
current | aktueller Wert des Sliders [number] | |
color | success | Farbe in der die Bar hervorgehoben wird (siehe auch Farben) [string] |
min | 0 | Wert des Sliders, wenn dieser ganz links steht [number] |
max | 100 | Wert des Sliders, wenn dieser ganz rechts steht [number] |
steps | 10 | Schritte in denen der Wert des Sliders verändert wird[number] |
reverse | false | kehrt die Richtung des Sliders um [boolean] |
size | 4 | legt die Breite des Sliders fest [number] |
vertical | false | zeigt den Slider in vertikaler Richtung an [boolean] |
Beispiel | Beschreibung |
---|---|
dimmer-pct::set dimmer pct %v:%n() |
setzt den Slider auf den aktuellen Wert des readings pct aus dem Device dimmer und sendet nach dem Verschieben den Befehl set dimmer %v an FHEM. Dabei wird im Panel unter dem Element devices nach dem Schlüssel dimmer gesucht und falls vorhanden, durch den Name des FHEM Devices ersetzt. Kann kein entsprechender Schlüssel gefunden werden, so wird der Befehl unverändert an FHEM gesendet. Weiterhin wird %v durch den aktuellen Wert des Sliders ersetzt. |
Zeigt ein Bild an.
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
source | URL die auf ein Bild verweist. Bei direkter Eingabe von URLs müssen Doppelpunkte entsprechend ersetzt werden. (siehe auch Ersetzungen) [string] | |
height | legt die absolute Höhe des Bildes in Pixeln fest [string] |
Bettet ein iframe ein.
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
source | URL deren Inhalt im Panel angezeigt werden soll. Bei direkter Eingabe von URLs müssen Doppelpunkte entsprechend ersetzt werden. (siehe auch Ersetzungen) [string] |
Zeigt einen Button an, der beim Klicken ein DropDown-Menü öffnet. Wenn dieses Element nicht definiert ist wird ein Standard-Button angezeigt, sobald mindestens ein Menüeintrag definiert ist.
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
icon | Icon das agezeigt wird (siehe auch mdi Icons und Icon Mapping) [string] | |
disabled | false | legt fest ob der Button aktiv oder inaktiv ist [boolean] |
color | legt die Farbe für den Button fest (siehe auch Farben) [string] | |
variant | passt die Darstellung des Button an (outlined, tonal, plain) [string] |
Definiert die Menüeinträge, die beim Öffnen des DropDown-Menü angezeigt werden. Bei Klick auf einen Menüpunkt wird der hinterlegte Befehl an FHEM gesendet. Im Gegensatz zu normalen Definitionen, werden zur Anzeige der Menüpunkte alle Definitionen verwendet, deren Bedingungen zutreffen.
Menüeinträge können auch dynamisch von FHEM übergeben werden. Der Rückgabewert vom FHEM Befehl get bzw. dem reading oder attribute muss dabei durch eines der folgenden Zeichen (,
|
\n
) getrennt werden. Bei dynamisch erzeugten Menüeinträgen muss der FHEM get-Befehl oder %s bei Verwendung eines reading bzw. attribute in den Parameter name
eingetragen werden. Im Parameter cmd
kann dann die Ersetzung %v verwendet werden, um die aktuellen Menüeinträge über einen set-Befehl an FHEM zu übergeben.
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
name | Name der im DropDown-Menü angezeiugt wird. Alternativ FHEM get-Befehl [string] | |
cmd | FHEM Befehl, der beim Klick auf den Menüpunkt an FHEM gesendet wird. Bei dynamisch erzeugten Menüeinträgen kann die Ersetzung %v verwendet werden. [string] | |
convert | regExp [string] Relevant bei Verwendung dynamisch erzeugter Menüeinträge. Der anstelle von %v verwendete Wert wird in einen regulären Ausdruck umgewandelt. Relevant bei SONOS Playern |
Beispiel | Beschreibung |
---|---|
::30 Minuten:set switch on-for-timer 1800 |
Zeigt im Menü den Menüpunkt 30 Minuten an und sendet bei Klick den Befehl set switch on-for-timer 1800 an FHEM. Dabei wird im Panel unter dem Element devices nach dem Schlüssel switch gesucht und falls vorhanden, durch den Name des FHEM Devices ersetzt. |
::get dev scenes:set dev scene %v |
ermittelt für ein FHEM lightScene Device mit dem Devicekey dev alle Szenen und generiert dynamische Menüeinträge |
player-FavouritesListAlias::%s:set player StartFavourite %v:regExp |
ermittelt für ein FHEM SONOSplayer Device alle Favouriten und generiert dynamische Menüeinträge. Über die Konvertierung regExp werden die Namen der Favouriten in reguläre Ausdrücke in den set-Befehlen umgewandelt. |
Zeigt bis zu 3 Texte (text, text2, text3) an. Dabei wird text
immer über text2
und text3
angezeigt. Weiterhin wird text2
immer links neben text3
angezeigt.
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
text | Text der ausgegeben wird [string] | |
format | Angaben zur Größe, Ausrichtung und Farbe des Textes. Es können mehrere Formatangaben kombiniert werden. Diese müssen durch Leernzeichen voneinander getrennt werden. [string] |
Beispiel für Formatierung | Beschreibung |
---|---|
text-success |
zeigt den Text in der Farbe grün an (siehe auch Farben) |
text-left |
richtet den Text linksbündig aus |
text-right |
richtet den Text linksbündig aus |
text-h4 |
Text in großer Schrift (weitere Möglichkeiten siehe auch Text und Typografie) |
Zeigt ein Icon unterhalb von text
und oberhalb von text2
bzw. text3
an.
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
icon | Icon das agezeigt wird. (siehe auch mdi Icons und Icon Mapping) [string] | |
color | legt die Farbe für das Icon fest. (siehe auch Farben) [string] | |
size | x-large | Größe des Icons (x-small, small, medium, large, x-large) [string] |
Zeigt eine runde Statusbar oder eine horizontale Statusbar unterhalb von text
und oberhalb von text2
bzw. text3
an.
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
level | Wert definiert, welcher Anteil der Bar farblich hervorgehoben wird [number] | |
color | success | Farbe in der die Bar hervorgehoben wird (siehe auch Farben) [string] |
min | 0 | Wenn der Bereich des Wertes nicht zwischen 0 und 100 liegt, kann kann der kleinste Wert festgelegt werden. Diese entspricht dann im Wertebereich 0 Prozent [number] |
max | 100 | Wenn der Bereich des Wertes nicht zwischen 0 und 100 liegt, kann kann der größte Wert festgelegt werden. Diese entspricht dann im Wertebereich 100 Prozent [number] |
reverse | false | Die Startrichtung in der die Bar farblich hervorgehoben wird, wird umgekehrt [boolean] |
linear | false | zeigt eine horizontale oder runde Statusbar an [boolean] |
Zeigt ein Chart. Im Gegensatz zu normalen Definitionen, werden zur Anzeige der Datenreihen alle Definitionen verwendet, deren Bedingungen zutreffen. Jede definierte Serie repräsentiert eine Datenreihe im Chart.
Für die Darstellung von Charts kommt Apache ECharts zum Einsatz. Diese bietet eine sehr große Vielfalt an Charts und Anpassungsmöglichkeiten.
Grundsätzlich können alle Charttypen, die Apache ECharts bereitstellt, verwendet werden. Die Konfiguration von Apache ECharts erfolgt als JSON-Definition. Die Konfigurationsmöglichkeiten der jeweiligen Charts sind in der Dokumentation von Apache ECharts beschrieben. Die jeweilige JSON-Konfiguration muss in FHEMApp in chart-options bzw. in chart-options2 übernommen werden. Zu beachten ist, dass keine Java-Script Funktionen innerhalb der JSON-Konfiguration an FHEMApp übergeben werden können. Wird keine JSON-Konfiguration in FHEMApp hinterlegt, so werden die Daten aus FHEM in Form eines einfachen Line-Chart dargestellt.
Es gibt 3 Möglichkeiten, Daten aus FHEM an ein Chart zu übergeben.
- einzelner Zahlenwert aus einem reading z.B.
22.4 C
- ein Array mit Zahlenwerten aus einem reading z.B.
[12, 13.5, 0.7, 4, ...]
- Werte aus einem FHEM DBLog bzw. LogFile
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
data | kan einen einzelnen Zahlenwert, oder ein Array mit Zahlenwerten oder eine FHEM-Anweisung get für FileLog-Devices bzw. DBLog-Devices enthalten |
|
name | Name der Datenreihe | |
digits | 0 | Anzahl der Nachkommastellen, die im Diagramm angezeigt werden. |
suffix | Einheit für die Zahlenwerte (z.B. % oder °C) | |
type | line | Charttyp der Datenreihe (z.B. line, bar, scatter, gauge und weitere siehe auch ECharts Beispiele) |
Bei Verwendung der FHEM-Anweisung get
können statt fester Datumsangaben im ISO-Format auch Offsetwerte verwendet werden. z.B. get log1 - - -14 0 4\:level
Dabei entspricht -14
dem aktuellen Datum - 14 Tage und 0
dem aktuellen Datum. Da in der FHEM-Anweisung get
auch Doppelpunkte zum Einsatz kommen ist die Schreibweise \:
innerhalb der Anweisung zu beachten. (siehe auch Ersetzungen) Das Ergebnis der get
Anweisung muss immer zwei Spalten zurückgeben. Die linke Spalte muss den Zeitstempel und die rechte Spalte den zugehörigen Zahlenwert enthalten.
Die Daten aus der Definition werden an das EChart Object-Modell an folgende Stellen übergeben:
{
series: [{
data: <data>,
name: <name>,
type: <type>,
detail: {
formatter: fn(<digits>, <suffix>)
},
tooltip: {
formatter: fn(<digits>, <suffix>)
}
}],
yAxis: [{
axisLabel: {
formatter: fn(<digits>, <suffix>)
}
}],
legend: { data: [<name>,...] }
}
Hier kann das Chart individuell über eine entsprechende JSON-Definition angepasst werden. (siehe auch ECharts Konfiguration)
Diese Definition kann bei Verwendung von maximizable verwendet werden, um das Chart anders darzustellen, wenn das Panel maximiert ist. Die Definition erfolgt wie unter Chart options beschrieben.
Zeigt einen Colorpicker zum Steuern von RGB Lights.
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
cmd | FHEM Kommando. Die Ersetzung %v repräsentiert den aktuellen Wert des Colorpickers. (siehe auch Ersetzungen) [string] | |
current | aktueller Wert des Colorpickers [string] | |
type | hex | Typ des RGB-Wertes hex oder hue [string] |
Der Infobereich befindet sich im unteren Teil. Er dient dazu, weitere Werte des Sonsors oder Aktors in Form von Icons oder Text darzustellen. Es können bis zu 6 Spalten für die Anzeige von Icons bzw. Texten verwendet werden.
Es wird ein Text und/oder ein Icon in einem der 6 Spalten (left1, left2, mid1, mid2, right1, right2) angezeigt. Es sollten keine zu langen Texte ausgegeben werden, da der Platz auf die Gesamtbreite des Panels begrenzt ist. Wenn Texte zu lang für die jeweilige Spalte sind, so werden diese abgeschnitten.
Parameter | Default | Beschreibung |
---|---|---|
reading | siehe Parameter reading | |
value | siehe Parameter value | |
text | Text der angezeigt wird [string] | |
icon | Icon das agezeigt wird. (siehe auch mdi Icons und Icon Mapping) [string] | |
color | legt die Farbe für das Icon fest. (siehe auch Farben) [string] |
Mit FHEMApp werden verschiedene Standardvorlagen bereitgestellt, welche direkt verwendet werden können.
Zudem gibt es in FHEMApp die Möglichkeit eigene Vorlagen (templates) zu erstellen. Somit kann man Vorlagen für alle FHEM-Devices eines Typs (z.B. Schalter, Rolladenaktoren, Fensterkontakte, Thermostate...) erstellen.
Nachdem eine Vorlage erstellt wurde, kann diese den gewünschten Panels in der Panelkonfiguration unter den allgemeinen Einstellungen im Element template zugewiesen werden.
Grundsätzlich können alle Elemente, die in einem Panel konfigurierbar sind auch in Vorlagen konfiguriert werden.
Das Navigationsmenü von FHEMApp kann individuell angepasst werden. So ist es möglich die Reihenfolge der einzelnen Navigationspunkte festzulegen, Navigationspunkte mit einem Icon zu versehen oder alternative Beschriftungen für die Navigationspunkte festzulegen.
Die alternativen Beschriftungen können somit auch für die Erstellung mehrsprachiger Instanzen von FHEMApp verwendet werden. Hierbei kann die Ersetzung %t(...)
(siehe auch Ersetzungen) eingesetzt werden.
Beispiel für ein angepasstes Navigationsmenü
In FHEMApp können altrnativ zu hexadezimalen Farbangaben auch Farbvariablen eingesetzt werden. Damit können Themen erstellt und Farben schnell angepasst werden. Grundsätzlich steht ein helles und ein dunkles Farbschema für jede Instanz von FHEMApp zur Verfügung. (siehe auch Farbschema)
Neben frei definierbaren Farbvariablen, die Elementdefinitionen zur Angabe von Farbwerten eingesetzt werden können, gibt es feste Farbvariablen.
feste Farbvariable | Beschreibung |
---|---|
primary |
Hintergrundfarbe für die Kopfzeile von FHEMApp |
secondary |
Hintergrundfarbe für das Navigationsmenü, sowie den Statusbereich und den Infobereich von Panels |
success |
Standardfarbe für Statusanzeigen und Slider |
info |
Farbe für interne Meldungen von FHEMApp |
warning |
Farbe für interne Warnungen von FHEMApp |
error |
Farbe für interne Fehler von FHEMApp |
Beispiel für Definition von Farbvariablen
In FHEMapp können mehrsprachige Instanzen erstellt werden. Die Umstellung der Benutzersprache kann über URL Paramter oder über das Optionsmenü erfolgen.
Jede Instanz von FHEMApp enthält standardmäßig die beiden Sprachen Deutsch und Englisch. Es ist jedoch möglich, weitere eigene Sprachen in FHEMApp zu integrieren und mit den entsprechenden Übersetzungen zu befüllen. Neue Benutzersprachen sollten nach den ISO-Sprachcodes (siehe ISO-639-1-Codes) benannt
Um Inhalte in FHEMApp in der jeweiligen Benutzersprache anzuzeigen, muss die Ersetzung %t(<sprachvariable>)
(siehe Ersetzungen) verwendet werden. Die Sprachvariablen werden dabei in den Einstellungen von FHEMApp definiert.
Neben festen Sprachvariablen kann die Ersetzung %t()
auch mit den Werten von FHEM Readings befüllt werden. So kann z.B. der in FHEM häufig vorkommende Wert on
in state-Readings in die gewünschte Benutzersprache übersetzt werden.
Beispiel Elementdefinition | Sprachvariable | de | en | fr | es |
---|---|---|---|---|---|
state::%t(%s) |
on |
an | on | allumé | encendida |
Mit FHEMApp werden verschiedene Standardvorlagen bereitgestellt, die den Einstieg besonders einfach machen.
Beschreibung | Beispiel |
---|---|
Name: switch Devicekeys: switch Readings: alias, room, group, sortby, state Einsatz: Steckdosen JSON: switch |
|
Name: light Devicekeys: light Readings: alias, room, group, sortby, state Einsatz: Lichtschalter JSON: light |
|
Name: dimmer Devicekeys: dimmer Readings: alias, room, group, sortby, state, pct Einsatz: Dimmer JSON: dimmer |
|
Name: contact Devicekeys: contact Readings: alias, room, group, sortby, state Einsatz: Tür-/Fensterkontakte JSON: contact |
|
Name: blind Devicekeys: blind Readings: alias, room, group, sortby, state, pct, motor Einsatz: Jalousien JSON: blind |
|
Name: thermostat Devicekeys: thermo, valve Readings: alias, room, group, sortby, measured-temp, desired-temp, humidity, R-dayTemp, R-nightTemp, tempState, controlMode, state (valve), pct (valve) Einsatz: Heizungsthermostate JSON: thermostat |
|
Name: temperatur Devicekeys: temp Readings: alias, room, group, sortby, temperature, humidity Einsatz: Temperatursensoren JSON: temperatur |
|
Name: smokedetector Devicekeys: smoke Readings: alias, room, group, sortby, level Einsatz: Rauchmelder JSON: smokedetector |
|
Name: motiondetector Devicekeys: sensor Readings: alias, room, group, sortby, motion Einsatz: Bewegungsmelder JSON: motiondetector |
|
Name: lightscene Devicekeys: lightscene Readings: alias, room, group, sortby, scene Einsatz: Szenarien JSON: lightscene |
|
Name: sonosplayer Devicekeys: player Readings: alias, room, group, sortby, and other readings... Einsatz: SONOS Player JSON: sonosplayer |
|
Name: proplanta Devicekeys: weather Readings: alias, room, group, sortby, and other readings... Einsatz: Wettervorhersage (Proplanta) JSON: proplanta |
|
Name: chart Devicekeys: chart Readings: alias, room, group, sortby FileLog: measured-temp, humidity Einsatz: Logdaten für Thermostate JSON: chart |