Flip Board App

A Tauri-based desktop weather board that recreates a split-flap / Vestaboard-style display using HTML, CSS, and JavaScript, with a macOS/Windows/Linux desktop shell.

What this project is

This app started as a browser-based split-flap display prototype and is now being turned into a desktop MVP with Tauri.

Current features:

• Split-flap board animation rendered in the frontend
• Desktop shell via Tauri
• Weather display using Open-Meteo
• Geocoding of a city/location before weather lookup
• Configurable fixed-width board layout using a COLUMNS constant
• Temperature unit swap between Fahrenheit and Celsius every 20 seconds
• Weather refresh on a longer interval
• Selective line updates so only dynamic rows re-flip
• MP3-based flip/clack sound support
• Wind speed display with directional arrows

Current stack

• Tauri for desktop packaging
• Vanilla HTML/CSS/JavaScript for the UI
• GSAP for tile animation timing
• Web Audio + MP3 sample playback for flap sounds
• Open-Meteo for geocoding and forecast data

Project layout

flip-board-app/
├── src/
│   ├── index.html
│   ├── flip.css
│   ├── flip.js
│   ├── flip_sound.js
│   ├── assets/
│   │   └── flip_clack.mp3
│   └── ...
├── src-tauri/
│   ├── tauri.conf.json
│   └── ...
├── package.json
└── README.md

How it works

Frontend display

The app uses a .board container made up of rows (.flip-line) and slots (.flip). Each slot animates through an allowed character set until it reaches the requested character.

Board engine

flip.js provides the board engine:

• createFlipBoard(...)
• addLine(...)
• renderLines(...)
• line alignment support (left, right, center)
• selective line updates through saved line instances

Weather flow

index.html currently:

1. Geocodes a place such as Allen, US
2. Fetches weather data from Open-Meteo
3. Builds a cached weatherState
4. Renders a fixed set of board rows
5. Swaps units every 20 seconds
6. Refreshes actual weather data on a longer timer

Sound flow

flip_sound.js:

• unlocks browser audio on first interaction
• loads src/assets/flip_clack.mp3
• plays click sounds during tile flips
• supports per-step timing so sounds can follow the visual flip duration more closely

Current board content

The weather board currently shows:

• title
• city/state
• current temperature
• feels like
• high / low
• weather condition label
• rain chance
• wind arrow + speed

Dynamic rows are updated independently so the full board does not have to be rebuilt on each unit swap.

Key implementation ideas so far

1. Use one column constant everywhere

A shared constant keeps layout logic consistent:

const COLUMNS = 30

That same value is reused for:

• board width
• text fitting
• line lengths

2. Only re-flip rows that actually change

Instead of clearing and rebuilding the whole board on every update, the app keeps references to specific lines and only updates the dynamic ones.

This makes the board feel more realistic and reduces unnecessary flipping.

3. Swap units without re-fetching weather every time

The app fetches weather in Fahrenheit, then converts locally to Celsius for display.

This means:

• unit swaps can happen every 20 seconds
• the API does not need to be called every 20 seconds
• actual weather refresh can stay on a longer timer like 10 minutes

4. Sound sample support

Instead of a synthesized beep, the project now uses a real MP3 sample:

src/assets/flip_clack.mp3

The current goal is to make each tile flip sound more mechanical and realistic.

Character support

The board only flips through characters included in the allowed character set in flip.js.

That set should include anything the UI needs, such as:

• letters and numbers
• punctuation
• %
• °
• wind arrows: ↑ ↗ → ↘ ↓ ↙ ← ↖
• any simple weather symbols you decide to support

If a character is missing from the allowed set, it may display incorrectly or fall back to blank/unknown behavior.

Important files

src/index.html

Contains:

• app entry page
• current weather rendering logic
• geocoding + weather fetch logic
• unit swap timers
• selective line update logic

src/flip.css

Contains:

• board styling
• slot styling
• scaling wrapper styles
• overall full-window presentation layout

src/flip.js

Contains:

• board engine
• line/slot creation
• animation logic
• alignment behavior
• sound triggering during flips

src/flip_sound.js

Contains:

• audio unlock logic
• MP3 sample loading
• click playback helpers
• burst/per-step timing tuning

Running the app in development

From the project folder:

cd ~/Documents/Projects/flip-board-app
npm install
npm run tauri dev

Building the executable MVP

When ready to package:

cd ~/Documents/Projects/flip-board-app
npm run tauri build

This should produce a desktop build for the current platform.

Git setup

To initialize the project as a Git repo:

git init
git branch -M main

Recommended .gitignore entries:

node_modules/
dist/
src-tauri/target/
target/
.DS_Store
.vscode/
.idea/
*.log
.env
.env.local
.env.*
!.env.example

Current MVP status

This project is already at a working MVP stage.

What works now:

• desktop Tauri shell
• split-flap weather board
• live weather lookup
• unit swapping
• selective line flipping
• MP3-based sound playback

Next recommended improvements

Near-term

• fine-tune flip sound timing to better match visual duration
• improve supported symbol/emoji handling
• make weather condition labels more board-friendly
• polish fullscreen / kiosk mode in tauri.conf.json
• add a simple config for city/location

Medium-term

• support multiple board modes (weather, incidents, clocks, messages)
• rotate through pages/screens
• add startup-at-login support
• add multi-monitor targeting
• add a proper settings screen

Stretch ideas

• sample-based multi-sound library for richer flap audio
• external JSON/config file support
• remote control endpoint
• scheduler for timed messages
• true signage mode

Notes and lessons learned so far

• Scaling the whole board wrapper looks more realistic than enlarging individual tiles.
• Alignment should be handled by the board engine, not by manually stuffing spaces into strings.
• Unit swapping should be display-only most of the time; do not over-query the API.
• A fixed-width board looks best when all truncation and line rendering use the same shared column count.
• Realistic flip sounds are easier to tune when timing variables are centralized at the top of flip_sound.js.

Summary

This project is a working cross-platform desktop MVP for a mechanical flip-board style weather display.

It combines:

• Tauri desktop packaging
• browser-style UI development speed
• GSAP animation
• live weather data
• selective updates
• mechanical click audio

It is already usable as a functional desktop display app and is in a good position for packaging, refinement, and expansion.