Sometimes, when I’m glued to my computer at my desk, I need to know the time. Of course, I could glance at the bottom corners of my monitors (Windows 11) to get the info, but more often than not, I have so much stuff piled on my desk that I can’t even see the bottom of the screens. Plus, when I’m gaming or watching videos, I absolutely don’t want to be looking at the clock! It breaks the immersion! So, I needed a dedicated, always-visible clock. Enter: the little gadget.
That’s where this little device comes in. It’s a Vobot Mini Dock, and I’ve been hacking on it to display Spotify information. I’ve been wanting to do this for a while, and it’s been a fun project.
It all started when I saw the Spotify Car Thing (RIP, that thing was cool) and thought, “Hey, I could do something like that, but smaller and for my desk!” It was supposed to be a fun little side project, something I could tinker with in my spare time. Little did I know…
Obviously, I couldn’t expect it to be as powerful or feature-rich as the Car Thing. It’s based on the ESP32S3, which is a tiny microcontroller with 512 KB of RAM and a 240 MHz CPU (for comparison, a Samsung Galaxy S25 has 12 GB of RAM and a processor that can reach 4.47 GHz). It also has a tiny LCD screen, 240x320 pixels. So, yeah, it’s very basic. But I figured, “Surely, displaying the time and a song title won’t require that much power, right?”
My initial goal was simple: get the Vobot to display the currently playing song, the artist, and, ideally, the album art. I searched the Vobot app store for something similar, but the selection was pretty limited, so I decided to roll my own.
The Problem(s)
The first hurdle was figuring out what programming language the Vobot used. I assumed it would be C++ or something similar. Nope! It uses MicroPython for the core logic and LVGL for the graphical user interface. I have some experience with Python, which was a good thing, but I’d never even heard of LVGL. So, I had to dive into the documentation and learn how to create buttons, labels, and images.
The LVGL documentation for C is pretty comprehensive, but the documentation for MicroPython felt a bit… lacking. I spent a lot of time just trying to get a basic “Hello, World!” app running. Plus, LVGL is a bit finicky.
I also had a few pre-existing projects that I could draw inspiration from. Thanks to @itandy848 and their HK Weather project, and the Vobot community itself, I managed to piece together a working solution.
One more thing: the official Vobot documentation for application development is pretty sparse. If they hadn’t open-sourced the code for some of their built-in apps, I probably wouldn’t have been able to figure out how to get started.
Alright, with all the pieces (or at least most of them) in place, I finally started writing the code.
Here’s the basic idea:
- Authentication: The Vobot needs to authenticate with Spotify to access user data.
- Song Information: I need to retrieve the currently playing song’s title, artist, and album art from Spotify’s API.
- Display: I need to display that information on the Vobot’s tiny screen.
- Real-time Updates: The clock needs to update regularly to keep the information current.
Things didn’t go exactly as planned. It turns out there were a few unexpected challenges.
The Images
As you can see, the first version had a problem with the album art. It was… cropped. It took me a while to figure out why. LVGL, especially on resource-constrained microcontrollers like the ESP32, is really sensitive to image processing. Resizing images on the fly is expensive.
So, I thought, “Maybe I can just ask Spotify for a smaller image!” Unfortunately, Spotify provides three image sizes: 64x64, 300x300, and 640x640. None of those were ideal for the Vobot’s screen. I ended up having to experiment with different resizing algorithms to find one that looked reasonably good without completely bogging down the device.
The Requests
Each time the clock needed to update (roughly every 3 seconds), it had to make a request to Spotify’s servers. Those requests took a few milliseconds, which isn’t terrible, but it added up. Also, the responses from Spotify were surprisingly large—often tens or even hundreds of kilobytes. That’s a lot of data for a tiny device with limited memory.
Another thing: I wanted the background of the screen to be the dominant color from the album art, just like Spotify does in its apps. That seemed like a nice touch. But even that required some extra processing power.
It quickly became clear that trying to cram all that logic onto the Vobot was going to result in a pretty mediocre user experience. The clock would be slow, the memory would fill up quickly, and the update lag would be noticeable. Not to mention my code was far from optimized.
Client and Server
So, I decided to offload some of the work to a more powerful machine. I set up a Python server on a virtual machine running on my main computer. This server handles image resizing, makes the requests to Spotify, and prepares the data for the Vobot.
The advantages were clear:
- Faster Processing: Image resizing and API requests are much faster on a server.
- Reduced Memory Usage: The Vobot only receives the data it absolutely needs.
- More Reliable: The server can handle errors and retries more gracefully.
- Easier Development: Python is a more flexible language for this kind of task.
Finally, I got everything working! The “play/pause” indicator shows whether something is currently playing, the progress bar moves smoothly, the song title and artist labels scroll if they’re too long, and the background color dynamically changes to match the album art.
As for how I managed to get the background color to match the album art? Well, I wrote a whole separate post about that. Check it out here.
The source code for both the Vobot application and the server is available on this GitHub gist.