Karlsruhe Subway style departure board. banner

Karlsruhe Subway style departure board.

Created by: Linus
7 devlogs
8h 47m 8s

Do you like the style of the new departure boards in Karlsruhe? Well, they run Windows and a browser, and so I set out to clone them in pure handwritten HTML/CSS/JS. Simply enter any stop name in the world, and departures will appear just as in th…

Do you like the style of the new departure boards in Karlsruhe? Well, they run Windows and a browser, and so I set out to clone them in pure handwritten HTML/CSS/JS. Simply enter any stop name in the world, and departures will appear just as in the original (some features disabled for technical reasons)!

On the backend side, most work is delegated to the amazing Transitous API, however, another, self-cooked API provides the line shapes and colors, by quering a CC0 database.

Demo Repository

README

Loading README...
Linus
Linus shipped Karlsruhe Subway style departure board.
4 days ago

Shipped this project!

I was told to reship to get the cookies for everything I did after the first ship was initially rejected.
This mainly is the UI cleanup and more line colors (including Austria and Switzerland).

Linus
Linus worked on Karlsruhe Subway style departure board.
about 1 month ago
0h 50m logged

I modified the line-colors-api backend slightly to also incorporate Vienna, Hannover and Switzerland

Attachment
0
Linus
Linus worked on Karlsruhe Subway style departure board.
about 1 month ago
1h 14m logged

I removed the ugly bottom bar, but that is just a minor change.
Most importantly, the font size is now dependent on the screen size.
Also, if there are no departures, an appropriate message will be displayed (No departures available or No stop selected)
Also, more departures are now displayed. (This is true to real life, if there is a marquee message, it’s 5, otherwise 7.)

Attachment
Attachment
Attachment
0
Linus
Linus shipped Karlsruhe Subway style departure board.
2 months ago

Shipped this project!

Hours: 6.78
Cookies: 🍪 104
Multiplier: 15.38 cookies/hr

This is some really complicated AJAX. I deployed the site using the new Deno Deploy, both the backend and the frontend. The line-colors-api had me learn to use the basics of Oak, as it uses a CORS middleware. The frontend made me learn some more CSS, and I now want TSC to support Web targets even more.

Linus
Linus worked on Karlsruhe Subway style departure board.
2 months ago
0h 44m logged

I made some final changes, fixing a11y warnings (and removing the circle line shape). Ready to ship!

Attachment
1

Comments

nok
nok about 1 month ago

wow that’s cool!

Linus
Linus worked on Karlsruhe Subway style departure board.
2 months ago
0h 35m logged

I added the bottom bar and a flavortown link next to a marquee for news.
No functionality changed. It’s just optics now, and maybe geolocation. (Famous last words)

Attachment
Attachment
0
Linus
Linus worked on Karlsruhe Subway style departure board.
2 months ago
1h 13m logged

I added the remaining line shapes as well as rectangles with borders.
Also, the text “sofort” now only shows under 1 min if the stoptime has real-time data, as in real life.

Attachment
0
Linus
Linus worked on Karlsruhe Subway style departure board.
2 months ago
2h 4m logged

I added functionality to get real line shapes. More will be added later, along with proper proportions. A demo URL is also almost ready.

Attachment
0
Linus
Linus worked on Karlsruhe Subway style departure board.
2 months ago
2h 4m logged

A lot of the project is finished already. It displays departure times etc. Some problems include the following:

  • Line icons do not have the correct shape. The Transitous API uses traewelling/line-colors, but only provides the colors. The shape needs to be gotten either directly from the source or by building a dedicated API.
  • Padding on most elements does not match the real life model. This is simply some trial and error. The UI is also currently not responsive AT ALL.

TODO:

  • Add a “My location” button (maybe in the H symbol)
  • Make the clock blink every second and switch on the minute.
Attachment
2

Comments

selmaqrini
selmaqrini 2 months ago

Goodluck keep going !

heinichtoni
heinichtoni about 1 month ago

Sieht ziemlich gut aus 👍