Seit vielen Jahren schon betreiben wir eine Hausautomations-Lösung, die – immer wieder angepasst – bis heute mit käuflichen Komplettangeboten mithalten kann. Steuerzentrale war immer ein möglichst stromsparender Kleinserver, zuerst ein Mini-PC mit IP-Symcon, dann ein Banana Pi, und aktuell ist es ein Raspberry Pi 3 mit FHEM. Das wird vielen Nutzern mittlerweile ziemlich bekannt vorkommen.
So verwenden Sie den Raspberry Pi als Desktop-Ersatz
©Swen Hopfe
In Verbindung mit der freien Software FHEM lässt sich Hardware unterschiedlicher Hersteller ansteuern. Wir haben größtenteils Sensoren und Aktoren aus dem Homematic-Programm und preiswerte Komponenten mit La-Crosse-Protokoll angebunden. Für die Kommunikation per Funk hängen dazu am Raspi ein CUL-Stick und ein Jeelink-Adapter im Eigenbau. Der Raspberry selbst hat mittlerweile ein vollwertiges Gehäuse bekommen, in dem auch eine SSD und eine unterbrechungsfreie Stromversorgung Platz gefunden haben.
©Swen Hopfe
Die standardmäßige Web-Oberfläche von FHEM bietet viele Informationen. Für bessere Übersichtlichkeit und Design gibt es in letzter Zeit mehr Möglichkeiten, so wie diverse Apps und eben auch das Tablet-Interface FTUI, das vom FHEM-Forum-Nutzer „setstate“ stammt. In 2017 hat die Version 2.5 Einzug gehalten. Das Frontend Framework basiert auf HTML, CSS und Javascript. Zum Betrieb braucht es eine FHEM-Installation mit einem HTTPSRV-Modul und – klar – einen Browser.
Eine gelungene Erweiterung, wie ich finde. Besser für die Touch-Bedienung ausgerichtet, kann man per Tablet, Smartphone oder auch am PC wichtige Werte in den Vordergrund rücken, vielseitig visualisieren und clever gruppieren. Dazu braucht es nur bedingt tieferes Programmierwissen. Gearbeitet wird mit HTML-Code, wo die vorhandenen Geräte per ©Swen Hopfe Für Experten bietet das FTUI wiederum tolle Möglichkeiten. Anleitungen gibt es auf der Wiki-Seite von FHEM und in diversen Blogs. Im Ergebnis entsteht dann so etwas, wie auf den Bildern hier zu sehen, zum Beispiel auch eine Übersichtsseite, die den Zustand aller Gerätebatterien zeigt, die nicht am permanenten Stromnetz hängen. Für ein einheitliches Aussehen haben alle unsere Seiten dasselbe Hintergrundbild, dunkle Zellen mit diverser Transparenz, und gleiche Fonts bekommen. Das Ganze soll in nächster Zeit bei uns noch Schritt für Schritt wachsen. Die Entscheidung dazu fiel quasi im Hinblick auf den Markt und die derzeit verfügbaren Systeme. Wo ich also noch ein Stückchen beim Unterbau mittels Raspberry Pi, FHEM und Homematic bleiben möchte, da eine gewisse Zukunftssicherheit da ist – ich will ja nicht ständig umsatteln. Ein wesentlicher Vorteil des Tablet-UI ist außerdem, dass es auf verschiedenen Endgeräten mit unterschiedlichen Bildschirmgrößen funktioniert. Somit lohnt es sich also, das grafische User- Interface so gut als möglich auszubauen, um damit nicht zuletzt einen fast immer gleichen Blick per PC, Notebook, Tablet oder Handy auf seine aktuellen Daten zu haben. ©Swen Hopfe Gut, dass der FHEM-Server, wie es bei aktuellen CMS gängig ist, eine Trennung zwischen Inhalten und Design erlaubt. Somit kann man eine neue Oberfläche gestalten, ohne alle bisherigen Verknüpfungen zwischen den mitunter vielen Aktoren und Sensoren anzutasten. Aber man sollte sich wegen der Übersichtlichkeit vorher Gedanken machen, ob man wirklich alle Geräte und Zustände visualisieren und schaltbar machen möchte. Und gleichzeitig so „agil“ vorgehen, dass man etwa an den Verknüpfungen im Unterbau auch etwas ändert, wenn es der Web-Oberfläche zuträglich ist. Damit wären wir bei der Planung angekommen. Möchte man eine Menge darstellen, machen sich mehrere Seiten gut. Bei uns sind das derzeit: 1 Startseite 2 Skripte 3 Batteriezustände 4 Webcam Und da geht noch viel mehr. Wo wir uns auf eine minimale Vorhersage auf der Startseite beschränken, mögen manche zum Beispiel eine komplette Wetterseite. Proplanta-Wetter ist derzeit recht beliebt. Auch Kalender findet man häufig, so wird das Tablet zur Informationszentrale. Andere binden auch noch diverse Utilities ein, etwa einen Button, um den Server herunterzufahren oder das Event-Log anzuzeigen. Auch keine schlechte Idee, weil man sich für solche Aktionen ansonsten meist tief durch ein Menü klicken muss. Zurück zu unserem Projekt. Eine gängige Methode ist, dass man seine Objekte im Layout nach Beleuchtung, Heizungssteuerung, Rolladen oder ähnlichen Aufgaben gruppiert. Eine andere, alles den in der Wohnung vorhandenen Räumen zuzuordnen. Wir haben per Raum zusammengefasst. Ähnlich einem Grundriss kann man dort noch ansatzweise die wirkliche Anordnung der Räume erkennen. Mitunter hilft eine Skizze vorab. Nicht zuletzt kommt es darauf an, wie viele Objekte man auf einer Seite unterbringen möchte, an welcher Stelle sie stehen sollen und wie breit und hoch die abzugrenzenden Sektionen, Links sein sollen. Da wird man schnell feststellen, dass diverse Räume mehr automatisierungslastig sind als andere. Und man wird zum Beispiel dem Wohnzimmer mehr Platz in der UI einräumen als dem Flur oder Abstellraum. ©Swen Hopfe Die maximale Anzahl an Spalten und Zeilen ergibt dann ein Gitter. Acht Spalten und vier Zeilen im Gridster-Layout waren für mich für die Startseite der beste Kompromiss, um die meisten im Haushalt vorhandenen Geräte übersichtlich abzubilden. Platz genug für alle Widgets und immer noch per Finger am Tablet bedienbar. Für weitere Seiten bin ich davon etwas abgewichen. Wie wird das nun in HTML umgesetzt? Das Grundgerippe sieht wie gewohnt so aus: ©Swen Hopfe Dazu kommt der FTUI-typische Meta-Rahmen mittels Gridster (oder Flex, Tabelle, Reihen). Ein Daten-Link wird durch Reihe und Spalte platziert (data-row, data-col) und seine Ausmaße in x- und y-Richtung (data-sizex, data-sizey) festgelegt, was dann so aussehen kann: ©Swen Hopfe Die Funktionalität der Devices wird durch Widgets bewerkstelligt, wovon es günstigerweise viele bereits integrierte Standard-Widgets und 3rd-Party-Widgets gibt. Daneben kann man mit Templates arbeiten. An Stelle der leeren ©Swen Hopfe Will man Daten empfangen oder per Push- oder Switch-Button senden, sind data-get, data-set-on oder data-set-off wichtige Schlüsselworte. Danach folgt die nächste Zelle mit einem oder mehreren Widgets, Links oder Textlabeln. Hat man den aktuellen Datenlink gefüllt, geht es zum nächsten, der vielleicht in der nächsten Zeile row liegt. Und da man ein Koordinatensystem aus data-row und data-col zur Verfügung hat, ist es nicht einmal von Belang, in welcher Reihenfolge, die einzelnen -Statements im Quelltext angelegt werden. Eine gute Struktur hilft wie immer aber, sich auch später noch zurechtzufinden. Im Standard-Umfang bietet FTUI alles Notwendige. Manch einer möchte noch externe Widgets einsetzen oder etwa sogar selbst welche entwerfen. Vor allem aber Klassendefinitionen für Größe, Farbe und Positionierung nicht vergessen. Beispiele dafür sind: Größen für Symbole oder Labels: tiny: 60%, large: 125%, bigger: 200%
Positionierung: topspace: 15px extra on top, inline: kein Zeilenumbruch… Mit solcherlei Anpassungen schafft man sich sein eigenes, unverwechselbares Layout, und davon gibt es massig. Kompliment an die Entwickler. Alles weitere zum Quelltext würde wohl den Rahmen hier sprengen. Für die ersten Schritte kann man alles in https://wiki.fhem.de/wiki/FHEM_Tablet_UI recht gut nachlesen. Und es gibt mittlerweile eine umfangreiche Community, so dass man durch Websuche auf die meisten Fragen zum Start auch Antworten findet. Bis man richtig firm wird, dauert es sicherlich eine Weile, aber letztendlich ist es so schwierig nicht. Nun zur Installation des Tablet-UI. Da sind Nutzer, die schon einen funktionierenden Hausautomations-Server per FHEM am Laufen haben, wissensmäßig im Vorteil. Dessen Web- Frontend erreicht man standardmäßig durch Mittels der Portnummer (8083/84/85) wird durch FHEM noch zwischen verschiedenen Endgeräten unterschieden, dadurch kann man auf Unterschiede zwischen PC, Tablet und Smartphone eingehen. Beim Tablet-UI gibt es einen extra Pfad in das Unterverzeichnis /ftui nach da ist die Portnummer nicht mehr so wichtig. Nebenbei: Der letzte Slash am URL ist wichtig, weil es sonst ein ungeliebtes Verhalten mit relativen Links geben kann. Aber zuerst muss man installieren. Auf dem Raspberry Pi werden durch alle notwendigen Dateien in das FHEM-Verzeichnis /opt/fhem/www kopiert. Anschließend ist mittels der FHEM-Kommandozeile ein neues HTTPSRV-Device in FHEM anzulegen, das auf den Ordner mit den gerade heruntergeladenen Dateien verweist, indem man eingibt. Damit die Tablet-UI mit FHEM kommunizieren kann, ist noch die longpoll-Einstellung im FHEMWEB-Device festzulegen, was so aussieht: Oder, falls das nicht funktioniert (bei Problemen mit websocket): Jetzt muss man noch die anfängliche Beispieldatei in /opt/fhem/www/tablet/index-example.html gegen den eigenen Entwurf austauschen, wenn man schon so weit ist. Nach einem Neustart von FHEM wird das Ganze dann aktiv. Was wir entwickelt haben, läuft auf einem Lenovo-Tab klaglos, auch das Handy ist im Landscape- Modus gut verwendbar, alle Symbole sind da noch gut zu erkennen. Mein neuer Notebook hat auch einen Touchscreen. Auf einem großen PC-Bildschirm geht’s natürlich auch. Und überall dort, wo man einen Browser mit Verbindung ins lokale Netzwerk aufrufen kann. Ein Zugriff aus der Ferne ist auch kein Problem, wenn man eine statische Netzwerkadresse konfiguriert hat. Ist bei mir absichtlich nicht vorgesehen, das WLAN reicht uns, um im Garten bei schönem Wetter alles zu machen. ©Swen Hopfe Auf dem Startbildschirm der UI sind also die wichtigsten Angaben platziert und per Raum gruppiert. Bisher reichen uns die Standard-Widgets, eines davon ist die Anzeige für die Wandthermostate der Heizung mit Soll- und Istwert. Die finde ich gelungen. Daneben wird für jeden einbezogenen Raum auch noch die Luftfeuchtigkeit angezeigt. Eine interessante Sache ist, diverse Lichtszenen zu schalten, wo auf Knopfdruck mehrere Leuchten je nach Stimmung und Bedarf unterschiedlich gedimmt werden. Bei den Skripten finde ich die generellen Funktionen gut. Vor allem möchte ich ein “Alles Licht aus” nicht mehr missen. Denn da ist es nicht nur Spiel, sondern hilft echt. Zum Beispiel vor dem Zubettgehen oder vor dem Urlaub. Da kann man mittels einer Abwesenheitsschaltung komplett alles in den Ruhestand versetzen und zum Beispiel auf alle Heizkörper die Absenktemperatur legen. Und so ist es auch bei uns gemacht. Bilder darzustellen ist auch kein Problem, bei uns liegt ein Link auf der zuletzt durch die Webcam geschossenen Aufnahme… ©Swen Hopfe Bei uns liegt das Tablet auf dem Tisch und eine Homematic-Fernbedienung gibt es auch. Damit ist man bei der Bedienung ziemlich mobil. Auf einem Android-Gerät kann man die Web-Oberfläche auch mit dem Fully-Browser aufrufen. Den gibt es im Android-Store, und er ist eine wirkliche “Kiosk-Lösung”. Damit passt er gut zum FTUI, weil er den gesamten Platz vom Screen ausnutzt und das Display ständig am Laufen hält. Die Navigationszeile gibt es erst bei Bedarf. Dadurch hat man schon alle Mittel für einen Dauerbetrieb an Bord. In dieser Kombination lässt sich also auch ein tolles stationäres Infodisplay im Haus realisieren. Interessiert man sich heute für ein schönes Smart Home und traut man sich zu, den Weg zu einer herstellerunabhängigen Lösung wie FHEM zu gehen, dann sollte man sich das Tablet-UI auf jeden Fall ansehen. Mit wenig Anstrengung schafft man sich dann ein absolut schönes Interface, was jeden Tag richtig Spaß macht …
http://meinserver:8083/fhem/http://meinserver:8085/fhem/ftui/update all https://raw.githubusercontent.com/knowthelist/fhemtabletui/ master/controls_fhemtabletui.txtdefine TABLETUI HTTPSRV ftui/ ./www/tablet/ TabletUIattr WEB longpoll websocketattr WEB longpoll 1
Autor: Swen Hopfe
Swen Hopfe arbeitet bei einem mittelständischen Unternehmen aus der Chipkarten-Branche und ist Experte für Smart Cards, RFID, das IoT, Raspberry Pi und Arduino.