Skip to content

Latest commit

 

History

History
683 lines (559 loc) · 50.2 KB

README.md

File metadata and controls

683 lines (559 loc) · 50.2 KB

FHEMApp

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

Beispiele für mobile Ansicht

Beispiele für mobile Ansicht

Beispiel für Einstellungen

Beispiel für Konfiguration von Templates

Beispiel für Konfiguration von Sprachvariablen

Systemanforderungen

Für den Einsatz von FHEMApp wird FHEM(tm) benötigt. Weitere Informationen zu FHEM findest du unter https://fhem.de/

Installation und Updates

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)

Instanzen

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

Aufruf

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.

zusätzliche URL-Parameter

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

Einstellungen

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.

Beispiel für Einstellungen

Allgemeine Einstellungen

Kopfzeile

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.

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.

  1. über den URL-Parameter dark (siehe auch zusätzliche URL-Parameter)
  2. über ein FHEM Reading
  3. ü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.

Startseite

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.

Optionsmenü

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

Optionsmenü FHEM Befehle

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.

Panels

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


Beispiel für ein Panel

neues Panel erstellen

Ü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.

Konfiguration der Elemente

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

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

Panel allgemein

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.

Element deviceskeys

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

Element devices

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

Element template

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.

Element navigation

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 Lichtbzw. 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.

Element expandable

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]

Element sortby

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]

Element show

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]

Element iconmap

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]

Bereich Status

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.

Element bar

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]

Element imageurl

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]

Element title

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]

Bereich Main

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.

Main Element show

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]

Main Element divider

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]

Main Element height

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]

Main Element typ

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

Level Element divider

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]

Level Element size

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]

Level Element Button btn

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]

Level Element Button status

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]

Level Element Button click

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

Level Element Button longClick

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

Level Element Button longRelease

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

Level Element Slider slider

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.

Level Element Image image

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]

Level Element IFrame iframe

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]

Level Element Menu btn

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]

Level Element Menu menu

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.

Level Element Info text

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)

Level Element Info icon

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]

Level Element Info status

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]

Level Element Chart serie

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.

  1. einzelner Zahlenwert aus einem reading z.B. 22.4 C
  2. ein Array mit Zahlenwerten aus einem reading z.B. [12, 13.5, 0.7, 4, ...]
  3. 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>,...] }
}

Level Element Chart options

Hier kann das Chart individuell über eine entsprechende JSON-Definition angepasst werden. (siehe auch ECharts Konfiguration)

Level Element Chart options2

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.

Level Element Colorpicker picker

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]

Bereich Info

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.

Element info

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]

Vorlagen

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.

Navigation

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ü

Farben

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

Sprachen

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

Standardvorlagen

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