diff options
Diffstat (limited to 'tools/mq_editor/index.html')
| -rw-r--r-- | tools/mq_editor/index.html | 441 |
1 files changed, 97 insertions, 344 deletions
diff --git a/tools/mq_editor/index.html b/tools/mq_editor/index.html index dea6e50..efbd73d 100644 --- a/tools/mq_editor/index.html +++ b/tools/mq_editor/index.html @@ -3,274 +3,7 @@ <head> <meta charset="utf-8"> <title>MQ Spectral Editor</title> - <style> - body { - font-family: monospace; - font-size: 14px; - margin: 20px; - background: #1a1a1a; - color: #ddd; - } - .page-title { - display: flex; - align-items: baseline; - gap: 16px; - margin-bottom: 10px; - } - .page-title h2 { margin: 0; } - #fileLabel { - font-size: 13px; - color: #8af; - opacity: 0.8; - } - .toolbar { - margin-bottom: 10px; - padding: 10px; - background: #2a2a2a; - border-radius: 4px; - } - button { - background: #3a3a3a; - color: #ddd; - border: 1px solid #555; - padding: 8px 16px; - margin-right: 8px; - cursor: pointer; - border-radius: 4px; - } - button:hover { background: #4a4a4a; } - button:disabled { opacity: 0.5; cursor: not-allowed; } - #extractBtn { background: #666; color: #fff; font-weight: bold; border-color: #888; } - button.explore-active { background: #554; border-color: #aa8; color: #ffd; } - button.contour-active { background: #145; border-color: #0cc; color: #aff; } - input[type="file"] { display: none; } - .params { - display: flex; - margin-top: 8px; - background: #222; - border: 1px solid #444; - border-radius: 3px; - } - .param-group { - display: flex; - align-items: center; - gap: 6px; - padding: 5px 12px; - border-right: 1px solid #444; - flex-wrap: wrap; - } - .param-group:last-child { border-right: none; } - .group-label { - font-size: 9px; - color: #666; - text-transform: uppercase; - letter-spacing: 1px; - white-space: nowrap; - margin-right: 2px; - } - label { - margin-right: 4px; - } - input[type="number"], select { - width: 80px; - background: #3a3a3a; - color: #ddd; - border: 1px solid #555; - padding: 4px; - border-radius: 3px; - } - .main-area { - display: flex; - align-items: flex-start; - gap: 10px; - margin-top: 10px; - } - #canvas { - border: 1px solid #555; - background: #000; - cursor: crosshair; - display: block; - flex-shrink: 0; - } - .right-panel { - background: #2a2a2a; - border: 1px solid #555; - border-radius: 4px; - padding: 12px; - min-width: 260px; - max-width: 260px; - max-height: 700px; - overflow-y: auto; - display: flex; - flex-direction: column; - gap: 6px; - box-sizing: border-box; - } - .panel-title { - font-size: 12px; - color: #888; - text-transform: uppercase; - letter-spacing: 1px; - border-bottom: 1px solid #444; - padding-bottom: 6px; - margin-bottom: 2px; - display: flex; - align-items: center; - gap: 6px; - } - .right-panel label { - display: flex; - align-items: center; - gap: 6px; - margin: 0; - cursor: pointer; - font-size: 14px; - } - /* Partial properties */ - .prop-row { - display: flex; - justify-content: space-between; - align-items: baseline; - font-size: 13px; - padding: 2px 0; - } - .prop-label { color: #777; font-size: 12px; } - .curve-tabs { - display: flex; - gap: 2px; - margin-top: 8px; - margin-bottom: 4px; - } - .tab-btn { - flex: 1; - padding: 4px 0; - font-size: 12px; - margin: 0; - background: #222; - border-color: #444; - color: #888; - } - .tab-btn.active { - background: #3a3a3a; - border-color: #666; - color: #ddd; - } - .curve-grid { - display: grid; - grid-template-columns: 18px 1fr 1fr; - gap: 3px 4px; - align-items: center; - } - .curve-grid span { color: #666; font-size: 11px; } - .curve-grid input[type="number"] { - width: 100%; - background: #333; - color: #ccc; - border: 1px solid #444; - padding: 2px 4px; - border-radius: 2px; - font-size: 11px; - font-family: monospace; - box-sizing: border-box; - } - .curve-grid input[type="number"]:focus { - border-color: #666; - outline: none; - } - .partial-actions { - display: flex; - gap: 4px; - margin-top: 8px; - } - .partial-actions button { - flex: 1; - padding: 4px 6px; - font-size: 12px; - margin: 0; - } - .synth-grid { - display: grid; - grid-template-columns: auto 1fr; - gap: 4px 8px; - align-items: center; - } - .synth-grid span { color: #888; font-size: 12px; } - .synth-field-wrap { - display: flex; - align-items: center; - gap: 4px; - } - .synth-field-wrap input[type="number"] { - flex: 1; - min-width: 0; - background: #333; - color: #ccc; - border: 1px solid #444; - padding: 2px 4px; - border-radius: 2px; - font-size: 11px; - font-family: monospace; - box-sizing: border-box; - } - .synth-field-wrap input[type="number"]:focus { border-color: #666; outline: none; } - .jog-slider { - width: 44px; - height: 16px; - background: #1e1e1e; - border: 1px solid #444; - border-radius: 3px; - cursor: ew-resize; - position: relative; - flex-shrink: 0; - user-select: none; - overflow: hidden; - } - .jog-slider::before { - content: ''; - position: absolute; - left: 50%; top: 3px; bottom: 3px; - width: 1px; - background: #484848; - transform: translateX(-50%); - } - .jog-thumb { - position: absolute; - top: 3px; bottom: 3px; - width: 6px; - background: #888; - border-radius: 2px; - left: calc(50% - 3px); - transition: left 0.12s ease; - } - .jog-slider:hover .jog-thumb { background: #aaa; } - .synth-grid input[type="number"]:focus { border-color: #666; outline: none; } - .synth-section { - border-top: 1px solid #444; - padding-top: 8px; - margin-top: auto; - } - /* resonator mode badge shown in partial header color swatch area */ - .res-badge { - font-size: 9px; - color: #8cf; - border: 1px solid #8cf; - border-radius: 2px; - padding: 0 3px; - vertical-align: middle; - margin-left: 4px; - opacity: 0.8; - } - #status { - margin-top: 10px; - padding: 8px; - background: #2a2a2a; - border-radius: 4px; - min-height: 20px; - } - .info { color: #4af; } - .warn { color: #fa4; } - .error { color: #f44; } - </style> + <link rel="stylesheet" href="style.css"> </head> <body> <div class="page-title"> @@ -280,79 +13,99 @@ <div class="toolbar"> <input type="file" id="wavFile" accept=".wav"> - <button id="chooseFileBtn">📂 Open WAV</button> - <button id="testWavBtn">⚗ Test WAV</button> - <button id="extractBtn" disabled>Extract Partials</button> - <button id="autoSpreadAllBtn" disabled>Auto Spread All</button> - <button id="playBtn" disabled>▶ Play</button> - <button id="stopBtn" disabled>■ Stop</button> - <button id="newPartialBtn" disabled>+ Partial</button> - <button id="clearAllBtn" disabled>✕ Clear All</button> - <button id="exploreBtn" disabled>⊕ Explore</button> - <button id="contourBtn" disabled>≋ Contour</button> - <button id="undoBtn" disabled>↩ Undo</button> - <button id="redoBtn" disabled>↪ Redo</button> - - <div class="params"> - <div class="param-group"> - <span class="group-label">STFT</span> - <label title="STFT hop size in samples. Smaller = finer time resolution, more frames, slower.">Hop</label> - <input type="number" id="hopSize" value="256" min="64" max="1024" step="64" style="width:60px;"> - </div> - - <div class="param-group"> - <span class="group-label">Peak Detection</span> - <label title="Minimum spectral peak amplitude in dB. Peaks below this are ignored.">Threshold (dB)</label> - <input type="number" id="threshold" value="-20" step="any"> - <label title="Minimum prominence in dB: how much a peak must stand above its surrounding valley. Suppresses weak shoulders.">Prominence (dB)</label> - <input type="number" id="prominence" value="1.0" step="0.1" min="0"> - <label title="Weight spectrum by frequency before peak detection: f × Power(f). Boosts high-frequency peaks relative to low-frequency ones."> - <input type="checkbox" id="freqWeight"> f·Power - </label> - </div> - - <div class="param-group"> - <span class="group-label">Tracking</span> - <label title="Frames a candidate must persist consecutively before being promoted to a tracked partial. Higher = fewer spurious short bursts.">Birth</label> - <input type="number" id="birthPersistence" value="3" min="1" max="10" step="1" style="width:50px;"> - <label title="Frames a partial can go unmatched before it is terminated. Higher = bridges short gaps; lower = cuts off quickly.">Death</label> - <input type="number" id="deathAge" value="5" min="1" max="20" step="1" style="width:50px;"> - <label title="Weight of phase prediction error in the peak-matching cost function. Higher = stricter phase coherence required to continue a partial.">Phase Wt</label> - <input type="number" id="phaseErrorWeight" value="2.0" min="0" max="10" step="0.5" style="width:55px;"> - <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"> - <span class="group-label">Filter</span> - <label title="Keep only the strongest N% of extracted partials, ranked by peak amplitude.">Keep</label> - <input type="range" id="keepPct" min="1" max="100" value="100" style="width:100px; vertical-align:middle;"> - <span id="keepPctLabel">100%</span> + <span class="toolbar-group"> + <button id="chooseFileBtn">📂 Open WAV</button> + </span> + <span class="toolbar-sep"></span> + <span class="toolbar-group"> + <button id="extractBtn" disabled>Extract Partials</button> + <button id="autoSpreadAllBtn" disabled>Auto Spread All</button> + </span> + <span class="toolbar-sep"></span> + <span class="toolbar-group"> + <button id="playBtn" disabled>▶ Play</button> + <button id="stopBtn" disabled>■ Stop</button> + </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> + <span class="toolbar-sep"></span> + <span class="toolbar-group"> + <button id="undoBtn" disabled>↩ Undo</button> + <button id="redoBtn" disabled>↪ Redo</button> + </span> + <span class="toolbar-sep"></span> + <span class="toolbar-wrap"> + <button id="paramsBtn">⚙ Params</button> + <div id="paramsPanel"> + <div class="param-group"> + <span class="group-label">STFT</span> + <label title="STFT hop size in samples. Smaller = finer time resolution, more frames, slower.">Hop</label> + <input type="number" id="hopSize" value="256" min="64" max="1024" step="64" style="width:60px;"> + </div> + <div class="param-group"> + <span class="group-label">Peak Detect</span> + <label title="Minimum spectral peak amplitude in dB. Peaks below this are ignored.">Threshold (dB)</label> + <input type="number" id="threshold" value="-20" step="any"> + <label title="Minimum prominence in dB: how much a peak must stand above its surrounding valley. Suppresses weak shoulders.">Prominence (dB)</label> + <input type="number" id="prominence" value="1.0" step="0.1" min="0"> + <label title="Weight spectrum by frequency before peak detection: f × Power(f). Boosts high-frequency peaks relative to low-frequency ones."> + <input type="checkbox" id="freqWeight"> f·Power + </label> + </div> + <div class="param-group"> + <span class="group-label">Tracking</span> + <label title="Frames a candidate must persist consecutively before being promoted to a tracked partial. Higher = fewer spurious short bursts.">Birth</label> + <input type="number" id="birthPersistence" value="3" min="1" max="10" step="1" style="width:50px;"> + <label title="Frames a partial can go unmatched before it is terminated. Higher = bridges short gaps; lower = cuts off quickly.">Death</label> + <input type="number" id="deathAge" value="5" min="1" max="20" step="1" style="width:50px;"> + <label title="Weight of phase prediction error in the peak-matching cost function. Higher = stricter phase coherence required to continue a partial.">Phase Wt</label> + <input type="number" id="phaseErrorWeight" value="2.0" min="0" max="10" step="0.5" style="width:55px;"> + <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> - </div> + </span> </div> <div class="main-area"> - <div style="display:flex; flex-direction:column; gap:6px; flex-shrink:0;"> - <div style="position: relative;"> + <div class="canvas-col"> + <div class="canvas-wrap"> <canvas id="canvas" width="1400" height="600"></canvas> - <canvas id="cursorCanvas" width="1400" height="600" style="position:absolute;top:0;left:0;pointer-events:none;"></canvas> - <canvas id="playheadCanvas" width="1400" height="600" style="position:absolute;top:0;left:0;pointer-events:none;"></canvas> + <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" style="position: absolute; bottom: 10px; right: 10px; width: 400px; height: 100px; background: rgba(30, 30, 30, 0.9); border: 1px solid #555; border-radius: 3px; pointer-events: none;"> + <div id="spectrumViewer"> <canvas id="spectrumCanvas" width="400" height="100"></canvas> </div> + <!-- Keep slider (bottom-left overlay) --> + <div id="keepOverlay"> + <span title="Keep only the strongest N% of extracted partials, ranked by peak amplitude.">Keep</span> + <input type="range" id="keepPct" min="1" max="100" value="100"> + <span id="keepPctLabel">100%</span> + </div> </div> <!-- Amplitude bezier editor (shown when partial selected) --> - <div id="ampEditPanel" style="display:none;"> - <div style="font-size:10px; color:#555; padding:2px 0 3px 1px; display:flex; align-items:center; gap:10px; text-transform:uppercase; letter-spacing:0.5px;"> + <div id="ampEditPanel"> + <div class="amp-edit-header"> <span>Amplitude</span> - <span id="ampEditTitle" style="color:#777; text-transform:none; letter-spacing:0;"></span> - <span style="color:#333; text-transform:none; letter-spacing:0;">drag control points · Esc to deselect</span> + <span id="ampEditTitle"></span> + <span class="amp-edit-hint">drag control points · Esc to deselect</span> </div> - <canvas id="ampEditCanvas" width="1400" height="120" style="border:1px solid #2a2a2a; background:#0e0e0e; cursor:crosshair; display:block;"></canvas> + <canvas id="ampEditCanvas" width="1400" height="120"></canvas> </div> </div> @@ -361,7 +114,7 @@ <div id="partialProps" style="display:none;"> <div class="panel-title"> <span id="propTitle">Partial #—</span> - <span id="propSwatch" style="display:inline-block;width:10px;height:10px;border-radius:2px;flex-shrink:0;"></span> + <span id="propSwatch"></span> </div> <div class="prop-row"> <span class="prop-label">Peak</span> @@ -387,11 +140,11 @@ </div> <div class="partial-actions"> <button id="mutePartialBtn">Mute</button> - <button id="deletePartialBtn">Delete</button> + <button id="deletePartialBtn">Delete <kbd>Del</kbd></button> </div> </div> - <div id="noSelMsg" style="color:#555;font-size:13px;padding:2px 0;">Click a partial to select</div> + <div id="noSelMsg">Click a partial to select</div> <!-- Synthesis options (always at bottom) --> <div class="synth-section"> @@ -400,36 +153,36 @@ <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;margin-top:4px;padding:4px 0 2px 12px;border-left:2px solid #555;"> - <label style="display:flex;align-items:center;gap:6px;" title="Global pole radius r in (0,1). Applied to all partials in resonator mode."> + <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" style="flex:1;min-width:0;"> - <span id="globalRVal" style="width:44px;text-align:right;">0.9950</span> + <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 style="display:flex;align-items:center;gap:6px;" title="Global gain compensation applied to all partials in resonator mode."> + <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" style="flex:1;min-width:0;"> - <span id="globalGainVal" style="width:44px;text-align:right;">1.00</span> + <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 style="display:flex;align-items:center;gap:6px;" title="LP filter coefficient k1 in (0,1]. 1.0 = bypass."> + <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" style="flex:1;min-width:0;"> - <span id="lpK1Val" style="width:44px;text-align:right;">bypass</span> + <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 style="display:flex;align-items:center;gap:6px;" title="HP filter coefficient k2 in (0,1]. 1.0 = bypass."> + <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" style="flex:1;min-width:0;"> - <span id="hpK2Val" style="width:44px;text-align:right;">bypass</span> + <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> </div> </div> </div> - <div id="tooltip" style="position: fixed; display: none; background: #2a2a2a; padding: 4px 8px; border: 1px solid #555; border-radius: 3px; pointer-events: none; font-size: 11px; z-index: 1000;"></div> + <div id="tooltip"></div> <div id="status">Load a WAV file to begin...</div> |