PiPiece UI

The ui/ project is the Vue 3 + Vite touchscreen frontend for PiPiece. It is designed for the HyperPixel4 (800x480) display and provides camera control, preview, timelapse, photo browsing, and system management views.

Tech Stack

• Vue 3
• Vue Router
• Vite
• Vitest (unit tests)
• Playwright (e2e screenshots/tests)

Project Setup

cd ui
npm install

Common Commands

# Local Vite dev server
npm run dev

# Production build (outputs to ui/dist)
npm run build

# Unit tests
npm run test:unit

# Browser-mode component tests
npm run test:browser

# Storybook tests
npm run test:storybook

# E2E tests
npm run test:e2e

# Lint
npm run lint

Development Workflow With Raspberry Pi Sync

For day-to-day development, use a two-step workflow:

1. Rebuild ui/dist automatically when source files change.
2. Run sync.sh at the repository root so rebuilt files are copied to the Pi.

1) Watch Source Files and Rebuild With Nodemon

From ui/, run:

./node_modules/.bin/nodemon -w ./src -w ./public --exec "npm run build" -e js,vue,md

This watches:

• src/ for Vue and JS changes
• public/ for static asset and docs changes
• *.md updates used by the UI docs viewer

When a matching file changes, npm run build runs and refreshes the ui/dist output.

2) Keep the Pi Updated With sync.sh

From the repository root (pipiece/), run:

./sync.sh

sync.sh continuously syncs local project changes (including updated ui/dist build files) to your Raspberry Pi. Combined with the nodemon watcher above, this creates a build-and-sync loop where the latest UI bundle is automatically rebuilt and copied to the Pi.

Suggested Terminal Layout

Use two terminals while iterating on the UI:

1. Terminal A (pipiece/): ./sync.sh
2. Terminal B (pipiece/ui): nodemon -w ./src -w ./public --exec "npm run build" -e js,vue,md

This keeps deployment friction low while testing on actual Pi hardware.