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

Mit ** gekennzeichnete Links auf dieser Seite sind Affiliatelinks.

Achtung: Dieser Inhalt ist nicht mehr aktuell! Es ist nicht empfohlen nach dieser Anleitung vorzugehen.
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
  • 29.08.2017
  • Veraltet!
  • 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 Touch Screen for Raspberry Pi 3 QSC11 **

Video

ioBroker-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>
Du willst mehr?

Smart-Home-Trainings von A-Z

Steig' noch tiefer in die Themen ein und meistere Deine Projekte! Über 14.000 Teilnehmer konnten sich schon von der Qualität der Online-Kurse überzeugen.

ioBroker-Master-Kurs

ioBroker-Master-Kurs

Mehr Infos
Hausbau-Kurs

Hausbau mit KNX

Mehr Infos
Lox-Kurs

Lox-Kurs

Mehr Infos
Node-RED-Master-Kurs

Node-RED-Master-Kurs

Mehr Infos