We live on the flight path to San Diego airport, and we like watching planes as they go by.
One afternoon, we stumbled into the bar Nolita Hall. It’s also on the flight path, and they have skylights so you can watch the planes as they fly overhead. They have a big split-flap display behind the bar, and the bottom 3 lines show the next incoming flight:
We talked to the staff and found out that their custom split-flap display was made by Oat Foundry. There’s a similar consumer equivalent called Vestaboard, but two little problems with that: it’s a couple thousand bucks, and it’s not coming out until fall 2019.
Yeah, so, no.
So we built a low-budget version instead.
FlightAware.com is a flight monitoring site with a really simple API. You can call the AirportBoards method, filter for a specific airport and either inbound or departing flights, and get back a lot of data about the next 15 flights. At the $25/mo tier, you can call it about every 20 minutes, and at the $50/mo tier, about every 3 minutes. (You could also get fancy and do different refresh rates depending on the time of day.)
To mimic Oat Foundry’s beautiful split-flap display, I found Flapper, a JQuery plugin.
My days of web development are over, so once I put the list of tools together, I hired David R. on Upwork to build a PHP page that would call FlightAware’s API, then show the next 3 incoming flights with Flapper.
This is just a picture – click on it to see the actual animation:
Next, to display it on the wall, I got a SmartIdea projector – a phone-sized device with Android 7 (Nougat) and WiFi so I could just open a web browser and let the page refresh itself. The title says it’s 1080p, but it’s only 480p – it’s just that it accepts 1080p inputs if you wanted to get ambitious. It runs off a 5W USB power supply, and has a built-in tripod socket at the bottom. Also has automatic keystone correction, which means it doesn’t have to be centered in front of the wall (or in our case, ceiling) where you want to project.
The SmartIdea projector isn’t bright, and our apartment has floor-to-ceiling windows. Fortunately, we usually leave the blinds closed behind the TV, and we wanted to project above the TV. It works well enough here, but the instant we open the blinds, the projector’s display disappears. It just can’t compete with sunlight, especially when the projector and surface are more than several feet apart.
It’s great for this use though – just a subtle listing of flights on the ceiling:
The projector also has a remote, and I’m so happy that the up/down buttons scroll Chrome too! So I can look down to see what flights are coming up later.
The projector has one serious drawback (apart from the lack of brightness): a slow CPU. The split-flap display animations look amazing in your desktop’s browser, but they’re dead slow on the projector when it’s animating 15 flights on a page. It takes a good 30-40 seconds for it to finish flapping through the alphabet! I gotta tweak those settings.
For the code, here’s the incoming-flights Github repo.
What I’d like to add in vNext
San Diego is busy – really busy, as you can see in FlightAware’s live map of arrivals and departures. It’s the busiest single-runway airport in the US, which means all flights are coming in on the exact same approach path all day. During peak times, we see a plane go by our windows every 2 minutes.
Plus, air traffic controllers frequently reroute planes around, having them do a quick circle to get into a different spot of the lineup. You can’t have a big, heavy jumbo jet flying right up the tail of a tiny Cessna, running over it.
The approach lineup shuffles around from time to time – which means if we’re calling FlightAware’s API every 10 minutes, it can get out of date. The answer isn’t to just blindly call their API more frequently, because:
- Bronze API: $25/mo for 2,500 API calls
(about 3 per hour, or every 20 minutes) - Silver API: $100/mo for 20,000 API calls
(about 27 per hour, or every 2 minutes)
I’d really rather not pay $100/mo for this. (Especially when Erika points out, “We could just have it show the FlightAware KSAN page for free,” but that doesn’t look nearly as cool.)
So in vNext, I want to disconnect the API calls from the page refreshes. It’ll probably look like a Lambda function that runs every minute, and decides whether to call the FlightAware API. I don’t want call it from sunset to sunrise, for example, and I wanna call it less often when it’s outside of our peak viewing hours, or when there’s low traffic. Then, write the FlightAware API response to DynamoDB (or maybe ElastiCache.)
That way, the web page can refresh every minute, and just fetch the most recent response from DynamoDB without hitting the expensive FlightAware API every time. (Pricing-wise, all of that would fit into AWS’s free tier, which is nice – so my only cost is the labor of writing the code, and the FlightAware $25/mo price.)