diff --git a/src/backing/metronome.py b/src/backing/metronome.py
index caba0c1..01c1568 100644
--- a/src/backing/metronome.py
+++ b/src/backing/metronome.py
@@ -157,6 +157,7 @@ class Metronome:
self._count_in_active = True
self._count_in_bar = 0
self._count_in_beat = 0
+ self._count_in_sample = 0
self._count_in_total_beats = total_bars * beats_per_bar
logger.info("Count-in started: %d bars (%d beats)",
total_bars, self._count_in_total_beats)
@@ -246,21 +247,35 @@ class Metronome:
self._count_in_active = False
logger.info("Count-in complete")
else:
- # Generate count-in clicks for beats falling in this buffer
+ # Generate count-in clicks for beats falling in this buffer.
+ # Track absolute sample position across calls for accurate
+ # beat placement regardless of buffer size / tempo alignment.
+ if not hasattr(self, '_count_in_sample'):
+ self._count_in_sample = 0
+
+ start_sample = self._count_in_sample
+ end_sample = start_sample + buffer_size
current_count_beat = self._count_in_beat
- offset = samples_until_next_beat
- while offset < buffer_size and current_count_beat < self._count_in_total_beats:
- cb = (current_count_beat % beats_per_bar) + 1
- click = self.generate_click(beat=cb, bar=1, is_count_in=True)
- if len(click) > 0:
- end = min(offset + len(click), buffer_size)
- copy_len = end - offset
- if copy_len > 0:
- output[offset:end] += click[:copy_len]
+ while current_count_beat < self._count_in_total_beats:
+ beat_sample = current_count_beat * samples_per_beat
+ if beat_sample >= end_sample:
+ break # Beat falls in a future buffer
+
+ if beat_sample >= start_sample:
+ offset = beat_sample - start_sample
+ cb = (current_count_beat % beats_per_bar) + 1
+ click = self.generate_click(beat=cb, bar=1,
+ is_count_in=True)
+ if len(click) > 0:
+ end = min(offset + len(click), buffer_size)
+ copy_len = end - offset
+ if copy_len > 0:
+ output[offset:end] += click[:copy_len]
+
current_count_beat += 1
- offset += samples_per_beat
+ self._count_in_sample += buffer_size
self._count_in_beat = current_count_beat
if current_count_beat >= self._count_in_total_beats:
self._count_in_active = False
diff --git a/src/backing/player.py b/src/backing/player.py
index e9acf42..9adf979 100644
--- a/src/backing/player.py
+++ b/src/backing/player.py
@@ -107,8 +107,8 @@ class BackingTrackPlayer:
self._playback_position: float = 0.0 # seconds into active track
self._count_in_remaining: float = 0.0 # seconds of count-in left
- # Thread safety
- self._lock = threading.Lock()
+ # Thread safety (reentrant — play() may be called from next_track() etc.)
+ self._lock = threading.RLock()
# DSP integration
self._dsp_engine = self.config.dsp_engine
@@ -232,15 +232,20 @@ class BackingTrackPlayer:
track = pl.current_track
if track is None:
- logger.warning("No track selected")
- return False
+ # Auto-select first track if none selected
+ if len(pl.tracks) > 0:
+ pl.current_index = 0
+ track = pl.tracks[0]
+ else:
+ logger.warning("No track selected")
+ return False
# Load if needed
if not track.loaded and track.file_path:
if not self.load_track(track.id):
return False
- if track_id not in self._audio_cache:
+ if track.id not in self._audio_cache:
logger.warning("Track audio not loaded: %s", track.id)
return False
@@ -373,8 +378,9 @@ class BackingTrackPlayer:
logger.info("End of playlist reached")
return False
+ self._active_track_id = track.id
if was_playing:
- self.play(track.id)
+ self.play(track.id, count_in=False)
return True
return True
@@ -392,8 +398,9 @@ class BackingTrackPlayer:
if track is None:
return False
+ self._active_track_id = track.id
if was_playing:
- self.play(track.id)
+ self.play(track.id, count_in=False)
return True
return True
@@ -412,8 +419,9 @@ class BackingTrackPlayer:
return False
pl.current_index = index
+ self._active_track_id = track.id
if was_playing:
- self.play(track.id)
+ self.play(track.id, count_in=False)
return True
return True
@@ -672,6 +680,10 @@ class BackingTrackPlayer:
def active_track(self) -> Track | None:
if self._active_track_id:
return self.playlists.get_track(self._active_track_id)
+ # Fall back to playlist's current track if nothing actively playing
+ pl = self.playlists.active
+ if pl is not None:
+ return pl.current_track
return None
@property
diff --git a/src/backing/playlist.py b/src/backing/playlist.py
index 15f084b..dcc8d38 100644
--- a/src/backing/playlist.py
+++ b/src/backing/playlist.py
@@ -106,6 +106,11 @@ class PlaylistManager:
play_mode=play_mode,
)
pl.tracks.append(track)
+
+ # Auto-select first track
+ if pl.current_index < 0 and len(pl.tracks) == 1:
+ pl.current_index = 0
+
logger.info("Added track %s: %s", track_id, track.title)
return track_id
diff --git a/src/network/rest_api.py b/src/network/rest_api.py
index 24322bd..fcdfe3b 100644
--- a/src/network/rest_api.py
+++ b/src/network/rest_api.py
@@ -62,6 +62,7 @@ class MixerStateProvider:
self.list_scenes: Optional[Callable[[], list[str]]] = None
self.load_scene: Optional[Callable[[str], bool]] = None
self.save_scene: Optional[Callable[[str], bool]] = None
+ self.delete_scene: Optional[Callable[[str], bool]] = None
self.handle_parameter: Optional[Callable[[str, float, int], None]] = None
self.handle_transport: Optional[Callable[[str], None]] = None
@@ -219,6 +220,16 @@ def create_router(
ok = state.save_scene(name)
return APIResponse(ok=True, data={"scene": name, "saved": ok})
+ @router.delete("/scenes/{name}", response_model=APIResponse)
+ async def delete_scene(name: str):
+ """Delete a saved scene."""
+ if not state.delete_scene:
+ raise HTTPException(status_code=503, detail="Scenes not available")
+ ok = state.delete_scene(name)
+ if not ok:
+ raise HTTPException(status_code=404, detail=f"Scene '{name}' not found")
+ return APIResponse(ok=True, data={"scene": name, "deleted": True})
+
# ── Full state ─────────────────────────────────────────────────────────
@router.get("/state", response_model=MixerStateSchema)
diff --git a/src/network/server.py b/src/network/server.py
index 5d6c295..c080d8e 100644
--- a/src/network/server.py
+++ b/src/network/server.py
@@ -192,6 +192,7 @@ class NetworkServer:
sp.list_scenes = lambda: self._engine.automation.list_scenes()
sp.load_scene = lambda name: self._engine.load_snapshot(name)
sp.save_scene = lambda name: bool(self._engine.save_snapshot(name))
+ sp.delete_scene = lambda name: self._engine.automation.delete_scene(name)
sp.handle_parameter = self._handle_api_parameter
sp.handle_transport = self._handle_transport_command
diff --git a/tests/test_backing.py b/tests/test_backing.py
index 209a864..aa63a9d 100644
--- a/tests/test_backing.py
+++ b/tests/test_backing.py
@@ -737,8 +737,9 @@ class TestMetronome:
assert m.is_count_in_active() is True
# Generate enough buffers to exhaust the count-in
- buf_size = 12000 # 0.25s at 48k = 1 beat at 120 BPM
- for _ in range(10): # 10 beats = more than 8
+ # 8 beats * 24000 samples/beat / 12000 buffer = 16 buffers needed
+ buf_size = 12000 # 0.25s at 48k
+ for _ in range(20): # 20 > 16, safe margin
buf = m.generate_clicks_for_position(0, 120, 1, 1, buf_size)
# Count-in should be complete
diff --git a/web/app.js b/web/app.js
index 917347c..00efbc8 100644
--- a/web/app.js
+++ b/web/app.js
@@ -1,294 +1,917 @@
-// RPi Audio Mixer — Web UI Application
+// ═══════════════════════════════════════════════════════════════════════
+// RPi Audio Mixer — Web UI Application (SPA)
+// Vanilla JS + WebSocket, no external dependencies
+// ═══════════════════════════════════════════════════════════════════════
-let ws = null;
-let sessionToken = null;
-let connected = false;
-let channelCount = 16;
-let paramState = {}; // channel -> { param_type -> value }
+const App = {
+ // ── State ────────────────────────────────────────────────────────────
+ ws: null,
+ sessionToken: null,
+ connected: false,
+ reconnectTimer: null,
+ paramState: {}, // channel → { param_type → value }
+ mixerState: null, // full MixerStateSchema from server
+ currentView: 'mixer',
+ eqChannel: -1, // currently open EQ modal channel
+ logExpanded: false,
-// ── Logging ────────────────────────────────────────────────────────────
+ // ═════════════════════════════════════════════════════════════════════
+ // Logging
+ // ═════════════════════════════════════════════════════════════════════
+ _logEntries: 0,
+ log(msg, cls) {
+ const el = document.getElementById('log');
+ const div = document.createElement('div');
+ div.className = 'log-entry ' + (cls || '');
+ div.textContent = new Date().toLocaleTimeString() + ' ' + msg;
+ el.prepend(div);
+ this._logEntries++;
+ if (this._logEntries > 200) {
+ el.lastChild?.remove();
+ this._logEntries--;
+ }
+ },
-function log(msg, cls) {
- const el = document.getElementById('log');
- const div = document.createElement('div');
- div.textContent = new Date().toLocaleTimeString() + ' ' + msg;
- div.className = cls || '';
- el.prepend(div);
- if (el.children.length > 50) el.lastChild.remove();
-}
-
-// ── Connection ──────────────────────────────────────────────────────────
-
-async function login() {
- const apiKey = document.getElementById('apikey-input').value;
- try {
- const resp = await fetch('/api/v1/auth/login', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json', 'X-API-Key': apiKey },
- body: JSON.stringify({ api_key: apiKey }),
- });
- const data = await resp.json();
- if (data.token) {
- sessionToken = data.token;
- document.getElementById('connect-btn').disabled = false;
- log('Session obtained (expires in ' + data.expires_in + 's)', 'log-info');
- // Auto-connect
- connectWS();
+ toggleLog() {
+ this.logExpanded = !this.logExpanded;
+ const body = document.getElementById('log-body');
+ const toggle = document.getElementById('log-toggle');
+ if (this.logExpanded) {
+ body.classList.remove('collapsed');
+ toggle.textContent = '📋 Log ▴';
} else {
- log('Login failed: ' + JSON.stringify(data), 'log-error');
+ body.classList.add('collapsed');
+ toggle.textContent = '📋 Log ▾';
}
- } catch (e) {
- log('Login error: ' + e.message, 'log-error');
- }
-}
+ },
-function connectWS() {
- if (!sessionToken) {
- log('No session token — login first', 'log-error');
- return;
- }
- if (ws) ws.close();
-
- const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
- const url = proto + '//' + location.host + '/ws?session=' + sessionToken;
-
- setStatus('connecting', '● Connecting...');
-
- ws = new WebSocket(url);
- ws.onopen = () => {
- connected = true;
- setStatus('connected', '● Connected');
- document.getElementById('connect-btn').disabled = true;
- log('WebSocket connected', 'log-state');
- };
- ws.onclose = (e) => {
- connected = false;
- setStatus('disconnected', '● Disconnected');
- document.getElementById('connect-btn').disabled = false;
- log('WebSocket closed: ' + (e.reason || 'code ' + e.code), 'log-error');
- };
- ws.onerror = () => log('WebSocket error', 'log-error');
- ws.onmessage = handleMessage;
-}
-
-function disconnectWS() {
- if (ws) ws.close();
-}
-
-function setStatus(cls, text) {
- const el = document.getElementById('conn-status');
- el.className = 'status ' + cls;
- el.textContent = text;
-}
-
-// ── Message handling ────────────────────────────────────────────────────
-
-function handleMessage(event) {
- try {
- const msg = JSON.parse(event.data);
- switch (msg.type) {
- case 'full_state':
- handleFullState(msg.payload);
- break;
- case 'parameter_update':
- handleParameterUpdate(msg.payload);
- break;
- case 'transport_command':
- handleTransportUpdate(msg.payload);
- break;
- case 'error':
- log('Server error: ' + msg.payload.message, 'log-error');
- break;
- default:
- log('Unknown msg type: ' + msg.type, 'log-info');
+ // ═════════════════════════════════════════════════════════════════════
+ // Connection
+ // ═════════════════════════════════════════════════════════════════════
+ async login() {
+ const apiKey = document.getElementById('apikey-input').value;
+ if (!apiKey) {
+ this.log('No API key entered', 'log-error');
+ return;
}
- } catch (e) {
- log('Parse error: ' + e.message, 'log-error');
- }
-}
+ try {
+ const resp = await fetch('/api/v1/auth/login', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json', 'X-API-Key': apiKey },
+ body: JSON.stringify({ api_key: apiKey }),
+ });
+ const data = await resp.json();
+ if (data.token) {
+ this.sessionToken = data.token;
+ document.getElementById('connect-btn').disabled = false;
+ this.log('Session obtained (expires ' + data.expires_in + 's)', 'log-state');
+ this.connectWS();
+ } else {
+ this.log('Login failed: ' + (data.detail || JSON.stringify(data)), 'log-error');
+ }
+ } catch (e) {
+ this.log('Login error: ' + e.message, 'log-error');
+ }
+ },
-function handleFullState(state) {
- log('Full state received: ' + (state.channels ? state.channels.length : 0) + ' channels', 'log-state');
+ connectWS() {
+ if (!this.sessionToken) {
+ this.log('No session token — login first', 'log-error');
+ return;
+ }
+ if (this.ws) {
+ this.ws.close();
+ this.ws = null;
+ }
+ if (this.reconnectTimer) {
+ clearTimeout(this.reconnectTimer);
+ this.reconnectTimer = null;
+ }
- if (state.channels) {
- channelCount = state.channels.length;
- buildChannelStrips(state.channels);
- }
+ const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+ const url = proto + '//' + location.host + '/ws?session=' + this.sessionToken;
- if (state.transport) {
- updateTransportUI(state.transport);
- }
+ this.setStatus('connecting', '● Connecting...');
- if (state.master) {
- updateMasterUI(state.master);
- }
-}
+ this.ws = new WebSocket(url);
+ this.ws.onopen = () => {
+ this.connected = true;
+ this.setStatus('connected', '● Live');
+ document.getElementById('connect-btn').disabled = true;
+ this.log('WebSocket connected', 'log-ws');
+ };
+ this.ws.onclose = (e) => {
+ this.connected = false;
+ this.setStatus('disconnected', '● Offline');
+ document.getElementById('connect-btn').disabled = false;
+ this.log('WS closed: ' + (e.reason || 'code ' + e.code) + ' — reconnecting in 3s', 'log-error');
+ // Auto-reconnect after 3s
+ this.reconnectTimer = setTimeout(() => {
+ if (this.sessionToken && !this.connected) {
+ this.log('Reconnecting...', 'log-ws');
+ this.connectWS();
+ }
+ }, 3000);
+ };
+ this.ws.onerror = () => {
+ this.log('WebSocket error', 'log-error');
+ };
+ this.ws.onmessage = (e) => this.handleMessage(e);
+ },
-function handleParameterUpdate(payload) {
- const { param_type, value, channel } = payload;
- if (!paramState[channel]) paramState[channel] = {};
- paramState[channel][param_type] = value;
+ disconnectWS() {
+ if (this.reconnectTimer) {
+ clearTimeout(this.reconnectTimer);
+ this.reconnectTimer = null;
+ }
+ if (this.ws) {
+ this.ws.close();
+ this.ws = null;
+ }
+ },
- updateChannelUI(channel, param_type, value);
+ setStatus(cls, text) {
+ const el = document.getElementById('conn-status');
+ el.className = 'status ' + cls;
+ el.textContent = text;
+ },
- if (param_type === 'master_volume') {
- document.getElementById('master-vol-val').textContent = value.toFixed(1) + ' dB';
- document.getElementById('master-fader').querySelector('input').value = value;
- }
-}
+ // ═════════════════════════════════════════════════════════════════════
+ // Message handling
+ // ═════════════════════════════════════════════════════════════════════
+ handleMessage(event) {
+ try {
+ const msg = JSON.parse(event.data);
+ switch (msg.type) {
+ case 'full_state':
+ this.handleFullState(msg.payload);
+ break;
+ case 'parameter_update':
+ this.handleParameterUpdate(msg.payload);
+ break;
+ case 'transport_command':
+ this.handleTransportUpdate(msg.payload);
+ break;
+ case 'error':
+ this.log('Server: ' + msg.payload.message, 'log-error');
+ break;
+ default:
+ this.log('Unknown msg: ' + msg.type, 'log-info');
+ }
+ } catch (e) {
+ this.log('Parse error: ' + e.message, 'log-error');
+ }
+ },
-function handleTransportUpdate(payload) {
- updateTransportUI(payload);
-}
+ handleFullState(state) {
+ this.mixerState = state;
+ const chCount = state.channels ? state.channels.length : 0;
+ this.log('State received: ' + chCount + ' channels, '
+ + (state.plugins ? state.plugins.length : 0) + ' plugins, '
+ + (state.scenes ? state.scenes.length : 0) + ' scenes', 'log-state');
-// ── Channel strip builder ───────────────────────────────────────────────
+ // Initialize paramState from channels
+ if (state.channels) {
+ state.channels.forEach(ch => {
+ const i = ch.channel;
+ if (!this.paramState[i]) this.paramState[i] = {};
+ this.paramState[i].volume = ch.volume_db;
+ this.paramState[i].pan = ch.pan;
+ this.paramState[i].mute = ch.mute ? 1 : 0;
+ this.paramState[i].solo = ch.solo ? 1 : 0;
+ this.paramState[i].gain = ch.gain_db;
+ this.paramState[i].eq_enable = ch.eq?.enabled ? 1 : 0;
+ });
+ }
-function buildChannelStrips(channels) {
- const container = document.getElementById('channels');
- container.innerHTML = '';
+ if (state.channels) this.buildChannelStrips(state.channels);
+ if (state.master) this.updateMasterUI(state.master);
+ if (state.transport) this.updateTransportUI(state.transport);
+ if (state.plugins) this.buildPluginView(state.plugins);
+ if (state.routing) this.buildRoutingView(state.routing);
+ if (state.scenes) this.buildSessionsView(state.scenes);
+ if (state.uptime_seconds) {
+ document.getElementById('uptime-display').textContent =
+ 'up ' + this.formatUptime(state.uptime_seconds);
+ }
+ },
- channels.forEach((ch, i) => {
- const strip = document.createElement('div');
- strip.className = 'channel-strip';
- strip.id = 'ch-' + i;
+ handleParameterUpdate(payload) {
+ const { param_type, value, channel } = payload;
+ const ch = channel !== undefined ? channel : -1;
- const volDb = ch.volume_db !== undefined ? ch.volume_db : 0;
+ // Update state
+ if (ch >= 0) {
+ if (!this.paramState[ch]) this.paramState[ch] = {};
+ this.paramState[ch][param_type] = value;
+ }
- strip.innerHTML = `
- ${ch.label || 'CH' + (i + 1)}
-
-
- Vol
- ${volDb.toFixed(1)} dB
-
-
-
-
Pan: ${((ch.pan || 0) * 100).toFixed(0)}%
-
-
-
-
- `;
- container.appendChild(strip);
+ // Update UI
+ this.updateChannelUI(ch, param_type, value);
- // Initialize state
- if (!paramState[i]) paramState[i] = {};
- paramState[i].mute = ch.mute || false;
- paramState[i].solo = ch.solo || false;
- paramState[i].volume = volDb;
- paramState[i].pan = ch.pan || 0;
- });
-
- // Update channel count in master section context if needed
-}
-
-function updateChannelUI(channel, paramType, value) {
- const strip = document.getElementById('ch-' + channel);
- if (!strip) return;
-
- switch (paramType) {
- case 'volume': {
- const fader = strip.querySelector('.fader-v input');
- const label = strip.querySelector('.fader-value');
+ // Master parameters
+ if (param_type === 'master_volume') {
+ document.getElementById('master-vol-val').textContent = Number(value).toFixed(1) + ' dB';
+ const fader = document.querySelector('#master-fader input');
if (fader) fader.value = value;
- if (label) label.textContent = value.toFixed(1) + ' dB';
- break;
}
- case 'pan': {
- const knob = strip.querySelector('.pan-knob input');
- const label = strip.querySelector('.pan-value');
- if (knob) knob.value = value;
- if (label) label.textContent = 'Pan: ' + (value * 100).toFixed(0) + '%';
- break;
+ if (param_type === 'master_mute') {
+ document.getElementById('btn-mute-master').classList.toggle('on', value >= 0.5);
}
- case 'mute': {
- const btn = document.getElementById('mute-' + channel);
- if (btn) {
- btn.className = 'chan-btn' + (value >= 0.5 ? ' muted' : '');
+ if (param_type === 'master_dim') {
+ document.getElementById('btn-dim').classList.toggle('on', value >= 0.5);
+ }
+ },
+
+ handleTransportUpdate(payload) {
+ this.updateTransportUI(payload);
+ },
+
+ // ═════════════════════════════════════════════════════════════════════
+ // View routing
+ // ═════════════════════════════════════════════════════════════════════
+ showView(viewName) {
+ this.currentView = viewName;
+
+ // Update tabs
+ document.querySelectorAll('.tab').forEach(tab => {
+ tab.classList.toggle('active', tab.dataset.view === viewName);
+ });
+
+ // Update views
+ document.querySelectorAll('.view').forEach(view => {
+ view.classList.toggle('active', view.id === 'view-' + viewName);
+ });
+
+ // Refresh view if we have data
+ if (this.mixerState) {
+ switch (viewName) {
+ case 'routing':
+ this.buildRoutingView(this.mixerState.routing);
+ break;
+ case 'plugins':
+ this.buildPluginView(this.mixerState.plugins);
+ this.populatePluginChannelSelect();
+ break;
+ case 'sessions':
+ this.buildSessionsView(this.mixerState.scenes);
+ break;
}
- break;
}
- case 'solo': {
- const btn = document.getElementById('solo-' + channel);
- if (btn) {
- btn.className = 'chan-btn' + (value >= 0.5 ? ' soloed' : '');
+ },
+
+ // ═════════════════════════════════════════════════════════════════════
+ // Channel strips
+ // ═════════════════════════════════════════════════════════════════════
+ buildChannelStrips(channels) {
+ const container = document.getElementById('channels');
+ container.innerHTML = '';
+
+ channels.forEach((ch, i) => {
+ const strip = document.createElement('div');
+ strip.className = 'channel-strip';
+ strip.id = 'ch-' + i;
+ if (ch.solo) strip.classList.add('soloed');
+ if (ch.mute) strip.classList.add('muted');
+
+ const volDb = ch.volume_db !== undefined ? ch.volume_db : 0;
+ const pan = ch.pan !== undefined ? ch.pan : 0;
+
+ strip.innerHTML =
+ `${ch.label || 'CH' + (i+1)}
` +
+ `` +
+ `
` +
+ `
` +
+ `
Vol` +
+ `
${volDb.toFixed(1)} dB` +
+ `
` +
+ `` +
+ `` +
+ `` +
+ `
` +
+ ``;
+
+ container.appendChild(strip);
+ });
+ },
+
+ updateChannelUI(channel, paramType, value) {
+ if (channel < 0) return;
+
+ const strip = document.getElementById('ch-' + channel);
+ if (!strip) return;
+
+ switch (paramType) {
+ case 'volume': {
+ const fader = strip.querySelector('.fader-container input');
+ const valEl = document.getElementById('vol-val-' + channel);
+ if (fader) fader.value = value;
+ if (valEl) valEl.textContent = Number(value).toFixed(1) + ' dB';
+ break;
+ }
+ case 'mute': {
+ const btn = document.getElementById('mute-' + channel);
+ const muted = value >= 0.5;
+ if (btn) btn.classList.toggle('on', muted);
+ strip.classList.toggle('muted', muted);
+ break;
+ }
+ case 'solo': {
+ const btn = document.getElementById('solo-' + channel);
+ const soloed = value >= 0.5;
+ if (btn) btn.classList.toggle('solo-on', soloed);
+ strip.classList.toggle('soloed', soloed);
+ break;
+ }
+ case 'pan': {
+ const btn = document.getElementById('pan-btn-' + channel);
+ if (btn) btn.title = 'Pan: ' + Number(value).toFixed(2);
+ break;
+ }
+ case 'eq_enable': {
+ const btn = document.getElementById('eq-btn-' + channel);
+ if (btn) btn.classList.toggle('eq-on', value >= 0.5);
+ break;
+ }
+ case 'gain': {
+ // Could show in a tooltip or sub-label
+ break;
}
- break;
}
- }
-}
+ },
-function updateMasterUI(master) {
- if (master.volume_db !== undefined) {
- document.getElementById('master-fader').querySelector('input').value = master.volume_db;
- document.getElementById('master-vol-val').textContent = master.volume_db.toFixed(1) + ' dB';
- }
-}
+ // ═════════════════════════════════════════════════════════════════════
+ // Level meters (simulated for demo — real data via OSC bridge later)
+ // ═════════════════════════════════════════════════════════════════════
+ _meterInterval: null,
-function updateTransportUI(transport) {
- document.getElementById('btn-play').className = 'tbtn' + (transport.playing ? ' active' : '');
- document.getElementById('btn-record').className = 'tbtn' + (transport.recording ? ' active' : '');
- document.getElementById('btn-loop').className = 'tbtn' + (transport.loop ? ' active' : '');
+ startMeters() {
+ if (this._meterInterval) return;
+ this._meterInterval = setInterval(() => this._updateMeters(), 80);
+ },
- if (transport.tempo_bpm) {
- document.getElementById('tempo-display').textContent = transport.tempo_bpm.toFixed(1) + ' BPM';
- }
- if (transport.position_sec !== undefined) {
- const secs = Math.floor(transport.position_sec);
- const h = Math.floor(secs / 3600);
- const m = Math.floor((secs % 3600) / 60);
- const s = secs % 60;
- document.getElementById('time-display').textContent =
- String(h).padStart(2, '0') + ':' +
- String(m).padStart(2, '0') + ':' +
- String(s).padStart(2, '0');
- }
-}
+ stopMeters() {
+ if (this._meterInterval) {
+ clearInterval(this._meterInterval);
+ this._meterInterval = null;
+ }
+ },
-function toggleMute(channel) {
- const current = paramState[channel] && paramState[channel].mute ? 0 : 1;
- sendParam('mute', current, channel);
-}
+ _updateMeters() {
+ // Simulate random meter levels if not receiving real data
+ if (!this.connected) return;
-function toggleSolo(channel) {
- const current = paramState[channel] && paramState[channel].solo ? 0 : 1;
- sendParam('solo', current, channel);
-}
+ // Only update visible channel meters
+ document.querySelectorAll('.meter-v').forEach(meter => {
+ const fill = meter.querySelector('.meter-fill');
+ if (!fill) return;
+ // Keep existing value with slight drift for demo
+ const current = parseFloat(fill.style.height) || 0;
+ const drift = current + (Math.random() - 0.55) * 3;
+ const pct = Math.max(0, Math.min(100, drift));
+ fill.style.height = pct + '%';
+ fill.className = 'meter-fill ' +
+ (pct > 75 ? 'high' : pct > 40 ? 'mid' : 'low');
+ });
+ },
-// ── Sending ─────────────────────────────────────────────────────────────
+ // ═════════════════════════════════════════════════════════════════════
+ // Master UI
+ // ═════════════════════════════════════════════════════════════════════
+ updateMasterUI(master) {
+ if (master.volume_db !== undefined) {
+ document.getElementById('master-fader').querySelector('input').value = master.volume_db;
+ document.getElementById('master-vol-val').textContent = master.volume_db.toFixed(1) + ' dB';
+ }
+ document.getElementById('btn-mute-master').classList.toggle('on', !!master.muted);
+ document.getElementById('btn-dim').classList.toggle('on', !!master.dim_active);
-function sendParam(paramType, value, channel) {
- if (!ws || ws.readyState !== WebSocket.OPEN) return;
- const msg = {
- type: 'parameter_update',
- payload: {
+ // Show bus info
+ const info = document.getElementById('master-buses-info');
+ if (info && master.aux_buses) {
+ info.textContent = master.aux_buses.length + ' aux · '
+ + (master.subgroups?.length || 0) + ' sub · '
+ + (master.vca_groups?.length || 0) + ' vca';
+ }
+ },
+
+ // ═════════════════════════════════════════════════════════════════════
+ // Transport UI
+ // ═════════════════════════════════════════════════════════════════════
+ updateTransportUI(transport) {
+ document.getElementById('btn-play').classList.toggle('active', !!transport.playing);
+ document.getElementById('btn-record').classList.toggle('recording', !!transport.recording);
+ document.getElementById('btn-loop').classList.toggle('active', !!transport.loop);
+
+ if (transport.tempo_bpm) {
+ document.getElementById('tempo-display').textContent =
+ Number(transport.tempo_bpm).toFixed(1) + ' BPM';
+ }
+ if (transport.position_sec !== undefined) {
+ document.getElementById('time-display').textContent =
+ this.formatTime(transport.position_sec);
+ }
+ },
+
+ // ═════════════════════════════════════════════════════════════════════
+ // EQ Modal
+ // ═════════════════════════════════════════════════════════════════════
+ openEQ(channel) {
+ this.eqChannel = channel;
+ const ch = this.mixerState?.channels?.[channel];
+ if (!ch) {
+ this.log('No data for channel ' + channel, 'log-error');
+ return;
+ }
+
+ document.getElementById('eq-modal-title').textContent =
+ (ch.label || 'CH' + (channel + 1)) + ' — EQ & Dynamics';
+
+ // EQ enable
+ const eqEnable = document.getElementById('eq-enable');
+ eqEnable.checked = ch.eq?.enabled || false;
+ eqEnable.onchange = () => App.sendParam('eq_enable', eqEnable.checked ? 1 : 0, channel);
+
+ // EQ bands
+ this._buildEQBand('eq-bands', channel, ch.eq || {});
+
+ // Compressor
+ this._buildDynRows('comp-params', channel, ch.compressor || {}, [
+ ['comp_threshold', 'Thresh', -60, 0, 'dB'],
+ ['comp_ratio', 'Ratio', 1, 20, ':1'],
+ ['comp_attack', 'Attack', 0.1, 100, 'ms'],
+ ['comp_release', 'Release', 10, 1000, 'ms'],
+ ['comp_gain', 'Makeup', -20, 20, 'dB'],
+ ]);
+
+ // Gate
+ this._buildDynRows('gate-params', channel, ch.gate || {}, [
+ ['gate_threshold', 'Thresh', -80, 0, 'dB'],
+ ['gate_range', 'Range', -80, 0, 'dB'],
+ ]);
+
+ document.getElementById('eq-modal').classList.remove('hidden');
+ },
+
+ closeEQ() {
+ document.getElementById('eq-modal').classList.add('hidden');
+ this.eqChannel = -1;
+ },
+
+ _buildEQBand(containerId, channel, eq) {
+ const container = document.getElementById(containerId);
+ const bands = [
+ { id: 'low', label: 'Low', params: [
+ ['eq_low_freq', 'Freq', 20, 500, 'Hz'],
+ ['eq_low_gain', 'Gain', -18, 18, 'dB'],
+ ['eq_low_q', 'Q', 0.1, 5, ''],
+ ]},
+ { id: 'mid', label: 'Mid', params: [
+ ['eq_mid_freq', 'Freq', 200, 8000, 'Hz'],
+ ['eq_mid_gain', 'Gain', -18, 18, 'dB'],
+ ['eq_mid_q', 'Q', 0.1, 5, ''],
+ ]},
+ { id: 'high', label: 'High', params: [
+ ['eq_high_freq', 'Freq', 1000, 20000, 'Hz'],
+ ['eq_high_gain', 'Gain', -18, 18, 'dB'],
+ ['eq_high_q', 'Q', 0.1, 5, ''],
+ ]},
+ ];
+
+ container.innerHTML = '';
+ bands.forEach(band => {
+ const div = document.createElement('div');
+ div.className = 'eq-band';
+ const header = document.createElement('div');
+ header.className = 'eq-band-header';
+ header.textContent = band.label;
+ div.appendChild(header);
+
+ const rows = document.createElement('div');
+ rows.className = 'param-rows';
+ band.params.forEach(([pType, name, min, max, unit]) => {
+ const val = eq[band.id] ? (eq[band.id][pType.replace('eq_' + band.id + '_', '') + '_' + unit.toLowerCase()] || 0) : 0;
+ // Build default values
+ const defaults = {
+ eq_low_freq: 100, eq_low_gain: 0, eq_low_q: 0.71,
+ eq_mid_freq: 1000, eq_mid_gain: 0, eq_mid_q: 0.71,
+ eq_high_freq: 5000, eq_high_gain: 0, eq_high_q: 0.71,
+ };
+ const defVal = defaults[pType] || 0;
+
+ const row = this._makeParamRow(pType, name, min, max, defVal, unit, channel);
+ rows.appendChild(row);
+ });
+ div.appendChild(rows);
+ container.appendChild(div);
+ });
+ },
+
+ _buildDynRows(containerId, channel, obj, paramDefs) {
+ const container = document.getElementById(containerId);
+ container.innerHTML = '';
+ paramDefs.forEach(([pType, name, min, max, unit]) => {
+ // Map schema field names to param types
+ const fieldMap = {
+ comp_threshold: 'threshold_db', comp_ratio: 'ratio',
+ comp_attack: 'attack_ms', comp_release: 'release_ms', comp_gain: 'makeup_gain_db',
+ gate_threshold: 'threshold_db', gate_range: 'range_db',
+ };
+ const val = obj[fieldMap[pType]] || 0;
+ const row = this._makeParamRow(pType, name, min, max, val, unit, channel);
+ container.appendChild(row);
+ });
+ },
+
+ _makeParamRow(paramType, name, min, max, value, unit, channel) {
+ const row = document.createElement('div');
+ row.className = 'param-row';
+ row.innerHTML =
+ `${name}` +
+ `` +
+ `${Number(value).toFixed(1)}${unit}`;
+ return row;
+ },
+
+ // ═════════════════════════════════════════════════════════════════════
+ // Routing View
+ // ═════════════════════════════════════════════════════════════════════
+ buildRoutingView(routing) {
+ if (!routing) return;
+
+ // Sources panel
+ const sourcesEl = document.getElementById('routing-sources');
+ if (routing.nodes) {
+ sourcesEl.innerHTML = '';
+ const sourceTypes = ['system_input', 'channel_input', 'channel_direct', 'aux_send', 'fx_input'];
+ routing.nodes.filter(n => sourceTypes.includes(n.type)).forEach(node => {
+ const div = document.createElement('div');
+ div.className = 'routing-node';
+ div.draggable = true;
+ div.dataset.nodeId = node.node_id;
+ div.innerHTML = `${node.type.replace(/_/g,' ')} ${node.label || node.node_id}`;
+ div.addEventListener('dragstart', (e) => this._onDragStart(e, node));
+ sourcesEl.appendChild(div);
+ });
+ }
+
+ // Destinations panel
+ const destsEl = document.getElementById('routing-dests');
+ if (routing.nodes) {
+ destsEl.innerHTML = '';
+ const destTypes = ['master_input', 'aux_bus', 'aux_return', 'subgroup', 'system_output', 'fx_output'];
+ routing.nodes.filter(n => destTypes.includes(n.type)).forEach(node => {
+ const div = document.createElement('div');
+ div.className = 'routing-node';
+ div.dataset.nodeId = node.node_id;
+ div.innerHTML = `${node.type.replace(/_/g,' ')} ${node.label || node.node_id}`;
+ div.addEventListener('dragover', (e) => { e.preventDefault(); div.classList.add('drop-target'); });
+ div.addEventListener('dragleave', () => div.classList.remove('drop-target'));
+ div.addEventListener('drop', (e) => {
+ e.preventDefault();
+ div.classList.remove('drop-target');
+ const srcId = e.dataTransfer.getData('text/plain');
+ if (srcId && node.node_id) {
+ this.log('Route: ' + srcId + ' → ' + node.node_id, 'log-param');
+ // TODO: send routing WS message when backend supports it
+ this.sendParam('route_connect', 1, -1, {source: srcId, dest: node.node_id});
+ }
+ });
+ destsEl.appendChild(div);
+ });
+ }
+
+ // Matrix/connections panel
+ const matrixEl = document.getElementById('routing-matrix');
+ if (routing.edges) {
+ matrixEl.innerHTML = '';
+ const nodeMap = {};
+ if (routing.nodes) routing.nodes.forEach(n => { nodeMap[n.node_id] = n; });
+
+ routing.edges.forEach(edge => {
+ const srcLabel = nodeMap[edge.source]?.label || edge.source;
+ const dstLabel = nodeMap[edge.dest]?.label || edge.dest;
+ const div = document.createElement('div');
+ div.className = 'routing-edge' + (edge.muted ? ' muted' : '');
+ div.innerHTML =
+ `` +
+ `${srcLabel}` +
+ `→` +
+ `${dstLabel}` +
+ `
` +
+ `${(edge.gain_db||0).toFixed(1)} dB` +
+ `` +
+ `` +
+ `
`;
+ matrixEl.appendChild(div);
+ });
+
+ if (routing.edges.length === 0) {
+ matrixEl.innerHTML = 'No connections — drag sources to destinations
';
+ }
+ }
+ },
+
+ _onDragStart(e, node) {
+ e.dataTransfer.setData('text/plain', node.node_id);
+ e.target.classList.add('dragging');
+ e.target.addEventListener('dragend', () => e.target.classList.remove('dragging'), {once: true});
+ },
+
+ // ═════════════════════════════════════════════════════════════════════
+ // Plugins View
+ // ═════════════════════════════════════════════════════════════════════
+ populatePluginChannelSelect() {
+ const sel = document.getElementById('plugin-channel-select');
+ if (!this.mixerState?.channels) return;
+ sel.innerHTML = '';
+ this.mixerState.channels.forEach((ch, i) => {
+ sel.innerHTML += ``;
+ });
+ },
+
+ showPluginsForChannel(chIdx) {
+ const plugins = chIdx === 'all'
+ ? this.mixerState?.plugins || []
+ : (this.mixerState?.plugins || []).filter(p => p.channel === parseInt(chIdx));
+ this.buildPluginView(plugins);
+ },
+
+ buildPluginView(plugins) {
+ const container = document.getElementById('plugins-list');
+ if (!plugins || plugins.length === 0) {
+ container.innerHTML = 'No plugins loaded
';
+ return;
+ }
+
+ container.innerHTML = '';
+ plugins.forEach(plugin => {
+ const card = document.createElement('div');
+ card.className = 'plugin-card';
+
+ const chLabel = plugin.channel >= 0
+ ? (this.mixerState?.channels?.[plugin.channel]?.label || 'CH' + (plugin.channel + 1))
+ : 'Master';
+
+ card.innerHTML =
+ ``;
+
+ // Parameters
+ if (plugin.params && plugin.params.length > 0) {
+ const paramsDiv = document.createElement('div');
+ paramsDiv.className = 'plugin-params';
+ plugin.params.forEach(param => {
+ const row = document.createElement('div');
+ row.className = 'plugin-param';
+ row.innerHTML =
+ `${param.name}` +
+ `` +
+ `${(param.value*100).toFixed(0)}%`;
+ paramsDiv.appendChild(row);
+ });
+ card.appendChild(paramsDiv);
+ }
+
+ container.appendChild(card);
+ });
+ },
+
+ togglePluginBypass(pluginId, btn) {
+ // Send bypass toggle via WS
+ // The backend will echo back the state update
+ const currentBypassed = btn.classList.contains('bypassed');
+ const newState = currentBypassed ? 0 : 1;
+ this.sendParam('plugin_bypass', newState, -1, {plugin_id: pluginId});
+ // Optimistic UI update
+ btn.classList.toggle('bypassed');
+ btn.textContent = btn.classList.contains('bypassed') ? 'Bypassed' : 'Bypass';
+ },
+
+ sendPluginParam(pluginId, paramIndex, value) {
+ this.sendParam('plugin_param', value, -1, {plugin_id: pluginId, param_index: paramIndex});
+ },
+
+ // ═════════════════════════════════════════════════════════════════════
+ // Sessions View
+ // ═════════════════════════════════════════════════════════════════════
+ buildSessionsView(scenes) {
+ const container = document.getElementById('sessions-list');
+ if (!scenes || scenes.length === 0) {
+ container.innerHTML = 'No saved sessions. Save current state above.
';
+ return;
+ }
+
+ container.innerHTML = '';
+ scenes.forEach(name => {
+ const card = document.createElement('div');
+ card.className = 'session-card';
+ card.innerHTML =
+ `💾 ${this._escapeHTML(name)}
` +
+ `` +
+ `` +
+ `` +
+ `
`;
+ card.addEventListener('click', (e) => {
+ if (e.target.tagName === 'BUTTON') return;
+ this.loadScene(name);
+ });
+ container.appendChild(card);
+ });
+ },
+
+ saveScene() {
+ const nameInput = document.getElementById('scene-name-input');
+ const name = nameInput.value.trim();
+ if (!name) {
+ this.log('Enter a scene name', 'log-error');
+ return;
+ }
+ this.sendParam('snapshot_save', 1, -1, {name: name});
+ this.log('Saving scene: ' + name, 'log-state');
+ nameInput.value = '';
+ },
+
+ loadScene(name) {
+ this.log('Loading scene: ' + name, 'log-state');
+ this.sendParam('snapshot_load', 1, -1, {name: name});
+ },
+
+ deleteScene(name) {
+ if (!confirm('Delete session "' + name + '"?')) return;
+ // Delete via REST API
+ fetch('/api/v1/scenes/' + encodeURIComponent(name), { method: 'DELETE' })
+ .then(() => {
+ this.log('Deleted scene: ' + name, 'log-state');
+ // Remove from local state
+ if (this.mixerState?.scenes) {
+ this.mixerState.scenes = this.mixerState.scenes.filter(s => s !== name);
+ this.buildSessionsView(this.mixerState.scenes);
+ }
+ })
+ .catch(e => this.log('Delete failed: ' + e.message, 'log-error'));
+ },
+
+ // ═════════════════════════════════════════════════════════════════════
+ // Sending
+ // ═════════════════════════════════════════════════════════════════════
+ sendParam(paramType, value, channel, extra) {
+ if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+ // Queue or ignore silently — don't spam errors
+ return;
+ }
+ const payload = {
param_type: String(paramType),
value: parseFloat(value),
channel: parseInt(channel),
timestamp: Date.now() / 1000,
- },
- };
- ws.send(JSON.stringify(msg));
-}
+ };
+ if (extra) Object.assign(payload, extra);
-function sendTransport(command) {
- if (!ws || ws.readyState !== WebSocket.OPEN) return;
- ws.send(JSON.stringify({
- type: 'transport_command',
- payload: { command: command },
- }));
-}
+ this.ws.send(JSON.stringify({
+ type: 'parameter_update',
+ payload: payload,
+ }));
+ },
-// ── Startup ─────────────────────────────────────────────────────────────
+ toggleParam(paramType, channel) {
+ const current = this.paramState[channel]?.[paramType] || 0;
+ const newVal = current >= 0.5 ? 0 : 1;
+ this.sendParam(paramType, newVal, channel);
+ },
-// Auto-login on page load
-window.addEventListener('DOMContentLoaded', () => {
- log('Mixer UI loaded — login to connect', 'log-info');
- // Auto-login with default key
- login();
-});
+ sendTransport(command) {
+ if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
+ this.ws.send(JSON.stringify({
+ type: 'transport_command',
+ payload: { command: command },
+ }));
+ },
+
+ cyclePan(channel) {
+ const current = this.paramState[channel]?.pan || 0;
+ // Cycle: center → right → left → center
+ let newPan;
+ if (current > -0.1 && current < 0.1) newPan = 1.0;
+ else if (current > 0.5) newPan = -1.0;
+ else newPan = 0.0;
+ this.sendParam('pan', newPan, channel);
+ },
+
+ showLocateDialog() {
+ const timecode = prompt('Go to position (seconds or HH:MM:SS):', '0');
+ if (!timecode) return;
+ let secs;
+ if (timecode.includes(':')) {
+ const parts = timecode.split(':').map(Number);
+ secs = parts.length === 3
+ ? parts[0] * 3600 + parts[1] * 60 + parts[2]
+ : parts[0] * 60 + parts[1];
+ } else {
+ secs = parseFloat(timecode);
+ }
+ if (!isNaN(secs) && secs >= 0) {
+ this.sendParam('locate', secs, -1);
+ this.log('Locate to ' + this.formatTime(secs), 'log-param');
+ }
+ },
+
+ showGainDialog(channel) {
+ const current = this.paramState[channel]?.gain || 0;
+ const val = prompt('Gain for ' + (this.mixerState?.channels?.[channel]?.label || 'CH'+(channel+1))
+ + ' (dB, -20 to +60):', current);
+ if (val !== null) {
+ const db = parseFloat(val);
+ if (!isNaN(db)) this.sendParam('gain', db, channel);
+ }
+ },
+
+ // ═════════════════════════════════════════════════════════════════════
+ // Helpers
+ // ═════════════════════════════════════════════════════════════════════
+ formatTime(secs) {
+ const s = Math.max(0, Math.floor(secs));
+ const h = Math.floor(s / 3600);
+ const m = Math.floor((s % 3600) / 60);
+ const ss = s % 60;
+ return String(h).padStart(2, '0') + ':' +
+ String(m).padStart(2, '0') + ':' +
+ String(ss).padStart(2, '0');
+ },
+
+ formatUptime(secs) {
+ const s = Math.floor(secs);
+ if (s < 60) return s + 's';
+ if (s < 3600) return Math.floor(s / 60) + 'm';
+ return Math.floor(s / 3600) + 'h ' + Math.floor((s % 3600) / 60) + 'm';
+ },
+
+ _escapeHTML(str) {
+ const div = document.createElement('div');
+ div.textContent = str;
+ return div.innerHTML;
+ },
+
+ _escapeAttr(str) {
+ return str.replace(/'/g, "\\'").replace(/"/g, '"');
+ },
+
+ // ═════════════════════════════════════════════════════════════════════
+ // Startup
+ // ═════════════════════════════════════════════════════════════════════
+ init() {
+ this.log('RPi Mixer UI loaded', 'log-info');
+ this.startMeters();
+
+ // Auto-login with default key
+ this.login();
+
+ // Keyboard shortcuts
+ document.addEventListener('keydown', (e) => {
+ if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+ switch (e.key) {
+ case ' ': e.preventDefault(); this.sendTransport('play'); break;
+ case 'Escape': this.closeEQ(); break;
+ case '1': this.showView('mixer'); break;
+ case '2': this.showView('routing'); break;
+ case '3': this.showView('plugins'); break;
+ case '4': this.showView('sessions'); break;
+ case 'ArrowLeft': this.sendTransport('stop'); break; // Stop can be left arrow too
+ }
+ });
+
+ // Close EQ modal on backdrop click
+ document.getElementById('eq-modal')?.addEventListener('click', (e) => {
+ if (e.target.classList.contains('modal-backdrop')) this.closeEQ();
+ });
+ }
+};
+
+// Boot
+window.addEventListener('DOMContentLoaded', () => App.init());
diff --git a/web/index.html b/web/index.html
index c01d563..adfa515 100644
--- a/web/index.html
+++ b/web/index.html
@@ -2,52 +2,156 @@
-
+
+
+
+
RPi Audio Mixer
+
+
+
+
+
+
-
-
-
-
- 120 BPM
- 00:00:00
+
+
+
+
+
+ 120.0 BPM
+ 00:00:00
+
-
-
-
-
Master
-
-
-
Master
-
0.0 dB
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Compressor
+
+
Noise Gate
+
+