Howto: FHEM Floorplan per RPI2-Touchscreen steuern

Loxone im Einsatz? Dann schau dir unseren LoxKurs an und profitiere von unserem Wissen!

Vor Kurzem habe ich mir einen Touchscreen samt Plexiglasgeh√§use f√ľr meinen Raspberry Pi 2 besorgt. ¬†Ziel des Ganzen war¬†die Darstellung eines Grundrisses (Floorplan) mit FHEM, sodass die wichtigsten¬†Befehle¬†bequem¬†per¬†Touch-Interface erreicht werden k√∂nnen. Dazu geh√∂rt zum Beispiel das Licht einschalten, oder die aktuelle Raumtemperatur regeln. Zu viele Buttons und Steuerungsoptionen m√∂chte ich dort aber auch nicht unterbringen, da der Platz auf dem kleinen 3,5 Zoll Display dann doch relativ beschr√§nkt ist. Es wird am Ende sicher mehr eine Art Dashboard als eine totale Kontrollzentrale werden.

Im nachfolgenden Howto möchte ich erklären, wie ein Floorplan erstellt und dieser automatisch beim Booten auf dem Raspberry-Touchscreen dargestellt werden kann.

Was ben√∂tigt man daf√ľr?

Aktuell habe ich Raspbian Wheezy installiert – also mit grafischer Oberfl√§che. In wie weit das Ganze auf RaspBMC oder andere Ger√§te √ľbertragbar ist, kann ich nicht sagen. Bitte beachtet, dass man nach der Konfiguration des Touchscreens den HDMI-Ausgang nicht parallel betreiben kann. Auch ist es wichtig, dass zwingend ein RPI 2 verwendet wird, an¬†einem¬†RPI 1 l√§sst sich der Touscreen nicht anschlie√üen.

Affiliate-Links

[easyazon_image align=“none“¬†height=“160″ width=“160″ identifier=“B00T2U7R7I“ locale=“DE“ src=“https://www.meintechblog.de/wordpress/wp-content/uploads/affiliate/B00T2U7R7I.gif“ tag=“meintechblog-160203-21″ target=“_blank“ rel=“nofollow“> [easyazon_image align=“none“¬†height=“160″ width=“160″ identifier=“B00OFLKPG4″ locale=“DE“ src=“https://www.meintechblog.de/wordpress/wp-content/uploads/affiliate/B00OFLKPG4.gif“ tag=“meintechblog-160203-21″ target=“_blank“ rel=“nofollow“>

Den Floorplan in FHEM erstellen

Als erstes erstellen wir einen neuen Plan. Falls bereits ein Plan erstellt wurde, kann¬†dieser nat√ľrlich verwendet werden und die folgenden Schritte k√∂nnen √ľbersprungen werden. Wichtig ist nur, dass der Plan nicht riesengro√ü und f√ľr das kleinere Display geeignet ist.

F√ľr den Anfang ben√∂tigen wir den aktuellen Grundriss der Wohnung / der Etage als PNG-Datei (andere Formate werden nicht unterst√ľtzt!). Entweder man malt sich nun selbst etwas, oder man bedient sich bestehenden Unterlagen. So habe ich zum Beispiel das Expos√© meiner Wohnung ausgegraben, mit dem Smartphone abfotografiert und in Pixelmator etwas nachbearbeitet. Das geht nat√ľrlich auch mit jedem anderen Grafikprogramm. Hauptsache, man bekommt am Ende einen einigerma√üen Ma√üstabsgetreuen Grundriss zustande.

Wichtig ist, dass der Floorplan am Ende genauso gro√ü ist wie das Display. Also 480 x 320 Pixel. Ansonsten sehen wir nachher nur einen Teil vom Grundriss. Das w√§re nat√ľrlich suboptimal.

Diese Datei speichern wir dann als PNG-Datei ab, kopieren diese auf dem Raspberry in das richtige Verzeichnis

/opt/fhem/www/images/default

und passen die Dateiberechtigungen (eventuell) noch an, damit FHEM diese auch lesen darf. Wichtig ist hierbei der Dateiname! Die Datei muss genauso heißen, wie der spätere Floorplan in FHEM heißen soll und fängt mit fp_ an.

In meinem Fall soll der Floorplan „Wohnzimmer“ hei√üen, also nennen wir die Datei

fp_Wohnzimmer.png

Hier einmal mein Ergebnis. Geht bestimmt besser, aber ich wollte erstmal schnell zu einer Funktionierenden L√∂sung kommen. Mit einem ordentlichen Scan w√ľrde das Ganze sicher sch√∂ner aussehen.

fp_Wohnung

Nun legen wir einen neuen Floorplan per FHEM-Kommandozeile an. Hierbei ist darauf zu achten, dass der selbe Name verwendet wird, wie schon zuvor bei dem Bild. Also bei mir wieder „Wohnung“.

define Wohnzimmer FLOORPLAN

Damit alles einmal gespeichert und neu geladen wird, klicken wir links oben auf „Save config“ und starten FHEM per FHEM-Konsolenbefehl

shutdown restart

neu.

Nun erhalten wir auch direkt einen neuen Menupunkt names „Floorplans“. Klickt man dort drauf, sollte das zuvor hochgeladene Bild bereits angezeigt werden. Ist das nicht der Fall, m√ľsse noch einmal die Dateirechte, der Pfad und der Dateiname kontrolliert werden.

Nun m√ľssen wir die Ger√§te auf dem Floorplan positionieren. Dazu schalten wir in FHEM als erstes in den „arrange mode“. Dazu √∂ffnet man den Floorplan in FHEM und klickt bei fp_arrange auf on. Jetzt √∂ffnet man den Floorplan √ľber den Menupunkt „Floorplans“ und kann dort neue Ger√§te hinzuf√ľgen und einfach hin und her schieben. Funktioniert perfekt und ist wirklich intuitiv.

FHEM-Floorplan-Arrange-Mode

Probiert auf jeden Fall einmal die verschiedenen Stile durch. Je nach Style des Gerätes werden unterschiedliche Informationen angezeigt.

Floorplan_Geraete

Jetzt ist euer Plan hoffentlich fertig und wir k√∂nnen damit beginnen, den Touchscreen zu konfigurieren. Achso, und nicht vergessen den Arrange-Mode wieder auf off zu schalten und die FHEM-Konfiguration danach mit „Save config“ zu speichern!

Touchscreen konfigurieren

Bevor ich hier nun alles dupliziere, verlinke ich einfach auf die¬†offizielle Anleitung. Hier werden alle notwendigen Schritte f√ľr die Einrichtung des Touscreens beschrieben.

Im Prinzip muss man nur das Display aufstecken und ein paar Dateien anpassen – wirklich nicht schwer. Auch ich habe das vorher noch nie gemacht und es ohne Probleme im ersten Anlauf hinbekommen! Also nur Mut.

Floorplan auf dem Touchscreen darstellen

Per Terminal auf dem RPI2 einloggen und erstmal zwei benötigte Pakete installieren:

sudo apt-get -y install midori unclutter

Im Home-Verzeichnis per nano-Editor eine „fullscreen.sh“ anlegen

sudo nano ~/fullscreen.sh

und mit folgendem Inhalt f√ľllen:

#!/bin/sh

export DISPLAY=:0.0

unclutter &
xset -dpms
xset s off

while true; do
/usr/bin/midori -e Fullscreen -a http://localhost:8085/fhem/floorplan/Wohnzimmer
done

Die Datei wird mit der Tastenkombination „STRG + o“ gespeichert und der Editor mit „STRG + x“ geschlossen.

Kurze Erkl√§rung: Die dritte¬†Zeile erkl√§rt dem nachfolgenden Programmen, welches Display wir gerne ansteuern w√ľrden. Das k√∂nnte man auch mit einem Parameter √ľbergeben, klappt aber bei mir so sehr gut und stressfrei. Unclutter l√§sst den Mauszeiger verschwinden und xset sorgt daf√ľr, dass das Display nicht in den Ruhemodus wechselt und immer hell bleibt (siehe: Display Power Management Signaling). Dann folgt eine Schleife, welche den Browser Midori immer wieder ausf√ľhrt, falls er beendet wird. St√ľrzt er also ab oder wird durch einen anderen Grund beendet, wird er direkt neugestartet.

Das Script √∂ffnet nat√ľrlich direkt den entsprechenden Floorplan in FHEM. Hier muss also noch der Name des Floorplans erg√§nzt werden.

Diese Datei muss nun¬†noch beim Starten automatisch ausgef√ľhrt werden. Dazu tragen wir den Aufruf in die .profile im Home-Verzeichnis ein.

sudo nano ~/.profile

Ganz am Ende wird dann der Aufruf der neuen Datei „fullscreen.sh“ eingetragen:

sh /home/pi/fullscreen.sh

Fertig! Nach einem Neustart erscheint dann der Browser mit dem neuen Floorplan auf dem Bildschirm. Jetzt könnte man meinen, wir sind fertig. Aber ich möchte das Ergebnis noch etwas verbessern.

Feintuning

Jetzt l√§uft zwar alles, aber ich hatte das Problem, dass die Steuerelemente teilweise extrem klein sind, um sie vern√ľnftig mit dem Finger zu treffen. Zum Gl√ľck bewegen wir uns ja im Web-Umfeld und k√∂nnen daher mit ein paar CSS-Regeln unseren Floorplan ein wenig touch-freundlicher machen.

In meinem Fall habe ich erstmal die Icons alle ein wenig gr√∂√üer gemacht, die Scrollbars entfernt und die Abst√§nde zu den Bildschirmr√§ndern entfernt. Gl√ľcklicherweise kann man das nat√ľrlich alles schon im Desktop-Browser testen und braucht nicht jedes Mal den Floorplan auf das Ger√§t schieben. Die Icons sind in diesem Beispiel noch die originalen, die einfach vergr√∂√üert wurden. Dadurch leidet nat√ľrlich etwas die Qualit√§t der Bilder. M√∂chte man das perfekt haben, tauscht man diese am besten ebenfalls per CSS aus.

Als erstes legen wir ein eigenes Stylesheet f√ľr unseren Plan an. Immerhin wollen wir ja nicht jeden Plan in FHEM mit den Riesen-Icons versehen. Der Dateiname ist dabei egal. Nat√ľrlich probiere ich aber, den Namen so beschreibend wie m√∂glich zu w√§hlen.

attr Wohnzimmer stylesheet wohnzimmerfloorplanstyle.css

Die hier genannte Datei wird in dem Verzeichnis „/opt/fhem/www/pgm2/“¬†mit dem nano-Editor erzeugt

sudo nano /opt/fhem/www/pgm2/

und bekommt den folgenden Inhalt.

body {
overflow: hidden;
margin: 0;
padding: 0;
background: black;
}

#menu {
display: none;
}

.devicestate img {
width: 70px;
height: auto;
pointer-events: none;
cursor: none !important;
}

.devicestate a {
display: block;
width: 100%;
height: 100%;
}

Die Datei wird dann wie oben¬†mit der Tastenkombination „STRG + o“ gespeichert und der nano-Editor mit „STRG + x“ geschlossen.

Fertig. Sieht gleich viel besser aus, oder?

Floorplan_Ergebnis

Alternativen

Nat√ľrlich w√ľrde auch ein gr√∂√üeres Display funktionieren, welches¬†direkt per HDMI an den Raspberry¬†angeschlossen wird. ABER das sind in den meisten F√§llen eben keine Touchscreens. Daf√ľr hat man eine Menge mehr Platz und k√∂nnte dieses als reines Dashboard verwenden.

Au√üerdem w√ľrden in diesem Fall dann die GPIO-Pins f√ľr weitere Spielereien frei bleiben. Aber das muss man eben von Fall zu Fall entscheiden. Ich habe mich auch nur f√ľr die Touchscreen-L√∂sung entschieden, weil mir die Idee gef√§llt alles ohne Smartphone zentral bedienen zu k√∂nnen.

Aus meinem täglichen Leben

Der Touch-Display von Tontec (Affiliate-Link) ist relativ einfach eingerichtet und die Positionierung der Elemente geht leicht von der Hand. Das habe ich mir vor diesem kleinen Projekt sehr viel schwieriger vorgestellt. Wirklich gut gemacht!

Raspberry-Touch-Floorplan-gross

Die Bedienung ist sicherlich noch optimierungsfähig Рaber kleinere Anpassungen gehen dank CSS sehr schnell. Über kurz oder lang werde ich das Display wahrscheinlich mehr als Dashboard nutzen Рmal sehen, wie sich der Touchscreen im Alltag schlägt. Eine schöne Spielerei mit viel Potenzial ist es aber auf jeden Fall!

Die Touch-Bedienung ist zwar ab und zu etwas hakelig, aber f√ľr mich macht die Floorplan-Funktion in FHEM so das erste Mal etwas Sinn. Vorher wusste ich gar nicht, wof√ľr ich sie eigentlich nutzen sollte.

Affiliate-Links

[easyazon_image align=“none“¬†height=“160″ width=“160″ identifier=“B00T2U7R7I“ locale=“DE“ src=“https://www.meintechblog.de/wordpress/wp-content/uploads/affiliate/B00T2U7R7I.gif“ tag=“meintechblog-160203-21″ target=“_blank“ rel=“nofollow“> [easyazon_image align=“none“¬†height=“160″ width=“160″ identifier=“B00OFLKPG4″ locale=“DE“ src=“https://www.meintechblog.de/wordpress/wp-content/uploads/affiliate/B00OFLKPG4.gif“ tag=“meintechblog-160203-21″ target=“_blank“ rel=“nofollow“>

Loxone im Einsatz? Dann schau dir unseren LoxKurs an und profitiere von unserem Wissen!

Verpasse keine Inhalte mehr! Trage dich in den Newsletter ein und folge uns auf Facebook.

Was ist ein Affiliate-Link? Wenn du auf einen Affiliate-Link klickst und √ľber diesen Link einkaufst, bekomme ich vom betreffenden Online-Shop oder Anbieter eine Provision, was mich u.A. bei den laufenden Kosten den Blogs unterst√ľtzt. F√ľr dich ver√§ndert sich der Preis nicht.

Matthias

ist ein Allround-Talent in Sachen Softwareentwicklung, Blogging, Design und Video-/Fotografie. Auf meintechblog.de schreibt er √ľber Technik, die ihn in seinem Alltag besch√§ftigt - auf seinen eigenen Blogs geht es um Softwareentwicklung, Fotografie und nat√ľrlich auch Smart Home. Mehr Infos

11 Gedanken zu „Howto: FHEM Floorplan per RPI2-Touchscreen steuern“

  1. cool…..sehr sch√∂n
    Das 3.5″ Display muss aber doch sehr klein sein, oder? F√ľr nicht viel mehr geld kann man ein 7 Zoll Display (Affiliate-Link) kaufen.
    Ich √ľberlege zur Zeit ob ich in der K√ľche ein LCD an der Wand montiere – f√ľr Musik/You Tube, Rezepte im Internet und FHEM w√§re es toll.

  2. So ganz klar ist mir trotzdem nicht, warum ich mir so eine L√∂sung basteln sollte. W√§re das da nicht allemal reiswerter, ein billiges China-Tablet als Steuerungszentrale zu benutzen? Damit w√§re ich zumindest flexibler und k√∂nnte noch mehr Funktionen nutzen. Eine Steckdose in der N√§he brauche ich f√ľr beide Versionen.

    1. Genau das habe ich mir auch eben gedacht. Zum Spielen und Ausprobieren eine coole Sache, vor allem wenn man sieht was man heute f√ľr relativ kleines Geld bekommt. Aber ein g√ľnstiges Androidtablet ist schneller und ohne Gebastel f√ľr eine FHEM Bedienoberfl√§che (Smart Visu, TabletUI oder Floorplan) eingerichtet.

    2. Hi Markus,

      nat√ľrlich hast Du Recht. Aber ich hatte mir das Display vor l√§ngerer Zeit bestellt und seitdem lag es nur rum. Der Rest war schon da und darum konnte ich die bestehenden Dinge mit relativ wenig Aufwand miteinander kombinieren.

      Wenn ich genau die Problemstellung h√§tte, ein Touchdisplay f√ľr die Wand zu kaufen, w√ľrde ich wahrscheinlich jetzt auch zu einem g√ľnstigen Tablet greifen. Die L√∂sung hier war f√ľr mich einfach naheliegend ;)

      Viel mehr sollte das Beispiel den Umgang mit Floorplans (und einem sinnigen Anwendungsfall) schildern, und wie man die Oberfl√§che dann f√ľr Touch optimieren kann. Wie genau das Eingabeger√§t dabei aussieht oder wie gro√ü es ist, ist f√ľr diesen Anwendungsfall ja eher sekund√§r.

  3. Ich finde die Lösung hat auf Grund ihrer Kompaktheit durchaus ihren Charme. Deshalb habe ich mir das Display geholt. Hänge nun aber noch etwas. Erst einmal: das Display leuchtet und zeigt die Meldungen beim Booten einwandfrei an. Dann bleibt es beim Login stehn. Also Tastaur verbunden und mich eingeloggt. Dann kommen Fehlermeldungen:
    unclutter: could not open display
    xset: unable to open display „:0.0“
    Und auch midori kann das Display nicht öffnen. Wenn ich von Hand nun startx eingebe, dann sehe ich in der grafischen Oberfläche ein Fenster mit dem fhem-Floorplan. Was stimmt nicht bei
    export DISPLAY=:0.0

    1. Neben mehreren Tablets habe ich „auf Grund ihrer Kompaktheit“ zus√§tzlich zur L√∂sung mit mehreren alten Samsung Galaxy GT-S5301 gegriffen. Einfach mal bei ebay nach „Samsung Android“ suchen – und als Filter H√∂chstpreis 10‚ā¨ angeben ;) Kompakter geht es nun wirklich nicht.

  4. Tolle Anleitung. Ich habe das auch so gemacht, allerdings habe ich auf meinem Display die Oberfl√§che mit dem Browser nur f√ľr ca. 1/4 ausgef√ľllt. Muss ich da noch was beachten. Au√üerdem steht beim ersten Start des RPi2s der Brower immer auf „Error“. Ein „Try again“ bringt dann den GrundrissPlan, allerdings eben nur auf dem 1/4 des Displays

  5. Wie speichert man denn die PNG-Datei in das Verzeichnis
    /opt/fhem/www/images/default

    Das Bild liegt auf meinem Mac und ich habe SSH-Zugriff auf den Raspberry.

    Danke f√ľr eine Info.

    1. Hi Markus,
      das kannst du einfach per Filezilla realisieren. Als Verbindungsprotokoll w√§hlst du einfach „SFTP“ anstatt „FTP“ und loggst dich mit deinen ssh-Daten ein.

      Gr√ľ√üe und viel Erfolg
      Jörg

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert