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>
This commit is contained in:
lucianoandClaude Opus 4.8 committed
commit
b94c787231
81 files changed
+23994
No files matched your search
@@ -0,0 +1,91 @@
|
||||
:root { --bg:#0b0b14; --panel:#15151f; --line:rgba(255,255,255,.10); --accent:#7aa2ff; --txt:#e8e8f0; }
|
||||
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
|
||||
html, body { margin: 0; height: 100%; }
|
||||
body {
|
||||
background: var(--bg); color: var(--txt);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Helvetica, Arial, sans-serif;
|
||||
display: flex; flex-direction: column;
|
||||
padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
#bar {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 12px 14px; border-bottom: 1px solid var(--line);
|
||||
font-size: 15px; position: sticky; top: 0; background: var(--bg); z-index: 5;
|
||||
}
|
||||
#bar #now { margin-left: auto; opacity: .7; font-size: 12px; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
#conn { font-size: 10px; padding: 2px 7px; border-radius: 10px; }
|
||||
#conn.on { background: rgba(110,231,160,.18); color: #8ef0b0; }
|
||||
#conn.off { background: rgba(255,138,138,.18); color: #ff9a9a; }
|
||||
|
||||
main { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 12px 90px; }
|
||||
.panel.hidden { display: none; }
|
||||
|
||||
.lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; opacity: .6; margin: 16px 0 7px; }
|
||||
.hint, .empty { font-size: 12px; opacity: .55; margin: 8px 2px; line-height: 1.4; }
|
||||
.row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
|
||||
.row > * { flex: 1; }
|
||||
.chk { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; font-size: 13px; }
|
||||
|
||||
button, select, input, textarea {
|
||||
font: inherit; color: var(--txt); background: var(--panel);
|
||||
border: 1px solid var(--line); border-radius: 11px; padding: 12px;
|
||||
}
|
||||
button { cursor: pointer; }
|
||||
button:active { filter: brightness(1.3); }
|
||||
button.wide { width: 100%; margin-top: 10px; font-size: 15px; }
|
||||
input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; padding: 0; height: 34px; border: none; }
|
||||
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 4px; background: rgba(255,255,255,.14); }
|
||||
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); margin-top: -9px; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
|
||||
input[type=color] { padding: 2px; width: 46px; height: 38px; flex: 0 0 auto; }
|
||||
textarea { width: 100%; min-height: 90px; resize: vertical; }
|
||||
|
||||
.list { display: flex; flex-direction: column; gap: 6px; }
|
||||
.item {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 13px 12px; background: var(--panel);
|
||||
border: 1px solid var(--line); border-radius: 11px; font-size: 14px;
|
||||
}
|
||||
.item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.item button { flex: 0 0 auto; padding: 7px 12px; border-radius: 9px; }
|
||||
.item.active { border-color: var(--accent); background: rgba(110,150,255,.18); }
|
||||
#fx-list { max-height: 52vh; overflow-y: auto; }
|
||||
#lib { max-height: 40vh; overflow-y: auto; }
|
||||
|
||||
.nowbar { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
|
||||
.nowbar.hidden { display: none; }
|
||||
.np-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
|
||||
.np-top #np-name { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.nowbar .row { margin: 8px 0 0; }
|
||||
.nowbar .row button { font-size: 18px; }
|
||||
|
||||
.pad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
|
||||
.pad {
|
||||
aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
gap: 4px; font-size: 22px; border-radius: 14px; text-align: center; overflow: hidden;
|
||||
}
|
||||
.pad small { font-size: 10px; opacity: .7; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
|
||||
.pad.set { background: rgba(110,150,255,.14); border-color: rgba(120,150,255,.4); }
|
||||
.pad.active { background: rgba(110,231,160,.22); border-color: #6ee7a0; }
|
||||
.pad.assign { outline: 2px dashed var(--accent); }
|
||||
|
||||
.meters { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
|
||||
.meter { display: flex; align-items: center; gap: 8px; font-size: 10px; }
|
||||
.meter span { width: 38px; opacity: .6; }
|
||||
.meter i { display: block; height: 10px; width: 0; border-radius: 5px; background: linear-gradient(90deg,#5ad1ff,#7aa2ff,#ff7ad1); transition: width .08s linear; flex: 1; }
|
||||
.band.b { color: #8fd0ff; } .band.m { color: #b6ff9b; } .band.t { color: #ffd27a; }
|
||||
|
||||
#rec.recording { background: rgba(255,80,80,.25); border-color: #ff6a6a; }
|
||||
|
||||
#tabs {
|
||||
position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
|
||||
display: flex; background: #0e0e18; border-top: 1px solid var(--line);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
#tabs button {
|
||||
flex: 1; background: none; border: none; border-radius: 0;
|
||||
display: flex; flex-direction: column; align-items: center; gap: 2px;
|
||||
font-size: 19px; padding: 9px 0 10px; opacity: .5;
|
||||
}
|
||||
#tabs button small { font-size: 9px; }
|
||||
#tabs button.active { opacity: 1; color: var(--accent); }
|
||||
Reference in new issue
Block a user