diff options
Diffstat (limited to 'tools/mq_editor/index.html')
| -rw-r--r-- | tools/mq_editor/index.html | 154 |
1 files changed, 78 insertions, 76 deletions
diff --git a/tools/mq_editor/index.html b/tools/mq_editor/index.html index efbd73d..a03ab35 100644 --- a/tools/mq_editor/index.html +++ b/tools/mq_editor/index.html @@ -19,7 +19,8 @@ <span class="toolbar-sep"></span> <span class="toolbar-group"> <button id="extractBtn" disabled>Extract Partials</button> - <button id="autoSpreadAllBtn" disabled>Auto Spread All</button> + <button id="newPartialBtn" disabled>+ Partial</button> + <button id="clearAllBtn" disabled>✕ Clear All</button> </span> <span class="toolbar-sep"></span> <span class="toolbar-group"> @@ -28,11 +29,6 @@ </span> <span class="toolbar-sep"></span> <span class="toolbar-group"> - <button id="newPartialBtn" disabled>+ Partial</button> - <button id="clearAllBtn" disabled>✕ Clear All</button> - </span> - <span class="toolbar-sep"></span> - <span class="toolbar-group"> <button id="exploreBtn" disabled>⊕ Explore</button> <button id="contourBtn" disabled>≋ Contour</button> </span> @@ -71,6 +67,39 @@ <label title="Minimum number of frames a tracked partial must span. Shorter partials are discarded after tracking.">Min Len</label> <input type="number" id="minLength" value="10" min="1" max="50" step="1" style="width:50px;"> </div> + <div class="param-group param-synth"> + <span class="group-label">Synthesis</span> + <label><input type="checkbox" id="integratePhase" checked> Integrate phase</label> + <label><input type="checkbox" id="disableJitter"> Disable jitter</label> + <label><input type="checkbox" id="disableSpread"> Disable spread</label> + <label title="Test mode: force resonator synthesis for all partials (ignores per-partial mode setting)"><input type="checkbox" id="forceResonator"> Resonator (all)</label> + <div id="globalResParams" style="display:none;"> + <label title="Global pole radius r in (0,1). Applied to all partials in resonator mode."> + r (pole) + <input type="range" id="globalR" min="0.75" max="0.9999" step="0.0001" value="0.995"> + <span id="globalRVal" class="slider-val">0.9950</span> + </label> + <label title="Global gain compensation applied to all partials in resonator mode."> + gain + <input type="range" id="globalGain" min="0.0" max="4.0" step="0.01" value="1.0"> + <span id="globalGainVal" class="slider-val">1.00</span> + </label> + <label title="Override per-partial r/gain with global values during playback"><input type="checkbox" id="forceRGain"> force r/gain</label> + </div> + <label title="LP filter coefficient k1 in (0,1]. 1.0 = bypass."> + LP k1 + <input type="range" id="lpK1" min="0.001" max="1.0" step="0.001" value="1.0"> + <span id="lpK1Val" class="slider-val">bypass</span> + </label> + <label title="HP filter coefficient k2 in (0,1]. 1.0 = bypass."> + HP k2 + <input type="range" id="hpK2" min="0.001" max="1.0" step="0.001" value="1.0"> + <span id="hpK2Val" class="slider-val">bypass</span> + </label> + <div style="padding-top:4px;"> + <button id="autoSpreadAllBtn" disabled style="width:100%;padding:4px 8px;font-size:12px;margin:0;">Auto Spread All</button> + </div> + </div> </div> </span> </div> @@ -82,10 +111,6 @@ <canvas id="cursorCanvas" width="1400" height="600"></canvas> <canvas id="playheadCanvas" width="1400" height="600"></canvas> - <!-- Partial spectrum viewer (bottom-right overlay, left of main spectrum) --> - <div id="partialSpectrumViewer"> - <canvas id="partialSpectrumCanvas" width="200" height="100"></canvas> - </div> <!-- Mini spectrum viewer (bottom-right overlay) --> <div id="spectrumViewer"> <canvas id="spectrumCanvas" width="400" height="100"></canvas> @@ -109,75 +134,52 @@ </div> </div> - <div class="right-panel"> - <!-- Partial properties (visible when a partial is selected) --> - <div id="partialProps" style="display:none;"> - <div class="panel-title"> - <span id="propTitle">Partial #—</span> - <span id="propSwatch"></span> - </div> - <div class="prop-row"> - <span class="prop-label">Peak</span> - <span id="propPeak">—</span> - </div> - <div class="prop-row"> - <span class="prop-label">Time</span> - <span id="propTime">—</span> + <div class="right-col"> + <div class="right-panel"> + <!-- Partial properties (visible when a partial is selected) --> + <div id="partialProps" style="display:none;"> + <div class="panel-title"> + <span id="propTitle">Partial #—</span> + <span id="propSwatch"></span> + </div> + <div class="prop-row"> + <span class="prop-label">Peak</span> + <span id="propPeak">—</span> + </div> + <div class="prop-row"> + <span class="prop-label">Time</span> + <span id="propTime">—</span> + </div> + <div class="prop-row"> + <span class="prop-label">Mode</span> + <span id="synthModeToggle" style="display:flex;gap:3px;"></span> + </div> + <div class="curve-tabs"> + <button class="tab-btn active" data-tab="Freq">Freq</button> + <button class="tab-btn" data-tab="Amp">Amp</button> + <button class="tab-btn" data-tab="Synth">Synth</button> + </div> + <div class="tab-pane" id="tabFreq"> + <div class="curve-grid" id="freqCurveGrid"></div> + </div> + <div class="tab-pane" id="tabAmp" style="display:none;"> + <div class="curve-grid" id="ampCurveGrid"></div> + </div> + <div class="tab-pane" id="tabSynth" style="display:none;"> + <div class="synth-grid" id="synthGrid"></div> + </div> + <div class="partial-actions"> + <button id="mutePartialBtn">Mute</button> + <button id="deletePartialBtn">Delete <kbd>Del</kbd></button> + </div> </div> - <div class="curve-tabs"> - <button class="tab-btn active" data-tab="Freq">Freq</button> - <button class="tab-btn" data-tab="Amp">Amp</button> - <button class="tab-btn" data-tab="Synth">Synth</button> - </div> - <div class="tab-pane" id="tabFreq"> - <div class="curve-grid" id="freqCurveGrid"></div> - </div> - <div class="tab-pane" id="tabAmp" style="display:none;"> - <div class="curve-grid" id="ampCurveGrid"></div> - </div> - <div class="tab-pane" id="tabSynth" style="display:none;"> - <div class="synth-grid" id="synthGrid"></div> - </div> - <div class="partial-actions"> - <button id="mutePartialBtn">Mute</button> - <button id="deletePartialBtn">Delete <kbd>Del</kbd></button> - </div> - </div> - <div id="noSelMsg">Click a partial to select</div> + <div id="noSelMsg">Click a partial to select</div> + </div> - <!-- Synthesis options (always at bottom) --> - <div class="synth-section"> - <div class="panel-title">Synthesis</div> - <label><input type="checkbox" id="integratePhase" checked> Integrate phase</label> - <label><input type="checkbox" id="disableJitter"> Disable jitter</label> - <label><input type="checkbox" id="disableSpread"> Disable spread</label> - <label title="Test mode: force resonator synthesis for all partials (ignores per-partial mode setting)"><input type="checkbox" id="forceResonator"> Resonator (all)</label> - <div id="globalResParams" style="display:none;"> - <label title="Global pole radius r in (0,1). Applied to all partials in resonator mode."> - r (pole) - <input type="range" id="globalR" min="0.75" max="0.9999" step="0.0001" value="0.995"> - <span id="globalRVal" class="slider-val">0.9950</span> - </label> - <label title="Global gain compensation applied to all partials in resonator mode."> - gain - <input type="range" id="globalGain" min="0.0" max="4.0" step="0.01" value="1.0"> - <span id="globalGainVal" class="slider-val">1.00</span> - </label> - <label title="Override per-partial r/gain with global values during playback"><input type="checkbox" id="forceRGain"> force r/gain</label> - </div> - <div style="margin-top:6px;"> - <label title="LP filter coefficient k1 in (0,1]. 1.0 = bypass."> - LP k1 - <input type="range" id="lpK1" min="0.001" max="1.0" step="0.001" value="1.0"> - <span id="lpK1Val" class="slider-val">bypass</span> - </label> - <label title="HP filter coefficient k2 in (0,1]. 1.0 = bypass."> - HP k2 - <input type="range" id="hpK2" min="0.001" max="1.0" step="0.001" value="1.0"> - <span id="hpK2Val" class="slider-val">bypass</span> - </label> - </div> + <!-- Partial spectrum viewer (below right panel, since it's related) --> + <div id="partialSpectrumViewer"> + <canvas id="partialSpectrumCanvas" width="258" height="100"></canvas> </div> </div> </div> |