Paul Lipscomb
4db7165797
- Restructured project into /app, /server, /client with run.py entry point - WSServer (QWebSocketServer) with log_signal, start/stop, client tracking - HTTP server serves /client on port 8080 - Vanilla JS client: faders, toggles, transport, drag-to-arrange, lock/save layout - Start Tablet button + floating Tablet log window in app UI - Preset broadcast on load/switch, DAW state relay, hardware sync via widget_update - Widget colors synced from app palette, toggle state fixed (sends 0/127 correctly) - Layout saved per preset UUID back to presets.json Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
37 lines
2.3 KiB
HTML
37 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
<title>Virtual Controller</title>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { background: #1a1a1a; color: #fff; font-family: sans-serif; overflow: hidden; touch-action: none; }
|
|
#canvas { position: relative; width: 100vw; height: 100vh; }
|
|
#toolbar { position: fixed; top: 8px; right: 8px; z-index: 1000; display: flex; gap: 6px; align-items: center; }
|
|
.tbtn { background: #2a2a2a; color: #ccc; border: 1px solid #444; padding: 6px 14px; border-radius: 4px; font-size: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
|
|
.tbtn.active { background: #00e676; color: #000; border-color: #00e676; }
|
|
#status { position: fixed; top: 8px; left: 8px; font-size: 11px; color: #555; }
|
|
#preset-name { position: fixed; bottom: 8px; left: 8px; font-size: 11px; color: #555; }
|
|
.widget { position: absolute; background: #222; border: 1px solid #3a3a3a; border-radius: 6px; padding: 12px; min-width: 140px; }
|
|
.widget-label { font-size: 16px; color: #888; text-align: center; margin-bottom: 10px; padding: 4px 0; cursor: grab; user-select: none; -webkit-user-select: none; }
|
|
input[type=range] { accent-color: #00e676; cursor: pointer; writing-mode: vertical-lr; direction: rtl; width: 64px; height: 240px; display: block; margin: 0 auto; }
|
|
.val-readout { font-size: 14px; color: #555; text-align: center; margin-top: 6px; }
|
|
.ctrl-btn { width: 100%; padding: 24px 16px; background: #2a2a2a; color: #ccc; border: 1px solid #444; border-radius: 4px; font-size: 20px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
|
|
.ctrl-btn.on { background: #1a472a; border-color: #00e676; color: #00e676; }
|
|
.arrange-hint { position: fixed; bottom: 8px; right: 8px; font-size: 11px; color: #555; display: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="canvas"></div>
|
|
<div id="toolbar">
|
|
<button class="tbtn" id="btn-arrange">Arrange</button>
|
|
<button class="tbtn active" id="btn-lock">Lock</button>
|
|
</div>
|
|
<div id="status">connecting...</div>
|
|
<div id="preset-name"></div>
|
|
<div class="arrange-hint" id="arrange-hint">drag to reposition · lock to save</div>
|
|
<script src="./app.js"></script>
|
|
</body>
|
|
</html>
|