{"id":9267,"date":"2025-07-03T18:00:08","date_gmt":"2025-07-03T17:00:08","guid":{"rendered":"https:\/\/anb030.de\/a\/?p=9267"},"modified":"2025-07-09T14:08:11","modified_gmt":"2025-07-09T13:08:11","slug":"fahrinfo-monitor-skript","status":"publish","type":"post","link":"https:\/\/anb030.de\/a\/fahrinfo-monitor-skript\/","title":{"rendered":"Mein flexibler FahrINFO-Monitor f\u00fcr Berlin & Brandenburg"},"content":{"rendered":"
\n
\"Artikel-Bild:<\/figure>\n<\/div>\n\n\n

In diesem Blogartikel stelle ich euch zwei Open Source Skripte vor, die mir seither das Leben erleichtern. Die k\u00f6nnt ihr \u2013 vorausgesetzt, ihr habt Programmierkenntnisse \u2013 selbst nutzen oder einfach nur meine WebApp nutzen. Aber ich beginne erst einmal von vorne. Auf meinem t\u00e4glichen Arbeitsweg stand ich immer wieder vor derselben Herausforderung: Diverse Umstiege mit teils mehreren Haltestellen pro Haltepunkt und verschiedenen Linien, aber keine zentrale, f\u00fcr mich pers\u00f6nlich \u00fcbersichtliche Darstellung der f\u00fcr 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<\/a>) an: Diess ruft die Daten wie die digitalen Abfahrtsanzeigen von einer API ab und stellt diese mit allen relevanten Daten dar. Die offiziellen \u00d6PNV-Apps wie bspw. die der S-Bahn-Berlin (iOS<\/a>, Android<\/a>) liefern zwar die Daten, ist aber f\u00fcr die reine Darstellung der Abfahrten teils zu umst\u00e4ndlich oder nach dem Redesign der BVG-App (iOS<\/a>, Android<\/a>) sogar teils unbrauchbar, da hier aktuell keine Abfahrtsdarstellung f\u00fcr eine favorisierte Haltestelle m\u00f6glich ist. Aus diesem Grund hatte ich damit begonnen, ein eigenes Skript f\u00fcr eine WebApp zu entwickeln. \u00dcber ein Jahr hinweg ist daraus ein schlanker, flexibler FahrINFO-Monitor entstanden, der im Browser l\u00e4uft und sich sogar mit einem Icon wie eine App auf dem Smartphone ablegen l\u00e4sst. Das Skript aktualisiert sich automatisch alle 30 Sekunden und zeigt genau das an, was ich brauche: die n\u00e4chsten Abfahrten meiner favorisierten Umsteigepunkte und Linien \u2013 schnell, klar und zuverl\u00e4ssig.<\/p>\n\n\n\n\n\n\n\n

<\/p>\n\n\n

\n
\"App<\/figure>\n<\/div>\n\n\n

Mein Anspruch lag dabei nicht nur auf der Funktionalit\u00e4t, sondern auch auf der Optik:<\/h2>\n\n\n\n

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\u00dfen Wert auf eine aufger\u00e4umte, moderne Benutzeroberfl\u00e4che im kontraststarken Dunkelmodus-Design gelegt, die f\u00fcr 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\u00e4chen, Texte oder verst\u00e4ndliche Zeitangaben erg\u00e4nzt. 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\u00fcr deine Lieblings-Haltestelle darstellt. Selbst das von mir gestaltete App-Icon habe ich aus Liebe zum Design im neuesten iOS26 Liquid-Class-Design gestaltet.<\/p>\n\n\n\n

Diese WebApp nutzt nur technisch notwendige Cookies (Wiki<\/a>), um deine favorisierten Haltestellen lokal im Browser zu speichern und auf der Startseite abrufbereit zu halten. Die Daten werden nicht an Server \u00fcbertragen, sondern liegen nur lokal auf deinem Ger\u00e4t. Wenn du die Cookies deaktivierst, kann es sein, dass die WebApp nicht mehr richtig funktioniert. Du kannst die Cookies jederzeit \u00fcber die Einstellungen deines Browsers l\u00f6schen.<\/p>\n\n\n\n

Mein Projekt auf GitHub <\/h2>\n\n\n\n

Auf GitHub.com k\u00f6nnt ihr auf meinem Profil<\/a> das vollst\u00e4ndige FahrINFO-Monitor-Projekt<\/a><\/strong> einsehen. Ihr habt dort nicht nur die M\u00f6glichkeit, die kompletten Quellcodes herunterzuladen um diese selbst auszuprobieren, sondern k\u00f6nnt auch Feedback hinterlassen, Fragen stellen oder aktiv an der Weiterentwicklung mitarbeiten. Ich freue mich \u00fcber jedes Sternchen, jedes Issue und jeden Verbesserungsvorschlag, denn gemeinsames Entwickeln macht das Projekt nur besser!<\/p>\n\n\n\n

Die API-Quelle<\/h2>\n\n\n\n

Die API-Daten sind \u00f6ffentlich zug\u00e4nglich und werden vom VBB \u00fcber v6.vbb.transport.rest bereitgestellt. \u00dcber diese API k\u00f6nnen nicht nur die Haltestellennummer \u201estop_id<\/strong>\u201c, sondern auch Live-Daten \u201eremarks<\/strong>\u201c f\u00fcr zus\u00e4tzliche Hinweise unter dem Zielort oder eine Zeiteingrenzung \u201eduration<\/strong>\u201c f\u00fcr einen maximalen Zeitraum abgerufen werden. Die API bietet jedoch noch einiges mehr f\u00fcr ein solches Projekt. Mehr dazu erfahrt ihr weiter unten im Abschnitt \u201eKonfigurierbarkeit\u201c.<\/p>\n\n\n

\n
\"Die<\/figure>\n<\/div>\n\n\n

Die Startseite: Mehr als nur der Einstieg zum FahrINFO-Monitor <\/h2>\n\n\n\n

\u00dcber die Startseite (Zur WebApp \/ Webseite<\/a>) erh\u00e4lt man Zugang zu meiner WebApp. Hier habe ich diverse kleine Features und Designelemente eingebaut: Dazu geh\u00f6ren bspw. eine Dot-Matrix-Schriftart f\u00fcr einen charmanten Retro-Charakter, eine Favoriten-Auswahl \u00fcber ein Dropdown-Men\u00fc f\u00fcr h\u00e4ufig genutzte Haltestellen (diese per extra html-Skript hinzugef\u00fcgt werden k\u00f6nnen), eine intelligente Haltestellensuche mit automatischen Vorschl\u00e4gen 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\u00f6\u00dfen anpasst. Die zentrale \u201eGimmick\u201c-Box dient dabei nicht nur als Hingucker, sondern auch mit der Funktion: Suchergebnisse in einem realit\u00e4tsnahen Anzeigeformat – das fast wie am Bahnsteig wirkt – darstellt.<\/p>\n\n\n