DJ Visualizer Pi: standalone Node+WebSocket server with mobile PWA remote

New separate project (the Electron Mac app stays untouched). Reuses the visual engine (WebGL shaders, effect catalog, Web Audio) verbatim and replaces Electron IPC with a Node HTTP+WebSocket server: - server.js: serves the kiosk output page + mobile control PWA, relays the same ctl/rpt JSON protocol over WebSocket, plus REST for media library/upload, JSON state (pads), waveform peaks and MP4 recording (ffmpeg). - public/js/net.js: window.djv shim over WebSocket+HTTP so output.js runs intact. - public/index.html + control.js: touch-first mobile remote (effects, media/queue, ticker, pads, audio/EQ, fullscreen + recording). - PWA (manifest + service worker + generated icons). - scripts/: Chromium kiosk launcher + install-pi.sh (systemd units for Pi 5). Verified: REST endpoints, WebSocket relay both directions, control PWA loads the 2958-effect catalog and renders. (Headless WebGL output not testable without GPU.) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-29 13:06:15 +02:00
commit b94c787231
@@ -0,0 +1,78 @@
+# DJ Visualizer Pi
+
+Versione **standalone** del DJ Visualizer pensata per girare su un **Raspberry Pi 5**
+e farsi comandare da **telefono/tablet** (webapp PWA, iOS + Android, niente store).
+
+Riusa il motore grafico/audio dell'app Mac (shader WebGL2, catalogo effetti, Web Audio):
+cambia solo il "tubo" di comunicazione — l'IPC di Electron è sostituito da un
+**server Node con WebSocket**, e il pannello di controllo è una **webapp mobile**.
+
+## Architettura
+
+```
+            Raspberry Pi 5 (device standalone)
+  ┌───────────────────────────────────────────────┐
+  │  server.js (Node)                              │
+  │   • serve la PWA di controllo  ── HTTP ──> 📱  │
+  │   • relay comandi  ── WebSocket ──>  📱 <─> 🖥  │
+  │   • API: media, stato, peaks, registrazione    │
+  │                                                │
+  │  Chromium kiosk  ──>  output.html (WebGL+audio)│
+  │       └── fullscreen su HDMI ──> proiettore    │
+  │  Audio ──> uscita Pi (HDMI/DAC USB) ──> casse  │
+  └───────────────────────────────────────────────┘
+```
+
+- **Output** (`public/output.html`): gira sul Pi in Chromium kiosk, rende i visual a 60fps
+  e riproduce l'audio dei file sul Pi. Riceve comandi via WebSocket.
+- **Controllo** (`public/index.html`): la webapp che apri dal telefono. Stesso protocollo
+  di messaggi JSON dell'app Mac (`effect`, `playTrack`, `ticker*`, `bandGain`, …).
+
+## Provarlo sul Mac (prima del Pi)
+
+```bash
+cd DjVisualizerPi
+npm install
+node scripts/gen-icons.js      # genera le icone PWA
+npm start
+```
+
+- Output:    <http://localhost:8080/output.html>  (clicca una volta per fullscreen/audio)
+- Controllo: <http://localhost:8080/>  (aprilo anche dal telefono sulla stessa rete)
+
+Metti qualche brano nella cartella `media/` (o caricalo dall'app, tab **Media**).
+
+## Installazione sul Raspberry Pi 5
+
+Pi OS Bookworm (64-bit). Copia la cartella sul Pi e:
+
+```bash
+bash scripts/install-pi.sh
+```
+
+Installa node/ffmpeg/chromium/cage, crea due servizi systemd
+(`djvisualizer-server` + `djvisualizer-kiosk`) e li avvia. Al boot il Pi mostra
+i visual a tutto schermo; dal telefono apri `http://<ip-del-pi>:8080/`.
+
+I brani vanno in `media/` (chiavetta USB, condivisione di rete, o upload dall'app).
+
+### Rete
+- **Hotspot del Pi** (consigliato da palco): configura il Pi come access point
+  (NetworkManager: `nmcli device wifi hotspot`), poi il telefono si collega alla
+  rete del Pi e apre l'indirizzo.
+- **WiFi del locale**: il Pi e il telefono sulla stessa rete; usa l'IP del Pi.
+
+## Funzioni del telecomando
+- **🌀 Effetti**: libreria completa (famiglie + ricerca) + sagome SVG.
+- **🎵 Media**: libreria sul dispositivo, upload, coda con play/seek/prev/next.
+- **🔤 Testo**: ticker con direzione, posizione, effetto, grandezza, velocità, colore.
+- **🎹 Pad**: griglia 3×4 (tieni premuto per assegnare un brano).
+- **🎚 Audio**: reattività, velocità, EQ visual (bassi/medi/alti) + meter live.
+- **🖥 Out**: fullscreen output + registrazione MP4 (16:9, 9:16, 1:1, 4:3).
+
+## Da fare (port successivo dall'app Mac)
+- Scene a tempo per brano (effetto/testo/immagine con timing indipendente).
+- Trim inizio/fine + waveform per traccia nella coda.
+- Intermezzi e pause tra i brani.
+
+> L'app Mac (Electron) resta un progetto separato e invariato.