zurück zur Startseite

zurück zur Übersicht der Heimautomatisierung

10. Das Konzept der Bedienoberfläche (Stand 08.11.2018)

Auch wenn die Standardbedienoberfläche in FHEM ganz gut gemacht ist, so hat man doch eigene Vorstellungen und – das ist noch viel wichtiger – die liebe Ehefrau muss auch absolut überzeugt sein.

Den ersten Versuch, es schön grafisch zu gestalten, habe ich mit FLOORPLAN realisiert und sah ungefähr so aus.

Das mag zwar schön aussehen, ist aber vom Tablet aus nicht wirklich gut bedienbar. Also musste ein neues Konzept erstellt werden. Wie fast immer kann man in FHEM etwas finden, denn andere haben ja ähnliche Herausforderungen. Eine mögliche Lösung heißt TabletUI.

TabletUI ist eine wirklich tolle Sache mit ein paar Herausforderungen:

Ich habe mich ein paar Wochen damit beschäftigt und bin zu dem Schluss gekommen, dass das doch nicht der richtige Ansatz für mich ist. Schon das Erzeugen der Fonts bereitete mir sehr viele Probleme, denn dazu muss man wiederum Vektorgrafiken erstellen können. Letztendlich kam ich zu dem Entschluss, wieder auf FLOORPLAN zu gehen - allerdings mit dem neuen Design! Ja, das geht. Und es ist nicht einmal sonderlich schwierig.

Gut ist es, wenn man dann noch einen Vollbildbrowser (z.B. den „Fully Kiosk Browser“) auf dem Tablet hat und die Auflösung des Displays kennt. Noch besser ist es, wenn man ein klares Konzept hat. Ich habe mir ein paar Wochen gegönnt und mir das Ganze erst einmal auf Papier und dann in LibreOffice skizziert.

Die Basis ist ein Gitter von 40x25 quadratischen Elementen, welche man „welch Zufall“ auf dem Tablet mit einer Auflösung von 1600x1000 gut darstellen kann. Ein Element ist somit 40x40 groß. Über eine Anpassung an andere Bildschirmauflösungen mache ich mir aktuell keine Gedanken. Dieses Raster wird wie folgt genutzt:

Am Rand liegen links und rechts je 4 Felder, die letztendlich aufgrund der Berührung eine Funktion auslösen. So ein Berührfeld ist 5 Elemente breit und 5 Elemente hoch, also 200x200 - das sollte für die meisten Daumen passen. Links oben ist immer unser Logo (da muss ich mir noch Gedanken machen), rechts oben ist immer der Wochentag und das Datum zu sehen. Unterhalb der Tasten kann bei Bedarf eine weitere Information zu dem aktuellen Bild angezeigt werden, darunter liegt eine Informationszeile, die unabhängig von dem angezeigten Bild ist. Im Zentrum verbleibt ein Bereich von 30x23 Elementen.

In FHEM sieht das Grundgerüst dann in fhem.cfg wie folgt aus:

# FLORPLAN Definitionen Version 2
*********************************************

define zw_anfang FLOORPLAN
attr zw_anfang fp_arrange 0
attr zw_anfang fp_backgroundimg 20_uhr.png
attr zw_anfang fp_default 1
attr zw_anfang fp_noMenu 1
attr zw_anfang room Plan20
attr zw_anfang stylesheet 20floorplanstyle.css

define zw_eg FLOORPLAN
attr zw_eg fp_arrange 0
attr zw_eg fp_backgroundimg 20_basis.png
attr zw_eg fp_noMenu 1
attr zw_eg room Plan20
attr zw_eg stylesheet 20floorplanstyle.css

define zw_og FLOORPLAN
attr zw_og fp_arrange 0
attr zw_og fp_backgroundimg 20_basis.png
attr zw_og fp_noMenu 1
attr zw_og room Plan20
attr zw_og stylesheet 20floorplanstyle.css

define zw_pilgerzimmer FLOORPLAN
attr zw_pilgerzimmer fp_arrange 0
attr zw_pilgerzimmer fp_backgroundimg 20_basis.png
attr zw_pilgerzimmer fp_noMenu 1
attr zw_pilgerzimmer room Plan20
attr zw_pilgerzimmer stylesheet 20floorplanstyle.css

define zw_fahrradzimmer FLOORPLAN
attr zw_fahrradzimmer fp_arrange 0
attr zw_fahrradzimmer fp_backgroundimg 20_basis.png
attr zw_fahrradzimmer fp_noMenu 1
attr zw_fahrradzimmer room Plan20
attr zw_fahrradzimmer stylesheet 20floorplanstyle.css

define zw_eisenbahnzimmer FLOORPLAN
attr zw_eisenbahnzimmer fp_arrange 0
attr zw_eisenbahnzimmer fp_backgroundimg 20_basis.png
attr zw_eisenbahnzimmer fp_noMenu 1
attr zw_eisenbahnzimmer room Plan20
attr zw_eisenbahnzimmer stylesheet 20floorplanstyle.css

define zw_buero FLOORPLAN
attr zw_buero fp_arrange 0
attr zw_buero fp_backgroundimg 20_basis.png
attr zw_buero fp_noMenu 1
attr zw_buero room Plan20
attr zw_buero stylesheet 20floorplanstyle.css

define zw_treppenhaus FLOORPLAN
attr zw_treppenhaus fp_arrange 0
attr zw_treppenhaus fp_backgroundimg 20_basis.png
attr zw_treppenhaus fp_noMenu 1
attr zw_treppenhaus room Plan20
attr zw_treppenhaus stylesheet 20floorplanstyle.css

define zw_gaestebad FLOORPLAN
attr zw_gaestebad fp_arrange 0
attr zw_gaestebad fp_backgroundimg 20_basis.png
attr zw_gaestebad fp_noMenu 1
attr zw_gaestebad room Plan20
attr zw_gaestebad stylesheet 20floorplanstyle.css

define zw_privatbad FLOORPLAN
attr zw_privatbad fp_arrange 0
attr zw_privatbad fp_backgroundimg 20_basis.png
attr zw_privatbad fp_noMenu 1
attr zw_privatbad room Plan20
attr zw_privatbad stylesheet 20floorplanstyle.css

define zw_technikraum FLOORPLAN
attr zw_technikraum fp_arrange 0
attr zw_technikraum fp_backgroundimg 20_basis.png
attr zw_technikraum fp_noMenu 1
attr zw_technikraum room Plan20
attr zw_technikraum stylesheet 20floorplanstyle.css

define zw_orientzimmer FLOORPLAN
attr zw_orientzimmer fp_arrange 0
attr zw_orientzimmer fp_backgroundimg 20_basis.png
attr zw_orientzimmer fp_noMenu 1
attr zw_orientzimmer room Plan20
attr zw_orientzimmer stylesheet 20floorplanstyle.css

define zw_hifivideo FLOORPLAN
attr zw_hifivideo fp_arrange 0
attr zw_hifivideo fp_backgroundimg 20_basis.png
attr zw_hifivideo fp_noMenu 1
attr zw_hifivideo room Plan20
attr zw_hifivideo stylesheet 20floorplanstyle.css

define zw_wecker FLOORPLAN
attr zw_wecker fp_arrange 0
attr zw_wecker fp_backgroundimg 20_basis.png
attr zw_wecker fp_noMenu 1
attr zw_wecker room Plan20
attr zw_wecker stylesheet 20floorplanstyle.css

define zw_wohnkueche FLOORPLAN
attr zw_wohnkueche fp_arrange 0
attr zw_wohnkueche fp_backgroundimg 20_basis.png
attr zw_wohnkueche fp_noMenu 1
attr zw_wohnkueche room Plan20
attr zw_wohnkueche stylesheet 20floorplanstyle.css

define zw_eingang FLOORPLAN
attr zw_eingang fp_arrange 0
attr zw_eingang fp_backgroundimg 20_basis.png
attr zw_eingang fp_noMenu 1
attr zw_eingang room Plan20
attr zw_eingang stylesheet 20floorplanstyle.css

define zw_terrasse FLOORPLAN
attr zw_terrasse fp_arrange 0
attr zw_terrasse fp_backgroundimg 20_basis.png
attr zw_terrasse fp_noMenu 1
attr zw_terrasse room Plan20
attr zw_terrasse stylesheet 20floorplanstyle.css

define zw_neustartlinux FLOORPLAN
attr zw_neustartlinux fp_arrange 0
attr zw_neustartlinux fp_backgroundimg 20_basis.png
attr zw_neustartlinux fp_noMenu 1
attr zw_neustartlinux room Plan20
attr zw_neustartlinux stylesheet 20floorplanstyle.css

#define reloadWeb at +*01:00 trigger WEB JS:location.reload()
#attr reloadWeb room Plan

Die letzten 2 Zeilen sind auskommentiert, weil nicht notwendig. Dafür muss man ab FHEM 5.9 noch ein Attribut setzen, damit es kompatibel zu früheren Versionen ist:

attr WEB stylesheetPrefix default

Wichtig sind jetzt noch die Grafiken (png-Dateien) natürlich noch übertragen (danach "set WEB rereadicons" nicht vergessen) und dann bedarf es noch der css-Datei "20floorplanstyle.css".

weiter zu: 11. Die HomeMatic