I have a raspberry pi 5 in one of the original touch screen v1 official 7 inch display case. It is always on my desk but is normally powered down.
As part of a bigger project I am working on, I wanted to turn into a web-based digital signage device - something that would show a single web page in kiosk mode and re-display the page after a reboot. To test the idea, I wanted to turn the device into a simple desk clock. Simple enough? Well actually....
The first issue I had was getting the device to reliably and automatically show a single web page. When I started the device was running the Raspberry Pi port of Ubuntu 24, but with Gnome running the display and XFCE and XRDP also installed to enable a different remote desktop. Getting a kiosk mode browser running with this setup proved to be challenging enough that I decided on a do over and reinstalled the device.
Initially I tried to get Ubuntu Core running. Ubuntu Core is specifically designed for IOT devices like digital signs and has a Raspberry Pi port. It should be the right choice for this sort of setup, but unfortunately I could not get the display screen to work. For some reason the DSI screen device wasn't being activated, no matter how much I fiddled with the boot config.
In the end I abandoned that approach and fell back to reinstalling the current 64-bit version of the Raspberry Pi Desktop os (which is based on Debian Bookworm). Getting the kiosk mode to work with the display screen with this setup was much easier.
Raspbian OS (Bookworm) Kiosk Mode Browser
The key details how to set this up are in this forum post: https://forums.raspberrypi.com/viewtopic.php?t=379321
The summary is:
- Enable ssh and login
- edit this file:
/etc/xdg/labwc/autostart
- add something like this line:
/usr/bin/lwrespawn chromium-browser --app=https://<YOUR URL> --kiosk --noerrdialogs ---disable-infobars --no-first-run --ozone-platform=wayland --start-maximized --no-restore-on-startup
- save and reboot
This configures the desktop environment to autostart chromium in kiosk mode and display the configured web page
Online Clock Digital Signage
With the kiosk mode working, the next step was to find a decent clock web page and call it a day, but this proved to be challenging. Despite searching pages of results, I wasn't able to find a clock app that met these criteria:
- minimalist,
- ad-free
- customizable fonts and colors
- persistent settings
In the end I got so frustrated with the lack of suitable options that I decided to build and deploy my own.
Vibe Coding With Claude Console
I didn't want to spend days building a clock app, so I decided to use Claude Console and vibe code it. In my opinion this is a perfect use case for AI assistant coding - it is a single layer, simple app that is UX centric and has no likelihood of scalability, security or data integrity issues. I like Claude Console for a couple of reasons
1) It is a pre-pay model. You pay as you go instead of having to maintain a subscription
2) The agent is bound to the console and leaves your IDE alone. You can take it or leave it any stage.
After an hour or so of iterating with Claude (and around 5 bucks in tokens) I had a an app that met all of my requirements. I was even able to add a bit of sci-fi flair by including glow effects and my favourite sci-fi fonts (Orbitron and Michroma)
Deployment
I typically use CloudFlare Pages for simple static web hosting, because it gives you a one stop shop for registering a host name and deploying a CI build from GitHub. This part of the project also went smoothly, and I was able to quickly get the site registered and deployed.
Due partially to my frustration with finding an alternative, and partially to Guinness Draught, the finished product is deployed at this host name:
After a little configuration, I am pretty happy with the look on the raspberry pi desktop:
