technicalkiwi/led-controller
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(ui): edit tab zones, audio readout, live reload

Browse Source 
- Zones/presets/sequence strip and Pipfile dev command fix
- Optional live reload and beat test audio asset + generator

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Jimmy
2026-05-13 00:44:20 +12:00
parent c64dd736f2
commit c1c3e5d71b
16 changed files with 1377 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Pipfile
View File

@@ -27,7 +27,7 @@ python_version = "3.11"
web = "python tests/web.py" web = "python tests/web.py"
watch = "python -m watchfiles \"python tests/web.py\" src tests" watch = "python -m watchfiles \"python tests/web.py\" src tests"
run = "sh -c 'cd src && python main.py'" run = "sh -c 'cd src && python main.py'"
dev = "python -m watchfiles \"sh -c 'cd src && python main.py'\" src" dev = "python -m watchfiles \"sh -c 'cd src && LED_CONTROLLER_LIVE_RELOAD=1 python main.py'\" src"
test = "python -m pytest" test = "python -m pytest"
test-browser = "sh -c 'python tests/web.py > /tmp/led-controller-web.log 2>&1 & pid=$!; trap \"kill $pid\" EXIT; sleep 2; LED_CONTROLLER_RUN_BROWSER_TESTS=1 LED_CONTROLLER_DEVICE_IP=http://127.0.0.1:5000 python -m pytest tests/test_browser.py'" test-browser = "sh -c 'python tests/web.py > /tmp/led-controller-web.log 2>&1 & pid=$!; trap \"kill $pid\" EXIT; sleep 2; LED_CONTROLLER_RUN_BROWSER_TESTS=1 LED_CONTROLLER_DEVICE_IP=http://127.0.0.1:5000 python -m pytest tests/test_browser.py'"
test-browser-device = "sh -c 'LED_CONTROLLER_RUN_BROWSER_TESTS=1 python -m pytest tests/test_browser.py'" test-browser-device = "sh -c 'LED_CONTROLLER_RUN_BROWSER_TESTS=1 python -m pytest tests/test_browser.py'"

2
db/pattern.json
View File

@@ -104,7 +104,7 @@
"n3": "In time (ms)", "n3": "In time (ms)",
"min_delay": 10, "min_delay": 10,
"max_delay": 10000, "max_delay": 10000,
"max_colors": 2, "max_colors": 10,
"has_background": true, "has_background": true,
"supports_manual": true "supports_manual": true
}, },

2
db/preset.json
View File

File diff suppressed because one or more lines are too long

94
src/main.py
View File

@@ -2,6 +2,7 @@ import asyncio
import errno import errno
import json import json
import os import os
import secrets
import signal import signal
import socket import socket
import threading import threading
@@ -38,6 +39,11 @@ _tcp_device_lock = threading.Lock()
DISCOVERY_UDP_PORT = 8766 DISCOVERY_UDP_PORT = 8766
def _live_reload_enabled() -> bool:
v = os.environ.get("LED_CONTROLLER_LIVE_RELOAD", "").strip().lower()
return v not in ("", "0", "false", "no")
def _register_udp_device_sync( def _register_udp_device_sync(
device_name: str, peer_ip: str, mac, device_type=None device_name: str, peer_ip: str, mac, device_type=None
) -> None: ) -> None:
@@ -248,9 +254,22 @@ async def main(port=80):
app = Microdot() app = Microdot()
audio_detector = AudioBeatDetector() audio_detector = AudioBeatDetector()
try:
from util.audio_run_persist import coerce_audio_device, read_audio_run_state
persisted = read_audio_run_state()
if persisted.get("enabled"):
dev = coerce_audio_device(persisted.get("device"))
audio_detector.start(device=dev)
print("[startup] audio beat detector started from saved run state")
except Exception as e:
print(f"[startup] audio auto-start skipped: {e!r}")
from util import beat_driver_route from util import beat_driver_route
beat_driver_route.set_beat_route_main_loop(asyncio.get_running_loop()) beat_driver_route.set_beat_route_main_loop(asyncio.get_running_loop())
from util import sequence_playback as seq_pb
seq_pb.ensure_beat_consumer_started()
# Initialize sessions with a secret key from settings # Initialize sessions with a secret key from settings
secret_key = settings.get('session_secret_key', 'led-controller-secret-key-change-in-production') secret_key = settings.get('session_secret_key', 'led-controller-secret-key-change-in-production')
@@ -284,11 +303,42 @@ async def main(port=80):
tcp_client_registry.set_settings(settings) tcp_client_registry.set_settings(settings)
tcp_client_registry.set_tcp_status_broadcaster(broadcast_device_tcp_status) tcp_client_registry.set_tcp_status_broadcaster(broadcast_device_tcp_status)
live_reload = _live_reload_enabled()
dev_build_id = secrets.token_hex(12) if live_reload else None
if live_reload:
print(
"[dev] LED_CONTROLLER_LIVE_RELOAD: browser refreshes when the server process restarts"
)
if dev_build_id:
@app.route("/__dev/build-id")
def dev_build_id_route(request):
_ = request
return (
dev_build_id,
200,
{
"Content-Type": "text/plain; charset=utf-8",
"Cache-Control": "no-store",
},
)
# Serve index.html at root (cwd is src/ when run via pipenv run run) # Serve index.html at root (cwd is src/ when run via pipenv run run)
@app.route('/') @app.route("/")
def index(request): def index(request):
"""Serve the main web UI.""" """Serve the main web UI."""
return send_file('templates/index.html') if dev_build_id:
try:
with open("templates/index.html", encoding="utf-8") as f:
html = f.read()
tag = '<script src="/static/dev-live-reload.js" defer></script>'
if "</body>" in html:
html = html.replace("</body>", tag + "\n</body>", 1)
return html, 200, {"Content-Type": "text/html; charset=utf-8"}
except OSError:
pass
return send_file("templates/index.html")
# Favicon: avoid 404 in browser console (no file needed) # Favicon: avoid 404 in browser console (no file needed)
@app.route('/favicon.ico') @app.route('/favicon.ico')
@@ -319,6 +369,9 @@ async def main(port=80):
pass pass
try: try:
audio_detector.start(device=device) audio_detector.start(device=device)
from util.audio_run_persist import write_audio_run_state
write_audio_run_state(enabled=True, device=device)
return {"ok": True, "status": audio_detector.status()} return {"ok": True, "status": audio_detector.status()}
except Exception as e: except Exception as e:
return {"ok": False, "error": str(e)}, 500 return {"ok": False, "error": str(e)}, 500
@@ -327,12 +380,47 @@ async def main(port=80):
async def audio_stop(request): async def audio_stop(request):
_ = request _ = request
audio_detector.stop() audio_detector.stop()
from util.audio_run_persist import write_audio_run_state
write_audio_run_state(enabled=False)
return {"ok": True, "status": audio_detector.status()} return {"ok": True, "status": audio_detector.status()}
@app.route('/api/audio/status') @app.route('/api/audio/status')
async def audio_status(request): async def audio_status(request):
_ = request _ = request
return {"status": audio_detector.status()} from util import beat_driver_route
from util import sequence_playback
st = audio_detector.status()
st["sequence"] = sequence_playback.playback_status()
st["manual_beat_stride"] = beat_driver_route.manual_beat_stride_status()
seq = st.get("sequence")
beat_readout = ""
if isinstance(seq, dict) and str(seq.get("beat_readout") or "").strip():
beat_readout = str(seq.get("beat_readout") or "").strip()
elif st.get("running"):
mb = st.get("manual_beat_stride")
if isinstance(mb, dict) and mb.get("active"):
try:
n = int(mb.get("stride_n") or 1)
except (TypeError, ValueError):
n = 1
n = max(1, min(64, n))
try:
bi = int(mb.get("beat_in_stride") or 1)
except (TypeError, ValueError):
bi = 1
pos = min(n, max(1, bi))
beat_readout = f"{pos}/{n}"
else:
try:
bs = int(st.get("beat_seq") or 0)
except (TypeError, ValueError):
bs = 0
if bs > 0:
beat_readout = str(bs)
st["beat_readout"] = beat_readout
return {"status": st}
# Static file route # Static file route
@app.route("/static/<path:path>") @app.route("/static/<path:path>")

4
src/models/zone.py
View File

@@ -36,6 +36,9 @@ class Zone(Model):
if "group_ids" not in doc: if "group_ids" not in doc:
doc["group_ids"] = [] doc["group_ids"] = []
changed = True changed = True
if "preset_group_ids" not in doc or not isinstance(doc.get("preset_group_ids"), dict):
doc["preset_group_ids"] = {}
changed = True
if changed: if changed:
self.save() self.save()
@@ -48,6 +51,7 @@ class Zone(Model):
"name": name, "name": name,
"names": names if names else [], "names": names if names else [],
"group_ids": gid_list, "group_ids": gid_list,
"preset_group_ids": {},
"presets": presets if presets else [], "presets": presets if presets else [],
"default_preset": None, "default_preset": None,
"brightness": 255, "brightness": 255,

232
src/static/audio.js
View File

@@ -1,8 +1,21 @@
(() => { (() => {
let pollTimer = null; let pollTimer = null;
let lastBeatSeq = 0; let lastBeatSeq = 0;
let lastLoggedSequenceBeatFractions = "";
/** Prior poll had server zone sequence playback active (`status.sequence.active === true`). */
let prevZoneSequencePlaybackActive = false;
/**
* After sequence playback ends/stops while audio keeps running, keep header # idle until the
* next beat bumps `beat_seq` (avoids the stuck final cumulative value vs sequence readout).
*/
let headerBeatStickyIdleAfterSeq = false;
/** Suppresses duplicate `console.log` when the same `beat_seq` + server `beat_readout` repeats. */
let lastBeatConsoleKey = "";
/** @type {Set<ReturnType<typeof setTimeout>>} */
const pendingBeatPhaseTimers = new Set();
const STORAGE_KEY = "led-controller-audio-restore"; const STORAGE_KEY = "led-controller-audio-restore";
const PHASE_MS_KEY = "led-controller-audio-beat-phase-ms";
const STORAGE_VERSION = 1; const STORAGE_VERSION = 1;
function readRestorePrefs() { function readRestorePrefs() {
@@ -48,6 +61,45 @@
return document.getElementById(id); return document.getElementById(id);
} }
/** @param {Record<string, unknown>} status */
function updateBeatReadoutDisplays(status) {
const text = String((status && status.beat_readout) || "").trim();
for (const id of ["audio-top-beat-readout", "audio-modal-beat-readout"]) {
const n = el(id);
if (n) n.textContent = text;
}
}
/**
* On each new audio `beat_seq`, log server `beat_readout` once (deduped when poll repeats the
* same `beat_seq` + line).
* @param {Record<string, unknown>} status
*/
function logServerBeatConsoleOnPollEdge(status) {
const beatSeq = Number((status && status.beat_seq) || 0);
const line = String((status && status.beat_readout) || "").trim();
const key = `${beatSeq}\t${line}`;
if (key !== lastBeatConsoleKey) {
lastBeatConsoleKey = key;
if (!line) return;
const seq = /** @type {Record<string, unknown>|undefined} */ (status && status.sequence);
const seqBeats =
!!seq &&
!!seq.active &&
String(seq.advance_mode || "").toLowerCase() === "beats";
let out = line;
if (seqBeats) {
const nLanes = Number(seq && seq.num_lanes);
const lanesNote =
Number.isFinite(nLanes) && nLanes > 1
? `lane 1 of ${nLanes} (readout is for this lane only)`
: "lane 1";
out = `${line} — ${lanesNote}`;
}
console.log(out);
}
}
function updateBpmDisplay(bpm) { function updateBpmDisplay(bpm) {
const node = el("audio-bpm-value"); const node = el("audio-bpm-value");
if (!node) return; if (!node) return;
@@ -58,11 +110,45 @@
} }
} }
function updateBeatCounter(seq) { /** Zone sequence playback (server); only when `active === true` is beat X/Y meaningful. */
const topNode = el("audio-top-beat-count"); function sequencePlaybackActiveFromStatus(status) {
if (!topNode) return; const seq = /** @type {Record<string, unknown>|undefined} */ (
const n = Number(seq); status && status.sequence
topNode.textContent = Number.isFinite(n) && n >= 0 ? `#${Math.floor(n)}` : "#0"; );
return !!(seq && seq.active);
}
/** Build sequence beat fractions for debug logging (browser console only). */
function formatSequenceBeatFractionsForLog(status) {
const seq = /** @type {Record<string, unknown>|undefined} */ (status && status.sequence);
if (!seq || !seq.active) return null;
if (seq.advance_mode !== "beats") return null;
const laneBeatAt = Number(seq.lane0_beat_in_step);
const laneBeatsPerStep = Number(seq.lane0_beats_per_step);
if (
!Number.isFinite(laneBeatAt) ||
laneBeatAt <= 0 ||
!Number.isFinite(laneBeatsPerStep) ||
laneBeatsPerStep <= 0
) {
return null;
}
const presetFraction = `${Math.floor(laneBeatAt)}/${Math.floor(laneBeatsPerStep)}`;
const sequenceBeatAt = Number(seq.sequence_beat_at);
const sequenceBeatsPerPass = Number(seq.sequence_beats_per_pass);
if (
!Number.isFinite(sequenceBeatAt) ||
sequenceBeatAt <= 0 ||
!Number.isFinite(sequenceBeatsPerPass) ||
sequenceBeatsPerPass <= 0
) {
return null;
}
const sequenceFraction = `${Math.floor(sequenceBeatAt)}/${Math.floor(sequenceBeatsPerPass)}`;
return `${presetFraction} ${sequenceFraction}`;
} }
function updateHitTypeDisplay(hitType, confidence) { function updateHitTypeDisplay(hitType, confidence) {
@@ -91,15 +177,67 @@
} }
} }
function clearBeatPhaseTimers() {
pendingBeatPhaseTimers.forEach((t) => clearTimeout(t));
pendingBeatPhaseTimers.clear();
}
function getBeatPhaseDelayMs() {
const inp = el("audio-beat-phase-ms");
if (inp && String(inp.value).trim() !== "") {
const n = parseInt(String(inp.value).trim(), 10);
if (Number.isFinite(n)) return Math.min(500, Math.max(0, n));
}
try {
const v = parseInt(localStorage.getItem(PHASE_MS_KEY) || "0", 10);
return Number.isFinite(v) ? Math.min(500, Math.max(0, v)) : 0;
} catch {
return 0;
}
}
function persistBeatPhaseMs() {
try {
localStorage.setItem(PHASE_MS_KEY, String(getBeatPhaseDelayMs()));
} catch (e) {
console.warn("beat phase ms save failed", e);
}
}
function scheduleBeatPhaseFire(seq, delayMs) {
let tid = null;
const run = () => {
if (tid != null) pendingBeatPhaseTimers.delete(tid);
flashBeat();
try {
window.dispatchEvent(
new CustomEvent("ledControllerAudioBeat", { detail: { beatSeq: seq } }),
);
} catch (e) {
/* ignore */
}
};
if (delayMs <= 0) {
run();
return;
}
tid = setTimeout(run, delayMs);
pendingBeatPhaseTimers.add(tid);
}
/** Stop detector and polling; does not clear “resume on load” prefs (used before restart). */ /** Stop detector and polling; does not clear “resume on load” prefs (used before restart). */
async function stopAudioOnly() { async function stopAudioOnly() {
setTopBpmVisible(false); setTopBpmVisible(false);
clearBeatPhaseTimers();
if (pollTimer) { if (pollTimer) {
clearInterval(pollTimer); clearInterval(pollTimer);
pollTimer = null; pollTimer = null;
} }
lastBeatSeq = 0; lastBeatSeq = 0;
updateBeatCounter(0); prevZoneSequencePlaybackActive = false;
headerBeatStickyIdleAfterSeq = false;
lastBeatConsoleKey = "";
updateBeatReadoutDisplays({});
try { try {
await fetch("/api/audio/stop", { method: "POST" }); await fetch("/api/audio/stop", { method: "POST" });
} catch (e) { } catch (e) {
@@ -115,7 +253,7 @@
async function pollStatus() { async function pollStatus() {
try { try {
const res = await fetch("/api/audio/status"); const res = await fetch("/api/audio/status", { cache: "no-store" });
const data = await res.json(); const data = await res.json();
const status = data?.status || {}; const status = data?.status || {};
if (status.error && String(status.error).trim()) { if (status.error && String(status.error).trim()) {
@@ -123,6 +261,7 @@
if (node) { if (node) {
node.textContent = String(status.error).trim().slice(0, 120); node.textContent = String(status.error).trim().slice(0, 120);
} }
updateBeatReadoutDisplays({});
updateBpmDisplay(null); updateBpmDisplay(null);
setTopBpmVisible(!!status.running); setTopBpmVisible(!!status.running);
if (!status.running && pollTimer) { if (!status.running && pollTimer) {
@@ -134,12 +273,46 @@
setTopBpmVisible(!!status.running); setTopBpmVisible(!!status.running);
updateBpmDisplay(status.bpm); updateBpmDisplay(status.bpm);
updateHitTypeDisplay(status.beat_type, Number(status.beat_type_confidence)); updateHitTypeDisplay(status.beat_type, Number(status.beat_type_confidence));
const seq = Number(status.beat_seq || 0); /*
updateBeatCounter(seq); * `status.beat_seq` is cumulative since Audio Start — used only for flash / sticky idle
if (seq > lastBeatSeq) { * after sequence ends. Preset and sequence loop counts come from `manual_beat_stride` /
lastBeatSeq = seq; * `sequence` on each poll.
flashBeat(); */
const beatSeq = Number(status.beat_seq || 0);
const zoneSeqActive = sequencePlaybackActiveFromStatus(status);
const endedSeq = prevZoneSequencePlaybackActive && !zoneSeqActive;
const startedSeq = !prevZoneSequencePlaybackActive && zoneSeqActive;
prevZoneSequencePlaybackActive = zoneSeqActive;
if (startedSeq) {
headerBeatStickyIdleAfterSeq = false;
lastLoggedSequenceBeatFractions = "";
} }
if (endedSeq) {
headerBeatStickyIdleAfterSeq = true;
clearBeatPhaseTimers();
lastBeatSeq = beatSeq;
}
if (!zoneSeqActive && headerBeatStickyIdleAfterSeq) {
if (beatSeq > lastBeatSeq) {
lastBeatSeq = beatSeq;
logServerBeatConsoleOnPollEdge(status);
scheduleBeatPhaseFire(beatSeq, getBeatPhaseDelayMs());
headerBeatStickyIdleAfterSeq = false;
}
} else if (beatSeq > lastBeatSeq) {
lastBeatSeq = beatSeq;
logServerBeatConsoleOnPollEdge(status);
scheduleBeatPhaseFire(beatSeq, getBeatPhaseDelayMs());
}
const beatFractions = formatSequenceBeatFractionsForLog(status);
if (beatFractions) {
if (beatFractions !== lastLoggedSequenceBeatFractions) {
lastLoggedSequenceBeatFractions = beatFractions;
}
} else {
lastLoggedSequenceBeatFractions = "";
}
updateBeatReadoutDisplays(status);
} catch (e) { } catch (e) {
console.warn("audio status poll failed", e); console.warn("audio status poll failed", e);
} }
@@ -164,7 +337,6 @@
writeRestorePrefs(override, selected); writeRestorePrefs(override, selected);
updateBpmDisplay(null); updateBpmDisplay(null);
updateHitTypeDisplay("unknown", NaN); updateHitTypeDisplay("unknown", NaN);
updateBeatCounter(0);
pollTimer = setInterval(pollStatus, 250); pollTimer = setInterval(pollStatus, 250);
await pollStatus(); await pollStatus();
} }
@@ -252,17 +424,30 @@
}); });
} }
const phaseInp = el("audio-beat-phase-ms");
if (phaseInp) {
try {
const stored = parseInt(localStorage.getItem(PHASE_MS_KEY) || "0", 10);
if (Number.isFinite(stored)) {
phaseInp.value = String(Math.min(500, Math.max(0, stored)));
}
} catch {
/* ignore */
}
phaseInp.addEventListener("change", () => persistBeatPhaseMs());
phaseInp.addEventListener("input", () => persistBeatPhaseMs());
}
} }
async function resumePollingIfDetectorRunning() { async function resumePollingIfDetectorRunning() {
try { try {
const res = await fetch("/api/audio/status"); const res = await fetch("/api/audio/status", { cache: "no-store" });
const data = await res.json(); const data = await res.json();
const status = data?.status || {}; const status = data?.status || {};
if (status.running && !pollTimer) { if (status.running && !pollTimer) {
pollTimer = setInterval(pollStatus, 250); pollTimer = setInterval(pollStatus, 250);
lastBeatSeq = Number(status.beat_seq || 0); lastBeatSeq = Number(status.beat_seq || 0);
updateBeatCounter(lastBeatSeq); prevZoneSequencePlaybackActive = sequencePlaybackActiveFromStatus(status);
await pollStatus(); await pollStatus();
} }
} catch (e) { } catch (e) {
@@ -270,8 +455,11 @@
} }
} }
async function restoreAudioIfNeeded() { /**
if (pollTimer) return; * Apply browser-stored device fields only (GET /devices list); does not start detection.
* Beat detector run/stop is server-owned (`db/audio_run.json` + explicit Start/Stop in UI).
*/
async function applySavedAudioDeviceFormOnly() {
const prefs = readRestorePrefs(); const prefs = readRestorePrefs();
if (!prefs) return; if (!prefs) return;
const ov = el("audio-device-override"); const ov = el("audio-device-override");
@@ -280,20 +468,14 @@
try { try {
await refreshDevices(); await refreshDevices();
} catch (e) { } catch (e) {
console.warn("audio restore refresh devices failed", e); console.warn("audio device list refresh failed", e);
} }
if (sel && prefs.select) sel.value = prefs.select; if (sel && prefs.select) sel.value = prefs.select;
try {
await startAudio();
} catch (e) {
console.warn("audio auto-restart failed", e);
clearRestorePrefs();
}
} }
document.addEventListener("DOMContentLoaded", async () => { document.addEventListener("DOMContentLoaded", async () => {
bind(); bind();
await resumePollingIfDetectorRunning(); await resumePollingIfDetectorRunning();
await restoreAudioIfNeeded(); await applySavedAudioDeviceFormOnly();
}); });
})(); })();

25
src/static/dev-live-reload.js Normal file
View File

@@ -0,0 +1,25 @@
/* Polls server build id; full reload when watchfiles restarts Python (new process = new id). */
(function () {
var prev = null;
function tick() {
fetch('/__dev/build-id', { cache: 'no-store', credentials: 'same-origin' })
.then(function (r) {
return r.ok ? r.text() : '';
})
.then(function (id) {
id = (id || '').trim();
if (!id) return;
if (prev === null) {
prev = id;
return;
}
if (id !== prev) {
prev = id;
window.location.reload();
}
})
.catch(function () {});
}
setInterval(tick, 750);
tick();
})();

255
src/static/presets.js
View File

@@ -29,6 +29,9 @@ const filterPresetsForCurrentProfile = async (presetsObj) => {
}), }),
); );
}; };
try {
window.filterPresetsForCurrentProfile = filterPresetsForCurrentProfile;
} catch (e) {}
const getCurrentProfileData = async () => { const getCurrentProfileData = async () => {
try { try {
@@ -154,7 +157,44 @@ function tabDeviceNamesFromSection(section) {
: []; : [];
} }
async function postDriverSequence(sequence, targetMacs, delayS) { /** Device names for ``presetId`` on the current zone tab (per-preset groups or zone default). */
async function deviceNamesForPresetOnCurrentZone(presetId) {
const section = document.querySelector('.presets-section[data-zone-id]');
const fallback = tabDeviceNamesFromSection(section);
if (!section || !presetId) return fallback;
const zm = window.zonesManager;
if (!zm || typeof zm.resolveDeviceNamesForZonePreset !== 'function') return fallback;
const zoneId = section.dataset.zoneId;
try {
const res = await fetch(`/zones/${zoneId}`, { headers: { Accept: 'application/json' } });
if (!res.ok) return fallback;
const zd = await res.json();
const names = await zm.resolveDeviceNamesForZonePreset(zd, String(presetId));
return names.length ? names : fallback;
} catch (_) {
return fallback;
}
}
function formatPresetTargetGroupsLine(zoneDoc, presetId, groupsMap) {
const zm = window.zonesManager;
const gids =
zm && typeof zm.effectiveGroupIdsForZonePreset === 'function'
? zm.effectiveGroupIdsForZonePreset(zoneDoc, presetId)
: Array.isArray(zoneDoc && zoneDoc.group_ids)
? zoneDoc.group_ids.map((x) => String(x).trim()).filter((x) => x.length > 0)
: [];
const parts = (gids || [])
.map((id) => {
const g = groupsMap && groupsMap[id];
const gn = g && g.name ? String(g.name).trim() : '';
return gn;
})
.filter(Boolean);
return parts.length ? parts.join(', ') : '';
}
async function postDriverSequence(sequence, targetMacs, delayS, pushOptions) {
const body = { const body = {
sequence, sequence,
targets: Array.isArray(targetMacs) && targetMacs.length ? [...new Set(targetMacs)] : undefined, targets: Array.isArray(targetMacs) && targetMacs.length ? [...new Set(targetMacs)] : undefined,
@@ -1169,7 +1209,7 @@ document.addEventListener('DOMContentLoaded', () => {
// Create modal // Create modal
const modal = document.createElement('div'); const modal = document.createElement('div');
modal.className = 'modal active'; modal.className = 'modal active modal-child-overlay';
modal.id = 'add-preset-to-zone-modal'; modal.id = 'add-preset-to-zone-modal';
modal.innerHTML = ` modal.innerHTML = `
<div class="modal-content"> <div class="modal-content">
@@ -1284,7 +1324,10 @@ document.addEventListener('DOMContentLoaded', () => {
const newGrid = arrayToGrid(flat, 3); const newGrid = arrayToGrid(flat, 3);
tabData.presets = newGrid; tabData.presets = newGrid;
tabData.presets_flat = flat; tabData.presets_flat = flat;
if (!tabData.preset_group_ids || typeof tabData.preset_group_ids !== 'object') {
tabData.preset_group_ids = {};
}
// Update zone // Update zone
const updateResponse = await fetch(`/zones/${zoneId}`, { const updateResponse = await fetch(`/zones/${zoneId}`, {
method: 'PUT', method: 'PUT',
@@ -1378,7 +1421,7 @@ document.addEventListener('DOMContentLoaded', () => {
} }
const modal = document.createElement('div'); const modal = document.createElement('div');
modal.className = 'modal active'; modal.className = 'modal active modal-child-overlay';
modal.innerHTML = ` modal.innerHTML = `
<div class="modal-content"> <div class="modal-content">
<h2>Pick Palette Color</h2> <h2>Pick Palette Color</h2>
@@ -1449,12 +1492,10 @@ document.addEventListener('DOMContentLoaded', () => {
alert('Preset name is required to send.'); alert('Preset name is required to send.');
return; return;
} }
// Send current editor values and then select on all devices in the current zone (if any) // Send current editor values to zone devices (if any); never persist on device.
const section = document.querySelector('.presets-section[data-zone-id]');
const deviceNames = tabDeviceNamesFromSection(section);
// Work out the preset ID: for existing presets use currentEditId, otherwise fall back to name
const presetId = currentEditId || payload.name; const presetId = currentEditId || payload.name;
// Try sends preset first, then select; never persist on device. const deviceNames = await deviceNamesForPresetOnCurrentZone(presetId);
// Auto: load + immediate select. Manual: load only; first advance on the next audio beat.
await sendPresetViaEspNow(presetId, payload, deviceNames, false, false, '2'); await sendPresetViaEspNow(presetId, payload, deviceNames, false, false, '2');
}); });
} }
@@ -1466,9 +1507,8 @@ document.addEventListener('DOMContentLoaded', () => {
alert('Preset name is required.'); alert('Preset name is required.');
return; return;
} }
const section = document.querySelector('.presets-section[data-zone-id]');
const deviceNames = tabDeviceNamesFromSection(section);
const presetId = currentEditId || payload.name; const presetId = currentEditId || payload.name;
const deviceNames = await deviceNamesForPresetOnCurrentZone(presetId);
await sendPresetViaEspNow(presetId, payload, deviceNames, true, true, '1'); await sendPresetViaEspNow(presetId, payload, deviceNames, true, true, '1');
await updateTabDefaultPreset(presetId); await updateTabDefaultPreset(presetId);
await sendDefaultPreset('1', deviceNames); await sendDefaultPreset('1', deviceNames);
@@ -1503,9 +1543,9 @@ document.addEventListener('DOMContentLoaded', () => {
throw new Error('Failed to save preset'); throw new Error('Failed to save preset');
} }
// Same device targeting as Try: zone tab supplies names and selection without persistence. // Same device targeting as Try: per-preset zone groups when in a zone tab.
const section = document.querySelector('.presets-section[data-zone-id]'); const presetIdForSend = currentEditId || payload.name;
const deviceNames = tabDeviceNamesFromSection(section); const deviceNames = await deviceNamesForPresetOnCurrentZone(presetIdForSend);
// Use saved preset from server response for sending // Use saved preset from server response for sending
const saved = await response.json().catch(() => null); const saved = await response.json().catch(() => null);
@@ -1644,6 +1684,7 @@ const sendPresetViaEspNow = async (
saveToDevice = true, saveToDevice = true,
setDefault = false, setDefault = false,
devicePresetId = null, devicePresetId = null,
pushOptions = null,
) => { ) => {
try { try {
const baseColors = Array.isArray(preset.colors) && preset.colors.length const baseColors = Array.isArray(preset.colors) && preset.colors.length
@@ -1707,7 +1748,7 @@ const sendPresetViaEspNow = async (
} }
} }
await postDriverSequence(sequence, targetMacs, 0.05); await postDriverSequence(sequence, targetMacs, 0.05, pushOptions);
} catch (error) { } catch (error) {
console.error('Failed to send preset to devices:', error); console.error('Failed to send preset to devices:', error);
alert('Failed to send preset to devices.'); alert('Failed to send preset to devices.');
@@ -1776,6 +1817,48 @@ try {
// window may not exist in some environments; ignore. // window may not exist in some environments; ignore.
} }
// Store selected preset(s) per zone (multi-select; merge send order = click order, last wins on device).
const zoneSelectedPresetIds = {};
const zonePresetSelectionOrder = {};
function ensureZonePresetSelection(zoneId) {
const z = String(zoneId);
if (!zoneSelectedPresetIds[z]) zoneSelectedPresetIds[z] = new Set();
if (!zonePresetSelectionOrder[z]) zonePresetSelectionOrder[z] = [];
}
function pruneZonePresetSelection(zoneId, validIdSet) {
const z = String(zoneId);
ensureZonePresetSelection(z);
const set = zoneSelectedPresetIds[z];
for (const id of [...set]) {
if (!validIdSet.has(String(id))) set.delete(id);
}
zonePresetSelectionOrder[z] = (zonePresetSelectionOrder[z] || []).filter((id) => set.has(String(id)));
}
function getOrderedZonePresetSelection(zoneId) {
const z = String(zoneId);
ensureZonePresetSelection(z);
const set = zoneSelectedPresetIds[z];
return (zonePresetSelectionOrder[z] || []).filter((id) => set.has(String(id)));
}
async function sendMergedZonePresetSelection(zoneId, tabData, allPresets) {
const ids = getOrderedZonePresetSelection(zoneId);
if (!ids.length) return;
for (let i = 0; i < ids.length; i += 1) {
const pid = ids[i];
const preset = allPresets[pid];
if (!preset) continue;
const names =
window.zonesManager && typeof window.zonesManager.resolveDeviceNamesForZonePreset === 'function'
? await window.zonesManager.resolveDeviceNamesForZonePreset(tabData, pid)
: [];
await sendPresetViaEspNow(pid, preset, names, false, false, '2');
}
}
// Store selected preset per zone // Store selected preset per zone
const selectedPresets = {}; const selectedPresets = {};
// Store selected preset payload per zone for beat-trigger reliability. // Store selected preset payload per zone for beat-trigger reliability.
@@ -1920,19 +2003,37 @@ const insertDraggingOntoTarget = (presetsList, dragging, dropTarget) => {
}; };
// Function to render presets for a specific zone in 2D grid // Function to render presets for a specific zone in 2D grid
const renderTabPresets = async (zoneId) => { /**
* @param {string} zoneId
* @param {{ stopSequencePlayback?: boolean }} [options] - pass `{ stopSequencePlayback: true }` only when
* the UI action should stop server zone sequence playback (default: do not POST /sequences/stop).
*/
const renderTabPresets = async (zoneId, options = {}) => {
const presetsList = document.getElementById('presets-list-zone'); const presetsList = document.getElementById('presets-list-zone');
if (!presetsList) return; if (!presetsList) return;
const stopSeq = options.stopSequencePlayback === true;
if (stopSeq && typeof window.stopZoneSequencePlayback === 'function') {
// Pass false: an earlier render's stop() can finish after this pass rebuilds the DOM and
// would otherwise clear .active from new sequence tiles (breaks edit/run selection).
await window.stopZoneSequencePlayback(false);
}
try { try {
// Get zone data to see which presets are associated const [tabResponse, groupsStripRes, presetsResponse] = await Promise.all([
const tabResponse = await fetch(`/zones/${zoneId}`, { fetch(`/zones/${zoneId}`, {
headers: { Accept: 'application/json' }, headers: { Accept: 'application/json' },
}); }),
fetch('/groups', { headers: { Accept: 'application/json' } }),
fetch('/presets', {
headers: { Accept: 'application/json' },
}),
]);
if (!tabResponse.ok) { if (!tabResponse.ok) {
throw new Error('Failed to load zone'); throw new Error('Failed to load zone');
} }
const tabData = await tabResponse.json(); const tabData = await tabResponse.json();
const groupsMapStrip = groupsStripRes.ok ? await groupsStripRes.json() : {};
// Get presets - support both 2D grid and flat array (for backward compatibility) // Get presets - support both 2D grid and flat array (for backward compatibility)
let presetGrid = tabData.presets; let presetGrid = tabData.presets;
@@ -1945,10 +2046,6 @@ const renderTabPresets = async (zoneId) => {
presetGrid = arrayToGrid(presetGrid, 3); presetGrid = arrayToGrid(presetGrid, 3);
} }
// Get all presets
const presetsResponse = await fetch('/presets', {
headers: { Accept: 'application/json' },
});
if (!presetsResponse.ok) { if (!presetsResponse.ok) {
throw new Error('Failed to load presets'); throw new Error('Failed to load presets');
} }
@@ -2021,13 +2118,10 @@ const renderTabPresets = async (zoneId) => {
}); });
} }
// Get the currently selected preset for this zone
const selectedPresetId = selectedPresets[zoneId];
// Render presets in grid layout
// Flatten the grid and render all presets (grid CSS will handle layout)
const flatPresets = presetGrid.flat().filter(id => id); const flatPresets = presetGrid.flat().filter(id => id);
const validIdSet = new Set(flatPresets.map((id) => String(id)));
pruneZonePresetSelection(zoneId, validIdSet);
if (flatPresets.length === 0) { if (flatPresets.length === 0) {
// Show empty message if this zone has no presets // Show empty message if this zone has no presets
const empty = document.createElement('p'); const empty = document.createElement('p');
@@ -2039,23 +2133,36 @@ const renderTabPresets = async (zoneId) => {
flatPresets.forEach((presetId) => { flatPresets.forEach((presetId) => {
const preset = allPresets[presetId]; const preset = allPresets[presetId];
if (preset) { if (preset) {
const isSelected = presetId === selectedPresetId; ensureZonePresetSelection(zoneId);
const isSelected = zoneSelectedPresetIds[String(zoneId)].has(String(presetId));
const displayPreset = { const displayPreset = {
...preset, ...preset,
colors: resolveColorsWithPaletteRefs(preset.colors, preset.palette_refs, paletteColors), colors: resolveColorsWithPaletteRefs(preset.colors, preset.palette_refs, paletteColors),
}; };
const wrapper = createPresetButton(presetId, displayPreset, zoneId, isSelected); const wrapper = createPresetButton(
presetId,
displayPreset,
zoneId,
isSelected,
tabData,
groupsMapStrip,
allPresets,
);
presetsList.appendChild(wrapper); presetsList.appendChild(wrapper);
} }
}); });
} }
if (typeof window.appendZoneSequenceTiles === 'function') {
await window.appendZoneSequenceTiles(zoneId, tabData, allPresets, paletteColors, presetsList);
}
} catch (error) { } catch (error) {
console.error('Failed to render zone presets:', error); console.error('Failed to render zone presets:', error);
presetsList.innerHTML = '<p class="muted-text">Failed to load presets.</p>'; presetsList.innerHTML = '<p class="muted-text">Failed to load presets.</p>';
} }
}; };
const createPresetButton = (presetId, preset, zoneId, isSelected = false) => { const createPresetButton = (presetId, preset, zoneId, isSelected, tabData, groupsMap, allPresets) => {
const uiMode = getPresetUiMode(); const uiMode = getPresetUiMode();
const row = document.createElement('div'); const row = document.createElement('div');
@@ -2069,7 +2176,6 @@ const createPresetButton = (presetId, preset, zoneId, isSelected = false) => {
button.className = 'pattern-button preset-tile-main'; button.className = 'pattern-button preset-tile-main';
if (isSelected) { if (isSelected) {
button.classList.add('active'); button.classList.add('active');
selectedPresetPayloads[zoneId] = preset;
} }
const colors = Array.isArray(preset.colors) ? preset.colors.filter((c) => c) : []; const colors = Array.isArray(preset.colors) ? preset.colors.filter((c) => c) : [];
@@ -2093,6 +2199,14 @@ const createPresetButton = (presetId, preset, zoneId, isSelected = false) => {
presetNameLabel.className = 'pattern-button-label'; presetNameLabel.className = 'pattern-button-label';
button.appendChild(presetNameLabel); button.appendChild(presetNameLabel);
const groupsText = formatPresetTargetGroupsLine(tabData || {}, presetId, groupsMap || {});
if (groupsText) {
const groupsSpan = document.createElement('span');
groupsSpan.className = 'preset-tile-groups';
groupsSpan.textContent = groupsText;
button.appendChild(groupsSpan);
}
const bgSwatch = document.createElement('span'); const bgSwatch = document.createElement('span');
const bgColor = coercePresetBackground(preset); const bgColor = coercePresetBackground(preset);
bgSwatch.title = `Background: ${bgColor}`; bgSwatch.title = `Background: ${bgColor}`;
@@ -2111,7 +2225,7 @@ const createPresetButton = (presetId, preset, zoneId, isSelected = false) => {
`; `;
button.appendChild(bgSwatch); button.appendChild(bgSwatch);
const isManualPreset = preset && typeof preset.auto === 'boolean' ? !preset.auto : false; const isManualPreset = preset && !coercePresetAuto(preset);
if (isManualPreset) { if (isManualPreset) {
const manualBadge = document.createElement('span'); const manualBadge = document.createElement('span');
manualBadge.textContent = '1'; manualBadge.textContent = '1';
@@ -2138,18 +2252,42 @@ const createPresetButton = (presetId, preset, zoneId, isSelected = false) => {
button.addEventListener('click', () => { button.addEventListener('click', () => {
if (isDraggingPreset) return; if (isDraggingPreset) return;
const presetsListEl = document.getElementById('presets-list-zone'); console.info('Preset button pressed', { zoneId, presetId, name: (preset && preset.name) || presetId });
if (presetsListEl) { if (typeof window.stopZoneSequencePlayback === 'function') {
presetsListEl.querySelectorAll('.pattern-button').forEach((btn) => btn.classList.remove('active')); window.stopZoneSequencePlayback();
} }
button.classList.add('active'); const presetsListEl = document.getElementById('presets-list-zone');
selectedPresets[zoneId] = presetId; ensureZonePresetSelection(zoneId);
selectedPresetPayloads[zoneId] = preset; const z = String(zoneId);
const section = row.closest('.presets-section'); const set = zoneSelectedPresetIds[z];
const deviceNames = tabDeviceNamesFromSection(section); const order = zonePresetSelectionOrder[z];
sendPresetViaEspNow(presetId, preset, deviceNames, false, false, '2').catch((err) => { const idStr = String(presetId);
console.error(err); if (set.has(idStr)) {
}); set.delete(idStr);
zonePresetSelectionOrder[z] = order.filter((x) => String(x) !== idStr);
} else {
set.add(idStr);
order.push(idStr);
}
if (presetsListEl) {
presetsListEl.querySelectorAll('.preset-tile-row:not(.sequence-tile-row)').forEach((rw) => {
const pid = rw.dataset.presetId;
const btnEl = rw.querySelector('.preset-tile-main');
if (!btnEl || !pid) return;
if (set.has(String(pid))) btnEl.classList.add('active');
else btnEl.classList.remove('active');
});
}
const orderList = getOrderedZonePresetSelection(zoneId);
if (orderList.length) {
const lastPid = orderList[orderList.length - 1];
selectedPresets[zoneId] = lastPid;
selectedPresetPayloads[zoneId] = (allPresets && allPresets[lastPid]) || preset;
} else {
delete selectedPresets[zoneId];
delete selectedPresetPayloads[zoneId];
}
void sendMergedZonePresetSelection(zoneId, tabData, allPresets);
}); });
if (canDrag) { if (canDrag) {
@@ -2173,7 +2311,9 @@ const createPresetButton = (presetId, preset, zoneId, isSelected = false) => {
}); });
} }
row.appendChild(button); const top = document.createElement('div');
top.className = 'preset-tile-row-top';
top.appendChild(button);
if (uiMode === 'edit') { if (uiMode === 'edit') {
const actions = document.createElement('div'); const actions = document.createElement('div');
@@ -2192,9 +2332,11 @@ const createPresetButton = (presetId, preset, zoneId, isSelected = false) => {
}); });
actions.appendChild(editBtn); actions.appendChild(editBtn);
row.appendChild(actions); top.appendChild(actions);
} }
row.appendChild(top);
return row; return row;
}; };
@@ -2279,6 +2421,12 @@ const removePresetFromTab = async (zoneId, presetId) => {
tabData.presets = newGrid; tabData.presets = newGrid;
tabData.presets_flat = flat; tabData.presets_flat = flat;
if (tabData.preset_group_ids && typeof tabData.preset_group_ids === 'object') {
const pg = { ...tabData.preset_group_ids };
delete pg[String(presetId)];
tabData.preset_group_ids = pg;
}
const updateResponse = await fetch(`/zones/${zoneId}`, { const updateResponse = await fetch(`/zones/${zoneId}`, {
method: 'PUT', method: 'PUT',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
@@ -2297,6 +2445,10 @@ const removePresetFromTab = async (zoneId, presetId) => {
try { try {
window.removePresetFromTab = removePresetFromTab; window.removePresetFromTab = removePresetFromTab;
} catch (e) {} } catch (e) {}
try {
window.renderTabPresets = renderTabPresets;
window.getPresetUiMode = getPresetUiMode;
} catch (e) {}
// Listen for HTMX swaps to render presets // Listen for HTMX swaps to render presets
document.body.addEventListener('htmx:afterSwap', (event) => { document.body.addEventListener('htmx:afterSwap', (event) => {
@@ -2327,10 +2479,7 @@ document.addEventListener('DOMContentLoaded', () => {
} }
const mainMenu = document.getElementById('main-menu-dropdown'); const mainMenu = document.getElementById('main-menu-dropdown');
if (mainMenu) mainMenu.classList.remove('open'); if (mainMenu) mainMenu.classList.remove('open');
const leftPanel = document.querySelector('.presets-section[data-zone-id]'); // Preset strip re-renders from `zones.js` after `loadZones()` (no driver/playback side effects).
if (leftPanel) {
renderTabPresets(leftPanel.dataset.zoneId);
}
}); });
}); });
}); });

136
src/static/style.css
View File

@@ -199,13 +199,31 @@ header h1 {
.audio-top-indicator { .audio-top-indicator {
display: none; display: none;
align-items: center; flex-direction: column;
gap: 0.4rem; align-items: stretch;
gap: 0.15rem;
padding: 0.25rem 0.55rem; padding: 0.25rem 0.55rem;
border: 1px solid #4a4a4a; border: 1px solid #4a4a4a;
border-radius: 6px; border-radius: 6px;
background-color: #1a1a1a; background-color: #1a1a1a;
min-width: 6.5rem; min-width: 9rem;
}
.audio-top-indicator-main {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.audio-top-indicator-extra {
font-size: 0.62rem;
color: #9e9e9e;
line-height: 1.25;
text-align: right;
max-width: 16rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.audio-top-indicator.audio-running { .audio-top-indicator.audio-running {
@@ -226,6 +244,19 @@ header h1 {
text-align: right; text-align: right;
} }
.audio-top-beat-readout {
font-size: 0.62rem;
color: #b0bec5;
line-height: 1.25;
max-width: 12rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
text-align: left;
}
.audio-top-indicator-subvalue { .audio-top-indicator-subvalue {
font-size: 0.75rem; font-size: 0.75rem;
color: #9e9e9e; color: #9e9e9e;
@@ -240,7 +271,9 @@ header h1 {
.audio-top-indicator.flash .audio-top-indicator-value, .audio-top-indicator.flash .audio-top-indicator-value,
.audio-top-indicator.flash .audio-top-indicator-label, .audio-top-indicator.flash .audio-top-indicator-label,
.audio-top-indicator.flash .audio-top-indicator-subvalue { .audio-top-indicator.flash .audio-top-indicator-subvalue,
.audio-top-indicator.flash .audio-top-indicator-extra,
.audio-top-indicator.flash .audio-top-beat-readout {
color: #fff; color: #fff;
} }
@@ -620,7 +653,8 @@ body.preset-ui-run .edit-mode-only {
overflow-x: hidden; overflow-x: hidden;
display: grid; display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-columns: repeat(8, minmax(0, 1fr));
grid-auto-rows: 5rem; /* min-content height prevents taller tiles (edit actions, wrapping) from overlapping the next row and stealing clicks */
grid-auto-rows: minmax(5rem, auto);
column-gap: 0.3rem; column-gap: 0.3rem;
row-gap: 0.3rem; row-gap: 0.3rem;
align-content: start; align-content: start;
@@ -784,6 +818,26 @@ body.preset-ui-run .edit-mode-only {
border-radius: 6px; border-radius: 6px;
} }
.audio-bpm-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
}
.audio-bpm-row .audio-bpm-readout {
flex: 0 0 auto;
min-width: 5rem;
}
.audio-modal-beat-readout {
flex: 1;
min-width: 10rem;
font-size: 0.85rem;
line-height: 1.35;
text-align: left;
}
.audio-hit-type-readout { .audio-hit-type-readout {
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 600; font-weight: 600;
@@ -851,17 +905,43 @@ body.preset-ui-run .edit-mode-only {
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
min-width: 0; min-width: 0;
min-height: 0; min-height: 5rem;
} }
.preset-tile-row--run .preset-tile-actions { .preset-tile-row-top {
display: none; display: flex;
flex-direction: row;
align-items: stretch;
flex: 1;
min-width: 0;
min-height: 5rem;
} }
.preset-tile-main { .preset-tile-main {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
height: 5rem; height: 5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.12rem;
}
.preset-tile-main .preset-tile-groups {
font-size: 0.68rem;
font-weight: 500;
line-height: 1.15;
opacity: 0.88;
text-align: center;
max-width: 100%;
padding: 0 0.35rem;
box-sizing: border-box;
word-break: break-word;
}
.preset-tile-row--run .preset-tile-actions {
display: none;
} }
/* Edit only beside the preset tile in edit mode. */ /* Edit only beside the preset tile in edit mode. */
@@ -1030,6 +1110,46 @@ body.preset-ui-run .edit-mode-only {
display: flex; display: flex;
} }
/* Stack sequence modals below groups / preset editor so in-modal actions stay visible */
#sequence-editor-modal.active,
#sequences-modal.active {
z-index: 1040;
}
#groups-modal.active,
#edit-group-modal.active,
#presets-modal.active {
z-index: 1050;
}
#preset-editor-modal.active {
z-index: 1060;
}
/* Child / overlay modals: must paint above preset editor (1060) and list modals (1050). */
#color-palette-modal.active,
#pattern-editor-modal.active,
#edit-device-modal.active,
#edit-zone-modal.active {
z-index: 1070;
}
/* Patterns library (often used next to presets); below preset editor, above sequences. */
#patterns-modal.active {
z-index: 1055;
}
/* Header / global dialogs */
#help-modal.active,
#audio-modal.active,
#settings-modal.active,
#led-tool-modal.active {
z-index: 1080;
}
/* JS-appended overlays (e.g. preset “From Palette”, add-preset-to-zone) — must sit above #preset-editor-modal */
.modal.modal-child-overlay.active {
z-index: 1080;
}
.modal-content { .modal-content {
background-color: #2e2e2e; background-color: #2e2e2e;
padding: 2rem; padding: 2rem;

338
src/static/zones.js
View File

@@ -1,6 +1,12 @@
// Zone management JavaScript // Zone management JavaScript
let currentZoneId = null; let currentZoneId = null;
let brightnessSendTimeout = null; let brightnessSendTimeout = null;
/**
* When true, the next `loadZoneContent` skips `sendZoneBrightness` (run/edit toggle: same zone, UI only).
*/
let suppressZoneContentDriverSideEffects = false;
/** First successful `loadZoneContent` after open: skip hardware brightness push (read-only hydration). */
let isFirstZoneContentHydration = true;
function clamp255(n) { function clamp255(n) {
const v = parseInt(n, 10); const v = parseInt(n, 10);
@@ -202,8 +208,160 @@ async function computeZoneTargets(zone) {
}; };
} }
function normalizeDeviceMac(raw) {
return String(raw || "")
.trim()
.toLowerCase()
.replace(/:/g, "")
.replace(/-/g, "");
}
/** Flat preset ids on a zone document (grid or flat). */
function tabPresetIdsInZoneDoc(zoneDoc) {
let ids = [];
if (Array.isArray(zoneDoc && zoneDoc.presets_flat)) {
ids = zoneDoc.presets_flat.slice();
} else if (Array.isArray(zoneDoc && zoneDoc.presets)) {
if (zoneDoc.presets.length && typeof zoneDoc.presets[0] === "string") {
ids = zoneDoc.presets.slice();
} else if (zoneDoc.presets.length && Array.isArray(zoneDoc.presets[0])) {
ids = zoneDoc.presets.flat();
}
}
return (ids || []).filter(Boolean);
}
/** Group ids for a preset: explicit ``preset_group_ids[presetId]`` when non-empty, else zone ``group_ids``. */
function effectiveGroupIdsForZonePreset(zoneDoc, presetId) {
const pid = String(presetId);
const raw = zoneDoc && zoneDoc.preset_group_ids && zoneDoc.preset_group_ids[pid];
if (Array.isArray(raw) && raw.length > 0) {
return raw.map((x) => String(x).trim()).filter((x) => x.length > 0);
}
return Array.isArray(zoneDoc && zoneDoc.group_ids)
? zoneDoc.group_ids.map((x) => String(x).trim()).filter((x) => x.length > 0)
: [];
}
/** Resolve device names + MACs from a list of group ids (same rules as zone group expansion). */
async function resolveTargetsFromGroupIds(groupIds) {
const dm = await fetchDevicesMap();
const gids = Array.isArray(groupIds)
? groupIds.map((x) => String(x).trim()).filter((x) => x.length > 0)
: [];
if (!gids.length) {
return { names: [], macs: [] };
}
const gm = await fetchGroupsMap();
const seen = new Set();
const names = [];
const macs = [];
for (const gid of gids) {
const g = gm[gid];
if (!g || !Array.isArray(g.devices)) continue;
for (const raw of g.devices) {
const m = normalizeDeviceMac(raw);
if (m.length !== 12) continue;
if (seen.has(m)) continue;
seen.add(m);
const d = dm[m];
const n = d && String((d.name || "").trim()) ? String(d.name).trim() : m;
names.push(n);
macs.push(m);
}
}
return { names, macs };
}
/** Device names for one zone preset slot (effective groups, or whole zone by name when no groups). */
async function resolveDeviceNamesForZonePreset(zoneDoc, presetId) {
const gids = effectiveGroupIdsForZonePreset(zoneDoc, presetId);
if (gids.length) {
const t = await resolveTargetsFromGroupIds(gids);
if (t.names.length) return t.names;
}
const zt = await computeZoneTargets(zoneDoc);
return Array.isArray(zt.names) ? zt.names.slice() : [];
}
/** Union of all devices targeted by any preset on the zone (for tab strip + sequence scope). */
async function computeZonePresetUnionTargets(zoneDoc) {
const ids = tabPresetIdsInZoneDoc(zoneDoc);
if (!ids.length) {
return await computeZoneTargets(zoneDoc);
}
const seen = new Set();
const names = [];
const macs = [];
for (const pid of ids) {
const gids = effectiveGroupIdsForZonePreset(zoneDoc, pid);
let t;
if (gids.length) {
t = await resolveTargetsFromGroupIds(gids);
} else {
t = await computeZoneTargets(zoneDoc);
}
const tn = Array.isArray(t.names) ? t.names : [];
const tm = Array.isArray(t.macs) ? t.macs : [];
for (let i = 0; i < tm.length; i++) {
const m = normalizeDeviceMac(tm[i]);
if (m.length !== 12 || seen.has(m)) continue;
seen.add(m);
macs.push(tm[i]);
names.push(tn[i] || m);
}
}
if (!names.length) {
return await computeZoneTargets(zoneDoc);
}
return { names, macs };
}
/**
* Device names for one sequence step. Empty stepGroupIds => all zone names.
* Otherwise: devices in those groups intersected with the zone's target MACs.
*/
async function resolveSequenceStepDeviceNames(zone, stepGroupIds) {
const zoneT = await computeZonePresetUnionTargets(zone);
const names = Array.isArray(zoneT.names) ? zoneT.names : [];
const macs = Array.isArray(zoneT.macs) ? zoneT.macs : [];
const gids = Array.isArray(stepGroupIds)
? stepGroupIds.map((x) => String(x).trim()).filter((x) => x.length > 0)
: [];
if (!gids.length) {
return names.slice();
}
const zoneMacSet = new Set(
macs.map((m) => normalizeDeviceMac(m)).filter((m) => m.length === 12),
);
const zoneNameByMac = new Map();
for (let i = 0; i < macs.length; i++) {
const m = normalizeDeviceMac(macs[i]);
if (m.length === 12 && !zoneNameByMac.has(m)) {
zoneNameByMac.set(m, names[i] || m);
}
}
const gm = await fetchGroupsMap();
const stepMacs = new Set();
for (const gid of gids) {
const g = gm[gid];
if (!g || !Array.isArray(g.devices)) continue;
for (const raw of g.devices) {
const m = normalizeDeviceMac(raw);
if (m.length !== 12 || !zoneMacSet.has(m)) continue;
stepMacs.add(m);
}
}
const out = [];
for (const m of stepMacs) {
const n = zoneNameByMac.get(m);
if (n) out.push(n);
}
return out;
}
async function resolveZoneDeviceMacsFromZoneData(zone) { async function resolveZoneDeviceMacsFromZoneData(zone) {
const t = await computeZoneTargets(zone); const t = await computeZonePresetUnionTargets(zone);
return t.macs; return t.macs;
} }
@@ -710,7 +868,7 @@ async function loadZoneContent(zoneId) {
// Render zone content (presets section) // Render zone content (presets section)
const tabName = zone.name || `Zone ${zoneId}`; const tabName = zone.name || `Zone ${zoneId}`;
const targets = await computeZoneTargets(zone); const targets = await computeZonePresetUnionTargets(zone);
const namesJsonAttr = encodeURIComponent(JSON.stringify(targets.names)); const namesJsonAttr = encodeURIComponent(JSON.stringify(targets.names));
const macsJsonAttr = encodeURIComponent(JSON.stringify(targets.macs)); const macsJsonAttr = encodeURIComponent(JSON.stringify(targets.macs));
const legacyOk = const legacyOk =
@@ -735,8 +893,14 @@ async function loadZoneContent(zoneId) {
? Math.max(0, Math.min(255, Math.round(zoneBrightness))) ? Math.max(0, Math.min(255, Math.round(zoneBrightness)))
: 255; : 255;
applyBrightnessSliders(normalizedBrightness); applyBrightnessSliders(normalizedBrightness);
// Apply this zone's saved brightness when switching zones. const initialHydration = isFirstZoneContentHydration;
sendZoneBrightness(zoneId, normalizedBrightness); if (isFirstZoneContentHydration) {
isFirstZoneContentHydration = false;
}
if (!suppressZoneContentDriverSideEffects && !initialHydration) {
// Apply this zone's saved brightness when switching zones (not initial page load or UI-only strip refresh).
sendZoneBrightness(zoneId, normalizedBrightness);
}
// Trigger presets loading if the function exists // Trigger presets loading if the function exists
if (typeof renderTabPresets === 'function') { if (typeof renderTabPresets === 'function') {
@@ -857,17 +1021,46 @@ async function sendProfilePresets() {
} }
function tabPresetIdsInOrder(tabData) { function tabPresetIdsInOrder(tabData) {
let ids = []; return tabPresetIdsInZoneDoc(tabData);
if (Array.isArray(tabData.presets_flat)) { }
ids = tabData.presets_flat.slice();
} else if (Array.isArray(tabData.presets)) { async function saveZonePresetGroupOverride(zoneId, presetId, useDefault, selectedGids) {
if (tabData.presets.length && typeof tabData.presets[0] === "string") { const tabRes = await fetch(`/zones/${zoneId}`, { headers: { Accept: "application/json" } });
ids = tabData.presets.slice(); if (!tabRes.ok) {
} else if (tabData.presets.length && Array.isArray(tabData.presets[0])) { alert("Failed to load zone.");
ids = tabData.presets.flat(); return false;
}
} }
return (ids || []).filter(Boolean); const tabData = await tabRes.json();
const pg =
tabData.preset_group_ids && typeof tabData.preset_group_ids === "object"
? { ...tabData.preset_group_ids }
: {};
if (useDefault) {
delete pg[String(presetId)];
} else {
const gids = Array.isArray(selectedGids)
? selectedGids.map((x) => String(x).trim()).filter((x) => x.length > 0)
: [];
if (!gids.length) {
alert("Select at least one group, or use zone default.");
return false;
}
pg[String(presetId)] = gids;
}
tabData.preset_group_ids = pg;
const up = await fetch(`/zones/${zoneId}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(tabData),
});
if (!up.ok) {
alert("Failed to save preset groups.");
return false;
}
if (typeof window.renderTabPresets === "function") {
await window.renderTabPresets(zoneId);
}
return true;
} }
// Presets already on the zone (remove) and presets available to add (select). // Presets already on the zone (remove) and presets available to add (select).
@@ -891,7 +1084,10 @@ async function refreshEditTabPresetsUi(zoneId) {
const inTabIds = tabPresetIdsInOrder(tabData); const inTabIds = tabPresetIdsInOrder(tabData);
const inTabSet = new Set(inTabIds.map((id) => String(id))); const inTabSet = new Set(inTabIds.map((id) => String(id)));
const presetsRes = await fetch("/presets", { headers: { Accept: "application/json" } }); const [presetsRes, groupsMapEdit] = await Promise.all([
fetch("/presets", { headers: { Accept: "application/json" } }),
fetchGroupsMap(),
]);
const allPresets = presetsRes.ok ? await presetsRes.json() : {}; const allPresets = presetsRes.ok ? await presetsRes.json() : {};
const makeRow = () => { const makeRow = () => {
@@ -911,8 +1107,12 @@ async function refreshEditTabPresetsUi(zoneId) {
for (const presetId of inTabIds) { for (const presetId of inTabIds) {
const preset = allPresets[presetId] || {}; const preset = allPresets[presetId] || {};
const name = preset.name || presetId; const name = preset.name || presetId;
const row = makeRow(); const block = document.createElement("div");
block.style.cssText =
"border:1px solid rgba(255,255,255,0.12);border-radius:6px;padding:0.5rem 0.65rem;margin-bottom:0.65rem;";
const top = makeRow();
const label = document.createElement("span"); const label = document.createElement("span");
label.style.fontWeight = "600";
label.textContent = name; label.textContent = name;
const removeBtn = document.createElement("button"); const removeBtn = document.createElement("button");
removeBtn.type = "button"; removeBtn.type = "button";
@@ -924,9 +1124,90 @@ async function refreshEditTabPresetsUi(zoneId) {
await window.removePresetFromTab(zoneId, presetId); await window.removePresetFromTab(zoneId, presetId);
await refreshEditTabPresetsUi(zoneId); await refreshEditTabPresetsUi(zoneId);
}); });
row.appendChild(label); top.appendChild(label);
row.appendChild(removeBtn); top.appendChild(removeBtn);
currentEl.appendChild(row); block.appendChild(top);
const hasExplicit =
tabData.preset_group_ids &&
typeof tabData.preset_group_ids === "object" &&
Array.isArray(tabData.preset_group_ids[presetId]) &&
tabData.preset_group_ids[presetId].length > 0;
const zoneG = Array.isArray(tabData.group_ids)
? tabData.group_ids.map((x) => String(x).trim()).filter((x) => x.length > 0)
: [];
const initialChecked = new Set(
hasExplicit
? tabData.preset_group_ids[presetId].map((x) => String(x).trim())
: zoneG,
);
const useRow = document.createElement("div");
useRow.className = "profiles-row";
useRow.style.marginTop = "0.35rem";
const useDefCb = document.createElement("input");
useDefCb.type = "checkbox";
useDefCb.id = `edit-zone-preset-use-def-${presetId}`;
useDefCb.checked = !hasExplicit;
const useDefLbl = document.createElement("label");
useDefLbl.htmlFor = useDefCb.id;
useDefLbl.style.marginLeft = "0.25rem";
useDefLbl.style.fontSize = "0.9em";
useDefLbl.textContent = "Use zone default groups";
useRow.appendChild(useDefCb);
useRow.appendChild(useDefLbl);
block.appendChild(useRow);
const boxHost = document.createElement("div");
boxHost.style.cssText = `display:${hasExplicit ? "flex" : "none"};flex-wrap:wrap;gap:0.4rem;margin-top:0.35rem;align-items:center;`;
const entries = Object.keys(groupsMapEdit || {})
.sort((a, b) => a.localeCompare(b))
.map((gid) => {
const g = groupsMapEdit[gid];
const gn = g && g.name ? String(g.name).trim() : "";
return { gid, label: gn ? `${gn} (${gid})` : `Group ${gid}` };
});
entries.forEach(({ gid, label: glabel }) => {
const id = `zpg-${zoneId}-${presetId}-${gid}`;
const lbl = document.createElement("label");
lbl.style.cssText = "display:inline-flex;align-items:center;gap:0.2rem;font-size:0.85em;";
const cb = document.createElement("input");
cb.type = "checkbox";
cb.className = "edit-zone-preset-group-cb";
cb.value = gid;
cb.id = id;
cb.checked = initialChecked.has(String(gid));
const sp = document.createElement("span");
sp.textContent = glabel;
lbl.appendChild(cb);
lbl.appendChild(sp);
boxHost.appendChild(lbl);
});
block.appendChild(boxHost);
useDefCb.addEventListener("change", () => {
boxHost.style.display = useDefCb.checked ? "none" : "flex";
});
const applyBtn = document.createElement("button");
applyBtn.type = "button";
applyBtn.className = "btn btn-primary btn-small";
applyBtn.style.marginTop = "0.4rem";
applyBtn.textContent = "Apply preset groups";
applyBtn.addEventListener("click", async () => {
const useD = !!useDefCb.checked;
const sel = [];
if (!useD) {
boxHost.querySelectorAll(".edit-zone-preset-group-cb:checked").forEach((c) => {
if (c.value) sel.push(String(c.value));
});
}
const ok = await saveZonePresetGroupOverride(zoneId, presetId, useD, sel);
if (ok) await refreshEditTabPresetsUi(zoneId);
});
block.appendChild(applyBtn);
currentEl.appendChild(block);
} }
} }
@@ -1016,6 +1297,9 @@ async function openEditZoneModal(zoneId, zone) {
if (modal) modal.classList.add("active"); if (modal) modal.classList.add("active");
await refreshEditTabPresetsUi(zoneId); await refreshEditTabPresetsUi(zoneId);
if (typeof window.refreshEditTabSequencesUi === "function") {
await window.refreshEditTabSequencesUi(zoneId);
}
} }
// Update an existing zone // Update an existing zone
@@ -1220,9 +1504,14 @@ document.addEventListener('DOMContentLoaded', () => {
// When run/edit mode toggles, refresh tabs UI so edit actions show/hide immediately. // When run/edit mode toggles, refresh tabs UI so edit actions show/hide immediately.
document.querySelectorAll('.ui-mode-toggle').forEach((btn) => { document.querySelectorAll('.ui-mode-toggle').forEach((btn) => {
btn.addEventListener('click', async () => { btn.addEventListener('click', async () => {
await loadZones(); suppressZoneContentDriverSideEffects = true;
if (zonesModal && zonesModal.classList.contains("active")) { try {
await loadZonesModal(); await loadZones();
if (zonesModal && zonesModal.classList.contains("active")) {
await loadZonesModal();
}
} finally {
suppressZoneContentDriverSideEffects = false;
} }
}); });
}); });
@@ -1240,6 +1529,11 @@ window.zonesManager = {
resolveZoneDeviceMacsFromZoneData, resolveZoneDeviceMacsFromZoneData,
resolveTabDeviceMacs: resolveZoneDeviceMacs, resolveTabDeviceMacs: resolveZoneDeviceMacs,
getCurrentZoneId: () => currentZoneId, getCurrentZoneId: () => currentZoneId,
computeZoneTargets,
computeZonePresetUnionTargets,
effectiveGroupIdsForZonePreset,
resolveDeviceNamesForZonePreset,
resolveSequenceStepDeviceNames,
}; };
window.tabsManager = window.zonesManager; window.tabsManager = window.zonesManager;
window.tabsManager.getCurrentTabId = () => currentZoneId; window.tabsManager.getCurrentTabId = () => currentZoneId;

87
src/templates/index.html
View File

@@ -16,9 +16,11 @@
</div> </div>
<div class="header-end"> <div class="header-end">
<div id="audio-top-indicator" class="audio-top-indicator" title="Live audio BPM"> <div id="audio-top-indicator" class="audio-top-indicator" title="Live audio BPM">
<span class="audio-top-indicator-label">BPM</span> <div class="audio-top-indicator-main">
<span id="audio-top-bpm-value" class="audio-top-indicator-value">--</span> <span class="audio-top-indicator-label">BPM</span>
<span id="audio-top-beat-count" class="audio-top-indicator-subvalue">#0</span> <span id="audio-top-bpm-value" class="audio-top-indicator-value">--</span>
<span id="audio-top-beat-readout" class="audio-top-beat-readout" aria-live="polite"></span>
</div>
</div> </div>
<div class="header-actions"> <div class="header-actions">
<div class="header-brightness-control"> <div class="header-brightness-control">
@@ -30,6 +32,7 @@
<button class="btn btn-secondary edit-mode-only" id="groups-btn">Groups</button> <button class="btn btn-secondary edit-mode-only" id="groups-btn">Groups</button>
<button class="btn btn-secondary edit-mode-only" id="zones-btn">Zones</button> <button class="btn btn-secondary edit-mode-only" id="zones-btn">Zones</button>
<button class="btn btn-secondary edit-mode-only" id="presets-btn">Presets</button> <button class="btn btn-secondary edit-mode-only" id="presets-btn">Presets</button>
<button class="btn btn-secondary edit-mode-only" id="sequences-btn">Sequences</button>
<button class="btn btn-secondary edit-mode-only" id="patterns-btn">Patterns</button> <button class="btn btn-secondary edit-mode-only" id="patterns-btn">Patterns</button>
<button class="btn btn-secondary edit-mode-only" id="color-palette-btn">Colour Palette</button> <button class="btn btn-secondary edit-mode-only" id="color-palette-btn">Colour Palette</button>
<button class="btn btn-secondary edit-mode-only" id="send-profile-presets-btn">Send Presets</button> <button class="btn btn-secondary edit-mode-only" id="send-profile-presets-btn">Send Presets</button>
@@ -51,6 +54,7 @@
<button type="button" class="edit-mode-only" data-target="groups-btn">Groups</button> <button type="button" class="edit-mode-only" data-target="groups-btn">Groups</button>
<button type="button" class="edit-mode-only" data-target="zones-btn">Tabs</button> <button type="button" class="edit-mode-only" data-target="zones-btn">Tabs</button>
<button type="button" class="edit-mode-only" data-target="presets-btn">Presets</button> <button type="button" class="edit-mode-only" data-target="presets-btn">Presets</button>
<button type="button" class="edit-mode-only" data-target="sequences-btn">Sequences</button>
<button type="button" class="edit-mode-only" data-target="patterns-btn">Patterns</button> <button type="button" class="edit-mode-only" data-target="patterns-btn">Patterns</button>
<button type="button" class="edit-mode-only" data-target="color-palette-btn">Colour Palette</button> <button type="button" class="edit-mode-only" data-target="color-palette-btn">Colour Palette</button>
<button type="button" class="edit-mode-only" data-target="send-profile-presets-btn">Send Presets</button> <button type="button" class="edit-mode-only" data-target="send-profile-presets-btn">Send Presets</button>
@@ -104,6 +108,10 @@
<div id="edit-zone-presets-current" class="profiles-list edit-zone-presets-scroll"></div> <div id="edit-zone-presets-current" class="profiles-list edit-zone-presets-scroll"></div>
<label class="zone-presets-section-label">Add presets to this zone</label> <label class="zone-presets-section-label">Add presets to this zone</label>
<div id="edit-zone-presets-list" class="profiles-list edit-zone-presets-scroll"></div> <div id="edit-zone-presets-list" class="profiles-list edit-zone-presets-scroll"></div>
<label class="zone-presets-section-label">Sequences on this zone</label>
<div id="edit-zone-sequences-current" class="profiles-list edit-zone-presets-scroll"></div>
<label class="zone-presets-section-label">Add a sequence to this zone</label>
<div id="edit-zone-sequences-list" class="profiles-list edit-zone-presets-scroll"></div>
</form> </form>
</div> </div>
</div> </div>
@@ -169,6 +177,10 @@
<input type="text" id="edit-group-name" required autocomplete="off"> <input type="text" id="edit-group-name" required autocomplete="off">
<label class="zone-devices-label">Devices in this group</label> <label class="zone-devices-label">Devices in this group</label>
<div id="edit-group-devices-editor" class="zone-devices-editor"></div> <div id="edit-group-devices-editor" class="zone-devices-editor"></div>
<div class="profiles-actions" style="margin-top: 0.5rem;">
<button type="button" class="btn btn-secondary btn-small" id="edit-group-identify-btn">Identify devices in group</button>
</div>
<p class="muted-text" style="margin-top:0.25rem;">Runs identify on every driver in the group at the same time so they blink together.</p>
<label for="edit-group-output-brightness" style="margin-top:0.75rem;display:block;">Group output brightness (0–255)</label> <label for="edit-group-output-brightness" style="margin-top:0.75rem;display:block;">Group output brightness (0–255)</label>
<div class="profiles-actions" style="align-items: center; gap: 0.75rem;"> <div class="profiles-actions" style="align-items: center; gap: 0.75rem;">
<input type="range" id="edit-group-output-brightness" min="0" max="255" value="255" style="flex:1;"> <input type="range" id="edit-group-output-brightness" min="0" max="255" value="255" style="flex:1;">
@@ -280,6 +292,62 @@
</div> </div>
</div> </div>
<!-- Sequences Modal -->
<div id="sequences-modal" class="modal">
<div class="modal-content">
<h2>Sequences</h2>
<div class="modal-actions">
<button type="button" class="btn btn-primary" id="sequence-add-btn">Add</button>
<button type="button" class="btn btn-secondary" id="sequences-open-presets-btn">Presets</button>
</div>
<div id="sequences-list" class="profiles-list"></div>
<div class="modal-actions">
<button type="button" class="btn btn-secondary" id="sequences-close-btn">Close</button>
</div>
</div>
</div>
<!-- Sequence Editor Modal -->
<div id="sequence-editor-modal" class="modal">
<div class="modal-content">
<h2>Sequence</h2>
<div class="preset-editor-field">
<label for="sequence-editor-name">Name</label>
<input type="text" id="sequence-editor-name" placeholder="Sequence name" style="width:100%;max-width:24rem;">
</div>
<div class="preset-editor-field">
<label for="sequence-editor-advance-mode">Advance</label>
<select id="sequence-editor-advance-mode" style="max-width:16rem;">
<option value="time">Time (ms between steps)</option>
<option value="beats">Audio beats (requires Audio detector)</option>
</select>
</div>
<div class="preset-editor-field" id="sequence-editor-duration-wrap">
<label for="sequence-editor-duration">Step duration (ms), all lanes together</label>
<div style="display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap;">
<input type="number" id="sequence-editor-duration" min="200" max="600000" value="3000" style="width:8rem;">
<span id="sequence-editor-time-bpm-hint" class="muted-text" style="font-size:0.9em;"></span>
</div>
</div>
<div class="preset-editor-field" id="sequence-editor-transition-wrap">
<label for="sequence-editor-transition">Pause before next step (ms)</label>
<input type="number" id="sequence-editor-transition" min="0" max="60000" value="500" style="width:8rem;">
</div>
<div id="sequence-editor-beats-panel" style="display:none;margin:0 0 0.75rem 0;">
<p id="sequence-editor-bpm-live" class="muted-text" style="font-size:0.85em;margin:0;">—</p>
</div>
<div id="sequence-editor-lanes"></div>
<div class="modal-actions" style="margin-top:0.75rem;">
<button type="button" class="btn btn-secondary btn-small" id="sequence-editor-add-lane-btn">Add lane</button>
</div>
<div class="modal-actions preset-editor-modal-actions">
<button type="button" class="btn btn-danger" id="sequence-editor-delete-btn">Delete</button>
<button type="button" class="btn btn-primary" id="sequence-editor-save-btn">Save</button>
<button type="button" class="btn btn-secondary" id="sequence-editor-close-btn">Close</button>
</div>
</div>
</div>
<!-- Preset Editor Modal --> <!-- Preset Editor Modal -->
<div id="preset-editor-modal" class="modal"> <div id="preset-editor-modal" class="modal">
<div class="modal-content"> <div class="modal-content">
@@ -321,7 +389,7 @@
<p id="preset-manual-mode-hint" class="muted-text" style="display: none; margin-top: 0.35rem; font-size: 0.85em;"></p> <p id="preset-manual-mode-hint" class="muted-text" style="display: none; margin-top: 0.35rem; font-size: 0.85em;"></p>
<div id="preset-manual-beat-n-wrap" class="preset-editor-field" style="display: none; margin-top: 0.5rem;"> <div id="preset-manual-beat-n-wrap" class="preset-editor-field" style="display: none; margin-top: 0.5rem;">
<label for="preset-manual-beat-n-input">Audio beat: every</label> <label for="preset-manual-beat-n-input">Audio beat: every</label>
<input type="number" id="preset-manual-beat-n-input" min="1" max="64" value="1" style="width: 4rem;" title="Controller only; not sent to pattern logic"> <input type="number" id="preset-manual-beat-n-input" min="1" max="64" value="1" style="width: 4rem;" title="Controller only; not sent to pattern logic" autocomplete="off">
<span class="muted-text" style="font-size: 0.85em;">beats (this app only)</span> <span class="muted-text" style="font-size: 0.85em;">beats (this app only)</span>
</div> </div>
</div> </div>
@@ -533,7 +601,10 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Current BPM</label> <label>Current BPM</label>
<div id="audio-bpm-value" class="audio-bpm-readout">--</div> <div class="audio-bpm-row">
<div id="audio-bpm-value" class="audio-bpm-readout">--</div>
<div id="audio-modal-beat-readout" class="audio-modal-beat-readout muted-text" aria-live="polite"></div>
</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Detected hit type</label> <label>Detected hit type</label>
@@ -543,6 +614,11 @@
<label>Flash on beat</label> <label>Flash on beat</label>
<div id="audio-beat-flash" class="audio-beat-flash" aria-hidden="true"></div> <div id="audio-beat-flash" class="audio-beat-flash" aria-hidden="true"></div>
</div> </div>
<div class="form-group">
<label for="audio-beat-phase-ms">Beat phase shift (ms)</label>
<input type="number" id="audio-beat-phase-ms" min="0" max="500" step="5" value="0" style="width:6rem;">
<small class="muted-text">Delays beat flashes and sequenced beats so they line up with what you hear (saved in this browser).</small>
</div>
<div class="modal-actions"> <div class="modal-actions">
<button type="button" class="btn btn-primary" id="audio-start-btn">Start</button> <button type="button" class="btn btn-primary" id="audio-start-btn">Start</button>
<button type="button" class="btn btn-secondary" id="audio-stop-btn">Stop</button> <button type="button" class="btn btn-secondary" id="audio-stop-btn">Stop</button>
@@ -709,6 +785,7 @@
<script src="/static/zone_palette.js"></script> <script src="/static/zone_palette.js"></script>
<script src="/static/patterns.js"></script> <script src="/static/patterns.js"></script>
<script src="/static/presets.js"></script> <script src="/static/presets.js"></script>
<script src="/static/sequences.js"></script>
<script src="/static/devices.js"></script> <script src="/static/devices.js"></script>
<script src="/static/audio.js"></script> <script src="/static/audio.js"></script>
</body> </body>

6
src/util/audio_detector.py
View File

@@ -161,11 +161,11 @@ class AudioBeatDetector:
self._status["beat_type_confidence"] = float(beat_type_confidence or 0.0) self._status["beat_type_confidence"] = float(beat_type_confidence or 0.0)
self._status["beat_seq"] = int(self._status.get("beat_seq", 0)) + 1 self._status["beat_seq"] = int(self._status.get("beat_seq", 0)) + 1
try: try:
from util.beat_driver_route import notify_beat_detected from util import sequence_playback as seq_pb
notify_beat_detected() seq_pb.push_thread_beat()
except Exception as e: except Exception as e:
print(f"[audio] beat driver route: {e}") print(f"[audio] sequence beat queue: {e}")
def _run_loop(self, device): def _run_loop(self, device):
try: try:

52
src/util/audio_run_persist.py Normal file
View File

@@ -0,0 +1,52 @@
"""Persist whether the audio beat detector should be running (survives process restarts)."""
from __future__ import annotations
import json
import os
from typing import Any, Dict, Optional
def _db_path() -> str:
base = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
return os.path.join(base, "db", "audio_run.json")
def coerce_audio_device(device: Any) -> Optional[Any]:
"""Match ``/api/audio/start`` body coercion (None = host default input)."""
if device in ("", None):
return None
try:
return int(device)
except (TypeError, ValueError):
return device
def read_audio_run_state() -> Dict[str, Any]:
path = _db_path()
try:
with open(path, "r", encoding="utf-8") as f:
raw = json.load(f)
except (OSError, json.JSONDecodeError, TypeError):
return {"enabled": False, "device": None}
if not isinstance(raw, dict):
return {"enabled": False, "device": None}
enabled = bool(raw.get("enabled"))
dev = raw.get("device", None)
return {"enabled": enabled, "device": dev}
def write_audio_run_state(*, enabled: bool, device: Any = None) -> None:
"""Write run intent. When ``enabled`` is false, keep ``device`` from the previous file for next start."""
path = _db_path()
prev = read_audio_run_state()
if enabled:
data = {"enabled": True, "device": device}
else:
data = {"enabled": False, "device": prev.get("device")}
try:
os.makedirs(os.path.dirname(path), exist_ok=True)
with open(path, "w", encoding="utf-8") as f:
json.dump(data, f, indent=2)
except OSError as e:
print(f"[audio_run_persist] save failed: {e!r}")

BIN
tests/audio/beat_test_120bpm.wav Normal file
View File

Binary file not shown.

43
tests/test_browser.py
View File

@@ -750,6 +750,46 @@ def test_presets_ui(browser: BrowserTest) -> bool:
print(f"\nBrowser presets UI tests: {passed}/{total} passed") print(f"\nBrowser presets UI tests: {passed}/{total} passed")
return passed == total return passed == total
def test_preset_editor_palette_child_modal_zindex(browser: BrowserTest) -> bool:
"""
Regression: preset editor 'From Palette' builds a body-appended .modal without an id.
It must use .modal-child-overlay so z-index clears #preset-editor-modal (1060).
"""
print("\n=== Testing preset child overlay z-index ===")
if not browser.setup():
return False
try:
if not browser.navigate("/"):
return False
z_editor, z_child = browser.driver.execute_script(
"""
const ed = document.getElementById('preset-editor-modal');
if (!ed) { return [0, 0]; }
ed.classList.add('active');
const m = document.createElement('div');
m.className = 'modal active modal-child-overlay';
m.innerHTML = '<div class="modal-content"><p>stack probe</p></div>';
document.body.appendChild(m);
const ze = parseInt(getComputedStyle(ed).zIndex, 10) || 0;
const zc = parseInt(getComputedStyle(m).zIndex, 10) || 0;
m.remove();
ed.classList.remove('active');
return [ze, zc];
"""
)
print(f" preset-editor z-index={z_editor} modal-child-overlay z-index={z_child}")
if z_child > z_editor >= 1000:
print("✓ Child overlay stacks above preset editor")
return True
print("✗ Child overlay did not stack above preset editor")
return False
except Exception as e:
print(f"✗ z-index probe failed: {e}")
return False
finally:
browser.teardown()
def test_color_palette_ui(browser: BrowserTest) -> bool: def test_color_palette_ui(browser: BrowserTest) -> bool:
"""Test color palette UI in browser.""" """Test color palette UI in browser."""
print("\n=== Testing Color Palette UI in Browser ===") print("\n=== Testing Color Palette UI in Browser ===")
@@ -1105,6 +1145,9 @@ def main():
results.append(("Zones UI", test_zones_ui(browser))) results.append(("Zones UI", test_zones_ui(browser)))
results.append(("Profiles UI", test_profiles_ui(browser))) results.append(("Profiles UI", test_profiles_ui(browser)))
results.append(("Presets UI", test_presets_ui(browser))) results.append(("Presets UI", test_presets_ui(browser)))
results.append(
("Preset palette child z-index", test_preset_editor_palette_child_modal_zindex(browser))
)
results.append(("Color Palette UI", test_color_palette_ui(browser))) results.append(("Color Palette UI", test_color_palette_ui(browser)))
results.append(("Preset Drag and Drop", test_preset_drag_and_drop(browser))) results.append(("Preset Drag and Drop", test_preset_drag_and_drop(browser)))

221
tools/generate_beat_test_track.py Normal file
View File

@@ -0,0 +1,221 @@
#!/usr/bin/env python3
"""
Metronome-style mono click track for testing the audio beat detector.
Without ``-o``: streams S16LE PCM to ``aplay`` (stdin) until you press Ctrl+C.
With ``-o``: writes a WAV file of fixed length and exits.
Examples:
python3 tools/generate_beat_test_track.py
python3 tools/generate_beat_test_track.py --bpm 90
python3 tools/generate_beat_test_track.py -o tests/audio/beat_test_120bpm.wav --duration 30
"""
from __future__ import annotations
import argparse
import math
import shutil
import struct
import subprocess
import wave
from pathlib import Path
def _parse_args() -> argparse.Namespace:
p = argparse.ArgumentParser(description=__doc__)
p.add_argument(
"-o",
"--output",
type=Path,
default=None,
help="If set, write this WAV file and exit (no live playback)",
)
p.add_argument("--bpm", type=float, default=120.0, help="Beats per minute (default: 120)")
p.add_argument(
"--duration",
type=float,
default=30.0,
help="With -o only: click section length in seconds after intro (default: 30)",
)
p.add_argument(
"--intro-silence",
type=float,
default=0.5,
help="Leading silence in seconds (default: 0.5)",
)
p.add_argument("--sample-rate", type=int, default=44100, help="Sample rate Hz (default: 44100)")
p.add_argument(
"--click-ms",
type=float,
default=18.0,
help="Approximate click length in ms (default: 18)",
)
p.add_argument(
"--freq",
type=float,
default=1000.0,
help="Click sine frequency Hz (default: 1000)",
)
return p.parse_args()
def _click_int16_samples(sr: int, click_ms: float, freq: float) -> tuple[list[int], int]:
"""One click; returns samples and click_len (same as len(samples))."""
click_len = max(1, int(sr * max(4.0, click_ms) / 1000.0))
freq_clamped = max(200.0, min(4000.0, float(freq)))
floats: list[float] = []
for i in range(click_len):
t = i / sr
env = math.sin(0.5 * math.pi * (i + 1) / click_len) ** 2
floats.append(env * math.sin(2.0 * math.pi * freq_clamped * t))
peak = max(abs(x) for x in floats) or 1.0
scale = 0.92 / peak
out: list[int] = []
for x in floats:
v = int(round(max(-1.0, min(1.0, x * scale)) * 32767.0))
out.append(max(-32767, min(32767, v)))
return out, click_len
def _render_scaled_samples(
sr: int,
bpm: float,
intro: float,
dur: float,
click_ms: float,
freq: float,
) -> tuple[list[float], int, float, int]:
beat_sec = 60.0 / bpm
click_len = max(1, int(sr * max(4.0, click_ms) / 1000.0))
freq_clamped = max(200.0, min(4000.0, float(freq)))
total_sec = intro + dur
n_samples = int(sr * total_sec)
intro_samples = int(sr * intro)
samples = [0.0] * n_samples
beat_samples = int(round(sr * beat_sec))
if beat_samples < click_len + 1:
raise SystemExit("BPM too high for this sample rate / click length")
beat_idx = 0
while True:
start = intro_samples + beat_idx * beat_samples
if start >= n_samples:
break
for i in range(click_len):
pos = start + i
if pos >= n_samples:
break
t = i / sr
env = math.sin(0.5 * math.pi * (i + 1) / click_len) ** 2
s = env * math.sin(2.0 * math.pi * freq_clamped * t)
samples[pos] += s
beat_idx += 1
peak = max(abs(x) for x in samples) or 1.0
scale = 0.92 / peak
for i in range(n_samples):
samples[i] = max(-1.0, min(1.0, samples[i] * scale))
return samples, sr, total_sec, beat_idx
def write_wav_mono16(path: Path, samples: list[float], sr: int) -> None:
path.parent.mkdir(parents=True, exist_ok=True)
with wave.open(str(path), "w") as w:
w.setnchannels(1)
w.setsampwidth(2)
w.setframerate(sr)
for x in samples:
v = int(round(x * 32767.0))
w.writeframes(struct.pack("<h", v))
def _stream_aplay_until_interrupt(
sr: int,
bpm: float,
intro_silence: float,
click_ms: float,
freq: float,
) -> None:
aplay = shutil.which("aplay")
if not aplay:
raise SystemExit("aplay not found; install alsa-utils, or use -o to write a WAV file.")
click_samps, click_len = _click_int16_samples(sr, click_ms, freq)
beat_samples = int(round(sr * 60.0 / bpm))
if beat_samples < click_len + 1:
raise SystemExit("BPM too high for this sample rate / click length")
silence_samples = beat_samples - click_len
beat_chunk = struct.pack("<" + "h" * len(click_samps), *click_samps) + (
b"\x00\x00" * silence_samples
)
intro_samples = int(sr * max(0.0, float(intro_silence)))
intro_chunk = b"\x00\x00" * intro_samples
argv = [aplay, "-q", "-t", "raw", "-f", "S16_LE", "-c", "1", "-r", str(sr)]
proc = subprocess.Popen(argv, stdin=subprocess.PIPE)
if proc.stdin is None:
raise SystemExit("aplay did not open stdin")
print(
f"Streaming {bpm} BPM, {sr} Hz mono -> aplay (raw). Ctrl+C to stop.",
flush=True,
)
try:
if intro_chunk:
proc.stdin.write(intro_chunk)
beats_written = 0
# Write several beats per syscall to reduce overhead
batch = 8
multi = beat_chunk * batch
while True:
proc.stdin.write(multi)
beats_written += batch
if beats_written % 256 == 0:
proc.stdin.flush()
except BrokenPipeError:
print("aplay exited.", flush=True)
except KeyboardInterrupt:
print("\nStopped.", flush=True)
finally:
try:
proc.stdin.close()
except BrokenPipeError:
pass
proc.wait(timeout=3)
def main() -> None:
args = _parse_args()
sr = max(8000, min(96000, int(args.sample_rate)))
bpm = max(40.0, min(240.0, float(args.bpm)))
if args.output is not None:
intro = max(0.0, float(args.intro_silence))
dur = max(1.0, float(args.duration))
samples, sr_u, total_sec, beats = _render_scaled_samples(
sr, bpm, intro, dur, float(args.click_ms), float(args.freq)
)
write_wav_mono16(args.output, samples, sr_u)
print(
f"Wrote {args.output} ({len(samples)} samples, {total_sec:.1f}s, {sr_u} Hz mono): "
f"{bpm} BPM, ~{beats} beats"
)
return
_stream_aplay_until_interrupt(
sr,
bpm,
float(args.intro_silence),
float(args.click_ms),
float(args.freq),
)
if __name__ == "__main__":
main()