In diesem Blogartikel stelle ich euch zwei Open Source Skripte vor, die mir seither das Leben erleichtern. Die könnt ihr – vorausgesetzt, ihr habt Programmierkenntnisse – selbst nutzen oder einfach nur meine WebApp nutzen. Aber ich beginne erst einmal von vorne. Auf meinem täglichen Arbeitsweg stand ich immer wieder vor derselben Herausforderung: Diverse Umstiege mit teils mehreren Haltestellen pro Haltepunkt und verschiedenen Linien, aber keine zentrale, für mich persönlich übersichtliche Darstellung der für mich relevanten Abfahrten. Ihr habt diese Displays alle schon einmal gesehen: die digitale Abfahrtsanzeige an einer Haltestelle (Bus XYZ nach Musterstadt in 8 Min) und genau hier setzt meine FahrINFO WebApp (Zur WebApp / Webseite) an: Diess ruft die Daten wie die digitalen Abfahrtsanzeigen von einer API ab und stellt diese mit allen relevanten Daten dar. Die offiziellen ÖPNV-Apps wie bspw. die der S-Bahn-Berlin (iOS, Android) liefern zwar die Daten, ist aber für die reine Darstellung der Abfahrten teils zu umständlich oder nach dem Redesign der BVG-App (iOS, Android) sogar teils unbrauchbar, da hier aktuell keine Abfahrtsdarstellung für eine favorisierte Haltestelle möglich ist. Aus diesem Grund hatte ich damit begonnen, ein eigenes Skript für eine WebApp zu entwickeln. Über ein Jahr hinweg ist daraus ein schlanker, flexibler FahrINFO-Monitor entstanden, der im Browser läuft und sich sogar mit einem Icon wie eine App auf dem Smartphone ablegen lässt. Das Skript aktualisiert sich automatisch alle 30 Sekunden und zeigt genau das an, was ich brauche: die nächsten Abfahrten meiner favorisierten Umsteigepunkte und Linien – schnell, klar und zuverlässig.
Mein Anspruch lag dabei nicht nur auf der Funktionalität, sondern auch auf der Optik:
Mein Projekt besteht hierbei aus nur zwei Ebenen: der Startseite zum Suchen sowie abrufen deiner Favoriten und dem eigentlichen FahrInfo-Monitor. Ich habe dabei großen Wert auf eine aufgeräumte, moderne Benutzeroberfläche im kontraststarken Dunkelmodus-Design gelegt, die für Smartphones, Tablets oder Wanddisplays optimiert ist. Wie beim Original werden alle Linien farblich differenziert dargestellt (ob S-Bahn, U-Bahn, Tram, Bus oder Zug) und durch intuitive Schaltflächen, Texte oder verständliche Zeitangaben ergänzt. Die Nutzererfahrung steht dabei im Mittelpunkt: kaum Scrollen oder Wischen, kein langes Suchen, einfach alles auf einen Blick. Herausgekommen ist ein schlanker FahrINFO-Monitor, der Abfahrten in Echtzeit direkt im Browser für deine Lieblings-Haltestelle darstellt. Selbst das von mir gestaltete App-Icon habe ich aus Liebe zum Design im neuesten iOS26 Liquid-Class-Design gestaltet.
Diese WebApp nutzt nur technisch notwendige Cookies (Wiki), um deine favorisierten Haltestellen lokal im Browser zu speichern und auf der Startseite abrufbereit zu halten. Die Daten werden nicht an Server übertragen, sondern liegen nur lokal auf deinem Gerät. Wenn du die Cookies deaktivierst, kann es sein, dass die WebApp nicht mehr richtig funktioniert. Du kannst die Cookies jederzeit über die Einstellungen deines Browsers löschen.
Mein Projekt auf GitHub
Auf GitHub.com könnt ihr auf meinem Profil das vollständige FahrINFO-Monitor-Projekt einsehen. Ihr habt dort nicht nur die Möglichkeit, die kompletten Quellcodes herunterzuladen um diese selbst auszuprobieren, sondern könnt auch Feedback hinterlassen, Fragen stellen oder aktiv an der Weiterentwicklung mitarbeiten. Ich freue mich über jedes Sternchen, jedes Issue und jeden Verbesserungsvorschlag, denn gemeinsames Entwickeln macht das Projekt nur besser!
Die API-Quelle
Die API-Daten sind öffentlich zugänglich und werden vom VBB über v6.vbb.transport.rest bereitgestellt. Über diese API können nicht nur die Haltestellennummer „stop_id“, sondern auch Live-Daten „remarks“ für zusätzliche Hinweise unter dem Zielort oder eine Zeiteingrenzung „duration“ für einen maximalen Zeitraum abgerufen werden. Die API bietet jedoch noch einiges mehr für ein solches Projekt. Mehr dazu erfahrt ihr weiter unten im Abschnitt „Konfigurierbarkeit“.
Die Startseite: Mehr als nur der Einstieg zum FahrINFO-Monitor
Über die Startseite (Zur WebApp / Webseite) erhält man Zugang zu meiner WebApp. Hier habe ich diverse kleine Features und Designelemente eingebaut: Dazu gehören bspw. eine Dot-Matrix-Schriftart für einen charmanten Retro-Charakter, eine Favoriten-Auswahl über ein Dropdown-Menü für häufig genutzte Haltestellen (diese per extra html-Skript hinzugefügt werden können), eine intelligente Haltestellensuche mit automatischen Vorschlägen aus der VBB-API mit Live-Daten sowie einer zentralen Gimmick-Box, diese die Suchergebnisse direkt im Look eines digitalen Abfahrtsanzeige im Responsiven Design anzeigt, sodass diese sich an so ziemlich alle Bildschirmgrößen anpasst. Die zentrale „Gimmick“-Box dient dabei nicht nur als Hingucker, sondern auch mit der Funktion: Suchergebnisse in einem realitätsnahen Anzeigeformat – das fast wie am Bahnsteig wirkt – darstellt.
Der FahrINFO-Monitor: Das eigentliche Herzstück
Auch bei der Darstellung des FahrINFO-Monitors (Zur Demo-Abfahrtstafel) habe ich besonderen Wert auf Nutzerfreundlichkeit und ein aufgeräumtes, responsives Design gelegt: Eine kontrastreiche Darstellung im Dunkelmodus, klare ÖPNV-Linienkennzeichnung und Farbgebung wie beim Original sowie zusätzliche Informationen aus der VBB-API mit Live-Daten wie z.B. ob eine Fahrradmitnahme möglich ist. Zusätzlich habe ich eine Übersetzung ins Skript eingebaut. So werden englischsprachige Hinweise von der API größtenteils automatisch ins Deutsche übersetzt und irrelevante Informationen herausgefiltert. Die Anzeige im Browser ist nicht nur kompakt und modern, sondern auch im innersten – also im Skript – hochgradig konfigurierbar.
FahrINFO-Monitor: Dieses flexible Skript lässt sich mit 7 individuellen Einstellungen frei konfigurieren
Damit sich der FahrINFO-Monitor in verschiedene Szenarien einfügt, ist dieses Skript per JavaScript-Parameter in einer Programmierumgebung vollständig konfigurierbar und lässt sich so spezifisch für eine bestimmte Haltestelle anpassen. 
1.) „STOP_ID =“ Die zwingend notwendige und eindeutige Haltestellen-ID ist über anb030.de/stop_id ermittelbar.
2.) „STOP_NAME =“ Wird automatisch ausgefüllt oder kann manuell eingetragen werden.
3.) „MAX_RESULTS =“ Bestimmt wie viele Abfahrten gleichzeitig angezeigt werden sollen.
4.) „ALLOWED_LINES =“ Ein leerer Wert zeigt alle Linien oder mit Eintrag nur bestimmte Linien pro Stop_ID wie z.B. die Tram „M4“.
5.) „BLOCKED_DIRECTIONS =“ Ein leerer Wert zeigt alle Ziel-Orte an oder mit Eintrag werden bestimmte Ziele pro Stop_ID wie z.B. „S Adlershof“ ausgeblendet.
6.) „MAX_CANCELLED =“ Begrenzung der (Fällt aus) Meldungen.
7.) „MAX_DEPARTED =“ Begrenzung die bereits (Abgefahren) Meldungen.
Mein Resümee
Was als kleine Idee und Alltagshilfe begann, hat sich mittlerweile zu einer flexiblen und eleganten WebApp mit vielen Features entwickelt, die trotzdem leichtgewichtig und selbsterklärend ist. Nach rund 12 Monaten, in denen ich immer mal wieder an den Skripten geschraubt habe, denke ich, dass diese nun final sind und euch präsentiert werden können. Für die Nutzung unterwegs – etwa auf dem Smartphone – habe ich die WebApp hauptsächlich konzipiert. Die FahrINFO-Monitor-Skripte sind aus einem ganz persönlichen Bedarf heraus entstanden und sind inzwischen täglich zuverlässige Helfer, die mir echte Freude im Alltag bereiten. Wenn du über Programmierkenntnisse und freien Speicherplatz auf deinem Webspace verfügst, darfst du die Skripte gerne verwenden.
Eine NotebookLM Audio-Zusammenfassung
Ich bin ein „Ein-Personen-Betrieb“, arbeite hauptberuflich im Gesundheitswesen und betreibe diese Seite als Hobbyprojekt in meiner Freizeit. Wenn Ihnen meine Arbeit gefällt (die Beiträge, die Hintergrundbilder, mein allgemeines Auftreten … einfach alles), so dürfen Sie gerne in Erwägung ziehen, mir eine kleine Spende für zum Beispiel einen Café ☕️ per PayPal.com zukommen zu lassen! Ihre Beteiligung ist unglaublich wertvoll und trägt viel zur Unterstützung und Erhalt dieser werbefreien Seite bei!
Unterstützen
… auf Flickr
… auf Instagram
… auf Mastodon
… auf Threads
… beim WhatsApp Kanal
… mit RSS