From 105c817021a84bfacffa1553d6bcd536808b9f23 Mon Sep 17 00:00:00 2001 From: skal Date: Wed, 18 Feb 2026 06:59:32 +0100 Subject: feat(mq_editor): UI improvements and partial detection enhancements - Right panel with synthesis checkboxes (integrate phase, disable jitter, disable spread) - Style file chooser as button; show filename next to page title - Second backward pass in extractPartials to recover partial onsets - Cursor line drawn on overlay canvas (no full redraw on mousemove) handoff(Claude): UI + algo improvements complete --- tools/mq_editor/index.html | 100 ++++++++++++++++++++++++++++++++++++--------- 1 file changed, 80 insertions(+), 20 deletions(-) (limited to 'tools/mq_editor/index.html') diff --git a/tools/mq_editor/index.html b/tools/mq_editor/index.html index b51a988..345d2b9 100644 --- a/tools/mq_editor/index.html +++ b/tools/mq_editor/index.html @@ -10,6 +10,18 @@ background: #1a1a1a; color: #ddd; } + .page-title { + display: flex; + align-items: baseline; + gap: 16px; + margin-bottom: 10px; + } + .page-title h2 { margin: 0; } + #fileLabel { + font-size: 13px; + color: #8af; + opacity: 0.8; + } .toolbar { margin-bottom: 10px; padding: 10px; @@ -27,7 +39,7 @@ } button:hover { background: #4a4a4a; } button:disabled { opacity: 0.5; cursor: not-allowed; } - input[type="file"] { margin-right: 16px; } + input[type="file"] { display: none; } .params { display: inline-block; margin-left: 20px; @@ -43,12 +55,45 @@ padding: 4px; border-radius: 3px; } + .main-area { + display: flex; + align-items: flex-start; + gap: 10px; + margin-top: 10px; + } #canvas { border: 1px solid #555; background: #000; cursor: crosshair; display: block; - margin-top: 10px; + flex-shrink: 0; + } + .right-panel { + background: #2a2a2a; + border: 1px solid #555; + border-radius: 4px; + padding: 12px; + min-width: 160px; + display: flex; + flex-direction: column; + gap: 10px; + } + .right-panel .panel-title { + font-size: 11px; + color: #888; + text-transform: uppercase; + letter-spacing: 1px; + border-bottom: 1px solid #444; + padding-bottom: 6px; + margin-bottom: 2px; + } + .right-panel label { + display: flex; + align-items: center; + gap: 6px; + margin: 0; + cursor: pointer; + font-size: 13px; } #status { margin-top: 10px; @@ -57,22 +102,20 @@ border-radius: 4px; min-height: 20px; } - .info { - color: #4af; - } - .warn { - color: #fa4; - } - .error { - color: #f44; - } + .info { color: #4af; } + .warn { color: #fa4; } + .error { color: #f44; } -

MQ Spectral Editor

+
+

MQ Spectral Editor

+ +
+ @@ -85,20 +128,28 @@ - - 100%
-
- +
+
+ + - -
- + +
+ +
+
+ +
+
Synthesis
+ + +
@@ -119,11 +170,13 @@ let stftCache = null; const wavFile = document.getElementById('wavFile'); + const chooseFileBtn = document.getElementById('chooseFileBtn'); const extractBtn = document.getElementById('extractBtn'); const playBtn = document.getElementById('playBtn'); const stopBtn = document.getElementById('stopBtn'); const canvas = document.getElementById('canvas'); const status = document.getElementById('status'); + const fileLabel = document.getElementById('fileLabel'); const hopSize = document.getElementById('hopSize'); const threshold = document.getElementById('threshold'); @@ -162,11 +215,15 @@ }, 10); } + // File chooser button + chooseFileBtn.addEventListener('click', () => wavFile.click()); + // Load WAV file wavFile.addEventListener('change', async (e) => { const file = e.target.files[0]; if (!file) return; + fileLabel.textContent = file.name; setStatus('Loading WAV...', 'info'); try { const arrayBuffer = await file.arrayBuffer(); @@ -194,6 +251,7 @@ + 0.5 * Math.sin(2 * Math.PI * 660 * i / SR); } + fileLabel.textContent = 'test-440+660hz.wav'; loadAudioBuffer(buf, 'Test WAV: 440Hz + 660Hz (2s, 32kHz)'); }); @@ -339,7 +397,9 @@ const partialsToUse = extractedPartials.slice(0, keepCount); setStatus(`Synthesizing ${keepCount}/${extractedPartials.length} partials (${keepPct.value}%)...`, 'info'); const integratePhase = document.getElementById('integratePhase').checked; - const pcm = synthesizeMQ(partialsToUse, sampleRate, duration, integratePhase); + const disableJitter = document.getElementById('disableJitter').checked; + const disableSpread = document.getElementById('disableSpread').checked; + const pcm = synthesizeMQ(partialsToUse, sampleRate, duration, integratePhase, {disableJitter, disableSpread}); // Build STFT cache for synth signal (for FFT comparison via key 'a') if (viewer) { -- cgit v1.2.3