w1n5t0n/memlnaut-nisps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(playground): Linked mode training target UI — separate FX RL buttons (meml-0r0)

Browse source
This commit is contained in:
w1n5t0n 2026-04-03 18:20:52 +01:00
parent 5a004c6a3e
commit e01660c1d4
3 changed files with 132 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
playground/a-immersive.html
View file

@ -110,6 +110,7 @@
<!-- RL floating buttons (with undo between/below) -->
<div class="rl-buttons" id="rl-buttons">
<span class="rl-label hidden" id="rl-label">Synth</span>
<button class="rl-btn rl-down" id="btn-thumbsdown" title="Explore more"><span class="rl-icon">&minus;</span><span class="key-num">1</span></button>
<button class="rl-btn rl-up" id="btn-thumbsup" title="Keep this"><span class="rl-icon">+</span><span class="key-num">2</span></button>
<button class="rl-undo-btn" id="btn-undo" title="Undo last action">
@ -119,6 +120,13 @@
</button>
</div>
<!-- EOC RL buttons (shown only in Linked mode) -->
<div id="eoc-rl-buttons" class="eoc-rl-buttons hidden">
<span class="eoc-rl-label">FX</span>
<button id="eoc-rl-minus" class="rl-btn eoc-rl-btn rl-down" title="Explore FX (change effects)"><span class="rl-icon">&minus;</span><span class="key-num">3</span></button>
<button id="eoc-rl-plus" class="rl-btn eoc-rl-btn rl-up" title="Keep FX (reinforce effects)"><span class="rl-icon">+</span><span class="key-num">4</span></button>
</div>
<!-- Status line (floating, minimal) -->
<div class="status-line" id="status-line">
<span id="status-text">0 examples &middot; untrained</span>
@ -371,6 +379,8 @@
<tr><th colspan="2">Keyboard</th></tr>
<tr><td><kbd>1</kbd></td><td>Negative feedback (&minus;)</td></tr>
<tr><td><kbd>2</kbd></td><td>Positive feedback (+)</td></tr>
<tr><td><kbd>3</kbd></td><td>FX negative feedback (Linked mode)</td></tr>
<tr><td><kbd>4</kbd></td><td>FX positive feedback (Linked mode)</td></tr>
<tr><td><kbd>Z</kbd></td><td>Undo</td></tr>
<tr><th colspan="2">Gamepad (Steam Deck, Xbox, etc.)</th></tr>
<tr><td>Left stick</td><td>Joystick control</td></tr>

75
playground/css/a-immersive.css
View file

@ -634,6 +634,67 @@ html, body {
animation: rl-flash 0.25s ease-out;
}
/* ---- RL label (shown in Linked mode to distinguish Synth vs FX) ---- */
.rl-label {
grid-column: 1 / -1;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.6;
text-align: center;
color: var(--text);
}
.rl-label.hidden { display: none; }
/* ---- EOC RL buttons (FX feedback, Linked mode) ---- */
.eoc-rl-buttons {
position: fixed;
bottom: 36px;
left: calc(50% + 100px);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
z-index: 45;
transition: opacity 0.3s;
}
.eoc-rl-buttons.hidden { display: none; }
.eoc-rl-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.6;
color: var(--text);
}
.eoc-rl-btn {
width: 48px;
height: 48px;
}
.eoc-rl-btn.rl-up {
border-color: rgba(78, 205, 196, 0.4);
color: #4ecdc4;
background: rgba(78, 205, 196, 0.08);
}
.eoc-rl-btn.rl-up:active {
background: rgba(78, 205, 196, 0.2);
box-shadow: 0 0 20px rgba(78, 205, 196, 0.3);
}
.eoc-rl-btn.rl-down {
border-color: rgba(78, 205, 196, 0.3);
color: #e07040;
background: rgba(224, 112, 64, 0.08);
}
.eoc-rl-btn.rl-down:active {
background: rgba(224, 112, 64, 0.2);
box-shadow: 0 0 20px rgba(224, 112, 64, 0.3);
}
/* ---- Status line (floating, minimal) ---- */
.status-line {
position: fixed;
@ -1956,6 +2017,11 @@ html, body {
font-size: 32px;
}
.eoc-rl-btn {
width: 54px;
height: 54px;
}
.drawer-stack {
width: 280px;
}
@ -1985,6 +2051,15 @@ html, body {
.rl-icon {
font-size: 24px;
}
.eoc-rl-btn {
width: 42px;
height: 42px;
}
.eoc-rl-buttons {
left: calc(50% + 80px);
}
}
/* ---- MIDI CC mode ---- */

47
playground/js/a-app.js
View file

@ -1112,6 +1112,13 @@ async function init() {
await initEocIML();
}
}
// Show/hide EOC RL buttons and Synth label based on linked mode
const isLinked = eocChain.nispsMode === 'linked';
const eocRlContainer = document.getElementById('eoc-rl-buttons');
if (eocRlContainer) eocRlContainer.classList.toggle('hidden', !isLinked);
const rlLabel = document.getElementById('rl-label');
if (rlLabel) rlLabel.classList.toggle('hidden', !isLinked);
});
// Debug probe — exposed on window when ?debug=1 is in the URL.
@ -2003,6 +2010,28 @@ function wireControls() {
$btnThumbsUp.addEventListener('click', onThumbsUp);
$btnThumbsDown.addEventListener('click', onThumbsDown);
// EOC RL buttons (Linked mode — target EOC IML directly)
const eocRlPlus = document.getElementById('eoc-rl-plus');
const eocRlMinus = document.getElementById('eoc-rl-minus');
if (eocRlPlus && eocRlMinus) {
eocRlPlus.addEventListener('click', () => {
if (!imlEoc) return;
const prevTarget = eocTrainingTarget;
eocTrainingTarget = 'eoc';
onThumbsUp();
eocTrainingTarget = prevTarget;
flash('eoc-rl-plus');
});
eocRlMinus.addEventListener('click', () => {
if (!imlEoc) return;
const prevTarget = eocTrainingTarget;
eocTrainingTarget = 'eoc';
onThumbsDown();
eocTrainingTarget = prevTarget;
flash('eoc-rl-minus');
});
}
// Undo button
document.getElementById('btn-undo').addEventListener('click', onUndo);
@ -3056,6 +3085,24 @@ function wireKeyboard() {
} else if (e.key === '2' || e.code === 'Numpad2') {
e.preventDefault();
onThumbsUp();
} else if (e.key === '3' || e.code === 'Numpad3') {
e.preventDefault();
if (imlEoc && eocChain?.nispsMode === 'linked') {
const prevTarget = eocTrainingTarget;
eocTrainingTarget = 'eoc';
onThumbsDown();
eocTrainingTarget = prevTarget;
flash('eoc-rl-minus');
}
} else if (e.key === '4' || e.code === 'Numpad4') {
e.preventDefault();
if (imlEoc && eocChain?.nispsMode === 'linked') {
const prevTarget = eocTrainingTarget;
eocTrainingTarget = 'eoc';
onThumbsUp();
eocTrainingTarget = prevTarget;
flash('eoc-rl-plus');
}
} else if (e.key === 'z' || e.key === 'Z') {
e.preventDefault();
onUndo();