From 9416e4ed202d66b20649fb445b6a352f804efd8c Mon Sep 17 00:00:00 2001
From: skal <pascal.massimino@gmail.com>
Date: Tue, 17 Feb 2026 19:21:28 +0100
Subject: fix(mq_editor): Improve spectrogram visualization and navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fixed FFT to 1024 bins for 31.25 Hz resolution (better bass analysis)
- Refactored view state to zoom_factor + t_center for cleaner pan/zoom
- Mousewheel scrolls horizontally, shift+mousewheel zooms (respects deltaX/Y)
- Spectrogram bins now fill complete time/freq buckets at all zoom levels
- Extended dB range to -80→0 dB (80 dB) for better high-amplitude granularity
- Added real-time intensity tooltip in dB
- 50% alpha on spectrogram to reduce clutter over partial trajectories

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 tools/mq_editor/index.html | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

(limited to 'tools/mq_editor/index.html')

diff --git a/tools/mq_editor/index.html b/tools/mq_editor/index.html
index d44f19b..c1d7bc9 100644
--- a/tools/mq_editor/index.html
+++ b/tools/mq_editor/index.html
@@ -76,15 +76,8 @@
     <button id="extractBtn" disabled>Extract Partials</button>
 
     <div class="params">
-      <label>FFT Size:</label>
-      <select id="fftSize">
-        <option value="1024">1024</option>
-        <option value="2048" selected>2048</option>
-        <option value="4096">4096</option>
-      </select>
-
       <label>Hop:</label>
-      <input type="number" id="hopSize" value="512" min="64" max="2048" step="64">
+      <input type="number" id="hopSize" value="256" min="64" max="1024" step="64">
 
       <label>Threshold (dB):</label>
       <input type="number" id="threshold" value="-60" min="-80" max="-20" step="5">
@@ -109,9 +102,9 @@
     const canvas = document.getElementById('canvas');
     const status = document.getElementById('status');
 
-    const fftSize = document.getElementById('fftSize');
     const hopSize = document.getElementById('hopSize');
     const threshold = document.getElementById('threshold');
+    const fftSize = 1024; // Fixed
 
     // Load WAV file
     wavFile.addEventListener('change', async (e) => {
@@ -145,7 +138,7 @@
       setTimeout(() => {
         try {
           const params = {
-            fftSize: parseInt(fftSize.value),
+            fftSize: fftSize,
             hopSize: parseInt(hopSize.value),
             threshold: parseFloat(threshold.value),
             sampleRate: audioBuffer.sampleRate
-- 
cgit v1.2.3