diff options
Diffstat (limited to 'tools/spectral_editor/index.html')
| -rw-r--r-- | tools/spectral_editor/index.html | 29 |
1 files changed, 22 insertions, 7 deletions
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> |