Skip to content

Technik Blog

Programmieren | Arduino | ESP32 | MicroPython | Python | Raspberry Pi | Raspberry Pi Pico

Menu
  • Smarthome
  • Gartenautomation
  • Arduino
  • ESP32 & Co.
  • Raspberry Pi & Pico
  • Solo Mining
  • Deutsch
  • English
Menu

Wetterdaten visualisieren mit XSLT & Apache FOP – Teil 1: PNG-Erzeugung am PC

Posted on 13. Juni 202518. Juni 2025 by Stefan Draeger

Für ein größeres Vorhaben musste ich mich wieder etwas in XSLT & Apache FOP einarbeiten. Statt nur mit Beispiel-XMLs zu testen, habe ich mir ein kleines, aber sinnvolles Projekt gesucht – und so entstand die Idee, eine Wetterstation mit ePaper-Anzeige zu bauen.

Wetterdaten visualisieren mit XSLT & Apache FOP – Teil 1: PNG-Erzeugung am PC
Dieses Video auf YouTube ansehen.

Im aktuellen Stadium wird das Bild lokal auf meinem Rechner erzeugt und anschließend auf meinen externen Webserver (all-inkl.com) hochgeladen.
Später soll das Ganze komplett lokal auf einem Raspberry Pi laufen – dazu mehr im zweiten Teil der Serie.

Inhaltsverzeichnis
  • Automatisierung per Bash-Skript
  • Benötigte Komponenten & Tools
    • Software & Umgebung
    • Hardware
    • Projektdateien
    • Warum das Inkplate 6″ ePaper Display die perfekte Wahl ist
  • Wetterdaten via Meteomatics API beziehen
    • Kostenloses Kontingent:
  • Die Meteomatics API im Überblick
    • Dokumentation & Einstieg
    • Beispiel-Abfrage (XML)
  • Was ist XSLT – und wie verarbeitet man damit XML?
  • Grundstruktur einer XSLT-Datei
  • Zugriff auf einzelne Werte aus wetter.xml
  • Wetter-Icons für die aktuelle Lage
    • Icons herunterladen
    • Bereits vorbereitet im GitHub-Repository
    • Zugriff im XSLT
  • Das XSLT-Template für unser Wetterlayout
  • Bildgenerierung mit Apache FOP auf der Kommandozeile
      • Voraussetzungen
      • Der Befehl
      • 🔍 Erklärung der Parameter:
    • Java unter WSL installieren
      • Installation unter Ubuntu/WSL:
  • Automatischer Upload per SCP ohne Passwortabfrage
      • SSH-Key erstellen
      • Öffentlichen Schlüssel auf den Webserver übertragen
      • Bild hochladen per SCP
  • Das Wetterbild auf dem Inkplate 6 anzeigen
    • Boardtreiber für die Inkplate Displays
    • Benötigte Bibliothek für das Inkplate Display
    • Quellcode

Automatisierung per Bash-Skript

Der komplette Prozess – vom Abrufen der Wetterdaten über die Transformation mit XSLT bis hin zur PNG-Erzeugung – läuft automatisiert in einem einzigen Bash-Skript ab.
Dieses Skript lässt sich später problemlos auf einem Raspberry Pi ausführen, sodass das System komplett autark arbeitet.

Aktuell lade ich das generierte Bild auf meinen Webserver bei All-inkl., von dem sich der ESP32 das PNG regelmäßig abholt.

Doch: Wenn Raspberry Pi und ESP32 im selben lokalen Netzwerk sind, kann sogar der externe Webserver entfallen.
In diesem Fall reicht ein kleiner Webserver auf dem Pi, etwa via lighttpd oder python3 -m http.server, um das Bild bereitzustellen.

Benötigte Komponenten & Tools

Damit du das Projekt 1:1 nachbauen kannst, benötigst du folgende Tools und Hardware:

Software & Umgebung

  • Leistungsstarke Entwicklungsumgebung
    z. B. IntelliJ IDEA oder eine andere IDE mit XML/XSLT-Unterstützung
  • WSL mit Ubuntu (unter Windows)
    Wird benötigt für Tools wie curl, Bash-Skripte und einfache Paketinstallation
    (alternativ geht auch ein nativer Linux-Rechner oder Raspberry Pi)
  • Apache FOP
    Zur Umwandlung der XSL-FO-Datei in ein PNG
    Download Apache FOP
  • Geo-Koordinaten deines Standorts (zwingend erforderlich für API-Abfragen)
    • Ohne diese gibt die Meteomatics API keine Wetterdaten zurück.
    • Du kannst deine Latitude / Longitude ganz einfach über Google Maps ermitteln:
      • Google Maps öffnen → Rechtsklick auf Standort → klick auf die angezeigten Koordinaten
      • die Koordinaten wie 52.1385884, 10.9670108 liegen nun in der Zwischenablage

Hardware

  • ePaper Display (z. B. 6″ Inkplate)
    Unterstützt PNG-Anzeige und kann später als stromsparendes Dashboard verwendet werden
    → kompatibel mit ESP32 & USB-C-Anschluss
  • USB-C Datenkabel
    Zur Verbindung mit dem PC/Mac beim späteren Flashen des Controllers
Inkplate 6 Zoll und  6-Farb-Display
Inkplate 6 Zoll und 6-Farb-Display

Das in diesem Projekt verwendete Inkplate 6 Zoll ePaper Display habe ich bereits auf meinem Blog vorgestellt. Daher gehe ich auf dieses nicht speziell ein.

  • Erfahrungsbericht: Wie gut sind die neuen E-Paper Displays von Soldered?
  • API-Daten des Bitaxe Gamma mit ESP32 und E-Paper-Display visualisieren

Projektdateien

Das komplette Projekt mit Beispieldaten, XSLT-Template und Bash-Skript findest du auf GitHub: github.com/StefanDraeger/xml2weatherpng

Warum das Inkplate 6″ ePaper Display die perfekte Wahl ist

Für dieses Projekt setze ich das Inkplate 6″ ein – ein vielseitiges ePaper-Display mit integriertem ESP32-Mikrocontroller. Dieses Board bringt alles mit, was man für eine smarte, energieeffiziente Wetteranzeige benötigt:

  • ePaper-Technologie: Einmal dargestellte Inhalte bleiben auch ohne Stromzufuhr sichtbar. Dadurch eignet sich das Display ideal für statische Inhalte wie Wetterdaten, die nur in Intervallen aktualisiert werden müssen.
  • Integrierter ESP32: Der verbaute Mikrocontroller ermöglicht die direkte WLAN-Anbindung und den Abruf des Wetterbildes – ohne zusätzliches Steuergerät.
  • LiPo-Batterieanschluss: Dank der Unterstützung für LiPo-Akkus kann das Gerät völlig autark und kabellos betrieben werden.
  • Deep Sleep-Modus: Nach dem Herunterladen und Anzeigen des Wetterbildes wechselt der ESP32 in den energieeffizienten Schlafmodus, um Strom zu sparen. Der Bildschirminhalt bleibt dabei vollständig erhalten.
Inkplate 6Inch ePaperDisplay - aktuelle Wetterdaten
Inkplate 6Inch ePaperDisplay – aktuelle Wetterdaten
Inkplate 6Inch ePaperDisplay - Ansicht von der Seite
Inkplate 6Inch ePaperDisplay – Ansicht von der Seite
Inkplate 6Inch ePaperDisplay - Sicht aus jedem Winkel möglich
Inkplate 6Inch ePaperDisplay – Sicht aus jedem Winkel möglich
Inkplate 6Inch ePaperDisplay - Taste WakeUp
Inkplate 6Inch ePaperDisplay – Taste WakeUp
Inkplate 6Inch ePaperDisplay - USB-C-Schnittstelle und RESET Taster
Inkplate 6Inch ePaperDisplay – USB-C-Schnittstelle und RESET Taster
Inkplate 6Inch ePaperDisplay - LiPo Batterie
Inkplate 6Inch ePaperDisplay – LiPo Batterie

Diese Kombination aus sparsamer Anzeige, kabellosem Betrieb und einfacher WLAN-Anbindung macht das Inkplate 6″ zur idealen Hardwarebasis für dieses Projekt – besonders für den Einsatz im Wohnbereich, Garten oder an Orten ohne ständige Stromversorgung.

Wetterdaten via Meteomatics API beziehen

Im ersten Schritt legen wir uns einen kostenlosen Account bei meteomatics.com an. Damit erhalten wir Zugriff auf die Wetterdaten-API, die wir später im Projekt verwenden.

Parameter des kostenfreien Accounts von Meteomatics
Parameter des kostenfreien Accounts von Meteomatics

Kostenloses Kontingent:

Mit dem Basic-Account sind bis zu 500 API-Abfragen pro Tag möglich – mehr als ausreichend, um die Wetterdaten im 15-Minuten-Intervall abzurufen:

24 h * 60 min / 15 min = 96 Abfragen pro Tag

Der Login zum kostenlosen Account ist auf der Webseite etwas versteckt. Hier der direkte Link:
Kostenloses Meteomatics-Konto erstellen

Nach der Registrierung erhältst du Benutzername und Passwort, mit denen du später ganz einfach via curl oder in deinem Bash-Skript auf die Wetterdaten zugreifen kannst.

Die Meteomatics API im Überblick

Die Meteomatics Weather API ist sehr flexibel aufgebaut und liefert Wetterdaten in verschiedenen Formaten (XML, CSV, JSON, PNG etc.).
In diesem Projekt nutzen wir die XML-Ausgabe, da sie sich perfekt mit XSLT weiterverarbeiten lässt.

Dokumentation & Einstieg

Die offizielle API-Dokumentation findest du hier: Getting Started mit der Meteomatics API

Dort findest du:

  • Authentifizierungsbeispiele (curl, Python, etc.)
  • Parameterübersicht (Temperatur, Luftfeuchtigkeit, Wetterlage, u. v. m.)
  • Ausgabeformate (XML, JSON, PNG, CSV)
  • Struktur der URL-Abfragen

Nachfolgend zeige ich dir Schritt-für-Schritt wie du diese Daten via curl im XML Format lädst.

Beispiel-Abfrage (XML)

Sobald du deinen Account und deine Koordinaten hast, kannst du z. B. folgende Wetterwerte abfragen:

  • Temperatur in 2 m Höhe (t_2m:C)
  • Relative Luftfeuchtigkeit (relative_humidity_2m:p)
  • Wettersymbol-ID (weather_symbol_1h:idx)
curl -u "username:passwort" \
  "https://api.meteomatics.com/now/t_2m:C,relative_humidity_2m:p,weather_symbol_1h:idx/52.1385884,10.9670108/xml" > wetter.xml
Diese Abfrage liefert die aktuellen Wetterdaten als strukturiertes XML in der Daten wetter.xml, das wir im nächsten Schritt weiterverarbeiten werden.
<?xml version="1.0" encoding="utf-8"?>
<meteomatics-api-response version="3.0">
    <user>BENUTZER</user>
    <dateGenerated>2025-06-12T07:05:15Z</dateGenerated>
    <status>OK</status>
    <data>
        <parameter name="t_2m:C">
            <location lat="52.1385884" lon="10.9670108">
                <value date="2025-06-12T07:00:00Z">14.1</value>
            </location>
        </parameter>
        <parameter name="relative_humidity_2m:p">
            <location lat="52.1385884" lon="10.9670108">
                <value date="2025-06-12T07:00:00Z">77.9</value>
            </location>
        </parameter>
        <parameter name="weather_symbol_1h:idx">
            <location lat="52.1385884" lon="10.9670108">
                <value date="2025-06-12T07:00:00Z">1</value>
            </location>
        </parameter>
    </data>
</meteomatics-api-response>

💡 Ich führe alle curl-Befehle unter einem lokalen Linux-System via WSL (Windows Subsystem for Linux) auf meiner Windows 11 Maschine aus.
WSL lässt sich mit wenigen Klicks installieren – eine Anleitung findest du auf meinem YouTube Kanal im Video Linux unter Windows 11 – So geht’s

Alternativ kann das Projekt natürlich auch direkt auf einem nativen Linux-System oder einem Raspberry Pi ausgeführt werden.

Was ist XSLT – und wie verarbeitet man damit XML?

XSLT (Extensible Stylesheet Language Transformations) ist eine Sprache, mit der man XML-Daten in andere Formate überführen kann – z. B. HTML, Text oder wie in unserem Fall XSL-FO, das wir später in ein PNG-Bild umwandeln.

Während man in vielen Tutorials häufig das Durchlaufen mit for-each sieht, verwende ich in diesem Projekt eine gezielte, direkte Abfrage einzelner XML-Knoten.
So bleibt das Layout klar strukturiert und wir behalten die Kontrolle über jede Ausgabezeile.

Grundstruktur einer XSLT-Datei

<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:fo="http://www.w3.org/1999/XSL/Format">

  <xsl:output method="xml" indent="yes"/>

  <xsl:template match="/">
    <!-- Hier beginnt das XSL-FO-Layout -->
  </xsl:template>

</xsl:stylesheet>

Zugriff auf einzelne Werte aus wetter.xml

Statt Schleifen nutze ich in den einzelnen <fo:block>-Elementen direkte XPath-Abfragen wie diese:

<fo:block font-size="12pt">
  Temperatur: 
  <fo:inline font-size="14pt" font-weight="bold">
    <xsl:value-of select="//parameter[@name='t_2m:C']/location/value"/>
  </fo:inline>
  <fo:inline font-size="10pt"> °C</fo:inline>
</fo:block>

Genauso lässt sich auch der Zeitstempel (z. B. dateGenerated) gezielt ansprechen:

<xsl:value-of select="/meteomatics-api-response/dateGenerated"/>

Vorteil dieser Methode

  • Einfaches, lesbares Layout (insbesondere bei fixen Daten wie Temperatur, Luftfeuchte, Wettersymbol)
  • Kein unnötiges Durchlaufen von Elementen
  • Exakte Kontrolle über die Formatierung jedes einzelnen Wertes

Wetter-Icons für die aktuelle Lage

Um die aktuelle Wetterlage visuell darzustellen, verwende ich Wetter-Symbole im PNG-Format.

Icons herunterladen

Die passenden Icons können direkt bei Meteomatics kostenfrei heruntergeladen werden:
mm_api_symbols.tar.gz – Meteomatics Widget Icons

Bereits vorbereitet im GitHub-Repository

Im Original-Archiv stimmen die Dateinamen leider nicht direkt mit den weather_symbol_1h:idx-IDs der API überein.
Damit das Einbinden in XSLT funktioniert, müssten die Dateien eigentlich manuell umbenannt werden – aber das habe ich bereits für dich erledigt.

Du findest im GitHub-Repository einen fertigen Ordner mit allen Symbolen, korrekt benannt nach der ID: images/104.png, images/1.png, usw.

Du musst also nichts mehr selbst umbenennen.

Zugriff im XSLT

Mit den umbenannten Dateien funktioniert der Zugriff auf das passende Icon ganz einfach per external-graphic:

<fo:external-graphic 
  src="url('images/{concat(//parameter[@name='weather_symbol_1h:idx']/location/value, '.png')})'" 
  content-width="180px"/>

Die PNG-Dateien liegen im Ordner images/ relativ zur Ausgabe.

Das XSLT-Template für unser Wetterlayout

Nachdem wir nun die Wetterdaten im XML-Format lokal gespeichert haben, erstellen wir im nächsten Schritt das passende XSLT-Template, das diese Daten in ein visuelles Layout überführt.

Ziel ist es, ein XSL-FO-Dokument zu erzeugen, das von Apache FOP in ein PNG-Bild umgewandelt werden kann. Dieses Bild zeigt:

  • den aktuellen Standortnamen (hier: Schöningen),
  • das Datum und die Uhrzeit der Abfrage,
  • die Temperatur in °C,
  • die Luftfeuchtigkeit in Prozent,
  • sowie ein passendes Wettersymbol auf Basis der weather_symbol_1h:idx-ID.

Das Layout orientiert sich an einem kompakten Infodisplay, optimiert für die Darstellung auf einem ePaper-Display mit 4,2 oder 5 Zoll. Die einzelnen Werte werden direkt aus dem XML-Dokument ausgelesen – ohne Schleifen – und gezielt in fo:block-Elemente geschrieben. Das sorgt für ein sauberes, stabiles und gut kontrollierbares Layout.

Im folgenden Abschnitt siehst du den vollständigen Aufbau des Templates, das du bei Bedarf jederzeit an dein eigenes Design oder zusätzliche Wetterparameter anpassen kannst.

XSL Dokument als Template
<?xml version="1.0" encoding="UTF-8"?>
<!-- Start des XSLT-Stylesheets mit Angabe der Version -->
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <!-- Ausgabeformat: XML mit Einrückung -->
    <xsl:output method="xml" indent="yes"/>

    <!-- Template, das auf die Wurzel des XML-Dokuments matcht -->
    <xsl:template match="/">
        <!-- Beginn des XSL-FO Dokuments -->
        <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">

            <!-- Definition des Seitenlayouts -->
            <fo:layout-master-set>
                <fo:simple-page-master 
                    master-name="page" 
                    page-width="400px" 
                    page-height="300px" 
                    margin="15px">
                    <fo:region-body/>
                </fo:simple-page-master>
            </fo:layout-master-set>

            <!-- Eine neue Seite mit dem oben definierten Layout -->
            <fo:page-sequence master-reference="page">
                <fo:flow flow-name="xsl-region-body">
                    
                    <!-- Ortsname als Titel -->
                    <fo:block font-size="34pt" font-weight="bold" space-after="8pt">Schöningen</fo:block>

                    <!-- Tabelle mit zwei Spalten: links Text, rechts Bild -->
                    <fo:table table-layout="fixed" width="100%" space-after="10pt">
                        <fo:table-column column-width="60%"/>
                        <fo:table-column column-width="40%"/>
                        <fo:table-body>

                            <!-- Zeile 1: Zeitstempel (links) + Wetter-Icon (rechts) -->
                            <fo:table-row>
                                <fo:table-cell>
                                    <fo:block font-size="12pt" font-weight="bold" space-after="20pt">
                                        <!-- Datum extrahieren und in Teile zerlegen -->
                                        <xsl:variable name="datetime" select="/meteomatics-api-response/dateGenerated"/>
                                        <xsl:variable name="year" select="substring($datetime, 1, 4)"/>
                                        <xsl:variable name="month" select="substring($datetime, 6, 2)"/>
                                        <xsl:variable name="day" select="substring($datetime, 9, 2)"/>
                                        <xsl:variable name="time" select="substring($datetime, 12, 5)"/>

                                        <!-- Formatiertes Datum ausgeben -->
                                        <xsl:value-of select="concat($day, '.', $month, '.', $year, ' – ', $time, ' Uhr')"/>
                                    </fo:block>
                                </fo:table-cell>

                                <!-- Wetter-Symbol über 3 Zeilen rechts ausgerichtet -->
                                <fo:table-cell number-rows-spanned="3" display-align="center">
                                    <fo:block text-align="center">
                                        <fo:external-graphic 
                                            src="url('images/{concat(//parameter[@name='weather_symbol_1h:idx']/location/value, '.png')}')" 
                                            content-width="180px"/>
                                    </fo:block>
                                </fo:table-cell>
                            </fo:table-row>

                            <!-- Zeile 2: Temperatur -->
                            <fo:table-row>
                                <fo:table-cell>
                                    <!-- Abstand -->
                                    <fo:block font-size="16pt">&#160;</fo:block>

                                    <!-- Überschrift -->
                                    <fo:block>
                                        <fo:inline font-size="18pt">TEMPERATUR</fo:inline>
                                    </fo:block>

                                    <!-- Temperaturwert + °C -->
                                    <fo:block font-size="32pt" font-weight="bold">
                                        <xsl:value-of select="//parameter[@name='t_2m:C']/location/value"/>
                                        <fo:inline font-size="18pt">°C</fo:inline>
                                    </fo:block>
                                </fo:table-cell>
                            </fo:table-row>

                            <!-- Zeile 3: Luftfeuchtigkeit -->
                            <fo:table-row>
                                <fo:table-cell>
                                    <!-- Abstand -->
                                    <fo:block font-size="16pt">&#160;</fo:block>

                                    <!-- Überschrift -->
                                    <fo:block>
                                        <fo:inline font-size="18pt">LUFTFEUCHTIGKEIT</fo:inline>
                                    </fo:block>

                                    <!-- Luftfeuchtigkeit + % -->
                                    <fo:block font-size="32pt" font-weight="bold">
                                        <xsl:value-of select="//parameter[@name='relative_humidity_2m:p']/location/value"/>
                                        <fo:inline font-size="18pt">%</fo:inline>
                                    </fo:block>
                                </fo:table-cell>
                            </fo:table-row>

                        </fo:table-body>
                    </fo:table>

                </fo:flow>
            </fo:page-sequence>
        </fo:root>
    </xsl:template>
</xsl:stylesheet>

Bildgenerierung mit Apache FOP auf der Kommandozeile

Sobald wir unser XML mit den Wetterdaten und das passende XSLT-Template vorbereitet haben, nutzen wir Apache FOP, um daraus ein fertiges PNG-Bild zu erzeugen.

Apache FOP ist ein Kommandozeilen-Tool, das XSL-FO-Dateien (Formatting Objects) in verschiedene Formate wie PDF, PNG oder SVG umwandeln kann.

Voraussetzungen

Stelle sicher, dass du:

  • Java installiert hast (java -version)
  • Apache FOP heruntergeladen und entpackt hast
  • dich im Verzeichnis der FOP-Binärdateien befindest oder fop im Pfad liegt

Der Befehl

fop -xml wetter.xml -xsl meteomatics2fo.xsl -png output/forecast.png

🔍 Erklärung der Parameter:

  • -xml wetter.xml: Die XML-Datei mit den aktuellen Wetterdaten
  • -xsl meteomatics2fo.xsl: Dein XSLT-Template, das die Daten in ein Layout überführt
  • -png forecast.png: Der Name der Ausgabedatei – in diesem Fall ein PNG-Bild
Ausgabe von Apache FOP auf der Konsole
erstellte Datei forecast.png durch Apache FOP
erstellte Datei forecast.png durch Apache FOP

Java unter WSL installieren

Für die Ausführung von Apache FOP ist eine funktionierende Java-Umgebung erforderlich.
Auch wenn Java bereits unter Windows installiert ist, musst du es innerhalb von WSL (z. B. Ubuntu) separat installieren, da beide Umgebungen unabhängig voneinander arbeiten.

Installation unter Ubuntu/WSL:

sudo apt update
sudo apt install default-jre

Alternativ kannst du auch das JDK installieren, falls du zusätzlich Java-Programme entwickeln willst:

sudo apt install default-jdk

Nach der Installation kannst du mit folgendem Befehl prüfen, ob Java korrekt eingerichtet ist:

java -version

Damit steht dem Einsatz von Apache FOP innerhalb deiner WSL-Umgebung nichts mehr im Weg.

Automatischer Upload per SCP ohne Passwortabfrage

Damit das generierte Wetterbild (forecast.png) regelmäßig und automatisch auf deinen Webserver hochgeladen werden kann (z. B. per CronJob), verwenden wir den SCP-Befehl – allerdings ohne Passwortabfrage.

Da SCP standardmäßig keine Passwortübergabe erlaubt, müssen wir einmalig ein SSH-Schlüsselpaar erstellen und den öffentlichen Schlüssel auf den Server übertragen.

SSH-Key erstellen

Führe folgenden Befehl in deiner Linux-/WSL-Konsole aus:

ssh-keygen -t rsa -b 4096 -C "email@mail.com"
  • Der Kommentar (hier deine E-Mail-Adresse) ist optional.
  • Drücke einfach ENTER bei der Frage nach dem Speicherpfad (~/.ssh/id_rsa ist Standard).
  • Lege kein Passwort fest, damit die Verbindung automatisiert erfolgen kann.
generierter SSH Key auf der Konsole

Öffentlichen Schlüssel auf den Webserver übertragen

Jetzt lädst du deinen öffentlichen Schlüssel auf den Server (nur einmal nötig):

ssh-copy-id benutzer@domain

Gib bei der ersten Verbindung dein normales Passwort ein.
Anschließend kannst du dich ohne Passwortabfrage per SSH/SCP verbinden.

upload des SSH_Key auf den Server

Bild hochladen per SCP

Jetzt kannst du dein Bild mit einem einfachen Befehl hochladen:

scp ./output/forecast.png benutzer@domain:/pfad/wetterdisplay/forecast.png

Der Upload erfolgt in Sekunden – perfekt für die Einbindung in ein Bash-Skript oder Cronjob.

Ausgabe des Uploads der Datei auf der Konsole

Das Wetterbild auf dem Inkplate 6 anzeigen

Nachdem wir im ersten Teil ein PNG mit aktuellen Wetterdaten generiert haben, geht es nun darum, dieses Bild auf einem ePaper-Display anzuzeigen.
Ich verwende dafür das Inkplate 6 – ein stromsparendes, ESP32-basiertes ePaper-Board mit 6-Zoll-Anzeige und WLAN.

Inkplate 6Inch ePaperDisplay - aktuelle Wetterdaten
Inkplate 6Inch ePaperDisplay – aktuelle Wetterdaten
Inkplate 6Inch ePaperDisplay - Ansicht von der Seite
Inkplate 6Inch ePaperDisplay – Ansicht von der Seite

Über eine einfache WLAN-Verbindung lädt das Board das Wetterbild in regelmäßigen Abständen herunter und stellt es direkt auf dem Display dar – ganz ohne HTML, Browser oder App.
Im folgenden Code-Beispiel siehst du, wie das Bild mit wenigen Zeilen Code automatisch aktualisiert wird.

Boardtreiber für die Inkplate Displays

Damit wir das Board überhaupt programmieren können, müssen wir den Boardtreiber installieren, dazu kopieren wir die nachfolgende Adresse in Datei > Einstellungen > Zusätzliche Boardverwalter-URLs.

https://raw.githubusercontent.com/SolderedElectronics/Dasduino-Board-Definitions-for-Arduino-IDE/master/package_Dasduino_Boards_index.json

Nachdem der Index aktualisiert wurde, können wir die Schaltfläche „Boardverwalter“ im linken Menü der Arduino IDE wählen und dort nach Inkplate suchen. In meinem Fall habe ich die aktuelle Version 8.1.0 installiert.

Installieren des Boardtreibers in der Arduino IDE

Benötigte Bibliothek für das Inkplate Display

Zusätzlich zum Boardtreiber benötigen wir noch den Treiber für das ePaperDisplay, diesen finden wir im Bibliothenverwalter wenn wir nach InkplateLibrary suchen.

Installieren der Bibliothek für das Display
Unterstützte weitere Boards

Bei der Installation der Bibliothek hatte ich zunächst Probleme weil die Sourcen nicht gefunden wurden. Die Lösung war zunächst das ich das GitHub Repository SolderedElectronics/Inkplate-Arduino-library als ZIP-Datei heruntergeladen habe und diese dann über Sketch > Bibliothek einbinden > ZIP-Bibliothek hinzufügen… installiert habe.

Quellcode

/*
 * Titel        : Wetteranzeige mit dem Inkplate 6 ePaper-Display
 * Beschreibung : Dieses Programm lädt ein zuvor erzeugtes PNG-Bild mit aktuellen Wetterdaten 
 *                von einem Webserver herunter und zeigt es auf dem stromsparenden ePaper-Display an.
 *                Das Bild wird in regelmäßigen Abständen neu geladen (alle 30 Minuten).
 *
 * Author       : Stefan Draeger
 * Webseite     : https://draeger-it.blog
 * Blogbeitrag  : https://draeger-it.blog/wetterdaten-visualisieren-mit-xslt-apache-fop-teil-1-png-erzeugung-am-pc/
 */

#include "HTTPClient.h"   // Für HTTP-Anfragen (Bild abrufen)
#include "WiFi.h"         // Für WLAN-Verbindung
#include "Inkplate.h"     // Bibliothek für das Inkplate ePaper-Display

// URL zum PNG-Bild mit den generierten Wetterdaten
String forecastUrl = "http://ressourcen-draeger-it.de/wetterdisplay/forecast.png";

// HTTP- und WiFi-Clients vorbereiten (werden im drawImage intern genutzt)
HTTPClient sender;
WiFiClient wifiClient;

// Display-Objekt erzeugen (automatische Modell-Erkennung, z. B. Inkplate 6")
Inkplate display;

// WLAN-Zugangsdaten
const char* ssid = "abc";        // SSID deines WLANs
const char* password = "123";    // WLAN-Passwort

void setup() {
  Serial.begin(115200);  // Serielle Ausgabe zur Debug-Überwachung

  // WLAN im Station-Modus aktivieren und verbinden
  WiFi.mode(WIFI_MODE_STA);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");  // Warteanimation während der Verbindung
  }

  Serial.println();
  Serial.print("Verbunden mit IP: ");
  Serial.println(WiFi.localIP());

  // Display initialisieren (muss einmalig aufgerufen werden)
  display.begin();
}

void loop() {
  // Display vollständig löschen
  display.clearDisplay();
  display.display(); // Erstes Update zur Bestätigung des Clearings
  display.fillScreen(INKPLATE_WHITE); // Hintergrundfarbe setzen

  // Bild von der angegebenen URL laden und anzeigen
  // Parameter: URL, X-Position, Y-Position, Dithering aktiv, nicht invertieren
  display.drawImage(forecastUrl, 10, 0, true, false);
  display.display();  // Anzeige aktualisieren

  // 30 Minuten Pause (1800000 Millisekunden), danach wiederholen
  delay(1800000);
}

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Fragen oder Feedback?

Du hast eine Idee, brauchst Hilfe oder möchtest Feedback loswerden?
Support-Ticket erstellen

Newsletter abonnieren

Bleib auf dem Laufenden: Erhalte regelmäßig Updates zu neuen Projekten, Tutorials und Tipps rund um Arduino, ESP32 und mehr – direkt in dein Postfach.

Jetzt Newsletter abonnieren

Unterstütze meinen Blog

Wenn dir meine Inhalte gefallen, freue ich mich über deine Unterstützung auf Tipeee.
So hilfst du mit, den Blog am Leben zu halten und neue Beiträge zu ermöglichen.

draeger-it.blog auf Tipeee unterstützen

Vielen Dank für deinen Support!
– Stefan Draeger

Kategorien

Tools

  • Unix-Zeitstempel-Rechner
  • ASCII Tabelle
  • Spannung, Strom, Widerstand und Leistung berechnen
  • Widerstandsrechner
  • 8×8 LED Matrix Tool
  • 8×16 LED Matrix Modul von Keyestudio
  • 16×16 LED Matrix – Generator

Links

Blogverzeichnis Bloggerei.de TopBlogs.de das Original - Blogverzeichnis | Blog Top Liste Blogverzeichnis trusted-blogs.com

Stefan Draeger
Königsberger Str. 13
38364 Schöningen
Tel.: 01778501273
E-Mail: info@draeger-it.blog

Folge mir auf

link zu Fabook
link zu LinkedIn
link zu YouTube
link zu TikTok
link zu Pinterest
link zu Instagram
  • Impressum
  • Datenschutzerklärung
  • Disclaimer
  • Cookie-Richtlinie (EU)
©2025 Technik Blog | Built using WordPress and Responsive Blogily theme by Superb
Cookie-Zustimmung verwalten
Wir verwenden Technologien wie Cookies, um Geräteinformationen zu speichern und/oder darauf zuzugreifen. Wir tun dies, um das Surferlebnis zu verbessern und um personalisierte Werbung anzuzeigen. Wenn Sie diesen Technologien zustimmen, können wir Daten wie das Surfverhalten oder eindeutige IDs auf dieser Website verarbeiten. Wenn Sie Ihre Zustimmung nicht erteilen oder zurückziehen, können bestimmte Funktionen beeinträchtigt werden.
Funktional Immer aktiv
Die technische Speicherung oder der Zugang ist unbedingt erforderlich für den rechtmäßigen Zweck, die Nutzung eines bestimmten Dienstes zu ermöglichen, der vom Teilnehmer oder Nutzer ausdrücklich gewünscht wird, oder für den alleinigen Zweck, die Übertragung einer Nachricht über ein elektronisches Kommunikationsnetz durchzuführen.
Vorlieben
Die technische Speicherung oder der Zugriff ist für den rechtmäßigen Zweck der Speicherung von Präferenzen erforderlich, die nicht vom Abonnenten oder Benutzer angefordert wurden.
Statistiken
Die technische Speicherung oder der Zugriff, der ausschließlich zu statistischen Zwecken erfolgt. Die technische Speicherung oder der Zugriff, der ausschließlich zu anonymen statistischen Zwecken verwendet wird. Ohne eine Vorladung, die freiwillige Zustimmung deines Internetdienstanbieters oder zusätzliche Aufzeichnungen von Dritten können die zu diesem Zweck gespeicherten oder abgerufenen Informationen allein in der Regel nicht dazu verwendet werden, dich zu identifizieren.
Marketing
Die technische Speicherung oder der Zugriff ist erforderlich, um Nutzerprofile zu erstellen, um Werbung zu versenden oder um den Nutzer auf einer Website oder über mehrere Websites hinweg zu ähnlichen Marketingzwecken zu verfolgen.
Optionen verwalten Dienste verwalten Verwalten von {vendor_count}-Lieferanten Lese mehr über diese Zwecke
Einstellungen anzeigen
{title} {title} {title}