feat(web): tempo + master steppers on matrix tab
CI build oscope-of / build-check (push) Has been cancelled
CI build oscope-of / build-check (push) Has been cancelled
Same -/+ stepper controls duplicated on the MATRICE tab; the wiring is factorized into bindStepGroup so both tabs' sliders and readouts stay in sync while driving the same OSC addresses.
This commit is contained in:
@@ -165,6 +165,8 @@
|
|||||||
<button id="kit-industrial" class="kit-btn" data-kit="industrial">INDUS</button>
|
<button id="kit-industrial" class="kit-btn" data-kit="industrial">INDUS</button>
|
||||||
<button id="kit-acid" class="kit-btn" data-kit="acid">ACID</button>
|
<button id="kit-acid" class="kit-btn" data-kit="acid">ACID</button>
|
||||||
</div>
|
</div>
|
||||||
|
<label>Tempo <button id="matrix-tempo-minus" class="tempo-step" type="button">-</button><input id="matrix-tempo" type="range" min="60" max="180" value="126"><button id="matrix-tempo-plus" class="tempo-step" type="button">+</button><span id="matrix-tempo-val">126</span></label>
|
||||||
|
<label>Master <button id="matrix-master-minus" class="tempo-step" type="button">-</button><input id="matrix-master" type="range" min="0" max="2" step="0.05" value="1"><button id="matrix-master-plus" class="tempo-step" type="button">+</button><span id="matrix-master-val">1.00</span></label>
|
||||||
<div class="matrix-persist">
|
<div class="matrix-persist">
|
||||||
<input type="text" id="matrix-name" class="matrix-name-input" placeholder="nom de la matrice">
|
<input type="text" id="matrix-name" class="matrix-name-input" placeholder="nom de la matrice">
|
||||||
<button id="matrix-save" class="mat-action-btn">SAUVER</button>
|
<button id="matrix-save" class="mat-action-btn">SAUVER</button>
|
||||||
|
|||||||
@@ -24,41 +24,37 @@ export function init() {
|
|||||||
if (bar) bar.style.width = `${rms * 100}%`;
|
if (bar) bar.style.width = `${rms * 100}%`;
|
||||||
});
|
});
|
||||||
|
|
||||||
// Tempo: slider + -/+ steppers (1 BPM per click), value label kept in sync
|
// Tempo / Master: sliders + -/+ steppers, duplicated on the LIVE and
|
||||||
const tempo = document.getElementById("tempo");
|
// MATRICE tabs — every group member drives the same OSC address and all
|
||||||
const tempoVal = document.getElementById("tempo-val");
|
// members stay visually in sync.
|
||||||
const pushTempo = () => {
|
const bindStepGroup = (groups, step, fmt, addr) => {
|
||||||
if (tempoVal) tempoVal.textContent = tempo.value;
|
const push = (v) => {
|
||||||
send("/launch/tempo", +tempo.value);
|
groups.forEach((g) => {
|
||||||
|
const s = document.getElementById(g.slider);
|
||||||
|
const l = document.getElementById(g.val);
|
||||||
|
if (s) s.value = v;
|
||||||
|
if (l) l.textContent = fmt(v);
|
||||||
|
});
|
||||||
|
send(addr, +v);
|
||||||
};
|
};
|
||||||
tempo && tempo.addEventListener("input", pushTempo);
|
groups.forEach((g) => {
|
||||||
const stepTempo = (d) => {
|
const s = document.getElementById(g.slider);
|
||||||
if (!tempo) return;
|
const clamp = (v) => Math.max(+s.min, Math.min(+s.max, v));
|
||||||
tempo.value = Math.max(+tempo.min, Math.min(+tempo.max, +tempo.value + d));
|
const m = document.getElementById(g.minus);
|
||||||
pushTempo();
|
const p = document.getElementById(g.plus);
|
||||||
|
s && s.addEventListener("input", () => push(+s.value));
|
||||||
|
s && m && m.addEventListener("click", () => push(clamp(+s.value - step)));
|
||||||
|
s && p && p.addEventListener("click", () => push(clamp(+s.value + step)));
|
||||||
|
});
|
||||||
};
|
};
|
||||||
const tMinus = document.getElementById("tempo-minus");
|
bindStepGroup([
|
||||||
const tPlus = document.getElementById("tempo-plus");
|
{ slider: "tempo", minus: "tempo-minus", plus: "tempo-plus", val: "tempo-val" },
|
||||||
tMinus && tMinus.addEventListener("click", () => stepTempo(-1));
|
{ slider: "matrix-tempo", minus: "matrix-tempo-minus", plus: "matrix-tempo-plus", val: "matrix-tempo-val" },
|
||||||
tPlus && tPlus.addEventListener("click", () => stepTempo(1));
|
], 1, (v) => String(Math.round(v)), "/launch/tempo");
|
||||||
|
bindStepGroup([
|
||||||
// Master gain: slider + -/+ steppers (0.05 per click), SC /control/doMaster (0..2)
|
{ slider: "master", minus: "master-minus", plus: "master-plus", val: "master-val" },
|
||||||
const master = document.getElementById("master");
|
{ slider: "matrix-master", minus: "matrix-master-minus", plus: "matrix-master-plus", val: "matrix-master-val" },
|
||||||
const masterVal = document.getElementById("master-val");
|
], 0.05, (v) => (+v).toFixed(2), "/control/doMaster");
|
||||||
const pushMaster = () => {
|
|
||||||
if (masterVal) masterVal.textContent = (+master.value).toFixed(2);
|
|
||||||
send("/control/doMaster", +master.value);
|
|
||||||
};
|
|
||||||
master && master.addEventListener("input", pushMaster);
|
|
||||||
const stepMaster = (d) => {
|
|
||||||
if (!master) return;
|
|
||||||
master.value = Math.max(+master.min, Math.min(+master.max, +master.value + d)).toFixed(2);
|
|
||||||
pushMaster();
|
|
||||||
};
|
|
||||||
const mMinus = document.getElementById("master-minus");
|
|
||||||
const mPlus = document.getElementById("master-plus");
|
|
||||||
mMinus && mMinus.addEventListener("click", () => stepMaster(-0.05));
|
|
||||||
mPlus && mPlus.addEventListener("click", () => stepMaster(0.05));
|
|
||||||
|
|
||||||
// Filter
|
// Filter
|
||||||
const filt = document.getElementById("filter");
|
const filt = document.getElementById("filter");
|
||||||
|
|||||||
Reference in New Issue
Block a user