🖼️ Framed Utopia

Framed Utopia is an art prototype that displays bright glimpses of impossible happiness on a 64x64 LED matrix display. In a world often dominated by negative news, this digital picture frame offers a moment of respite through playful, uplifting messages about imaginary utopias.

Utopias as an Anchor in an Increasingly Dystopian World

Much like my previous project, Das Buch, this art endeavor serves as a commentary on a society that, in light of political, social, and environmental upheavals, finds it ever more challenging to maintain a positive outlook on the future. Many young people — coming of age in a world where climate change appears unstoppable and societal divides run deep — feel resignation or even powerlessness in the face of seemingly insurmountable obstacles. Every glance at the news is overshadowed by dystopian developments. We are missing the guiding light of utopias that, like a lighthouse, can point us toward a more hopeful horizon.

I am myself the father of a teenager, an age when the playful, childlike perspective on life collides with the stark realities of adulthood. The confident proclamation “I want to be an astronaut and explore the galaxy!” all too easily fades into “I have no idea what I’m going to do.”

Framed Utopia offers a childlike, creative, and optimistic lens on the world and our shared future. It aims to spark small moments of joy through absurd and delightful possibilities. This is not about turning a blind eye to reality; rather, it’s about remembering that imagination and whimsy have a rightful place in making each day a little brighter.

Coffee plantations on every balcony

How It Works

An ESP32 microcontroller is used to query an API once an hour, retrieving a new “utopia” in the form of a text string. This text is then displayed on a 64×64 dot matrix screen in random colors. To create the impression of an everyday item, the display is mounted in a wooden picture frame and powered by a high-capacity power bank. To conserve energy, both the display and the ESP32 enter sleep mode overnight.

Hardware

The setup includes a 64×64 dot matrix display, an ESP32 microcontroller, and a 20,000mAh power bank.

I 3D printed some kickstands and spacers to tightly fit the display in the picture frame and let it stand at a slight angle on the book shelf.

I soldered the display cables to a little perfboard.

On the top side of the board I soldered the pin headers for the micro controller.

The ESP32 fits in nicely. With this approach, I can easily replace the controller when its broken, which happens more often than it should.

Power for the display is provided by the microcontroller’s 5V pin. Looking at the photo, I realized I hadn’t connected the ground. Naturally, I fixed that oversight—though I don’t have a picture to prove it, I swear!

Running some example code from the Arduino Gfx library to test if the connections are correct and the display works. Took me some trial and error, as the documentation wasn’t exactly straight forward.

Bill Of Materials

As with many of my projects, this one was born out of a desire to experiment with intriguing hardware — in this case, the dot matrix display. I had three of them in my lab, waiting for a purpose. The wooden frame was an ideal match, offering a more domestic, less technological look. Everything else was just miscellaneous equipment I already had on hand.

Software

I can’t emphasize enough how remarkable Large Language Models (LLMs) are for rapid prototyping. You may prefer to write your own code when you want a project that’s fully reliable and understandable to other developers. However, for creative, exploratory projects, having AI assist in the process is incredibly liberating. It significantly speeds up the journey from idea to implementation and spares you hours of trawling the internet for solutions or debugging.

If you’re intrigued by projects like this but hesitate because you think you need stronger development skills, I highly recommend trying out chat models like GPT-4o or Claude 3.5. You’ll be amazed at how much you can achieve with them.

That said, most of the code for this project was generated by AI, and I added refinements for smaller details that can be tricky to explain to a language model — like fine-tuning text sizes and colors for aesthetic appeal. You can find the Arduino code, along with some setup instructions, on my GitHub page: esp32-dotmatrix-utopia.

Here’s a high-level overview of the program (summarized—yes, again—by a Large Language Model, which is pretty fantastic):

• The program controls an LED matrix display that shows text messages which are fetched from a server. When it starts up, it displays “utopia” as an initial message.

• Upon startup, it attempts to connect to WiFi and synchronize its time with an internet time server. If either of these fails, it shows an error message and restarts.

• The display only operates during “active hours” (7 AM to 10 PM). Outside these hours, it goes into a power-saving sleep mode and wakes up periodically to check if it’s time to become active again.

• During active hours, the program fetches a new message from a server once every hour. Each new message is displayed in a randomly selected color.

• If a message is too long to fit on one line, the program automatically splits it into multiple lines, with longer words getting more vertical space.

• The display has a brightness setting and will completely turn off when entering sleep mode to save power.

• If there are any errors (like WiFi connection issues or problems fetching messages), the program displays error messages in red to help with troubleshooting.

• Every time the display updates with a new message, it logs information to a serial console for debugging purposes.

Cats as flying companions - an earlier iteration of the project without the picture frame.

Generating the messages

When I first developed this project, I didn’t have a local LLM running on my machine, so I used ChatGPT to generate the messages. Since the ChatGPT API has a small cost (though still quite affordable), I decided to generate all messages in one go. It required some careful prompt tuning to get the messages exactly right: they had to be funny, positive, creative, short enough to fit on the dot matrix, and include proper hyphenation for longer words, especially important for German, where words can be very long. For instance, consider the actual German word: Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz (“Beef Labeling Regulation Supervision Task Transfer Act”). Yes, we Germans are extremely efficient, even if it hurts. ChatGPT added the required hyphenation when prompted, saving me a great deal of manual work. Finally, since the text display library doesn’t handle umlauts (ä, ö, ü, ß, etc.) very well, I had to convert them. The end result was an array of several hundred messages.

const utopias = [
    "Ewiger Sommer, niemals zu heiss",
    "Laechelnde Baeume, sprechende Blumen",
    "Kaffee regnet in der Frueh",
    "Zeitreisen fuer alle",
    "Katzen verstehen Menschen",
    "Instant- Heilung durch Umarmungen",
    "Pizza ist gesund",
    "Fliegen ohne Flugzeug",
    "Welt- frieden, garantiert",
    "Hologramm- Haustiere",
    "Null Verkehrs- staus",
    "Gedanken teilen per Blick",
    "Roboter erledigen Hausarbeit",
    "Laecheln verlaengert das Leben",
    "Jeder ist Kuenstler",
    "All- wissende Biblio- theken fuer alle",
    ...

Node.JS API endpoint

Although I could have embedded these messages directly into the Arduino code and chosen one at random, I decided to set up an API endpoint on my Raspberry Pi instead. This approach introduces a bit more complexity, but it lets me tweak the message list on the fly without having to remove the frame from the shelf to reflash the code.

When the Raspberry Pi API is called with the right endpoint, it returns a random preformatted message as JSON:

http://192.168.178.107:1337/utopia

{
    "msg": "Wasser- rutschen im Buero"
}

With the hardware assembled and the ESP32 frontend and the Raspberry PI backend up and running, the prototype is finished:

Water slides in the office

A Note on Power Consumption

A fully charged 20,000mAh power bank can power the ESP32 and dot matrix display for roughly a week, with the display consuming the lion’s share of energy. While sleep mode at night helps, it would still require periodic recharging or swapping of the power bank. On top of that, I wasn’t too thrilled about the constant energy draw.

My solution (which I also use for various household appliances) is to connect the power bank to a smart plug that’s controlled by Home Assistant. I created an automation that only switches on the smart plug once our home’s solar battery is sufficiently charged. This gives us “free” energy from the sun. The smart plug charges the power bank, which in turn supplies power to the display.

Final Thoughts

Framed Utopia turned out quite nicely. It often draws a smile from my family and sometimes prompts a brief conversation about the displayed message. That said, it’s not perfect: an unreliable Wi-Fi connection can lead to timeouts, restarts, or error messages.

If I were to iterate further, I’d either switch to an endpoint that generates messages on-the-fly using a locally hosted LLM, or simply bundle all messages into the ESP32 code, which would eliminate the need for Wi-Fi entirely. Instead of querying the time every hour, I could just power up the display in the morning and let it sleep for extended periods afterward.

Thank you for reading!

Boundless creativity for everyone