Outdoor Tour Reporter: Mein eigenes Tool für interaktive Wanderberichte in WordPress

Wer meinen Blog schon etwas länger verfolgt, weiß, dass ich gerne unterwegs bin. Besonders auf Wanderungen entstehen dabei jede Menge Daten und Medien: Der zurückgelegte Weg wird mit meinem Garmin GPS-Gerät aufgezeichnet (GPX-Track), unterwegs fotografiere ich mit meinen Smartphone die Umgebung und Aussicht und für besondere Perspektiven kommt gelegentlich sogar meine DJI Mini 2 zum Einsatz.

Nach einer Tour habe ich damit eigentlich alles zusammen, was ich für einen ausführlichen Wanderbericht benötige. Eigentlich. Denn anschließend beginnt die Arbeit: GPX-Daten auswerten, Strecke und Höhenprofil aufbereiten, Fotos den richtigen Positionen zuordnen, Drohnenaufnahmen einbinden, eine Karte erstellen und das Ganze schließlich so zusammensetzen, dass daraus ein ansprechender Beitrag für WordPress wird.

Genau an diesem Punkt entstand die Idee für den Outdoor Tour Reporter.

Ich wollte ein Werkzeug haben, das möglichst viele dieser Arbeitsschritte (automatisiert) übernimmt und mir am Ende einen fertigen Baustein liefert, den ich direkt in meinen WordPress-Beitrag übernehmen kann. Also habe ich mir dieses Werkzeug selbst gebaut.


Die Idee hinter dem Outdoor Tour Reporter

Mein Ziel war von Anfang an ziemlich klar: Aus den Daten, die während einer Wanderung ohnehin entstehen, soll mit möglichst wenig manueller Arbeit eine ansprechende und interaktive Darstellung der Tour für meinen Blog werden. Dabei kommen bei mir hauptsächlich drei Quellen zusammen:

  • Mein Garmin GPS-Gerät zeichnet während der Wanderung die Route auf. Der anschließend exportierte GPX-Track enthält die geografischen Koordinaten und Höhendaten der Tour.
  • Mein Smartphone ist unterwegs meine wichtigste Kamera. Es ist ohnehin dabei, schnell griffbereit und die aufgenommenen Fotos enthalten normalerweise GPS-Informationen in ihren EXIF-Daten.
  • Und wenn sich die Gelegenheit bietet, kommt noch meine DJI Mini 2 dazu. Mit ihr entstehen Luftaufnahmen und Videos, die eine Wanderung noch einmal aus einer völlig anderen Perspektive zeigen.

Diese drei Welten wollte ich zusammenbringen. Nicht in einem weiteren Online-Dienst und auch nicht in einem komplizierten Workflow aus verschiedenen Programmen, sondern in einer eigenen Windows-Anwendung. Das Ergebnis ist der Outdoor Tour Reporter.


Was macht der Outdoor Tour Reporter?

Der Outdoor Tour Reporter nimmt die verschiedenen Bestandteile einer Tour entgegen und führt sie zu einem gemeinsamen Tourenbericht zusammen.

Die Grundlage bildet zunächst der GPX-Track. Aus ihm kann die Anwendung unter anderem die zurückgelegte Strecke und das Höhenprofil ermitteln. Daraus entstehen Informationen wie:

  • Gesamtdistanz
  • Aufstieg
  • Abstieg
  • höchster Punkt
  • tiefster Punkt
  • Streckenverlauf
  • Höhenprofil

Damit allein wäre es allerdings nur eine klassische GPX-Auswertung. Interessanter wird es durch die Verbindung mit Fotos (und optional mit Videos).


Fotos automatisch auf der Wanderroute positionieren

Einer meiner wichtigsten Wünsche für das Programm war die automatische Zuordnung meiner Fotos zur Wanderroute. Fotos vom Smartphone enthalten in der Regel GPS-Koordinaten (wenn das entsprechend in der Kamera App eingestellt wurde/ist) in den EXIF-Metadaten. Der Outdoor Tour Reporter kann diese Informationen auswerten und die Bilder dadurch geografisch der Tour zuordnen. Das bedeutet: Ich muss nicht nachträglich überlegen, an welcher Stelle einer Wanderung ein bestimmtes Foto entstanden ist – die Information steckt bereits im Bild. Der Outdoor Tour Reporter nutzt diese Daten und kann die Fotos an den entsprechenden Positionen auf der interaktiven Karte darstellen. Ein Klick auf einen Marker öffnet anschließend das zugehörige Bild mit weiteren Informationen. Gerade bei längeren Wanderungen mit vielen Fotos finde ich diese Funktion enorm praktisch.


DJI-Aufnahmen gehören für mich (manchmal) ebenfalls zur Tour

Neben klassischen Fotos wollte ich auch meine Drohnenaufnahmen berücksichtigen. Bei geeigneten Touren nehme ich meine DJI Mini 2 mit. Die Aufnahmen aus der Luft gehören für mich genauso zu einer Tour wie Fotos vom Weg oder der aufgezeichnete GPS-Track. Deshalb unterstützt der Outdoor Tour Reporter auch die Verarbeitung entsprechender Videodaten. Dabei können Telemetrieinformationen aus DJI-Aufnahmen berücksichtigt und Videos in die Darstellung der Tour integriert werden. (Randnotiz: Das war während der Implementierung nicht die kleinste Hürde.) So entsteht am Ende nicht einfach nur eine Linie auf einer Karte, sondern eine multimediale Dokumentation der Wanderung.


Interaktive Karte statt nur statischem Screenshot

Ein besonders wichtiger Bestandteil ist für mich die Karte. Für die Kartendarstellung setzt der Outdoor Tour Reporter auf Leaflet. Die Open-Source-JavaScript-Bibliothek eignet sich hervorragend für interaktive Karten im Browser. Der GPX-Track wird dabei als Route auf der Karte dargestellt. Hinzu kommen die Positionen der aufgenommenen Fotos und gegebenenfalls weitere Medien. Das hat gegenüber einem einfachen Karten-Screenshot einen entscheidenden Vorteil:

Der Leser kann die Tour tatsächlich erkunden.

Die Karte lässt sich verschieben und zoomen und die einzelnen Fotopositionen können direkt aufgerufen werden. Als Kartenbasis können beispielsweise Kartendaten von OpenStreetMap (OSM) verwendet werden. Ich bevorzuge eh für die verschiedensten Anwendungen die OSM – da lag das also nahe.


Ein interaktives Höhenprofil gehört natürlich dazu

Neben der Karte gehört für mich zu einem guten Wanderbericht immer ein Höhenprofil. Dafür verwendet der Outdoor Tour Reporter Chart.js.

Aus den Höheninformationen des GPX-Tracks entsteht ein interaktives Diagramm, das den Höhenverlauf über die gesamte Strecke zeigt. Zusätzlich werden die wichtigsten Werte übersichtlich zusammengefasst, beispielsweise Anstieg, Abstieg sowie höchster und tiefster Punkt der Tour.

Besonders schön finde ich die Verbindung zwischen Karte und Höhenprofil: Die Tour wird dadurch nicht nur geografisch, sondern auch hinsichtlich ihres Streckenverlaufs wesentlich anschaulicher. Das war (bisher) die härteste Nuss während der Implementierung und hat mich viele Stunden gekostet.


Von den Rohdaten zum fertigen WordPress-Code

Das eigentliche Ziel des Projekts war aber nie nur die Darstellung innerhalb des Programms. Der entscheidende Punkt lautet: Ich möchte das Ergebnis in WordPress verwenden.

Der Outdoor Tour Reporter erzeugt deshalb aus den Tourdaten den benötigten HTML-, CSS- und JavaScript-Code für den späteren Blogbeitrag. Der generierte WordPress-Code enthält unter anderem die Tourinformationen, die interaktive Leaflet-Karte, das Höhenprofil, Statistikwerte sowie die Verknüpfungen zu Fotos und Videos.

Die einzelnen Bereiche des erzeugten Codes werden dabei klar voneinander getrennt und durch HTML-Kommentare gekennzeichnet. Dadurch bleibt der exportierte Code auch dann nachvollziehbar, wenn ich später direkt im WordPress-Editor noch etwas verändern möchte.

Das ist für mich ein wichtiger Punkt: Die Anwendung soll Arbeit automatisieren, mir aber nicht die Kontrolle über das Ergebnis nehmen.


GPX-Download für die Leser

Wer eine interessante Wanderung auf meinem Blog findet, möchte sie vielleicht selbst einmal gehen. Deshalb kann der Outdoor Tour Reporter zusätzlich einen entsprechenden GPX-Download für den WordPress-Beitrag vorbereiten. Damit kann ich meinen Lesern nicht nur zeigen, wo ich unterwegs war. Sie können sich die Route auch herunterladen und auf einem eigenen GPS-Gerät oder einer entsprechenden App verwenden. Aus einem normalen Wanderbericht wird dadurch gleichzeitig eine praktische Tourenvorlage.


Mein Workflow mit dem Outdoor Tour Reporter

Mein Ablauf sieht inzwischen ungefähr so aus:

Während der Wanderung zeichnet mein Garmin die Route auf. Fotos entstehen mit dem Smartphone und besondere Szenen nehme ich gegebenenfalls zusätzlich mit der DJI Mini 2 auf. Nach der Wanderung übertrage ich die Daten auf meinen Windows-PC. Im Outdoor Tour Reporter lade ich anschließend den GPX-Track sowie die gewünschten Fotos und Videos. Das Programm analysiert die verschiedenen Informationen und führt sie zusammen. Danach ergänze ich die eigentlichen Informationen zur Tour – beispielsweise Titel, Datum, Schwierigkeitsgrad und Beschreibung. In der Vorschau kann ich kontrollieren, wie Karte, Höhenprofil und Medien zusammenspielen. Anschließend lasse ich den benötigten Code für WordPress erzeugen. Diesen kann ich in meinen Blogbeitrag übernehmen und dort noch den eigentlichen redaktionellen Teil meines Wanderberichts ergänzen. Genau diese Trennung gefällt mir inzwischen besonders gut:

Der Outdoor Tour Reporter kümmert sich um die technische Aufbereitung – ich kann mich auf den eigentlichen Bericht konzentrieren.


Was technisch hinter dem Outdoor Tour Reporter steckt

Der Outdoor Tour Reporter ist eine klassische Windows-Desktopanwendung und wurde von mir in C# auf Basis von .NET 8 und Windows Forms entwickelt. Dabei kommen unterschiedliche Technologien und Datenformate zusammen. GPX-Dateien bilden die Grundlage für Strecke und Höhenprofil. EXIF-Metadaten liefern geografische Informationen zu Fotos. Für interaktive Karten kommt Leaflet zum Einsatz, während Chart.js die grafische Darstellung des Höhenprofils übernimmt.

Auch die Verarbeitung von Videos und deren Vorbereitung für die Verwendung im Web gehört zum Funktionsumfang. Für entsprechende Aufgaben kann FFmpeg als externe Laufzeitkomponente eingesetzt werden.

Das Spannende an diesem Projekt ist für mich gerade diese Mischung:

Auf der einen Seite steht eine klassische Windows-Anwendung in C# und .NET. Auf der anderen Seite erzeugt das Programm Web-Technologien wie HTML, CSS und JavaScript, die anschließend innerhalb von WordPress ausgeführt werden.

Dazwischen liegen GPX-, GPS-, EXIF-, Foto- und Videodaten.

Genau diese Kombination macht das Projekt für mich technisch besonders interessant.


Entwicklung mit Git und GitLab CI/CD

Auch die Entwicklung des Outdoor Tour Reporters selbst habe ich inzwischen stärker automatisiert. Der Quellcode wird mit Git versioniert und über GitLab verwaltet. Für neue Änderungen läuft eine CI/CD-Pipeline, die unter anderem Regressionstests und den Windows-Build ausführt. Dadurch kann geprüft werden, ob Änderungen unerwartet bestehende Funktionen beeinträchtigen. Für eine neue Version wird anschließend ein Windows-Build erzeugt und als Release bereitgestellt.

Das ist für ein persönliches Projekt vielleicht etwas mehr Infrastruktur, als zwingend notwendig wäre – für mich gehört es aber inzwischen zum Projekt dazu. Gerade wenn eine Anwendung wächst, ist es angenehm, Builds und grundlegende Prüfungen nicht jedes Mal komplett von Hand durchführen zu müssen. Und so habe ich zusammen mit meinem KI-Kollegen ganz viel Neues erlernt.


Outdoor Tour Reporter herunterladen

Wer den Outdoor Tour Reporter selbst ausprobieren möchte, findet die aktuelle Windows-Version in meinem öffentlichen GitLab-Projekt.

GitLab-Projekt:
https://gitlab.com/Wa77ace/outdoor-tour-reporter

Die fertigen Versionen befinden sich dort im Bereich Releases:
https://gitlab.com/Wa77ace/outdoor-tour-reporter/-/releases

Dort steht jeweils die aktuelle Windows-Version zum Download bereit.

Je nach Release wird die Anwendung als ZIP-Archiv bereitgestellt. Dieses kann heruntergeladen und entpackt werden; darin befindet sich die für Windows erstellte Version des Outdoor Tour Reporters. Der Quellcode des Projekts ist ebenfalls über GitLab einsehbar.

Hinweis: FFmpeg ist nicht Bestandteil des Repositorys bzw. der Anwendung und wird für optionale Videofunktionen als separate Laufzeitkomponente verwendet.


Ich werde die Anwendung weiterentwickeln, wenn mir bei meinen eigenen Touren neue Ideen kommen oder mir Funktionen auffallen, die meinen Workflow noch etwas angenehmer machen könnten. Falls ihr den Outdoor Tour Reporter ausprobiert, freue ich mich natürlich über Feedback, Ideen und Hinweise.

Und vielleicht hilft das Programm ja dem einen oder anderen dabei, aus der nächsten Wanderung ebenfalls einen schönen interaktiven Tourenbericht zu machen.

Schreibe einen Kommentar

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