From e94ff513689c6477e9c756f58370e4f3490dd675 Mon Sep 17 00:00:00 2001
From: skal <pascal.massimino@gmail.com>
Date: Sun, 15 Feb 2026 09:16:06 +0100
Subject: feat(spectral-editor): add waveform intensity viewer for sample
 offset
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add interactive waveform timeline for determining SAMPLE OFFSET values:

Features:
- RMS envelope visualization (10ms windows, normalized)
- Uses synthesized PCM from spectrogram (not original WAV)
- Draggable offset marker with numeric input (0.001s precision)
- Snap-to-onset: auto-detects first transient (threshold 0.01)
- Copy button: generates `SAMPLE <name> OFFSET <seconds>` command
- Top panel (120px) with controls, z-indexed above spectrogram

Design rationale:
- Offset measured on procedural output (matches runtime behavior)
- Interactive workflow: load .spec → inspect → set offset → copy
- Supports tracker compile-time SAMPLE OFFSET feature

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 tools/spectral_editor/index.html | 29 ++++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

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

diff --git a/tools/spectral_editor/index.html b/tools/spectral_editor/index.html
index f6c1def..75658ae 100644
--- a/tools/spectral_editor/index.html
+++ b/tools/spectral_editor/index.html
@@ -22,14 +22,29 @@
         <div class="main-content">
             <!-- Canvas area (left side, 80% width) -->
             <div class="canvas-container">
-                <canvas id="spectrogramCanvas"></canvas>
-                <div id="canvasOverlay" class="canvas-overlay">
-                    <p>Load a .wav or .spec file to begin</p>
-                    <p class="hint">Click "Load .wav/.spec" button or press Ctrl+O</p>
+                <!-- Waveform intensity timeline (top, fixed height) -->
+                <div class="waveform-container">
+                    <canvas id="waveformCanvas"></canvas>
+                    <div class="waveform-controls">
+                        <label>Offset:</label>
+                        <input type="number" id="offsetValue" class="offset-input" min="0" max="10" value="0" step="0.001">
+                        <span>s</span>
+                        <button id="copyOffsetBtn" class="btn-copy" title="Copy SAMPLE line">📋</button>
+                        <button id="snapToOnsetBtn" class="btn-snap" title="Snap to onset">🎯</button>
+                    </div>
                 </div>
-                <!-- Mini spectrum viewer (bottom-right overlay) -->
-                <div id="spectrumViewer" class="spectrum-viewer">
-                    <canvas id="spectrumCanvas" width="200" height="100"></canvas>
+
+                <!-- Spectrogram canvas (below waveform) -->
+                <div class="spectrogram-wrapper">
+                    <canvas id="spectrogramCanvas"></canvas>
+                    <div id="canvasOverlay" class="canvas-overlay">
+                        <p>Load a .wav or .spec file to begin</p>
+                        <p class="hint">Click "Load .wav/.spec" button or press Ctrl+O</p>
+                    </div>
+                    <!-- Mini spectrum viewer (bottom-right overlay) -->
+                    <div id="spectrumViewer" class="spectrum-viewer">
+                        <canvas id="spectrumCanvas" width="200" height="100"></canvas>
+                    </div>
                 </div>
             </div>
 
-- 
cgit v1.2.3