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

Mit ** gekennzeichne Links auf dieser Seite sind Affiliatelinks.

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

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>

Newsletter

Trage Dich jetzt in den Newsletter ein und genieße dadurch viele Vorteile:

  • 5€-Gutschein als Dankeschön
  • Zugang zu exklusiven Inhalten
  • Rabattaktionen für Kurse
  • Angebote für Produkte

* Durch Angabe meiner E-Mail-Adresse erkläre ich mich damit einverstanden, dass mir regelmäßig Informationen und Produktempfehlungen aus dem Fachgebiet Smart Home zugesendet werden. Mit dem Eintrag akzeptieren Sie unsere Datenschutzbestimmungen. Meine Einwilligung kann ich jederzeit widerrufen.

Matthias Kleine

Matthias Kleine

Großer Fan und Anhänger von OpenSource-Projekten und erweiterbaren Haus-Automatisierungskomponenten. Je offener und flexibler das System, desto besser. Ich lege mich ungern auf einzelne Protokolle oder Standards fest, sondern probiere aus allen Welten das Beste zu verheiraten. Unterwegs als Softwareentwickler, Trainer und Blogger im Bereich Smart Home.

Auf YouTube und hier im Blog gibt es bereits unzählige kostenlose Videos, Informationen und Tutorials. Wenn Dir das noch nicht reicht, ist ein Training genau das richtige für Dich! Die folgenden Trainings haben den Vorteil, dass immer von Anfang an gestartet wird und Du ohne Vorwissen teilnehmen kannst.