diff options
Diffstat (limited to 'tools/mq_editor/index.html')
| -rw-r--r-- | tools/mq_editor/index.html | 106 |
1 files changed, 79 insertions, 27 deletions
diff --git a/tools/mq_editor/index.html b/tools/mq_editor/index.html index c5902a7..8f36314 100644 --- a/tools/mq_editor/index.html +++ b/tools/mq_editor/index.html @@ -6,6 +6,7 @@ <style> body { font-family: monospace; + font-size: 14px; margin: 20px; background: #1a1a1a; color: #ddd; @@ -73,9 +74,9 @@ border: 1px solid #555; border-radius: 4px; padding: 12px; - min-width: 220px; - max-width: 220px; - max-height: 600px; + min-width: 260px; + max-width: 260px; + max-height: 700px; overflow-y: auto; display: flex; flex-direction: column; @@ -83,7 +84,7 @@ box-sizing: border-box; } .panel-title { - font-size: 11px; + font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; @@ -100,40 +101,52 @@ gap: 6px; margin: 0; cursor: pointer; - font-size: 13px; + 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; - padding: 1px 0; + margin: 0; + background: #222; + border-color: #444; + color: #888; } - .prop-label { color: #777; font-size: 11px; } - .prop-section { - font-size: 10px; - color: #666; - text-transform: uppercase; - letter-spacing: 0.5px; - margin-top: 6px; - margin-bottom: 2px; + .tab-btn.active { + background: #3a3a3a; + border-color: #666; + color: #ddd; } .curve-grid { display: grid; grid-template-columns: 18px 1fr 1fr; - gap: 2px 3px; + gap: 3px 4px; align-items: center; } - .curve-grid span { color: #666; font-size: 10px; } + .curve-grid span { color: #666; font-size: 11px; } .curve-grid input[type="number"] { width: 100%; background: #333; color: #ccc; border: 1px solid #444; - padding: 1px 3px; + padding: 2px 4px; border-radius: 2px; - font-size: 10px; + font-size: 11px; font-family: monospace; box-sizing: border-box; } @@ -144,14 +157,33 @@ .partial-actions { display: flex; gap: 4px; - margin-top: 6px; + margin-top: 8px; } .partial-actions button { flex: 1; - padding: 3px 6px; - font-size: 11px; + 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-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; + } + .synth-grid input[type="number"]:focus { border-color: #666; outline: none; } .synth-section { border-top: 1px solid #444; padding-top: 8px; @@ -188,7 +220,7 @@ <input type="number" id="hopSize" value="256" min="64" max="1024" step="64"> <label>Threshold (dB):</label> - <input type="number" id="threshold" value="-60" step="any"> + <input type="number" id="threshold" value="-20" step="any"> <label style="margin-left:16px;">Keep:</label> <input type="range" id="keepPct" min="1" max="100" value="100" style="width:100px; vertical-align:middle;"> @@ -234,17 +266,27 @@ <span class="prop-label">Time</span> <span id="propTime">—</span> </div> - <div class="prop-section">Freq Curve</div> - <div class="curve-grid" id="freqCurveGrid"></div> - <div class="prop-section">Amp Curve</div> - <div class="curve-grid" id="ampCurveGrid"></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</button> </div> </div> - <div id="noSelMsg" style="color:#555;font-size:11px;padding:2px 0;">Click a partial to select</div> + <div id="noSelMsg" style="color:#555;font-size:13px;padding:2px 0;">Click a partial to select</div> <!-- Synthesis options (always at bottom) --> <div class="synth-section"> @@ -543,6 +585,16 @@ } }); + // Curve tab switching + document.querySelectorAll('.tab-btn').forEach(btn => { + btn.addEventListener('click', () => { + document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active')); + btn.classList.add('active'); + document.querySelectorAll('.tab-pane').forEach(p => p.style.display = 'none'); + document.getElementById('tab' + btn.dataset.tab).style.display = ''; + }); + }); + // --- Test WAV peak validation --- function validateTestWAVPeaks(cache) { const SR = cache.sampleRate; |