Accent colour corresponds to current mode.

src/cambiare/index.mjs

@@ -41,6 +41,20 @@ let mountElement = function (root, children) {
 		root.appendChild(e);
 	});
 };
+let classOff = function (target, classes) {
+	classes.forEach((e) => {
+		if (target.classList.contains(e)) {
+			target.classList.remove(e);
+		};
+	});
+};
+let classOn = function (target, classes) {
+	classes.forEach((e) => {
+		if (!target.classList.contains(e)) {
+			target.classList.add(e);
+		};
+	});
+};
 
 let Cambiare = class extends RootDisplay {
 	#maxPoly = 0;
@@ -88,6 +102,23 @@ let Cambiare = class extends RootDisplay {
 	setClockSource(clockSource) {
 		this.#clockSource = clockSource;
 	};
+	setMode(mode) {
+		let upThis = this;
+		classOff(upThis.#canvas, [`cambiare-mode-gm`, `cambiare-mode-xg`, `cambiare-mode-gs`, `cambiare-mode-ns5r`, `cambiare-mode-05rw`, `cambiare-mode-x5d`, `cambiare-mode-k11`, `cambiare-mode-sg`, `cambiare-mode-g2`, `cambiare-mode-mt32`, `cambiare-mode-sd`, `cambiare-mode-krs`, `cambiare-mode-s90es`, `cambiare-mode-motif`]);
+		if (mode != "?") {
+			classOn(upThis.#canvas, [`cambiare-mode-${mode}`]);
+		};
+	};
+	setPort(port) {
+		let upThis = this;
+		classOff(upThis.#canvas, [`cambiare-start0`, `cambiare-start1`, `cambiare-start2`, `cambiare-start3`, `cambiare-start4`, `cambiare-start5`, `cambiare-start6`, `cambiare-start7`]);
+		classOn(upThis.#canvas, [`cambiare-start${port}`]);
+	};
+	setRange(mode) {
+		let upThis = this;
+		classOff(upThis.#canvas, [`cambiare-port1`, `cambiare-port2`, `cambiare-port4`, `cambiare-compact`]);
+		classOn(upThis.#canvas, [`cambiare-${mode}`]);
+	};
 	attach(attachElement) {
 		let upThis = this;
 		upThis.#visualizer = attachElement;
@@ -96,7 +127,7 @@ let Cambiare = class extends RootDisplay {
 		attachElement.appendChild(containerElement);
 		upThis.#container = containerElement;
 		// Insert the canvas
-		let canvasElement = createElement("div", ["cambiare-canvas", "debug"]);
+		let canvasElement = createElement("div", ["cambiare-canvas", "cambiare-port1", "cambiare-start0", "debug"]);
 		containerElement.appendChild(canvasElement);
 		upThis.#canvas = canvasElement;
 		// Start the resizer
@@ -164,6 +195,7 @@ let Cambiare = class extends RootDisplay {
 		// Opportunistic value refreshing
 		upThis.addEventListener("mode", (ev) => {
 			upThis.#sectInfo.mode.innerText = `${modeNames[ev.data]}`;
+			upThis.setMode(ev.data);
 		});
 		upThis.addEventListener("mastervolume", (ev) => {
 			let cramVolume = Math.round(ev.data * 100) / 100;

src/cambiare_demo/index.js

@@ -41,6 +41,10 @@ audioFilePlayer.addEventListener("ended", () => {
 	visualizer.reset();
 });
 
+visualizer.addEventListener("mode", (ev) => {
+	Alpine.store("deviceMode", ev.data);
+});
+
 const srcPaths = ['../../midi-demo-data/collection/octavia/', './demo/'];
 let getBlobFrom = async function (filename) {
 	let i = 0;
@@ -58,12 +62,15 @@ let getBlobFrom = async function (filename) {
 let audioUri;
 
 self.gMode = async function (mode) {
+	visualizer.device.switchMode(mode, true);
 	Alpine.store("deviceMode", mode);
 };
 self.gRange = async function (mode) {
+	visualizer.setRange(mode);
 	Alpine.store("showRange", mode);
 };
 self.gPort = async function (port) {
+	visualizer.setPort(port);
 	Alpine.store("startPort", port);
 };
 self.gDemo = async function ({file, id}) {

test/cambiare.htm

@@ -26,7 +26,7 @@
 			<div class="column column-option column-button" @click="gOpenLno()" :active="$store.play=='lno'?'true':'false'" title="Reset and receive MIDI events emitted from middleware.">line out</div>
 			<div class="column"></div>
 		</div>
-		<div class="columns is-multiline is-mobile is-vcentered" x-data="{modes:[['?','Auto'],['gm','GM'],['xg','XG'],['gs','GS'],['ns5r','NS5R'],['05rw','05R/W'],['x5d','X5D'],['k11','GMega'],['sg','SG'],['g2','GM2'],['mt32','MT-32'],['sd','SD'],['kross','KROSS 2'],['s90es','S90 ES'],['motif','Motif ES']]}">
+		<div class="columns is-multiline is-mobile is-vcentered" x-data="{modes:[['?','Auto'],['gm','GM'],['xg','XG'],['gs','GS'],['ns5r','NS5R'],['05rw','05R/W'],['x5d','X5D'],['k11','GMega'],['sg','SG'],['g2','GM2'],['mt32','MT-32'],['sd','SD'],['krs','KROSS 2'],['s90es','S90 ES'],['motif','Motif ES']]}">
 			<div class="column column-option"><b>Set mode to</b></div>
 			<template x-for="mode in modes">
 				<div class="column column-option column-button" @click="gMode(mode[0])" x-text="mode[1]" :active="($store.deviceMode||'?')==mode[0]?'true':'false'"></div>

test/css/cambiare.css

@@ -16,8 +16,21 @@ div.cambiare > div.cambiare-container {
 div.cambiare-canvas {
 	--background-color: #222;
 	--foreground-color: #fff;
+	--accent-color: #e9e1ff;
+}
+div.cambiare-canvas.cambiare-mode-xg, div.cambiare-canvas.cambiare-mode-ns5r, div.cambiare-canvas.cambiare-mode-x5d, div.cambiare-canvas.cambiare-mode-05rw, div.cambiare-canvas.cambiare-mode-k11, div.cambiare-canvas.cambiare-mode-s90es, div.cambiare-canvas.cambiare-mode-motif {
 	--accent-color: #9efaa0;
 }
+div.cambiare-canvas.cambiare-mode-gm, div.cambiare-canvas.cambiare-mode-g2, div.cambiare-canvas.cambiare-mode-krs {
+	--accent-color: #a1f3ff;
+}
+div.cambiare-canvas.cambiare-mode-gs, div.cambiare-canvas.cambiare-mode-mt32, div.cambiare-canvas.cambiare-mode-sd {
+	--accent-color: #ffe1a5;
+}
+div.cambiare-canvas.cambiare-mode-sg {
+	--accent-color: #fdd;
+}
+
 div.cambiare div.cambiare-canvas {
 	background: var(--background-color);
 	color: var(--foreground-color);