Train Destination Display
Der Zugzielanzeiger der Hamburger U-Bahn, nachgebaut als Webanwendung
Eine Canvas-basierte Webanwendung, die den Zugzielanzeiger der Hamburger U-Bahn mit eigener Pixelschrift und Countdown originalgetreu nachbildet. Ursprünglich für eine Hochzeitswebsite entwickelt, später als eigenständiges Open-Source-Projekt veröffentlicht.
Überblick
Das Train Destination Display ist eine Webanwendung, die den charakteristischen Zugzielanzeiger der Hamburger U-Bahn (bis 2025 im Einsatz) originalgetreu emuliert, inklusive typischem Punktmatrix-Stil und Countdown.
Ursprünglich für eine Hochzeitswebsite erstellt, wurde daraus ein eigenständiges Open-Source-Projekt.
Wie es gebaut wurde
Ausgangspunkt war eine Referenzrecherche: Fotos und Videos der Original-Anzeige, um die genauen Abmessungen des Punktmatrix-Rasters, die Schriftproportionen und die Animationstimings zu erfassen. Jedes Zeichen wurde von Hand in ein Pixelraster übertragen, um die Originalschrift möglichst präzise nachzubilden.
Für das Rendering habe ich SVG, CSS Grid und Canvas verglichen. Canvas hat gewonnen: wegen der präzisen Pixelkontrolle und der Möglichkeit, Animationen zeitgenau zu steuern, was für das Blinken und Scrollen der Originalanzeige wichtig war.
Die Komponente entstand zunächst eingebettet in die Hochzeitswebsite und wurde anschließend herausgelöst und verallgemeinert. Inhalte, Farben und Layout-Parameter lassen sich über eine einzige JavaScript-Konfigurationsdatei anpassen, ohne den Quellcode anfassen zu müssen.
Ergebnis
Als Open-Source-Projekt auf GitHub veröffentlicht. Die Anzeige wurde live auf der Hochzeitswebsite eingesetzt, für die sie ursprünglich gebaut wurde. Die eigenständige Version steht für alle zur Verfügung, die denselben Effekt nachbauen möchten.
Interesse an einer Zusammenarbeit?
Schreiben Sie mir