I built a display that shows the nearest flights around me

As is the case with many others around the world, I have the tendency of pulling out the Flightradar24 app whenever I hear a plane flying above me. Why? Fun. I always find it interesting to find out where that specific plane is going, how long it's been in the air, how long it has left, and what type of plane it is.

The inspiration

I found this post online which caught my attention. Someone is selling a Flight board style panel which showcases the nearest flights around them, with some information about the flight.

Source: @captainchris on Instagram

I knew that I wanted this to be my next project. I do not happen to have a programmable RGB LED matrix laying around, but I know I can already get to the programming part.

Making it work

I immediately got to work researching what free APIs out there could provide the information I'm looking for. There are many, but not exactly free. In the end I found two that, combined, gave me everything I needed:

• OpenSky Network for the actual aircraft positions - a free API that returns live state vectors (lat/lon, altitude, velocity, callsign, ICAO24 hex) for every aircraft inside a bounding box.
• adsbdb to fill in the details OpenSky doesn't give you: looking up a callsign gets you the route (origin/destination airports and airline name), and looking up the ICAO24 hex gets you the aircraft type.

Since web development is my most comfortable type of development, I opted for something simple to get my concept down instead of diving straight into LED matrix panels, controllers, adapters world.

The chosen stack: Literally just bare styles.css, app.js, and an index.html. Why complicate it? In the end we just need coordinates, a call including said coordinates, and displaying the response on the screen.

Slightly more info: The board asks the browser for my location, then queries OpenSky with an expanding bounding box, 100km, then 300km, 800km, up to 1500km, stopping as soon as it has enough airborne aircraft, sorts them by distance, and keeps the closest ten. It refreshes every 60 seconds.

The fun bit was making it look right. Rather than using a font, each character is a hand-built 5x7 dot-matrix renderer on canvas with each letter being a literal bitmap of lit and unlit dots, drawn with a soft amber glow to mimic the LED look of a traditional airport board, with longer text like airline or destination names scrolling as a marquee when it doesn't fit the column.

After looking online for some design inspirations, and a bit of discussion with Opus 5 , I was able to come up with something very close to the initial design idea I had, which I was able to tweak to get it perfectly to my taste.

Result

Demo location: Frankfurt, Germany

Next step: Buy that RGB LED matrix board, or a cheap tablet with an internet connection so it can actually be displayed outside of my monitor.