OPLabs Mixer App

A standalone mixer application that connects to PiPedal (at 192.168.0.245:8080) via WebSocket to discover and display OPLabsBandChannel and OPLabsBandBus LV2 plugin instances loaded on the pedalboard.

Architecture

Browser (React SPA)  ←→  FastAPI Backend (localhost:8081)  ←→  PiPedal (192.168.0.245:8080)
        │                        │
        └── WS /ws/pipedal       └── WS /pipedal (upstream)
        └── REST /api/discover   └── REST proxied via WS

• Backend: FastAPI on port 8081 — serves the SPA, proxies WebSocket connections to PiPedal, and provides a REST API for plugin discovery.
• Frontend: Vite + React + TypeScript — connects to the local WS proxy and shows discovered OPLabs plugin instances with their parameter values.

Prerequisites

• Python 3.10+
• Node.js 18+
• PiPedal running at 192.168.0.245:8080 with OPLabs plugin instances loaded on the pedalboard

Setup

Backend

cd backend
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt

Frontend

cd frontend
npm install

Running

Development Mode

Start both backend and frontend:

# Terminal 1: Backend
cd backend
source venv/bin/activate
python app.py          # runs on port 8081

# Terminal 2: Frontend (with hot-reload)
cd frontend
npm run dev            # runs on port 5173, proxies API/WS to 8081

Then open http://localhost:5173 in your browser.

Production Mode

Build the frontend and serve from the backend:

cd frontend
npm run build

# Then start the backend (it will serve the built SPA):
cd ../backend
source venv/bin/activate
python app.py

# Open http://localhost:8081

Or use the convenience script:

./start.sh

WebSocket Protocol

The app uses PiPedal's native WebSocket protocol:

• Messages are JSON arrays: [{"message": "msgName", "replyTo": N}, optionalBody]
• Replies: [{"reply": N, "message": "msgName"}, optionalBody]
• The browser connects to ws://localhost:8081/ws/pipedal, which proxies to PiPedal's ws://192.168.0.245:8080/pipedal

REST API

Endpoint	Method	Description
/api/ping	GET	Health check + connection status
/api/discover	GET	Discover OPLabs plugin instances from current pedalboard
/api/plugins	GET	List all available plugins from PiPedal

OPLabs Plugin URIs

• OPLabsBandChannel: http://ourpad.casa/plugins/oplabs-band-channel
• OPLabsBandBus: http://ourpad.casa/plugins/oplabs-band-bus#

Project Structure

~/projects/oplabs-mixer-app/
├── backend/
│   ├── app.py              # FastAPI app (routes, SPA serving, WS proxy)
│   ├── ws_proxy.py         # PiPedal WebSocket proxy client
│   └── requirements.txt
├── frontend/
│   ├── package.json
│   ├── vite.config.ts
│   ├── tsconfig.json
│   ├── index.html
│   └── src/
│       ├── main.tsx
│       ├── App.tsx
│       ├── App.css
│       ├── hooks/
│       │   └── usePiPedalWS.ts
│       └── components/
│           ├── ConnectionStatus.tsx
│           └── PluginList.tsx
├── README.md
└── start.sh