luzadev/djaudiovisualizer
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Phone remote: LAN web page + WebSocket, QR pairing, blackout/freeze

Browse Source 
remote-server.js: http + ws server (off by default, started from the panel,
port 8787 or next free), every request gated by a secret key embedded in a
QR code; the key persists in userData/remote.json so a phone's home-screen
shortcut survives restarts, 'Nuovo codice' revokes it. Phones send commands
that the panel executes through its own functions (transport, track pick,
effect next/prev/random/family/sequence, Auto VJ, pads, mapping on + visible
zones, blackout, freeze) and the panel pushes a compact live state at ~6 Hz
while a phone is connected (track + progress, effect, sequence, pads,
zones, meters, BPM). New panic controls in output and aux windows: blackout
(fade to black above every layer) and freeze (hold the last frame); also
available as panel buttons. src/remote.{html,css,js} is the touch UI in the
Neon Grid style, installable to the home screen, auto-reconnecting.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XVMQ2JhsJ77pGKqcvvFHqc
This commit is contained in:
lucianoandClaude Opus 5.5 committed 2026-10-02 13:39:28 +02:00
1 parent f246b8bdb8
commit ab1ab89127
16 files changed
+973 -21
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/theme.css
+18
View File
@@ -383,3 +383,21 @@ body.control ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180de
@media (prefers-reduced-motion: reduce) {
body.control *, body.control *::before, body.control *::after { animation: none !important; transition: none !important; }
}
/* Phone remote section (tab Schermo) */
body.control .remote-box { display: flex; gap: 14px; align-items: flex-start; }
body.control .remote-qr-wrap {
flex: 0 0 150px; height: 150px; border-radius: 12px; overflow: hidden;
display: grid; place-items: center;
background: rgba(4, 8, 20, 0.7);
border: 1px solid rgba(46, 242, 255, 0.35);
box-shadow: 0 0 18px rgba(46, 242, 255, 0.18);
}
body.control #remote-qr { width: 100%; height: 100%; image-rendering: pixelated; background: #fff; padding: 6px; box-sizing: border-box; }
body.control #remote-qr-off { font-family: var(--ng-display); font-weight: 800; letter-spacing: 3px; color: rgba(160, 200, 255, 0.35); }
body.control .remote-side { flex: 1; min-width: 0; }
body.control .remote-url {
font-family: var(--ng-display); font-weight: 600; font-size: 11px; letter-spacing: 0.5px;
color: var(--ng-cyan); word-break: break-all; margin: 4px 0 6px; user-select: text;
}
body.control #remote-clients { color: var(--ng-lime); }