Turning iPhone Widgets Into Something Real

Turning iPhone-style widgets into a real, physical info screen.

November 2, 2024 • project

I came across this tweet showing an AI-generated concept: iPhone widgets turned into live wall decorations. Just a visual mockup, nothing real. But I thought the idea was too cool to stay imaginary — so I decided to build it myself. Here’s how I brought those widgets to life, off the screen and onto my desk.

The Hardware

To bring this little info screen to life, I needed just a few essential components:

  • A screen (obviously)
  • A tiny computer with internet access
The components I used
The components I used

The Screen

For the display, I went with the Pimoroni HyperPixel 4.0 Square — and honestly, it’s the perfect fit. Its square shape matches the iPhone widget aesthetic beautifully, and with a 720x720 resolution (~254 PPI), everything looks crisp and clean. The 4-inch size makes it great for sitting on a desk or blending into a shelf.

I also chose the touch version, just in case I wanted to add some interactivity later. Who knows — maybe I’ll be swiping weather updates from my wall someday.

The Brains

Powering this setup is a Raspberry Pi Zero 2 W — a tiny yet mighty computer that fits right behind the screen. It’s capable of running a web browser smoothly enough to display simple animations and modern UIs. Plus, it sips power at just over 1W, so I can run it all day without guilt (or a higher electricity bill).

I installed Raspberry Pi OS Lite on it and set it up in headless mode (no monitor, no keyboard, no mouse — just SSH). Skipping the desktop environment also saves precious resources for what's really important: clean widget rendering.

The Case

To hold it all together, I 3D printed this case. It’s compact, easy to print, and gets the job done. There are fancier cases out there, but I wanted to keep it simple — at least for version 1. If I upgrade the design later, I’ll make room for even more bells and whistles (or at least better cable management).

The Software

Since I’m a web developer, I naturally went with what I know best: web technologies. To power the baby software for this little screen, I built a simple web app using HTML, CSS (with animations, of course), and React for fetching data from APIs.

The app runs in fullscreen in a browser — basically, it’s like a mini kiosk. If you’re curious how I got that set up, check out my guide on using Raspberry Pi’s kiosk mode.

Widgets, Widgets Everywhere

I had way too many ideas for what I could display:

  • A weather widget
  • A now playing widget
  • A classic clock
  • And basically any other useful iOS widget I’ve ever wished was a physical object
prototyping interface
Prototyping the weather widget interface.

But how to switch between them? I had no buttons — just the touchscreen.

That’s when I remembered something: the iPod Nano 6th gen. Apple’s tiny square iPod with a touchscreen and no home button. It used a simple gesture-based UI that worked surprisingly well. Sounds familiar?

iPod Nano 6th gen user interface
iPod Nano's user interface

So, I stole the idea (lovingly) and recreated that navigation system for my widget screen.

Boom!

user interface
The modernized "homescreen"

I took the opportunity to to give it a modern iOS-style look.

Here are the different widgets I created:

1. The Clock widget

classic clock modern clock
The classic clock and the modern one.

The clock widget comes in two flavors: classic and modern. Both are inspired by Apple’s Clock widget on iOS/macOS, and there's even a red night mode similar to the soft ambient glow of the Apple Watch Ultra. And yes — the source code is on my GitHub.

The modern version can also display weather or music info.

2. The Weather widget

weather widget

This one’s a tribute to Apple’s weather forecast widget — clean, simple, and informative. It pulls data from the Open Weather API, using my current location to show the forecast. The color even adapts based on the current weather, so it never feels out of place.

3. The Now Playing widget

This one was inspired by Mark Hank's project.

music user interface music user interface
Album art with a blurred background from the album’s colors

The now playing widget shows the album art of whatever’s playing at home. I use a mix of Sonos and HomePods via AirPlay — but sadly, Apple doesn’t provide a public AirPlay API, so I had to get creative.

I ended up using the unofficial Sonos HTTP API bridge to get song data from my Sonos speakers: track name, artist, album art — the whole deal.

Whenever music starts playing, the widget appears automatically. It’s a nice touch.

ℹ️

There’s also this alternative using the Apple MusicKit JS API. But it only shows the last played song, isn’t tied to a room or device, and requires a paid Apple Developer account — which I don’t have at the moment.

The API provides endpoints to add music playback controls which I could add in a future update.

4. Coming Soon: Train Widget

I'm also working on a widget to show upcoming train departures from the nearest station, using the Île-de-France Mobilité API — the public transport authority of my region in France. Super handy if you live in the Paris region — stay tuned!

The result

Here is the result in my living room. It can display specific widgets based on the hour of the day.

On a shelf.

Acknowledgements

Links

Published on