Skip to content

Commit

Permalink
Channel visibility toggle.
Browse files Browse the repository at this point in the history
  • Loading branch information
@PoneyClairDeLune
PoneyClairDeLune committed Sep 1, 2023
1 parent 52bd09a commit 3fdfe30
Show file tree
Hide file tree
Showing 4 changed files with 89 additions and 24 deletions.
1 change: 1 addition & 0 deletions src/basic/index.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -283,6 +283,7 @@ let RootDisplay = class extends CustomEventSource {
eventPassThru(upThis.device, upThis, "channelmin");
eventPassThru(upThis.device, upThis, "channelmax");
eventPassThru(upThis.device, upThis, "channelreset");
eventPassThru(upThis.device, upThis, "channeltoggle");
eventPassThru(upThis.device, upThis, "screen");
eventPassThru(upThis.device, upThis, "metacommit");
eventPassThru(upThis.device, upThis, "efxreverb");
Expand Down
51 changes: 48 additions & 3 deletions src/cambiare/index.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ let Cambiare = class extends RootDisplay {
let range = upThis.#renderRange, port = upThis.#renderPort;
upThis.#sectPart.forEach((e, i) => {
if (i >= port && i < (port + range)) {
classOn(e.root, [`part-active`]);
classOn(e.root, [`port-active`]);
let index = i - port;
let {l, t} = portPos[index * (4 / range)];
e.root.style.top = `${t}px`;
Expand All @@ -186,7 +186,7 @@ let Cambiare = class extends RootDisplay {
e.root.style.top = `${i * (range > 2 ? 26 : 52)}px`;
});
} else {
classOff(e.root, [`part-active`]);
classOff(e.root, [`port-active`]);
e.root.style.top = "";
e.root.style.left = "";
e.forEach((e, i) => {
Expand Down Expand Up @@ -305,16 +305,48 @@ let Cambiare = class extends RootDisplay {
upThis.#sectPart[port] = [];
upThis.#sectPart[port].root = createElement("div", [`boundary`, `part-port-${port}`]);
for (let part = 0; part < 16; part ++) {
let dispPart = (startCh | part) + 1;
if (dispPart >= 100) {
dispPart = `${Math.floor(dispPart / 10).toString(16)}${dispPart % 10}`;
} else {
dispPart = `${dispPart}`.padStart(2, "0");
};
upThis.#sectPart[port][part] = {
"root": createElement("div", [`boundary`, `part-channel`]),
"major": createElement("div", [`boundary`, `part-info-major`]),
"minor": createElement("div", [`boundary`, `part-info-minor`], {t: 26}),
"keys": createElement("div", [`boundary`, `part-keys`]),
"notes": createElement("div", [`boundary`, `part-keyboard`])
"notes": createElement("div", [`boundary`, `part-keyboard`]),
"number": createElement("span", [`field`, `field-label`], {t: 1, w: 18, h: 25, i: dispPart}),
"voice": createElement("span", [`field`], {l: 22, t: 1, w: 121, h: 25}),
"vol": createElement("span", [`field`, `part-cc`], {l: 146}),
"exp": createElement("span", [`field`, `part-cc`], {l: 152}),
"mod": createElement("span", [`field`, `part-cc`], {l: 158}),
"rev": createElement("span", [`field`, `part-cc`], {l: 164}),
"cho": createElement("span", [`field`, `part-cc`], {l: 170}),
"var": createElement("span", [`field`, `part-cc`], {l: 176}),
"brt": createElement("span", [`field`, `part-cc`], {l: 182}),
"por": createElement("span", [`field`, `part-cc`], {l: 188}),
"cea": createElement("span", [`field`, `part-cc`], {l: 194}),
"ceb": createElement("span", [`field`, `part-cc`], {l: 200})
};
mountElement(upThis.#sectPart[port][part].keys, [
upThis.#sectPart[port][part].notes
]);
mountElement(upThis.#sectPart[port][part].major, [
upThis.#sectPart[port][part].number,
upThis.#sectPart[port][part].voice,
upThis.#sectPart[port][part].vol,
upThis.#sectPart[port][part].exp,
upThis.#sectPart[port][part].mod,
upThis.#sectPart[port][part].rev,
upThis.#sectPart[port][part].cho,
upThis.#sectPart[port][part].var,
upThis.#sectPart[port][part].brt,
upThis.#sectPart[port][part].por,
upThis.#sectPart[port][part].cea,
upThis.#sectPart[port][part].ceb
]);
mountElement(upThis.#sectPart[port][part].root, [
upThis.#sectPart[port][part].major,
upThis.#sectPart[port][part].minor,
Expand Down Expand Up @@ -363,6 +395,12 @@ let Cambiare = class extends RootDisplay {
upThis.addEventListener("efxinsert0", (ev) => {
upThis.#sectInfo.insert.innerText = upThis.getEfx(ev.data);
});
upThis.addEventListener("channeltoggle", (ev) => {
let {part, active} = ev.data;
([classOff, classOn][active])(upThis.#sectPart[part >> 4][part & 15].root, [
`part-active`
]);
});
upThis.addEventListener("metacommit", (ev) => {
let meta = ev.data;
//console.debug(meta);
Expand Down Expand Up @@ -454,11 +492,18 @@ let Cambiare = class extends RootDisplay {
upThis.#metaType = "";
upThis.#metaLastLine = null;
try {
// Remove all meta
let list = upThis.#sectMeta.view.children;
for (let pointer = list.length - 1; pointer >= 0; pointer --) {
list[pointer].remove();
};
upThis.#sectMeta.view.style.transform = `translateX(0px) translateY(140px)`;
// Reset channels
for (let part = 0; part < allocated.ch; part ++) {
classOff(upThis.#sectPart[part >> 4][part & 15].root, [
`part-active`
]);
};
} catch (err) {};
});
};
Expand Down
39 changes: 24 additions & 15 deletions src/state/index.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -441,7 +441,7 @@ let OctaviaDevice = class extends CustomEventSource {
let part = det.channel;
// Note on, but should be off if velocity is 0.
// Set channel active
this.#chActive[part] = 1;
this.setChActive(part, 1)
let rawNote = det.data[0];
let velocity = det.data[1];
if (velocity > 0) {
Expand Down Expand Up @@ -475,14 +475,14 @@ let OctaviaDevice = class extends CustomEventSource {
case modeMap.s90es:
case modeMap.motif: {
if (det.data[0] == 0) {
([0, 63].indexOf(det.data[1]) > -1) && (this.#chActive[part] = 1);
([0, 63].indexOf(det.data[1]) > -1) && (this.setChActive(part, 1));
break;
};
det.data[1] && (this.#chActive[part] = 1);
det.data[1] && (this.setChActive(part, 1));
break;
};
default: {
this.#chActive[part] = 1;
this.setChActive(part, 1);
break;
};
};
Expand Down Expand Up @@ -814,11 +814,11 @@ let OctaviaDevice = class extends CustomEventSource {
switch (this.#mode) {
case modeMap.s90es:
case modeMap.motif: {
det.data && (this.#chActive[part] = 1);
det.data && (this.setChActive(part, 1));
break;
};
default: {
this.#chActive[part] = 1;
this.setChActive(part, 1);
};
};
this.#prg[part] = det.data;
Expand Down Expand Up @@ -983,10 +983,10 @@ let OctaviaDevice = class extends CustomEventSource {
//console.debug(tree);
};
getActive() {
let result = this.#chActive.slice();
if (this.#mode == modeMap.mt32) {
let result = this.#chActive;
//if (this.#mode == modeMap.mt32) {
//result[0] = 0;
};
//};
return result;
};
getCc(channel) {
Expand Down Expand Up @@ -1026,6 +1026,15 @@ let OctaviaDevice = class extends CustomEventSource {
this.#cc[part * allocated.cc + ccToPos[0]] = drumMsb[mode];
};
};
setChActive(part, active = 0) {
if (this.#chActive[part] != active) {
this.dispatchEvent("channeltoggle", {
part,
active
});
};
this.#chActive[part] = active;
};
getPitch() {
return this.#pitch;
};
Expand Down Expand Up @@ -3056,7 +3065,7 @@ let OctaviaDevice = class extends CustomEventSource {
upThis.#prg[part] = korgDrums[e - 128];
};
if (e > 0) {
upThis.#chActive[part] = 1;
upThis.setChActive(part, 1);
};
break;
};
Expand Down Expand Up @@ -3561,7 +3570,7 @@ let OctaviaDevice = class extends CustomEventSource {
// Program
upThis.#prg[part] = e;
if (e > 0) {
upThis.#chActive[part] = 1;
upThis.setChActive(part, 1);
};
break;
};
Expand Down Expand Up @@ -3791,7 +3800,7 @@ let OctaviaDevice = class extends CustomEventSource {
}, () => {
upThis.#cc[chOff + ccToPos[7]] = e; // volume
}, () => {
upThis.#chActive[part] = e; // toggle channel
uupThis.setChActive(part, e); // toggle channel
}, () => {
upThis.#cc[chOff + ccToPos[10]] = e; // pan
}, () => {
Expand Down Expand Up @@ -3866,7 +3875,7 @@ let OctaviaDevice = class extends CustomEventSource {
rpnOff = part * allocated.rpn;
let dPref = `GMLX CH${part + 1} `;
[() => {
upThis.#chActive[part] = e; // toggle channel
upThis.setChActive(part, e); // toggle channel
}, () => {
upThis.#cc[chOff + ccToPos[7]] = e; // volume
}, () => {
Expand Down Expand Up @@ -4006,11 +4015,11 @@ let OctaviaDevice = class extends CustomEventSource {
([() => {
upThis.#cc[chOff + ccToPos[0]] = e;
}, () => {
e && (upThis.#chActive[part] = 1);
e && (upThis.setChActive(part, 1));
upThis.#cc[chOff + ccToPos[32]] = e;
upThis.setChType(part, ([32, 40].indexOf(e) > -1) ? upThis.CH_DRUMS : upThis.CH_MELODIC, upThis.#mode, true);
}, () => {
e && (upThis.#chActive[part] = 1);
e && (upThis.setChActive(part, 1));
upThis.#prg[part] = e;
}, () => {
let ch = upThis.chRedir(e, track, true);
Expand Down
22 changes: 16 additions & 6 deletions test/css/cambiare.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,9 +145,6 @@ div.cambiare-canvas > div.sect-part > div {
height: 832px;
display: none;
}
div.cambiare-canvas > div.sect-part > div.part-active {
display: block;
}
div.cambiare-canvas.cambiare-port2 > div.sect-part > div,
div.cambiare-canvas.cambiare-port4 > div.sect-part > div {
width: 936px;
Expand All @@ -158,18 +155,27 @@ div.cambiare-canvas.cambiare-port4 > div.sect-part > div {
div.cambiare-canvas > div.sect-part div.part-channel {
height: 52px;
width: 100%;
display: none;
}
div.cambiare-canvas.cambiare-port4 > div.sect-part div.part-channel {
height: 26px;
}
div.cambiare-canvas > div.sect-part div.part-info-major,
div.cambiare-canvas > div.sect-part div.part-info-minor {
width: 230px;
width: 254px;
height: 26px;
font-size: 20px;
}
div.cambiare-canvas > div.sect-part span.part-cc {
width: 4px;
height: 24px;
top: 25px;
transform: translateY(-100%);
background: var(--accent-color);
}
div.cambiare-canvas > div.sect-part div.part-keys {
left: 232px;
width: calc(100% - 232px);
left: 256px;
width: calc(100% - 256px);
height: 100%;
}
div.cambiare-canvas > div.sect-part div.part-keyboard {
Expand All @@ -180,3 +186,7 @@ div.cambiare-canvas > div.sect-part div.part-keyboard {
div.cambiare-canvas.cambiare-port4 > div.sect-part div.part-info-minor {
display: none;
}
div.cambiare-canvas > div.sect-part > div.port-active,
div.cambiare-canvas > div.sect-part div.part-active {
display: block;
}

0 comments on commit 3fdfe30

Please sign in to comment.