FHEM User Interface Painter

FHEM User Interface Painter
Zweck / Funktion
Oberfläche für FHEM
Allgemein
Typ	Inoffiziell
Details
Dokumentation	Thema
Support (Forum)	TabletUI
Modulname	42_FUIP.pm
Ersteller	Thorsten Pferdekaemper (Forum )
Wichtig: sofern vorhanden, gilt im Zweifel immer die (englische) Beschreibung in der commandref!

FUIP Bearbeitungsansicht

Der FHEM User Interface Painter (FUIP) ist ein FHEM-Modul, mit dem man FHEM Tablet UI (FTUI) Seiten graphisch intuitiv und einfach erstellen kann. D.h. man kann sich ein WebGUI Drag &Drop, welches die Tablet UI Technik verwendet, aber ohne sich selbst unbedingt mit HTML und CSS herumschlagen zu müssen erstellen. Inzwischen ist es zu einem sehr beachtlichen Tool herangewachsen, welches kaum noch wünsche für Fhem Anfänger und Profi offen lässt.

Hier sind Videos, welches FUIP in Aktion zeigt:

Einführungsvideo (veraltet)

Youtube-Präsentation

(Die Videos zeigen nicht den neusten Stand, aber es dürfte klar werden, wofür FUIP gut sein soll.)

Installation und Upgrade in FHEM

Genau wie FTUI ist auch FUIP nicht automatisch Teil von FHEM. Es muss explizit installiert bzw. hinzugefügt werden. Die Installation funktioniert folgendermaßen:

• FUIP verwendet FTUI v2.x - ( es gibt inzwischen auch eine FTUI v3.x, aber damit funktioniert FUIP NICHT!). D.h. man sollte zuerst einmal FTUI v2.x installieren, falls noch nicht passiert. Wie das geht steht bei FHEM Tablet UI. Dabei reicht der erste Schritt aus, da lediglich die FTUI-Dateien von FUIP benötigt werden.
• Dann das FUIP-Repository zum FHEM Update hinzufügen:
  • update add https://raw.githubusercontent.com/ThorstenPferdekaemper/FHEM-FUIP/master/controls_fuip.txt
• Jetzt update all fuip machen.
• Warten, bis man ganz sicher ist, dass alles installiert ist. Das sieht man normalerweise an der Meldung update finished, "shutdown restart" is needed to activate the changes.. Das ganze kann etwas länger dauern, da FUIP aus einige Dateien besteht, von denen ein paar etwas größer sind.
• Jetzt erst shutdown restart.
• FUIP sollte jetzt installiert sein.

Zum Upgrade reicht ein update, wenn man FUIP wie oben beschrieben installiert hat. Will man nur den FUIP-Teil aktualisieren und nicht alles in FHEM, dann geht das mit update all fuip.

Falls es bei oder nach der Installation oder dem Upgrade Probleme gibt (welcher Art auch immer), sollten die folgenden Punkte geprüft werden:

• Wird das richtige Repository benutzt? Man kann das mit update list überprüfen. Wenn der Eintrag für fuip nicht genau so aussieht wie oben beschrieben, dann sollte er per update delete gelöscht werden und dann genau so eingetragen werden wie oben beschrieben.
• Ist der update-Prozess wirklich komplett durchgelaufen? Auch wenn es etwas länger dauert, muss man auf die Meldung update finished, "shutdown restart" is needed to activate the changes. warten, bevor man durchstartet. Im Zweifelsfall einfach noch einmal update all fuip machen und diesmal mehr Geduld haben.
• FHEM braucht Schreibrechte im Verzeichnis <fhem>/FHEM/lib/FUIP/config (<fhem> steht meistens für /opt/fhem) und allen enthaltenen Dateien. Auf Betriebssystemebene (Linux) kann man das mit ls -ls überprüfen. Meistens kann es mit folgendem Befehl repariert werden: chown -R fhem:dialout /opt/fhem/FHEM/lib/FUIP/config. (Dieser Punkt gilt nicht bzw. nicht genau so, wenn man die configDB benutzt.)
• Steht etwas verdächtiges im Logfile?

Erste Schritte

Zuerst legt man ein "FUIP Device" an, also etwa define ui FUIP. Dieses Device meldet sich sozusagen als Webserver bei FHEM an (wie z.B. auch HTTPSRV), d.h. es erscheint im Menu oben links (über den Räumen) ein Link "ui". Beim Klick auf diesen Link generiert FUIP eine FTUI Übersichtsseite aus den Räumen im FHEM System. (Das kann ein bisschen dauern, wenn man viele Devices hat.) Nun kann man durch Verschieben und größer/kleiner-Ziehen der einzelnen Zellen bzw. durch Verschieben des Zelleninhalts die Gestaltung ändern. Außerdem kann man über das Zahnrad rechts oben in den Zellen neuen Inhalt hinzufügen, den bestehenden Inhalt ändern und vieles mehr. Durch Klicken auf die Räume im Menu der Übersichtsseite werden einzelne Raum-Seiten generiert. Diese kann man ebenfalls entsprechend bearbeiten. Natürlich können auch eigene Seiten hinzugefügt werden. Wie das geht sieht man im Video, welches oben verlinkt ist.

Nachdem man die Seiten entsprechend bearbeitet hat sollte man ein set ui save machen. Ansonsten gehen die Änderungen beim nächsten FHEM-Neustart verloren. Ein normales save config reicht nicht aus und ist auch nicht notwendig.

Die folgenden detaillierten Informationen können zum Teil veraltet sein, da FUIP noch weitereintwickelt wird. Es sollten allerdings keine Funktionen verschwinden.

Das Konfigurations-Popup

...für Zellen

Beim Klick auf das Zahnrad rechts oben in einer Zelle wird der Konfigurations-Dialog für diese Zelle geöffnet. Im Folgenden werden die Funktionen der einzelnen Elemente erklärt.

Zur Seiten-Konfiguration

Damit kann man zum Konfig-Dialog für die ganze Seite wechseln.

Zellen-Überschrift

Hier wird die Überschrift der Zelle festgelegt. Eine Zelle muss keine Überschrift haben. (Die Zahlen hinter der Überschrift in der Zelle selbst verschwinden, wenn man das Attribut locked setzt.)

Neuer View

Hiermit fügt man einen neuen View, also neuen Inhalt, zu einer Zelle hinzu. Man wählt dann aus, welcher Art View angelegt werden soll und füllt die Details, wie z.B. das zugehörige Device. Der neue View wird an einer freien Stelle (falls möglich) in der Zelle eingefügt. Nach schließen des Konfig-Dialogs kann man den View dann per Drag&Drop geeignet positionieren.

Neuer View (Device)

Dies dient ebenfalls dazu, neue Views in die Zelle zu packen. Allerdings wählt man nicht die Art des Views aus, sondern die FHEM-Devices, die dargestellt werden sollen. Das System sucht dann jeweils einen geeigneten View aus. Bisher funktioniert das nur sehr eingeschränkt, hat aber den Vorteil, dass man gleich mehrere Devices auswählen kann.

Abbrechen

Damit schließt man den Dialog ohne die Änderungen zu übernehmen.

Details zum View

Hier klappt man die Details zum View aus und kann diese ändern. Was man damit genau machen kann kommt auf die Art des View an. Per Drag&Drop kann man auch die Reihenfolge der Views im Konfig-Dialog ändern. Das hat allerdings keinen Effekt auf die Positonierung bereits existierender Views in der Zelle.

View löschen

Das löscht den View aus der Zelle. Wenn man den View eigentlich nicht löschen, sondern in einer anderen Zelle haben will, dann kann man ihn auch per Drag&Drop in die andere Zelle verschieben. Lässt man einen View in einer anderen Zelle "fallen", dann wird dieser automatisch der neuen Zelle zugeordnet.

Übernehmen

Das schließt den Dialog und übernimmt die Änderungen. Dadurch kann man die Auswirkungen auf dem UI selbst sehen. Um die Änderungen allerdings den nächsten FHEM Neustart überleben zu lassen muss man noch ein set ui save machen.

Auto-Anordnen

Hiermit kann man die einzelnen Views in der Zelle automatisch anordnen. Es kann momentan sein, dass dadurch Änderungen verloren gehen. D.h. dieser Button sollte nur benutzt werden, wenn man seit dem Öffnen des Dialogs keine Änderungen gemacht hat. Außerdem schließt der Button dan Dialog. FUIP ordnet die Views in der Reihenfolge an, in der sie im Konfig-Popup erscheinen. Das zugrunde liegende Layout ist sehr einfach gehalten und kann sich auch noch ändern. Diese Funktion ist vor Allem brauchbar für mehrere gleichartige Views in derselben Zelle, wie z.B. bei Menus.

Neue Zelle

Legt eine neue (leere) Zelle auf der aktuellen Seite an. Der Konfig-Dialog wird dabei geschlossen und Änderungen gehen verloren.

Zelle kopieren

Kopiert die aktuelle Zelle. Man muss eine Seite angeben, zu der die kopierte Zelle gehören soll. Das entsprechende Feld ist mit der aktuellen Seite vorbelegt. Falls man dies nicht ändert, wird einfach eine Kopie der Zelle auf derselben Seite erzeugt. Ansonsten wird die Zelle auf die angegebene Seite kopiert. Die Funktion schließt den Konfig-Dialog und Änderungen gehen verloren. Falls man eine andere Seite angegeben hat, wird zu dieser gewechselt.

Zelle exportieren

Dies erlaubt die Definition der Zelle herunterzuladen und auf dem Client (also dem Rechner, auf dem der Browser läuft) zu speichern.

Zelle importieren

Damit lädt man eine exportierte Zelle wieder hoch. FUIP erzeugt dann auf der aktuellen Seite eine neue Zelle mit dem entsprechenden Inhalt. Das funktioniert auch mit Zellen, die von einer anderen FUIP-Seite, einem anderen FUIP-Device oder von einer anderen FHEM-Installation kommen.

Zelle löschen

Damit löscht man die aktuelle Zelle. Sie verschwindet dann von der aktuellen Seite.

Toggle editOnly

Bei manchen Views ist es schwierig, sie mit der Maus "anzufassen", da sie sofort eine Aktion auslösen (z.B. bei Links). Mit "Toggle editOnly" wird eine graue "Schicht" über die Views gelegt. Dadurch weiß man besser, wo man den View anfassen kann und Mausklicks haben keine Wirkung mehr, außer Drag&Drop.

...für Seiten

Drückt man im Konfig-Dialog für Zellen auf "Cell/Page" kommt man auf den Konfig-Dialog für ganze Seiten. Die Bedeutung der Einzelnen Elemente ist wie folgt.

Zur Zellen-Konfiguration

Das bringt einen zurück zum Konfig-Dialog für Zellen.

Seiten-Überschrift

Hier kann ein Titel für die Seite eingetragen werden. Das erscheint dann je nach Browser irgendwo oben. (Technisch ist es der Inhalt des <title> Tags in <head>.)

Abbrechen

Damit schließt man den Dialog ohne die Änderungen zu übernehmen.

Übernehmen

Das schließt den Dialog und übernimmt die Änderungen. Dadurch kann man die Auswirkungen auf dem UI selbst sehen. Um die Änderungen allerdings den nächsten FHEM Neustart überleben zu lassen muss man noch ein set ui save machen.

Seite kopieren

Dadurch wird eine neue Seite angelegt, die so aussieht wie die aktuelle. Der Dialog wird dann geschlossen und automatisch zur neuen Seite gesprungen.

Seite exportieren

Das ist dasselbe wie für Zellen, nur für die ganze aktuelle Seite.

Seite importieren

Das ist im Prinzip auch wie für Zellen, nur dass eine neue Seite angelegt wird. Exportierte Zellen können nur als Zellen importiert werden und exportierte Seiten nur als Seiten.

Das FUIP-Device

Wie in Erste Schritte bereits beschrieben, muss man zur Verwendung von FUIP zuerst ein FUIP-Device anlegen. Alles, was man mit FUIP macht (bzw. was das System macht) passiert in Bezug auf ein FUIP-Device. Man kann auch jederzeit mehrere FUIP-Devices anlegen. Verschiedene Instanzen von FUIP stören sich nicht gegenseitig, man kann aber (z.B. in einem Menu) auf eine andere FUIP-Instanz verweisen (verlinken).

Das FUIP-Device hat die folgenden Eigenschaften.

Sets

Die folgenden set-Kommandos sind für den Benutzer gedacht. Es gibt noch weitere set-Kommandos, welche aber vor Allem für FUIP-interne Zwecke gedacht sind.

load

Mit set <name> load stellt man den Zustand wieder her, der mit set <name> save gespeichert wurde. Das ist vor Allem dann nützlich, wenn man sich beim Bearbeiten der Seiten vertan hat. Ansonsten wird beim FHEM Start das "load" automatisch ausgeführt.

lock

Mit set <name> lock wird die Oberfläche gegen Änderungen gesperrt.

pagedelete

Mit set <name> pagedelete <page> wird die Seite <page> gelöscht. Das kann auch dazu genutzt werden, FUIP zum Neugenerieren einer Seite zu "zwingen", indem man die Seite nach dem Löschen einfach wieder aufruft. Auch das Löschen einer Seite geht ohne ein "save" verloren, d.h. die Seite ist dann nach einem FHEM Neustart wieder da.

refreshBuffer

Mit set <name> refreshBuffer <page> kann, da FUIP Informationen aus dem "eigentlichen" FHEM verwendet, wie z.B. die Liste aller Devices sowie bestimmte Readings, Internals und Attribute. Insbesondere bei "entferntem" FUIP, also bei Verwendung des Attributs fhemwebUrl, kann die Ermittlung dieser Daten länger dauern. Daher wird praktisch alles durch FUIP zwischengespeichert ("gepuffert"). Wenn man nun neue Devices anlegt bzw. bestehende Devices ändert, dann bekommt das FUIP-Device davon unter Umständen nichts mit. In so einem Fall kann man mit set <name> refreshBuffer den Zwischenspeicher löschen, um FUIP dazu zu zwingen, die Informationen erneut zu ermitteln.

save

Mit set <name> save wird der momentane Zustand der FUIP-Seiten zu diesem FUIP-Device gespeichert. Das betrifft nicht die Definition des FUIP-Device selbst (also auch nicht dessen Attribute). Diese müssen nach wie vor über save (also "Save config") gespeichert werden. Die FUIP-Seiten stehen in der Datei <fhem>/FHEM/lib/FUIP/config/FUIP_<name>.cfg. Dabei steht <fhem> in der Regel für /opt/fhem und <name> für den Namen des FUIP-Devices. Ohne ein set <name> save gehen alle Änderungen beim nächsten FHEM Restart verloren.

unlock

Mit set <name> unlock wird die Oberfläche in den Änderungsmodus geschalten.

Gets

Alle Get-Kommandos sind nur für FUIP-interne Zwecke bestimmt.

Internals

editOnly

Hier wird der "editOnly-Modus" gespeichert, der auf der Konfig-Oberfläche ein- und ausgeschaltet werden kann. Siehe auch Das Konfigurations-Popup.

Readings

FUIP-Devices haben keine Readings.

Attribute

baseHeight

Basishöhe einer Zelle, d.h. eine 1x1-Zelle ist baseHeight Pixel hoch. Standardwert ist 108.

baseWidth

Basisbreite einer Zelle, d.h. eine 1x1-Zelle ist baseWidth Pixel breit. Standardwert ist 142. Diese Abmessungen beziehen sich nur auf die Zelle selbst, nicht auf den Zwischenraum zwischen zwei Zellen. Der Zwischenraum beträgt (horizontal und vertikal) 10 Pixel.

pageWidth

Seitenbreite in Pixel. Wenn pageWidth nicht gesetzt ist (das ist der Default), dann wird die Seitenbreite nicht festgelegt. Sie ergibt sich dann aus baseWidth (d.h. die Breite einer 1er-Zelle) und der Anzahl der verwendeten Spalten plus die Breite der Zwischenräume. D.h. in der Regel muss man pageWidth nicht angeben.

Die Angabe in pageWidth beeinflusst auch die Darstellung des Hintergrundbilds, falls das Attribut styleBackgroundImage gesetzt ist. Siehe styleBackgroundImage für Details.

fhemwebUrl

Mit FUIP kann man sich auch an ein "entferntes" FHEM ankoppeln. Das Attribut fhemwebUrl hat dabei in etwa die Bedeutung wie fhemweb_url bei FTUI. (Siehe auch hier: Verbindung zu FHEM (FTUI).) Genau wie beim "normalen" FTUI muss das Attribut CORS der FHEMWEB-Instanz des Ziels auf "1" stehen. Ansonsten würde schon FTUI nicht funktionieren. Außerdem darf die FHEMWEB-Instanz keine Passwort-Prüfung haben. Stattdessen kann man mit dem Attribut allowedfrom oder einer allowed-Instanz den Zugriff einschränken.

Man darf fhemwebUrl auf keinen Fall setzen (auch nicht auf 127.0.0.1 oder so), wenn sich die FUIP-Instanz auf das lokale FHEM beziehen soll. In dem Fall würde FHEM ewig auf sich selbst warten.

Wenn man ein "entferntes" FHEM benutzt, dann können einige Funktionen der Konfigurationsoberfläche etwas Zeit brauchen. Zum Beispiel müssen für die Eingabehilfe für Devices alle Devices aus dem entfernten FHEM gelesen werden. Das ist so implementiert, dass das entfernte FHEM möglichst wenig belastet wird, was aber zu Lasten des FUIP-FHEM geht. Siehe auch das Set-Kommando refreshBuffer zu diesem Thema.

locked

Wenn locked auf "1" gesetzt wird, dann sind die FUIP-Seiten gegen Bearbeitung gesperrt. Das Zahnrad-Icon oben rechts erscheint dann nicht mehr. Dadurch kann ein reiner "Tablet-UI Benutzer" die Seiten nicht mehr ändern und die Oberfläche sieht komplett wie normalerweise bei FTUI aus. Zusätzlich verschwinden auch die Zellennummern rechts neben den Zellenüberschriften und Zellen ohne Überschrift haben dann auch keinen "Titelbalken" mehr.

styleBackgroundImage

Dateiname des Hintergrundbilds. Die Bilddatei muss sich im Verzeichnis <fhem>/FHEM/lib/FUIP/images befinden. (<fhem> steht meistens für /opt/fhem) Unterstützt werden jpg- und png- Dateien. Nachdem eine neue Datei hochgeladen wurde, muss man im Browser (in FHEMWEB) die Seite einmal auffrischen (neu laden), um die neue Datei verwenden zu können.

Falls das Attribut pageWidth gesetzt ist, dann wird die Breite des Hintergrundbilds auf die angegebene Größe gesetzt. Ansonsten (ohne pageWidth) nimmt das Bild die Breite des Browser-Fensters ein. Die Höhe des Bilds wird entsprechend skaliert, man muss sich also selbst darum kümmern, dass das Bild ein passendes Seitenverhältnis hat.

Bei Verwendung eines Hintergrundbilds werden die Zellenhintergründe automatisch auf halbtransparent gesetzt, so dass das Bild durchscheint.

styleColor

Standard-Textfarbe (Vordergrundfarbe) für alle Views. Der Defaultwert ist #808080, also ein helles Grau. Man kann die Farbe nicht für alle FTUI-Widgets festlegen. D.h. styleColor funktioniert nicht unbedingt überall.

Links

• Foren-Thread zur Geburt von FUIP
• Aktuelle Dokumentation
• News zu FUIP
• github FHEM-FUIP