Die Idee
Auf dem Dach des Hotels NEPTUN stehen zwei Kameras in 65m Höhe, die den atemberaubenden Ausblick auf Warnemünde illustrieren. Während die nach Westen gerichtete Kamera den Strand bis nach Wilhelmshöhe zeigt, fängt die andere deutlich mehr „Action“ ein: Zwischen den Molenköpfen am Eingang des Seekanals und Leuchtturm in Warnemünde herrscht reger Schiffsverkehr.
Seit ein paar Jahren gibt es auf der Website des Hotels ein kleines und sehr beliebtes Applet, das die aktuellen Bilder beider Kameras abbildet (und die Tagesbilder zu einem Zeitraffervideo zusammenfasst).
Diese Kameras wurden im November des letzten Jahres durch JAKOTA erneuert; zusätzlich wurde eine Wetterstation und eine AIS-Antenne auf dem Dach des NEPTUN installiert. Ein guter Anlass, die Darstellung der Wetterinformationen, der Webcambilder, des Archivs und der Wetterdaten zu überarbeiten. Und da wir uns seit geraumer Zeit neben Design und Visualisierung mit Schiffspositionen und AIS-Tracking beschäftigen, entstand die Idee für ein kleines Mashup:
Wie wäre es, wenn man die Schiffe, die das Webcam-Bild zeigt, korrekt mit ihren Namen beschriftet?
Ein perfektes Szenario für interdisziplinären Tech-Porn in unserem Büro!
Kalte, eidbergersche Zahlenkolonnen aus Positionsdaten mit einem atemberaubenden Bild verheiraten – genau unser Ding!
Recherche und Analyse
Nach ein paar konzeptionellen Tests, die sich darum drehten, Geolokationen auf die Pixel des Bildes mit wenigen Referenzpunkten per Mathematik und mit viel Approximation zu verbinden, stand schnell fest, daß das Ergebnis einfach nicht genau genug ausfällt. Ursachen sind dafür die Verzerrung durch Objektiv-Brennweite und der Umstand, daß der Seekanal keine ideale Nord-Süd-Ausrichtung hat.
Wir hatten also zwei zweitsynchrone Datenquellen, die sich nicht mit einfacher Mathematik verheiraten ließen – also weitersuchen. Wie also? Formeln herleiten? Gibt es da nicht etwas Fertiges? Nach einiger Recherche machte sich Ernüchterung breit.
Google Earth!
Schließlich fanden wir die Lösung in einem Browser-Plugin von Google Earth (GE). GoogleEarth zeigt ja bei Mausbewegungen die aktuelle Koordinate an, hier also…der Plan:
- Bild ausrichten
- den Bildschirm abscannen und jede Position auslesen
- Lookup-Tabelle für die Koordinate-zu-Pixel erzeugen
JavaScript + GoogleEarthPlugin + MausSteuerung = Pixel2Koordinate-Konverter? ok, bestätigt.
Anpassung des Viewports in Google Earth
Also mußte der Viewport im Plugin genau auf den Viewport des Kamerabildes ausgerichtet werden – damit war das Problem der Verzerrung gelöst. Aber das nächste wartete schon…
Virtuelle Maus
„Jetzt muß wir nur noch jemand jeden Pixel im Auschnitt der Webcam mit der Maus überfahren, damit das JavaScript-Event getriggert wird, das Pixel-Koordinate und dazugehöriger Geo-Koordinate abspeichert…“ Bei diesem Satz zog der Praktikant, der die wahre Bedeutung von „jemand“ und „man“ genau kennt, sichtbar den Kopf ein. Der relevante Auschnitt im Bild (Horizont bis Westmole) ist 1.280 x 242 Pixel groß, es galt 309.760 Pixel mit der Maus zu überfahren…
Screenshot der generierten Rohdaten
Jeder rote Pixel entspricht einer Pixelkoordinate, der ein Längen- und Breitengrad zugeordnet werden konnte.
Quartz Event Services to the rescue! Man braucht nur eine Handvoll Zeilen C-Code, um den Mousepointer auf dem Mac zu bewegen. Nach ein paar zeitlichen Anpassungen, um die JavaScript-Event-Queue nicht zu fluten, ratterte die virtuelle Maus los und generierte nach einem Tag(?) eine CSV-Datei mit einer knappen Millionen Records.
Die API
Von CSV ging es nach SQL und zügig hatten wir eine API zurechtgeklöppelt. Selbige ermittelt bei jedem Aufruf, ob sich Schiffe im Viewport der Kanera laut AIS befinden (müssten). Ist dies der Fall, werden einfach die aktuellen Schiffe in einem Geo-Raster ermittelt. Eine SQL-Query nimmt deren Geo-Koordinaten und holt sich dann aus der Datenbank mit etwas Toleranz (Lat/Long +/-Raster) die nächstgelegene Pixelpositionen. Diese Infos werden einfach per JSON an das Frontend übermittelt, womit die JAKOTA-Frontend-Crew nun genau weiß, wo das Namensschildchen zu zeichnen ist.
hier in etwa das Modul-Schema:
Diagramm der beteiligten Programm-Module
Nun sind wir in der Lage bei jeder Bildaktualisierung unseren Server zu fragen, ob sich Schiffe im Viewport der Kamera befinden, und wenn ja, wo sie sind.
Damit ist es uns dann möglich, auf dem Livebild der Webcam die Namen der ein- und auslaufenden Schiffe des Hafens von Rostock / Warnemünde anzuzeigen. -> Problem gelöst
Tadaaaa…..
live zu sehen unter : http://www.hotel-neptun.de/webcam.html
