Train Destination Display

Overview

Train Destination Display is a web application that faithfully emulates the iconic Hamburg U-Bahn destination display (used until 2025) with its characteristic dot-matrix style and countdown timer.

Originally created for a wedding website, it evolved into a standalone open-source project.

The Challenge

Recreating a physical dot-matrix display as a web application required balancing visual authenticity with web compatibility. Key challenges included:

• Achieving pixel-perfect visual authenticity of the original hardware display.
• Creating a flexible layout system that adapts to varying text lengths and line configurations.
• Staying true to the original while keeping it flexible for custom content.

The Process

• Reference Research: Used photos and videos to capture the exact dot-matrix grid dimensions, font characteristics, and animation timing of the original display.
• Pixel Font Design: Mapped each character into a pixel grid, ensuring the typeface matches the original display's proportions and spacing.
• Rendering Approach: Compared different strategies (SVG, CSS Grid), settled on Canvas for precise pixel control and smooth animations.
• Configuration System: All content, colors, and layout parameters can be customized through a single JavaScript config file without touching the source code.
• Extraction & Generalization: Extracted the component from the wedding website into a standalone project.

The Solution

Key features designed and built:

• Pixel Grid Rendering: Custom dot-matrix rendering system via HTML Canvas, faithfully recreating the original display aesthetics.
• Flexible Configuration: Simple config file for customizing content, colors, and layout.
• Minimal Dependencies: Only jQuery and custom code, built for maximum portability.

Results & Impact

• Published as an open-source project on GitHub.
• Successfully used in a real-world context (wedding website) before becoming a standalone project.
• Shows that a physical display can be convincingly recreated in the browser.