diff options
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> |