128 lines
3.2 KiB
Markdown
128 lines
3.2 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
cd backend
|
|
python3 -m venv venv
|
|
source venv/bin/activate
|
|
pip install -r requirements.txt
|
|
```
|
|
|
|
### Frontend
|
|
|
|
```bash
|
|
cd frontend
|
|
npm install
|
|
```
|
|
|
|
## Running
|
|
|
|
### Development Mode
|
|
|
|
Start both backend and frontend:
|
|
|
|
```bash
|
|
# 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:
|
|
|
|
```bash
|
|
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:
|
|
|
|
```bash
|
|
./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
|
|
```
|