FHEM Tutorial-Reihe - Part 37: Touch-Display auf dem Raspberry Pi mit Tablet UI
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.
Achtung: Dieser Inhalt wurde vor mehreren Jahren aufgenommen und ist nicht mehr aktuell! Es ist nicht empfohlen nach dieser Anleitung vorzugehen.
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 Touch Screen for Raspberry Pi 3 QSC11 **
Video
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>
