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 gebaut, 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.
Die Herausforderung
Die Nachbildung einer physischen Punktmatrix-Anzeige als Webanwendung erforderte die Balance zwischen visueller Authentizität und Web-Kompatibilität. Zentrale Herausforderungen waren:
- Erreichen pixelgenauer visueller Authentizität der Original-Hardware-Anzeige
- Gestaltung eines flexiblen Layout-Systems für unterschiedliche Textlängen und Zeilenkonfigurationen
- Originalgetreue Nachbildung und trotzdem flexibel anpassbar für eigene Inhalte
Der Prozess
- Referenzrecherche: Erfassung der Originalanzeige anhand von Fotos und Videos hinsichtlich Punktmatrix-Rasterdimensionen, Schriftcharakteristiken und Animationstimings
- Pixelschrift-Design: Abbildung jedes Zeichens in ein Pixelraster, wobei die Schriftart den Proportionen und Abständen der Originalanzeige entspricht
- Rendering-Ansatz: Vergleich verschiedener Strategien (SVG, CSS Grid), Entscheidung für Canvas wegen präziser Pixelkontrolle und flüssiger Animationen
- Konfigurationssystem: Alle Inhalte, Farben und Layout-Parameter lassen sich über eine zentrale JavaScript-Konfigurationsdatei anpassen, ohne den Quellcode ändern zu müssen
- Extraktion & Generalisierung: Herauslösung der Komponente aus der Hochzeitswebsite in ein eigenständiges Projekt
Die Lösung
Zentrale Features, die ich entwickelt habe:
- Pixelgrid-Rendering: Maßgeschneidertes Punktmatrix-Renderingsystem via HTML Canvas, originalgetreue Nachbildung der Anzeigen-Ästhetik
- Flexible Konfiguration: Einfache Config-Datei zur Anpassung von Inhalten, Farben und Layout
- Minimale Abhängigkeiten: Nur jQuery und eigener Code, entwickelt für maximale Portabilität
Ergebnisse & Wirkung
- Als Open-Source-Projekt auf GitHub veröffentlicht
- Erfolgreich im realen Kontext eingesetzt (Hochzeitswebsite), bevor es zum eigenständigen Projekt wurde
- Zeigt, dass sich eine physische Anzeige überzeugend im Browser nachbilden lässt
Interesse an einer Zusammenarbeit?
Schreiben Sie mir