lucianoandClaude Opus 4.8
b94c787231
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>
3.5 KiB
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)
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 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.