Pendel on kollegen

Pendel Foto Leinwand

Thu, 24 May 2018 00:00:00 +0000

Workflow vom Foto bis zur Pendel-Leinwand. Mit der Kamera unterwegs zur Arbeit und dann das Bild per Skript zum Plugin in Wordpress hochladen.

2017 habe ich mit dem Pendel-Projekt eine Website angefangen, welcher sukzessive um neue Fotos erweitert wird. Die Fotos entstehen auf dem Weg zur Arbeit, werden um Geo-Koordinaten und Beschriftung erweitert und dann, pro Foto, als Datei-Tripel in den Blog hochgeladen. Da das Projekt noch eine Weile laufen soll, also immer wieder eine neues Foto hochzuladen ist, soll der Prozess so einfach wie möglich durchgeführt werden können. Ich habe also überlegt, wie das Dateisystem zu organisieren ist und welche Arbeitsschritte ohne großen Zeitaufwand zu automatisieren sind.
Herausgekommen ist der hier vorgestellte Workflow, der eher praktisch als perfekt ist. Er zeigt aber, wie man mit relativ wenig Aufwand so eine Aufgabe vereinfachen und strukturieren kann.

Zum Verständnis schauen wir kurz auf die Website.

Leinwand

Das Bild zeigt die Seite Leinwand aus der Wordpress-Website. Man erkennt die Kacheln, welche anhand ihrer GEO-Koordinate auf der Seite platziert sind. Klickt man auf einen Kachel, wird das Bild in einem Viewer dargestellt.

Einzelbild-Viewer

Ablauf und Tooling wird hier nun kurz vorgestellt; einerseits als Dokumentation für mich selbst und andererseits als Anregung für ähnliche Aufgabenstellung.

Den Workflow führe ich auf einem Linux-Rechner durch, so dass Bash-Skripte verwendet werden können.

Die hier verwendeten Skripte findet ihr auf github.com/chs8691/pendel-workflow. Das weiter unten erwähnte fow-Tool wird im Beitrag fow - Foto-Workflow-Tool beschrieben. Das Wordpress-Plugin liegt ebenfalls auf Github unter github.com/chs8691/pendel.

Übersicht

Folgende Schritte werden durchlaufen, um die Fotos von der Kamera in den Blog zu posten:

Import
- Bilddateien von der Kamera auf den Rechner herunterladen
- Pro Fahrt die TCX-Datei von Polar Flow herunterladen
Bildbearbeitung
- Bilder nach Fahrten gruppieren und Fahrtennummer vergeben (z.B. 027)
- Je Fahrt Bilder aussortieren und ein Bild finalisieren
- Quadratischen Ausschnitt 500x500 für die Kachel erstellen
- Titel und Beschriftungen dem finalisierten Bild hinzufügen
- GPS-Koordinaten dem finalisierten Bild hinzufügen
Out erstellen
- Bild auf Blog-Größe verkleinern (1900x1200)
- Plugin-Datendatei um Eintrag ergänzen (GPS, Titel, Beschriftung)
Upload
- Nach Wordpress hochladen
- Wordpress-Datenbank aktualisieren

Neben den erwarteten Tätigkeiten für Bildbearbeitung- und -organisation kommt hier also noch die Aufbereitung in das vom Plugin erwartetem Format nebst Datendatei hinzu. Diese Datendatei (gps.csv) enthält die relevanten EXIF-Daten der Bilder, da das Plugin selbst keine EXIF-Daten auswertet (Der Grund hierfür ist profan: die eingesetzte PHP-Version kann die EXIF-Daten von meiner Fujifilm-Kamera nicht auslesen).

Workflow

Das Bild zeigt die vier Workflowschritte und darunter die wesentlichen Tools/Skripte. Im unteren Teil sieht man die Artefakte des jeweiligen Schritts und die Datensicherung auf dem lokalen Server.

Schauen wir uns nun die Schritte etwas genauer an.

Import und Bildbearbeitung

Die Verzeichnisstruktur für Import und Bildbearbeitung werden durch die Verwendung von fow vorgegeben. Pro Fahrt wird ein fow-Task angelegt, der aus einer dreistelligen Nummer besteht. Diese Nummer dient dann den folgenden Skripten als Argument, so dass immer genau eine Fahrt prozessiert werden kann. Man muss natürlich nicht zwingend fow einsetzen, wesentlich ist, dass es eine Verzeichnis mit der Fahrtnummer gibt. Den Verzeichnispfad im import-Skritpt wird man sowieso seiner Rechnerstruktur anpassen müssen, bei mir liegt fow unter ~/egh/photo.

fow-Verzeichnis

Für das Wordpress-Plugin wird pro Fahrt das finale Bild und eine quadratischer 500X500 Bildausschnitt für die Kacheldatei (100x100) benötigt. Als Bildbearbeitung kommt Darktable zum Einsatz. Hier werden die Voreinstellung der jeweiligen Tools genutzt:

Zur Erstellung eines 500x500-Ausschnitts wird Zuschneiden und drehen verwendet.

Darktable: Ausschnitt für Kachel zuschneiden
Finale-Datei wird unter /final abgelegt
Kachel-Datei wird unter work abgelegt

Fehlt noch die Trackdatei, welche mit der Polar M440 aufgezeichnet wird. Die Uhr muss per Windows-PC nach Polar Flow synchronisiert werden. Anschließend kann die TCX-Datei heruntergeladen und im work-Order des fow-Task abgelegt werden. Das erledige ich per Hand. Am Ende besteht der fow-Task einer Fahrt dann aus folgenden Dateien:

fow-Ergebnis

Diese drei Artefakte sind das Ergebnis der Bildbearbeitung. Sie dienen als Eingang für den nächsten Schritt In/Out erstellen. Dazu gehört auch das ziehen eines Backups, da das fow-Verzeichnis nicht gesichert wird.

In/Out erstellen

Wie der Schrittname erkennen lässt, besteht das Erstellen der Dateien für das Wordpress-Plugin aus zwei Teilen:

IN ordnet die bisher erstellten Artefakte in eine feste Verzeichnisstruktur
OUT beinhaltet die fertigen Dateien, die dann hochgeladen werden können

Für beide Schritte gibt es je ein Skript, was die Arbeit erledigt. Alle Dateien dieses Schrittes (Fahrt-Artefakte und Skripte) liegen in einem eigens dafür vorgesehen Verzeichnis ~/pendel. Die Skripte werden aus diesem Verzeichnis heraus ausgeführt. Zusätzlich wird von dem gesamten Verzeichnis ein Backup auf den lokalen Server gemacht.

Verzeichnis für In/Out

IN

Ziel
Kopieren der drei Dateien einer Fahrt aus dem fow-Task in ein gleichnamiges Unterverzeichnis. Dazu dient das Skript import.sh. Um z. B. die Fahrt 035 zu erstellen ruft man

./import.sh 035

auf, womit pendel/in/035 angelegt wird.

import 035

In dem Skript sind absolute Pfade hinterlegt, die sind ggf. anzupassen.

OUT

Ziel
Erzeugung/Ergänzung der drei Zieldateien für das Wordpress-Plugin.

Das Plugin erwartet pro Fahrt ein Bild in einer Standardgröße von 1900x1200, die Kacheldatei (Teilauschnitt) als 100x100 und eine neue Zeile in der gps.csv-Datei, mit folgendem Format (alle Werte sind TAB-getrennt:

Dateiname
BreitengradLängengrad in Dezimalformat
Titel
Untertitel

Z.B.:

20180502-065848-DSCF6733.jpg  
50.1852190088547 9.12886915360833  
Pendel XXXV  
Kleine Brücke, Meerholz

Zur Durchführung ruft man das Skript create-out.sh mit der Fahrtnummer auf:

create-out 035

Das Skript macht nun genau dies:

Kopieren der Bilddatei und konvertieren in die gewünschte Größe
Kopieren der Kacheldatei
Ergänzen der Datei gps.csv um eine neue Zeile

Da hier keine absoluten Pfade benötigt werden, sollte das Skript ohne Anpassung laufen.

Backup

Hat man out ergänzt, ist eine gute Gelegenheit, die Dateien zu sichern, da nun sowohl die Ausgangsdateien als als die Zielartefakte erstellt sind. Das Skript rsync-to-diskstation macht das per rsync auf den lokalen Server.

Dieses Skript ist natürlich bzgl. des Zielpfades wieder anzupassen.

Im letzten Schritt wird nun die Fahrt dem Wordpress-Plugin hochgeladen.

Upload

Ziel
Hochladen der relevanten Dateien einer Fahrt in das Wordpress-Uploads-Verzeichnis.

Das Plugin erwartet die Dateien in einem Unterordner von uploads/pendel, hier uploads/pendel/ffm (wird in der Plugin-Konfiguration eingestellt). Das Skript earls5sftp ist dafür eingerichtet. Es lädt die die drei unter OUT geänderten Dateien auf den Server hoch:

./earls5sftp.sh 035

Upload für Fahrt 035

Das Skript ist für den jeweiligen Blog anzupassen.

Danach muss nur noch das Plugin refresht werden und das Ziel ist erreicht: Die neue Kachel ist auf der Leinwand platziert.

Fazit

Schnell und mit wenig Aufwand lästige Handarbeit automatisieren - dafür eignet sich Bash-Skripting gut. Der Workflow hilft mir, das Doing zu standardisieren, nur so ist ein effizientes Arbeiten möglich.

Pendel Zeitreise

Tue, 10 Apr 2018 00:00:00 +0000

Zeitreise

Pendel bietet nun die Möglichkeit, die Leinwand zu Blättern. Damit kann sich der Betrachter auf der Leinwand zeitlich vor- und zurück bewegen. Eine Zeitreise durch die Entstehung des Pendels…

Überlegungen

Von Anfang hat beschäftigte mich die Frage, wie mit Bilder umzugehen ist, die am gleichen Ort entstehen. Also Bilder, die auf der Leinwand übereinander liegen würden. Soll es eine Fotoregel sein, nur ein Bild pro Kachel zu machen? Oder soll ein neues Bild das alte einfach ersetzen? Oder sollen ein altes Bild dem neuen durch verschieben auf der Leinwand Platz machen?

Story Telling

All diese Ideen sind nicht überzeugend und fügen sich nach meinem Verständnis nicht gut in das Konzept ein. Die Idee einer zeitlichen Achse, gefällt mir um so besser. Darauf gestoßen, bin ich bei der wunderbaren Seite atterwasch.net. Wie dort Blättern als Vortrieb für die Geschichte genutzt wird und damit der Betrachter in die Geschichte eintaucht ist echt beeindruckend und schön gemacht.

Zeitreise

Zurück zum Pendel-Projekt: Die Scrollleiste des Webbrowsers ist nun entfernt, die Leinwand wird stattdessen immer im Vollformat angezeigt. Der Besucher kann nun mit der Maus (bzw. durch Wischen) zurück und vor blättern. Und so bewegt man sich auf der Zeitachse des Pendels und sieht die Entstehungsreihenfolge der Bilder.

Leinwand mit Scrollleiste und Fußzeile

Was noch geändert wurde

Zur Orientierung beim Blättern wurde eine Fußleiste hinzugefügt. Diese zeigt neben dem Seitenname (‘Leinwand’) die aktuelle Position und die Anzahl der Bilder an. Das Laden der Kachelbilder erfolgt nun asynchron. Derzeit hat die Leinwand zwar nur 25 Bilder, bis diese vom Server geladen sind, kann es aber schon ein Weilchen dauern. Während des Ladens, zeigt die Fußleiste den Fortschritt an.

Ladebalken in der Fußzeile

Auch der Bildbetrachter wurde überarbeitet und zeigt sich nun im schicken Schwarz. Das Einzelbild wird nun formatfüllend angezeigt und asynchron geladen.

Bildbetrachter

So, nun habe ich das schlechte Winterwetter mit programmieren überbrückt. Jetzt gibt es aber keine Ausrede mehr für’s Pendeln!

Pendel Bildbetrachter

Fri, 15 Dec 2017 00:00:00 +0000

Nachdem sich nun die ersten Plättchen auf der weißen Leinwand platziert haben, kam dann doch recht schnell der Wunsch auf, die eigentlichen Bilder in einem Bildbetrachter ansehen zu können. Das war ursprünglich nicht vorgesehen, schließlich geht es um die Plättchen auf der Leinwand; die zugrunde liegenden Bilder sind eher als Rohmaterial zu sehen.

Andererseits ist die noch recht leere Leinwand auch nicht wirklich spannend - und auf einem Mobilgerät schon gar nicht. Also kann man nun auf die Plättchen klicken und sich das Bild ansehen. Man erkennt dann auch, dass das Plättchen keine reine Verkleinerung des Bildes ist, sondern vielmehr einen Ausschnitt zeigt (genau gesagt ein quadratischer Ausschnitt mit 500 Pixel Kantenlänge). Deshalb kann man die Erstellung des Plättchenbildes auch nicht automatisieren, es wird ‘von Hand’ erstellt.

Unter dem Bild wird noch Titel, Beschreibung und GPS-Position angegeben, sowie ein Link zur OSM-Karte. Das gezeigt Bild hat eine Auflösung von 1900 Pixel, in voller Größe findet man die Bilder im flickr-Album Pendel.

Pendel Plugin

Sat, 18 Nov 2017 00:00:00 +0000

Die erste Version der Leinwand mit den ersten acht Bildern ist nun online! Umgesetzt als WordPress-Plugin.

Was bisher geschah

In den letzten Wochen wurde der ‘Durchstich’ des Plugins programmiert. Das Ziel war, ein minimales WordPress-Plugin zu erstellen, welches die Bilder als Kacheln anzeigt. Die Kacheln haben einen Schatten und bewegen sich leicht, wenn man mit der Maus bzw. dem Finger drübergeht. Außerdem musste ein passendes Theme gefunden und angepasst werden, damit die volle Browser-Seite genutzt werden kann. Ferner wurden Header und Footer minimalisiert.
Leinwand in Version 1 des WordPress-PluginsAußerdem bin ich natürlich gependelt, so dass man überhaupt etwas auf der Leinwand zu sehen bekommt.

Und wie geht’s nun weiter?

Die Leinwand soll nun etwas mehr Interaktion bekommen, mal schau’n, ich habe da so ein paar Ideen. Außerdem muss natürlich fleißig gependelt werden…

Los geht's

Thu, 31 Aug 2017 00:00:00 +0000

Los geht’s auf der Leinwand.

Nachdem ich ersten Fotos geschossen und entwickelt habe, ist es nun Zeit, die Leinwand aufzusetzen. Schließlich soll beides gleichzeitig entstehen. Machen wir also Nägel mit Köpfen…

Ich habe zwar schon ein vage Vorstellung, wie ich die Bilder hier präsentieren möchte, ob das dann auch aber ‘zieht’, wird der Besucher dann aber erst später sehen. Außerdem habe ich natürlich noch die Aufgabe, die Darstellung zu programmieren, und dafür muss ich erst ein wenig PHP lernen.

Über Pendel

Wed, 30 Aug 2017 00:00:00 +0000

Über dieses Projekt.

Ich fahre manchmal mit dem Rad zur Arbeit. Das sind so ungefähr 40 km hin und das Gleiche zurück. Wie ein Pendel. Die Strecke geht von Gelnhausen-Meerholz (wo ich wohne) nach Frankfurt am Main (wo ich arbeite). Sie führt durch erst das Kinzigtal und dann am Main entlang und ist ausgesprochen flach. Zehn Jahre lang, bin ich immer die gleiche Strecke gefahren, nämlich die schnellste. Schließlich wollte ich schnell zur Arbeit bzw. wieder nach Hause kommen. Und so übersah ich lange Zeit dieses Projekt.

Ab und zu hielt an, um ein Foto zu machen. Zu jener Zeit machte ich gerade das Projekt Tagesbild 2014 (s. Flickr). Ich musste also ein Foto machen und oft war die Fahrt die einzige Gelegenheit, kreativ zu werden. Irgendwann war dann Tagesbild beendet und ich machte keine Fotos mehr auf dem Weg zur Arbeit.

2015 brauchte ich ein Weihnachtsgeschenk für meinen Schwager. Ich beschloss, ihm einen Montagskalender mit 12 MTB-Touren zu schenken. Jede Tour sollte aus einem GPX-Track und einem Foto für den Kalender bestehen. Da ich weder GPX-Tracks noch Fotos hatten, fuhr ich also 12 Touren und machte dabei ein paar Fotos. Den Kalender nannte ich Alles fahrbar (s. Flickr).
Dann suchte ich irgendwann nach einem neuen Projekt. Denn Fotos machen klappt bei mir nur als Projekt. Ich brauche diese konkrete Aufgabe und den Druck auf den Auslöser drücken zu müssen. Mir fiel aber nichts ein.
Zufällig sah ich in einer Zeitschrift Fotos der amerikanischen Künstlerin Benedikte Flores Ansell, welche mit kleinen Fotoplättchen großflächige Installationen macht. Die Künstlerin hatte ihre Fotos verfremdet und auf Plättchen gedruckt. Die Plättchen hatte sie mit je einem Nagel an einer großen Wand zu einer Art Kontinent zusammengestellt.
Dann stieß ich auf das Odyssee-Projekt von Annette Meyer. Sie installiert Lochkameras an Orten rund um die Welt und macht damit Extrem-Langzeitbelichtungen. Sie berichtet darüber in ihrem Blog www.annette-meyer.com.

Die Idee

Die beiden Dinge, Fotos auf Touren und die Anordnung von Fotos zu einem Gesamtwerk, möchte ich zusammenbringen. Die Plättchen brachten mich auf die Idee, Fotos nach gewissen Kriterien anzuordnen. Warum nicht nach ihrem Entstehungsort? Und durch die Kalenderaktion war meine Neugier für alternative Strecken zu meiner bewährten, schnellen Pendelstrecke geweckt.
Die Idee ist nun, zu Pendeln und dabei Fotos zu machen und diese Fotos auf einer weißen Website unter Berücksichtigung der Entstehungskoordinaten anzuordnen. Die Anordnung soll durch einen Algorithmus erfolgen, aber nicht punktgenau nach ihrer Position. Vielmehr wird die Position nur ein Parameter von mehreren sein. Was das nun genau bedeutet und wie das dann aussehen wird, weiß ich noch nicht, jetzt am Beginn. Ich werde es aber am Ende des Projekts wissen.

Die Umsetzung

Ich starte mit diesem Blog und einer leeren Seite für die Leinwand. Das gibt dem Ganzen erst mal einen Rahmen und erzeugt den nötigen Druck für kreative Ideen. Die leere Seite soll dann zur Leinwand werden. Und mit jedem Pendel kommt ein neues Foto und mit jedem Foto füllt und verändert sich das Gesamtbild. Gefällt es mir nicht, werde ich den Algorithmus für Anordnung ändern, bis es wieder passt.