diff options
| author | skal <pascal.massimino@gmail.com> | 2026-02-06 11:22:01 +0100 |
|---|---|---|
| committer | skal <pascal.massimino@gmail.com> | 2026-02-06 11:22:01 +0100 |
| commit | cf0775046c059fed1a4ed04d500f26397002667d (patch) | |
| tree | 00e643a38e601114e755ec77c8b4901b5d045ff8 /tools/spectral_editor/index.html | |
| parent | 5a1adde097e489c259bd052971546e95683c3596 (diff) | |
feat(tools): Add Spectral Brush Editor UI (Phase 2 of Task #5)
Implement web-based editor for procedural audio tracing.
New Files:
- tools/spectral_editor/index.html - Main UI structure
- tools/spectral_editor/style.css - VSCode-inspired dark theme
- tools/spectral_editor/script.js - Editor logic (~1200 lines)
- tools/spectral_editor/dct.js - IDCT/DCT implementation (reused)
- tools/spectral_editor/README.md - Complete user guide
Features:
- Dual-layer canvas (reference + procedural spectrograms)
- Bezier curve editor (click to place, drag to adjust, right-click to delete)
- Profile controls (Gaussian sigma slider)
- Real-time audio playback (Key 1=procedural, Key 2=original, Space=stop)
- Undo/Redo system (50-action history with snapshots)
- File I/O:
- Load .wav/.spec files (FFT/STFT or binary parser)
- Save procedural_params.txt (human-readable, re-editable)
- Generate C++ code (copy-paste ready for runtime)
- Keyboard shortcuts (Ctrl+Z/Shift+Z, Ctrl+S/Shift+S, Ctrl+O, ?)
- Help modal with shortcut reference
Technical:
- Pure HTML/CSS/JS (no dependencies)
- Web Audio API for playback (32 kHz sample rate)
- Canvas 2D for visualization (log-scale frequency)
- Linear Bezier interpolation matching C++ runtime
- IDCT with overlap-add synthesis
Next: Phase 3 (currently integrated in Phase 2)
- File loading already implemented
- Export already implemented
- Ready for user testing!
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Diffstat (limited to 'tools/spectral_editor/index.html')
| -rw-r--r-- | tools/spectral_editor/index.html | 143 |
1 files changed, 143 insertions, 0 deletions
diff --git a/tools/spectral_editor/index.html b/tools/spectral_editor/index.html new file mode 100644 index 0000000..52f1d8f --- /dev/null +++ b/tools/spectral_editor/index.html @@ -0,0 +1,143 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Spectral Brush Editor</title> + <link rel="stylesheet" href="style.css"> +</head> +<body> + <div id="app"> + <!-- Header --> + <header> + <h1>Spectral Brush Editor</h1> + <div class="header-controls"> + <button id="loadWavBtn" class="btn-primary">Load .wav/.spec</button> + <input type="file" id="fileInput" accept=".wav,.spec" style="display:none"> + <span id="fileInfo" class="file-info"></span> + </div> + </header> + + <!-- Main content area --> + <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> + </div> + </div> + + <!-- Toolbar (right side, 20% width) --> + <div class="toolbar"> + <h3>Curves</h3> + <button id="addCurveBtn" class="btn-toolbar" title="Add new curve"> + <span class="icon">+</span> Add Curve + </button> + <button id="deleteCurveBtn" class="btn-toolbar btn-danger" title="Delete selected curve" disabled> + <span class="icon">×</span> Delete + </button> + <div id="curveList" class="curve-list"></div> + </div> + </div> + + <!-- Control panel (bottom) --> + <div class="control-panel"> + <!-- Left section: Profile controls --> + <div class="control-section"> + <label for="profileType">Profile:</label> + <select id="profileType" class="select-input"> + <option value="gaussian">Gaussian</option> + <option value="decaying_sinusoid">Decaying Sinusoid</option> + <option value="noise">Noise</option> + </select> + + <label for="sigmaSlider" id="sigmaLabel">Sigma:</label> + <input type="range" id="sigmaSlider" class="slider" min="1" max="100" value="30" step="0.1"> + <input type="number" id="sigmaValue" class="number-input" min="1" max="100" value="30" step="0.1"> + </div> + + <!-- Middle section: Curve selection --> + <div class="control-section"> + <label for="curveSelect">Active Curve:</label> + <select id="curveSelect" class="select-input"> + <option value="-1">No curves</option> + </select> + </div> + + <!-- Right section: Playback controls --> + <div class="control-section playback-controls"> + <button id="playProceduralBtn" class="btn-playback" title="Play procedural sound (Key 1)"> + <span class="icon">▶</span> <kbd>1</kbd> Procedural + </button> + <button id="playOriginalBtn" class="btn-playback" title="Play original .wav (Key 2)" disabled> + <span class="icon">▶</span> <kbd>2</kbd> Original + </button> + <button id="stopBtn" class="btn-playback" title="Stop playback (Space)"> + <span class="icon">■</span> <kbd>Space</kbd> Stop + </button> + </div> + </div> + + <!-- Bottom action bar --> + <div class="action-bar"> + <div class="action-group"> + <button id="undoBtn" class="btn-action" title="Undo (Ctrl+Z)" disabled> + <span class="icon">↶</span> Undo + </button> + <button id="redoBtn" class="btn-action" title="Redo (Ctrl+Shift+Z)" disabled> + <span class="icon">↷</span> Redo + </button> + </div> + + <div class="action-group"> + <button id="saveParamsBtn" class="btn-action" title="Save procedural_params.txt (Ctrl+S)"> + <span class="icon">💾</span> Save Params + </button> + <button id="generateCodeBtn" class="btn-action" title="Generate C++ code (Ctrl+Shift+S)"> + <span class="icon">📝</span> Generate C++ + </button> + </div> + + <div class="action-group"> + <button id="helpBtn" class="btn-action" title="Show keyboard shortcuts (?)"> + <span class="icon">?</span> Help + </button> + </div> + </div> + </div> + + <!-- Help modal (hidden by default) --> + <div id="helpModal" class="modal" style="display:none"> + <div class="modal-content"> + <span class="modal-close" id="closeHelpModal">×</span> + <h2>Keyboard Shortcuts</h2> + <table class="shortcuts-table"> + <tr><th>Key</th><th>Action</th></tr> + <tr><td><kbd>1</kbd></td><td>Play procedural sound</td></tr> + <tr><td><kbd>2</kbd></td><td>Play original .wav</td></tr> + <tr><td><kbd>Space</kbd></td><td>Stop playback</td></tr> + <tr><td><kbd>Delete</kbd></td><td>Delete selected control point</td></tr> + <tr><td><kbd>Esc</kbd></td><td>Deselect all</td></tr> + <tr><td><kbd>Ctrl+Z</kbd></td><td>Undo</td></tr> + <tr><td><kbd>Ctrl+Shift+Z</kbd></td><td>Redo</td></tr> + <tr><td><kbd>Ctrl+S</kbd></td><td>Save procedural_params.txt</td></tr> + <tr><td><kbd>Ctrl+Shift+S</kbd></td><td>Generate C++ code</td></tr> + <tr><td><kbd>Ctrl+O</kbd></td><td>Open file</td></tr> + <tr><td><kbd>?</kbd></td><td>Show this help</td></tr> + </table> + <h3>Mouse Controls</h3> + <ul> + <li><strong>Click</strong> on canvas: Place control point</li> + <li><strong>Drag</strong> control point: Adjust position (frame, frequency, amplitude)</li> + <li><strong>Right-click</strong> control point: Delete</li> + </ul> + </div> + </div> + + <!-- Scripts --> + <script src="dct.js"></script> + <script src="script.js"></script> +</body> +</html> |