stumbled onto

A project log for e-ink clock with html + css

bonus: using NFC to configure the WiFi

nazNaz 06/10/2024 at 03:240 Comments

If you haven't seen that website check it out

Anyways, got me thinking about the cloud and how I've had a Raspberry Pi Zero W tucked next to my modem for a few years now and I rarely think about it. Anyway, I got a Raspberry Pi 5 and wow I must say, I know the price went up, but the difference is sometimes how much JLCPCB DHL shipping costs, so .. I mean, definitely worth the cost. Took me only a few minutes to provision nodejs with nvm (it takes at least an hour on the Pi Zero just because node has to be built for it, but nvm install 20.12 on the Pi 5 and it has a prebuilt binary and happily installs!

Also watched game 2 of the NBA finals and decided to capture the screen showing the live scores of the game (its actually ahead of what I get on my TV which is a different fun problem to consider) but throughout the regular season, I'd like to know if there's a close game on and the screen can highlight it. Or just show when the Knicks are playing, even if the suck. I'll take a second here and acknowledge that the Celtics are a great team. I mean wow. It was nice the Pacers took the win from the Knicks because the Celtics completely decimated them it was amazing.

Right, so the code is here:

And what this is the e-ink screen that I have is doing is making a request to my Raspberry Pi to fetch the binary needed for the display. The binary is made from the screenshot of a web view that is the index.html that the Raspberry Pi spins up a "headless" Chrome to take a screenshot of. The index.html has a few things to ensure that the content is loaded before the screenshot is taken, for example waiting for all API calls to complete and the UI to update, images to load, etc. Without that code, the screenshot is taken too early and the clock isn't as functional. Another thing I was playing with was locale and timeZone, which is all built into the browser's Date object and overall something I enjoy not having to think about. It's cool to recognize everyone has their choice of metric or imperial, as well as how to write out the time and date!

Added a quick NBA fetch, cached it for a minute in the server, and wrote a component that output that on the HTML page. I got the integration written during the half time commercial break! Super fun!

Also take a look at the screen! I hope to post more files and code, but this is fun to play with, and it runs on my Raspberry Pi so I can refresh it a lot and I don't have to worry about cloud costs!

Here's a video captured with my Adafruit Memento

and then here's a video of my iPhone capturing the Adafruit Memento and the e-ink screen!