Self-hosted design editor & live display for custom wall clocks and dashboards
Build your own clock for the wall — as unique as you want it.
Fully local · No account · No cloud · Live WebSocket sync
WallUI Lab is a self-hosted designer for wall / screen clocks and info displays.
You build a design in the browser out of layers ("gadgets") — dial, hands, numbers, text, images, weather, mechanical gears, backgrounds — and then run that design full-screen on any device in the same network (an old tablet, a monitor on the wall, etc.).
Everything runs locally on your own computer. Only optional weather data comes from the internet; the app itself works offline. When you save a design in the editor, an open full-screen clock updates live via WebSocket.
→ See INSTALLATION.md for setup.
UI Demo
Watch the demo video
Example Designs
| White Elegance | Quarz | Pendel | Minimal Analog |
|---|---|---|---|
 |
 |
 |
 |
| Black & White | Fancy | Lume | Grit |
|---|---|---|---|
 |
 |
 |
 |
| Demo 2 | Demo | Coba | Clear |
|---|---|---|---|
 |
 |
 |
 |
A design is a stack of layers. Add the ones you need and arrange them freely.
| Gadget | Description |
|---|---|
| Clock face | Hour / minute / second hands, tick marks, numbers, progress rings. Hands can be drawn or use an image, support shapes & holes, custom center caps, and extra "custom hands" with any period (weekdays, 24h, milliseconds…). Presets + SVG export included. |
| Sky | Time-of-day sky with shifting gradient, sun, moon (correct phases), stars, clouds and rain. Two cloud engines: simple sprites or volumetric (WebGL). Sun/moon from API or computed locally. |
| Text | Static text, time, date or API value. Full font, color, gradient & effect control. Optional prefix/suffix with own styling. Value-driven color scale. |
| Image | Uploaded images with fit modes and optional day/night grading based on time and weather. |
| Gauge | Object-based system: donuts, tick rings, bars, needles, texts and images — each with its own data source and full styling. |
| Gear | Mechanical gears that can be linked into gear trains. Looks savable as presets. |
| Escapement | Escapement with pendulum for a mechanical-watch feel. |
| Flip display | Split-flap / roller display (like old station boards) for time, date, text or API values. |
| Weather icon | Icons driven by weather codes. Editable code-to-icon tables. Ships with Open-Meteo (WMO) preset + day/night variants. |
| Shape | Vector shapes with gradients, patterns and boolean operations (union, subtract, intersect). |
| Background | Full-layer fill: solid color, gradient, pattern or image. |
Groups of layers can be saved as reusable gadgets and organized into folders.
| Area | Function |
|---|---|
| Layers panel (left) | All layers of the current design. Drag-and-drop order, folders, show/hide, lock, duplicate, group. Access to the saved-gadget library. |
| Canvas (center) | Live preview at real pixel size with zoom/pan. Simulation area to scrub through time, weather and date. |
| Properties (right) | All settings of the selected layer (type tab + Design & Layout popups). |
| Toolbar (top) | Switch designs, rename, set screen size, undo/redo, API settings, weather-icon tables, playlist, performance check, SVG vectorizer, language, connection LED. |
| Mobile remote | On a phone the app shows a simple remote to switch the active design on the wall clock. |
The UI is available in German and English.
- Any resolution — Coordinate-based designs that scale to any screen. Presets for portrait / landscape / square + free custom size.
- API binding — Register any JSON API. Server-side fetching (keys stay private, CORS solved). Click the JSON path you want — live value preview included.
- Weather engine — Sun position, moon phase, clouds and rain driven by API or computed locally. Volumetric clouds run on the GPU with quality controls.
- Gear engine — Build mechanical gear trains that mesh and turn at the correct ratios.
- SVG converter — Upload an image and convert it into editable vector shapes.
- Weather-icon tables — Map any API’s weather codes to icons (with day/night variants).
- Performance index — Built-in check that scores how heavy a design is to render.
- Playlist — Automatically rotate designs by interval, sunrise/sunset or schedule (with cross-fade).
- Reusable presets — Save and reuse hands, gears, weather-icon tables and whole gadgets.
- Fully local — No cloud, no account, no telemetry. Only the weather APIs you bind reach the internet.
git clone https://github.com/macrulz54/walluilab.git
cd walluilab
npm install
cd client
npm install
npm run build
cd ..
npm start
This is a personal hobby project, shared as-is. Use it in a trusted local network. Bugs and rough edges are to be expected, and I may not be able to fix or extend things quickly. If it is useful to you - enjoy it.
Copyright (C) 2026 macrulz54 Licensed under the GNU Affero General Public License v3.0 (AGPLv3)