Dashboard

A touch dashboard built around a Raspberry Pi 3

Dashboard is a web-based home dashboard running on a Raspberry Pi 3 with an 800 × 480 touch display. It brings together the information and controls I use at home in one simple interface.

The dashboard shows the time, weather, nearby aircraft, security cameras and xkcd comics. It can also control internet radio and WLED lighting without switching between different apps.

The application runs locally on the Raspberry Pi and opens automatically in Chromium’s kiosk mode when the system starts.

Designed for a small touch display

The interface is built specifically for an 800 × 480 screen. Instead of using a responsive desktop layout and shrinking it down, each view is designed around the available screen space.

Buttons and other controls are large enough to use comfortably with a finger. Lists support touch scrolling, frequently used options are easy to reach, and the layout remains consistent between the different parts of the dashboard.

On larger screens, the complete 800 × 480 interface is scaled while keeping its original proportions. This makes development and testing on a regular computer easier without changing the layout used on the Raspberry Pi.

The visual style uses a warm, off-white background with dark controls and clear typography. Space Grotesk is used for the clock, while DM Sans is used for labels and other text.

Main features

Clock and calendar

The main view shows a live clock, the current date in Swedish and today’s Swedish name day. Seconds can be shown or hidden in the settings.

Weather

Current weather and a three-day forecast for Kinna are retrieved from Open-Meteo. The information is presented in a compact format that is easy to read from a distance.

Nearby aircraft

Aircraft in the area are displayed on an interactive Leaflet map. Live flight data is retrieved from adsb.lol.

Security cameras

Four Reolink camera snapshots are shown in a 2 × 2 grid. The images are fetched directly from cameras on the local network.

xkcd comics

The dashboard displays the latest xkcd comic and includes controls for browsing older comics.

Internet radio

Radio stations can be selected and controlled from the touch display. The interface includes play, pause and volume controls.

Audio playback is handled by a separate Python and mpv-based server at audio.<private network>.se. Keeping audio playback separate from the dashboard means the music can continue even if the web interface is reloaded.

WLED lighting

WLED devices on the local network can be controlled directly from the dashboard. Each device has controls for:

  • Power
  • Brightness
  • Colour
  • Presets and scenes
  • Effects

The dashboard communicates with each WLED device through its HTTP JSON API.

Night mode

At night, the normal interface can be replaced by a simple red clock on a dark background. Night mode can be started manually or enabled automatically according to a schedule.

Touching the screen wakes the dashboard and returns it to the normal view.

Automatic screen management

The dashboard includes a few automatic behaviours to keep it useful without requiring regular maintenance.

After 30 seconds without interaction, the display is dimmed. After ten minutes, the interface returns to the clock view. The page is also refreshed automatically at 02:00 each night to recover from possible browser or network problems.

Settings such as the night-mode schedule, highlighted names, configured WLED devices and audio state are saved and restored after a restart.

How it works

Dashboard is built with TanStack Start and React 19. The application is rendered on the Raspberry Pi and then becomes an interactive client-side application in the browser.

Server functions handle data fetching, configuration and persistent storage. Settings are stored locally in JSON files, so the dashboard does not require an external database.

The main technologies used are:

  • React 19
  • TanStack Start
  • TanStack Router
  • TanStack Query
  • Node.js
  • Leaflet
  • Chromium
  • Python and mpv for audio playback

The original web interface was created with help from Lovable and was then adapted for local hosting and use on the Raspberry Pi.

Running on Raspberry Pi

The application is built for Node.js and runs locally on a Raspberry Pi 3. A systemd service starts the server automatically and restarts it if the process stops.

A deployment script can pull the latest version from GitHub, build the application and restart the service. This makes it possible to update the dashboard remotely without manually copying files to the Raspberry Pi.

Chromium starts automatically with options such as:

  • --kiosk
  • --app
  • --noerrdialogs
  • --disable-infobars

The Raspberry Pi screensaver and display power management are disabled so the dashboard remains visible throughout the day.

Project structure

The system is split into three main parts:

  1. The Raspberry Pi dashboard
    Runs the TanStack Start application, stores settings and serves the web interface.
  2. The Chromium kiosk
    Displays the interface in fullscreen mode and handles touch input.
  3. The audio server
    Runs Python and mpv, manages radio playback and reports the current playback state to the dashboard.

This separation keeps the dashboard interface simple while allowing audio playback and other services to continue independently.

The result

Dashboard turns a Raspberry Pi 3 and a small touch display into a practical control panel for the home. It collects several everyday functions in one place while remaining fully local, easy to update and simple to operate.