Howto: FHEM Floorplan per RPI2-Touchscreen steuern

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://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://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://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://meintechblog.de/wordpress/wp-content/uploads/affiliate/B00OFLKPG4.gif” tag=”meintechblog-160203-21″ target=”_blank” rel=”nofollow”>

11 Kommentare
  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.

    1. Hey,

      es gibt auch von Raspberry direkt ein 7″ Touch Display.
      Mit dem Gehäuse kann man dann das Display und den Raspberry direkt unterbringen. Wird dann über den Kameraport und GPIO gesteuert, somit wäre der HDMI-Port noch frei, wenn benötigt.
      Hier gibt es ihn beispielsweise:
      https://www.rasppishop.de/Raspberry-Pi-7-Touchscreen-Display

      Viele Grüße
      Tino

  2. Und noch ein Display dazu mit einer Auflösung von 1024×600 inkl. des Artikels:
    http://www.heise.de/make/artikel/Touch-Display-fuer-den-Pi-2197895.html
    Den Treiber braucht man nicht mehr zu kompilieren, die Touchfunktion war out of the box nutzbar.

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

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

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

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

Das könnte dir auch gefallen