Wetterdaten visualisieren mit XSLT & Apache FOP – Teil 1: PNG-Erzeugung am PC
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. https://youtu.be/DMgWOIySd4I 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. 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 Entwicklungsumgebungz. 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 FOPZur Umwandlung der XSL-FO-Datei in ein PNGDownload 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 DatenkabelZur Verbindung mit dem PC/Mac beim späteren Flashen des Controllers 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 - Ansicht von der Seite Inkplate 6Inch ePaperDisplay - Sicht aus jedem Winkel möglich Inkplate 6Inch ePaperDisplay - Taste WakeUp Inkplate 6Inch ePaperDisplay - USB-C-Schnittstelle und RESET Taster 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 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. BENUTZER 2025-06-12T07:05:15Z OK 14.1 77.9 1 💡 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 Zugriff auf einzelne Werte aus wetter.xml Statt Schleifen nutze ich in den einzelnen -Elementen direkte XPath-Abfragen wie diese: Temperatur: °C Genauso lässt sich auch der Zeitstempel (z. B. dateGenerated) gezielt ansprechen: 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: 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 Schöningen TEMPERATUR °C LUFTFEUCHTIGKEIT % 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 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 protected]" - 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. Ö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. 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. 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 - 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. 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. 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); } Read the full article
