diff options
Diffstat (limited to 'tools/spectral_editor/index.html')
| -rw-r--r-- | tools/spectral_editor/index.html | 39 |
1 files changed, 38 insertions, 1 deletions
diff --git a/tools/spectral_editor/index.html b/tools/spectral_editor/index.html index 52f1d8f..a9391dd 100644 --- a/tools/spectral_editor/index.html +++ b/tools/spectral_editor/index.html @@ -27,6 +27,10 @@ <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> <!-- Toolbar (right side, 20% width) --> @@ -39,6 +43,22 @@ <span class="icon">×</span> Delete </button> <div id="curveList" class="curve-list"></div> + + <h3>Selected Point</h3> + <div id="pointInfo" class="point-info"> + <div class="info-row"> + <span class="info-label">Frame:</span> + <span id="pointFrame" class="info-value">-</span> + </div> + <div class="info-row"> + <span class="info-label">Frequency:</span> + <span id="pointFreq" class="info-value">-</span> + </div> + <div class="info-row"> + <span class="info-label">Amplitude:</span> + <span id="pointAmp" class="info-value">-</span> + </div> + </div> </div> </div> @@ -56,9 +76,20 @@ <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"> + + <label for="curveVolumeSlider">Curve Vol:</label> + <input type="range" id="curveVolumeSlider" class="slider" min="0" max="100" value="100" step="1"> + <input type="number" id="curveVolumeValue" class="number-input" min="0" max="100" value="100" step="1"> + </div> + + <!-- Middle section: Display controls --> + <div class="control-section"> + <label for="refOpacitySlider">Ref Opacity:</label> + <input type="range" id="refOpacitySlider" class="slider" min="0" max="100" value="50" step="1"> + <input type="number" id="refOpacityValue" class="number-input" min="0" max="100" value="50" step="1"> </div> - <!-- Middle section: Curve selection --> + <!-- Curve selection --> <div class="control-section"> <label for="curveSelect">Active Curve:</label> <select id="curveSelect" class="select-input"> @@ -68,6 +99,12 @@ <!-- Right section: Playback controls --> <div class="control-section playback-controls"> + <label for="volumeSlider">Volume:</label> + <input type="range" id="volumeSlider" class="slider" min="0" max="100" value="100" step="1"> + <input type="number" id="volumeValue" class="number-input" min="0" max="100" value="100" step="1"> + </div> + + <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> |