A stupidly small website - UDOO Key Microcontroller based Site
Hi all,
I'm excited to finally announce the completion of a project I started back in September '23, with a few hiatuses along the way for other projects. First, let me show you a demo...
It works 100% of the time, 50% of the time. I optimized it to avoid getting stuck, so sometimes it fails... You'll also notice that as you scroll, the website goes from stupidly small to regular size (so it's stupidly small in more than one way :D)
What's the UDOO Key?
The UDOO Key is a $4 microcontroller board with an ESP32 and a Pi Pico on the same board, linked via a serial channel. I pledged for it on Kickstarter around 2 years ago and totally forgot about it until it arrived last year.
So, what is it?
It's exactly what it sounds like - a website (a simple blog, actually, as I was building it before I got set up here) that uses JavaScript but works perfectly fine without it (more as a challenge to myself). It fits inside the memory and disk space constraints of embedded controllers. You can view the UDOO Site to see it in action. As it's running on my home network, I've reverse proxied it through my web server since I didn't feel like exposing the poor little circuit board directly to the internet. However, all requests are handled on the device, and the only thing provided by the reverse proxy is TLS, as it's not necessary on the board, but many browsers mandate it nowadays.
Languages
To program the ESP32, I finally had to pick up some C++ for this project, and boy, did it make me grateful for modern languages. Some functions like strftime are just globally available, which felt really weird and gross to me, although it's not completely foreign due to my experience learning PHP several years ago. It was good to get a feel for it, but I don't think I'll be reaching for it for any project anytime soon.
Fortunately, for the Pi Pico, I got some of my modern creature comforts in the form of TinyGo, a version of Go that compiles to a much smaller size and has some alternative garbage collection and schedulers designed to work better in constrained environments such as embedded and web assembly. This meant I didn't have to learn much for that side of it.
Down and dirty with a protocol
This is the first time I've gotten down to the nitty-bitty of any protocol, actually sending raw bits over a serial connection between the two devices. This added a lot of interesting challenges as I had to handle rebroadcasting (giving packets IDs and sending back the ID if it could be decoded but the rest of the message could not) and error detection (via CRC32), which caused a rebroadcast as before.
In the Arduino implementation, WiFiClient, the client used by both the HTTP Client and Server, is a simple Serial interface that prints to you, and you print back to it. It's weird to think of requests like this, but it makes you appreciate how good we have it nowadays, with all of this hidden behind layers of abstraction that we needn't think about.
At least all I had to do was get the request URL like this:
String request = serverClient.readStringUntil('\r');
requestURL = request.substring(5, request.indexOf(" ", 5));
The number of different string implementations in C++ still throws me.
And figure out the mime type we're expected to send back (very professionally):
if (extension == "css") {
mimeType = "text/css";
} else if (extension == "js") {
mimeType = "text/javascript";
} // and so on
How did I use both boards?
The Pi Pico stores all the code for the site and the media, and the ESP32 fetches the data from the Pico and caches it in memory. I chose to use the Pi Pico for the site as it has better UTF-8 support, and the Arduino only lightly touches the HTML to add the serve time and cache status (whether the cache was hit or miss on the ESP32), so I thought that made sense (if any of this does make sense). The ESP32 handles all the web requests.
Digital Garden
It was, however, a great excuse to make use of my digital garden to document the quirks of the ESP32 and the Pi Pico with my specific config.
Code
If you want to gawk at the awful code behind this, you can see it on GitHub: ESP32 C++ and Pi Pico TinyGo.
This is stupid
I agree, but it was fun :)
Other project photos
There's no official case for this product that's easily available, so I modded a takeaway container to support a power cable.
I needed some always-on USB power, so I plugged it into a Raspberry Pi 4 on my 4-Pi Server Rack (which definitely needs a dust).
Thanks for reading, and I hope you have a great rest of your week.
Like what I write? Subscribe to my Mailing List or RSS feed.
Comments? Questions? Feel free to send me an Email.
This post was last edited 6 months, 2 weeks ago.