FHEM Tutorial-Reihe - Part 37: Touch-Display auf dem Raspberry Pi mit Tablet UI

Mit ** gekennzeichnete Links auf dieser Seite sind Affiliatelinks.

FHEM Tutorial-Reihe - Part 37: Touch-Display auf dem Raspberry Pi mit Tablet UI
FHEM Tutorial-Reihe - Part 37: Touch-Display auf dem Raspberry Pi mit Tablet UI
  • Matthias Kleine
  • 29.08.2017
  • Darstellung
  • TabletUi

Vor ungefähr 2 Jahren habe ich mir ein Touch-Display für meinen Raspberry Pi gekauft, welches ich am Anfang für einen Floorplan genutzt habe (siehe Gastbeitrag meintechblog.de). Seitdem ich auf den Intel Nuc umgezogen bin gab es allerdings keinen Einsatz mehr für dieses Display. Dies soll sich heute wieder ändern und ich habe angefangen, mir eine kleine TabletUI-Oberfläche extra für das kleine Display zusammen zu bauen.

Generell kann man diesen Ansatz natürlich mit jedem Display verfolgen, da der Raspberry hier einfach nur ein Endgerät mit Display ist. Ein Tablet o.ä. würde genauso gut funktionieren und sogar um einiges dünner. Natürlich weiß ich, dass es all diese Möglichkeiten gibt, aber für den Kurs von ungefähr 30 Euro wird man diese nicht bekommen.

Was wird benötigt?

  • Eine FHEM-Installation
  • Ein Raspberry Pi mit Touch-Display

Das von mir genutzte Display ist auf Amazon nicht mehr verfügbar - stattdessen könnte man auch dieses hier verwenden (sieht auf den Fotos genauso aus).

Quimat 3,5 Zoll Touchscreen-Monitor 320 x 480 Auflösung TFT LCD-Display Modul SPI-Schnittstelle mit Touch-Pen für Raspberry-pi 2 3 Modell B/B + 2B QSC11(With case) (Display) **

Quimat 3,5 Zoll Touchscreen-Monitor 320 x 480 Auflösung TFT LCD-Display Modul SPI-Schnittstelle mit Touch-Pen für Raspberry-pi 2 3 Modell B/B + 2B QSC11(With case) (Display)

Video

FHEM-Kurs

Befehle

sudo apt-get update
sudo apt-get upgrade
sudo reboot

sudo vi /boot/config.txt

dtparam=spi=on
dtoverlay=mz61581

sudo reboot

sudo vi /usr/share/X11/xorg.conf.d/99-fbturbo.conf
Option          "fbdev" "/dev/fb1”

sudo vi /boot/cmdline.txt
fbcon=map:10

sudo reboot

vi /home/pi/.config/lxsession/LXDE-pi/autostart

@xset s off
@xset s noblank
@xset -dpms
@chromium-browser --enable-offline-auto-reload --hide-scrollbars --noerrdialogs --kiosk --incognito https://haus-automatisierung.com/

Hier gibt es eine Liste mit allen möglichen Parametern für den Chromium-Browser.

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="widget_base_width" content="40">
	<meta name="widget_base_height" content="40">
	<meta name="gridster_cols" content="40">
	<meta name="gridster_rows" content="40">

	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="gridster_disable" content="0">
	<meta name="widget_margin" content="0">
	<meta name="longpoll" content="1">
	<meta name="longpoll_filter" content=".*">
	<meta name="debug" content="2">

	<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-wdtimer.css" />

	<!-- define your personal style here, it wont be overwritten  -->
	<!-- link rel="stylesheet" href="/fhem/tablet/css/fhem-green-ui.css" / -->	
	<link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />

	<script src="lib/jquery.toast.min.js"></script>
	<script src="lib/jquery.gridster.min.js"></script>
	<script src="js/fhem-tablet-ui.js" defer></script>

	<title>Raspberry Pi Display</title>
</head>
<body>
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="12" data-sizey="8">
                <div class="sheet">
                    <div class="cell bigger darker">Wetter Morgen</div>
                    <div class="row">		
                        <div class="col-1-3">
                            <div data-type="label" class="cell top-space narrow">morgens</div>
                            <div data-type="weather" data-device="OUT_WetterProplanta" data-get="fc0_weatherMorningIcon" data-imageset="kleinklima" class="cell"></div>
                            <div data-type="label" data-device="OUT_WetterProplanta" data-get="fc0_weatherMorning" class="cell top-narrow"></div>
                            <div data-type="label" data-device="OUT_WetterProplanta" data-get="fc0_temp06" data-unit="%B0C%0A" class="cell bigger" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
                        </div>
                        <div class="col-1-3">
                            <div data-type="label" class="cell top-space narrow">mittags</div>
                            <div data-type="weather" data-device="OUT_WetterProplanta" data-get="fc0_weatherDayIcon" data-imageset="kleinklima" class="cell"></div>
                            <div data-type="label" data-device="OUT_WetterProplanta" data-get="fc0_weatherDay" class="cell top-narrow"></div>
                            <div data-type="label" data-device="OUT_WetterProplanta" data-get="fc0_temp12" data-unit="%B0C%0A" class="cell bigger" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
                        </div>
                        <div class="col-1-3">
                            <div data-type="label" class="cell top-space narrow">abends</div>
                            <div data-type="weather" data-device="OUT_WetterProplanta" data-get="fc0_weatherEveningIcon" data-imageset="kleinklima" class="cell"></div>
                            <div data-type="label" data-device="OUT_WetterProplanta" data-get="fc0_weatherEvening" class="cell top-narrow"></div>
                            <div data-type="label" data-device="OUT_WetterProplanta" data-get="fc0_temp18" data-unit="%B0C%0A" class="cell bigger" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>
Ich will mehr

Smart-Home-Training von A-Z

Steig noch tiefer in die Themen ein und meistere Deine Projekte!

ioBroker-Master-Kurs

ioBroker-Master-Kurs

Mehr Infos
NodeRed-Kurs

NodeRed-Kurs

Mehr Infos
Lox-Kurs

Lox-Kurs

Mehr Infos
FHEM-Kurs

FHEM-Kurs

Mehr Infos