Sign in Subscribe

World Cup Tracker

Ryan Schuetzler

• 3 min read
Share

I've been working on a project with a friend involving a 128x64 LED Matrix display (more on that another time), but the display part of it isn't quite ready yet, so I decided to put that display to use for the World cup season.

Introducing the World Cup Tracker:

And LED Matrix display showing the USA and Paraguay flags and kickoff time of 7pm. Also shows Qatar v Switzerland and 2 more upcoming games.
Upcoming games display

During the game, you get an up-to-date score display and timer.

A matrix LED display showing the current score (0-0) with the flags of France and Senegal
Live score for FRA v SEN

Since I'm more or less a neutral observer, I made a goal animation that plays for every team that scores (even if I'm cheering for the other team).

Fixing the flags

I went through multiple iterations of having AI generate pixel versions of the flags, and... it was okay. As you can see in the screenshots above, they were close, but even simple flags (like the Swiss flag) were off by enough that it needed to be fixed. And the Canada flag was really terrible (see the screenshot below).

After a few attempts to get Claude to generate decent flags, I gave up on that had it give me a pixel editor (giving me KidPix flashbacks). The display uses 3 different flag sizes (I should probably cut it down to two, but I've got the flags, now).

Pixel art editor with color picker and 3 different sizes of Canadian-style flags
Pixel editor with the 3rd AI drafts of Canada's flag

My kids love drawing and art, so they jumped at the opportunity to fix these flags. Basically every flag but the tri-color flags and the simple Scandinavian cross flags needed some work.

Two kids working on the pixel editor at a computer
Kids working on the Bosnia and Herzegovina flag that AI borked

My son Hyrum took the lead and ended up fixing about 36 flags, including a much improved maple leaf.

Pixel Canadian flag

Here's the full set. I'm sure some could be better, but overall they're significantly improved from the AI drafts, and they look even better on the display!

An 8x6 grid of pixel flags for the countries in the world cup

And here's the originals (just look how bad Australia was!):

Fonts

Most of the display just uses a 5x7 pixel font design. That works great when things are small, but the larger text didn't look great. And like with the flags, AI did a terrible job coming up with a good-looking larger font, so I did some searching and found Geist Pixel (https://vercel.com/font?type=pixel), and font designed to look like it's pixels, even including round and grid pixel variants. It's a 19-"pixel" high font, so I used Claude to convert that into an actual 19 pixel high font, and now the score display shows beautifully at that size.

Parts list