Webmidi za parametriziranje senzorjev, popravki

danijela.js

@@ -5,10 +5,28 @@ const Quat = require('quaternion');
 // Stevilke senzorjev
 const INDEX_GLAVA = 1
 const INDEX_ROKA = 2
+const INDEX_BEKAP = 3
 
 // CC kanali za midi mapping (kanal, CC kanal)
-const senzorGlaveCCKanal = [176, 75]
-const senzorRokeCCKanal = [176, 76]
+const midiKanal = 176;
+
+const senzorCCKanal = {
+  1: 75,
+  2: 76,
+  3: 77
+}
+
+const senzorCCMute = {
+  1: 78,
+  2: 79,
+  3: 80
+}
+
+const senzorCCkalibracija = {
+  1: 81,
+  2: 82,
+  3: 83
+}
 
 const DEBUG = {
   midi: true,
@@ -16,42 +34,77 @@ const DEBUG = {
 }
 
 // Kalibracijsko izhodisce
-let izhodisceQGlave = new Quat()
-let izhodisceQRoke = new Quat()
+const izhodisceQ = {
+  1: new Quat(),
+  2: new Quat(),
+  3: new Quat()
+}
 
-let prejsnjiQGlave = new Quat()
-let prejsnjiQRoke = new Quat()
+const prejsnjiQ = {
+  1: new Quat(),
+  2: new Quat(),
+  3: new Quat()
+}
 
-let eulerRotacijaRoke = [0, 0, 0]
-let eulerRotacijaGlave = [0, 0, 0]
+const eulerRotacija = {
+  1: [0, 0, 0],
+  2: [0, 0, 0],
+  3: [0, 0, 0]
+}
 
-let senzorGlaveCC = 64
-let senzorRokeCC = 64
+const senzorCC = {
+  1: 64,
+  2: 64,
+  3: 64
+}
 
-let staroVrtenjeZmidi = 0;
+let staroVrtenjeZMidi = {
+  1: 0,
+  2: 0,
+  3: 0
+};
+
+const muteMidi = {
+  1: 0,
+  2: 0,
+  3: 0
+}
 
 // Midi controller input
 const mi = new midi.Input()
 mi.openVirtualPort("danijela-midi")
 mi.on('message', (deltaTime, msg) => {
-  if (msg[0] === senzorGlaveCCKanal[0]
-      && msg[1] === senzorGlaveCCKanal[1]) {
-    senzorGlaveCC = msg[2]
-    console.log(`senzor glave CC ${senzorGlaveCC}`)
+  if (msg[0] === midiKanal) {
+    if (Object.values(senzorCCKanal).includes(msg[1])) {
+      const s = Object.values(senzorCCKanal).indexOf(msg[1]) + 1
+      if (!muteMidi[s]) {
+        console.log(`senzor ${s}: ${msg[2]}`)
+      }
+    } else if (Object.values(senzorCCMute).includes(msg[1])) {
+      const s = Object.values(senzorCCMute).indexOf(msg[1]) + 1
+      if (msg[2]) {
+        console.log(`senzor UNMUTE ${s}`)
+        muteMidi[s] = false;
+      } else {
+        muteMidi[s] = true;
+        console.log(`senzor MUTE ${s}`)
+      }
+    } else if (Object.values(senzorCCkalibracija).includes(msg[1])) {
+      const s = Object.values(senzorCCkalibracija).indexOf(msg[1]) + 1
+      izhodisceQ[s] = prejsnjiQ[s].conjugate()
+      console.log(`senzor KALIBRACIJA ${s}`)
     }
-  if (msg[0] === senzorRokeCCKanal[0]
-      && msg[1] === senzorRokeCCKanal[1]) {
-    senzorRokeCC = msg[2]
-    console.log(`senzor roke CC ${senzorRokeCC}`)
   }
 
   // console.log(`midi in: ${msg} d: ${deltaTime}`);
 
+      /*
   if (senzorGlaveCC === 0 && senzorRokeCC === 0) {
     console.log('===== KALIBRACIJA! =====')
     let izhodisceQGlave = prejsnjiQGlave.conjugate()
     let izhodisceQRoke = prejsnjiQRoke.conjugate()
   }
+  */
 })
 
 // Razpon za pospeskomerje
@@ -88,7 +141,7 @@ function posljiMidi(kanal, vrednost, jakost) {
   })
 }
 function posljiMidiCC(kanal, vrednost) {
-  posljiMidi(176, kanal, vrednost);
+  posljiMidi(midiKanal, kanal, vrednost);
 }
 
 //const norm = (val, min, max) => Math.min(1, (val - min) / (max - min))
@@ -139,23 +192,23 @@ oscWS.on('message', ({ address, args }) => {
     if (addr == 'quaternion') {
       //console.log('IDX', index)
       // Izracunaj spremembo rotacije
-      const novQGlave = new Quat({w: args[0], x: args[1], y: args[2], z: args[3]})
-      const novQGlaveC = novQGlave.mul(izhodisceQGlave)
-      const qWdGlave = novQGlaveC.div(prejsnjiQGlave)
-      prejsnjiQGlave = novQGlaveC;
+      const novQ = new Quat({w: args[0], x: args[1], y: args[2], z: args[3]})
+      const novQC = novQ.mul(izhodisceQ[index])
+      const qWd = novQC.div(prejsnjiQ[index])
+      prejsnjiQ[index] = novQC[index];
 
-      const eulerD = qWdGlave.toEuler()
-      eulerRotacijaGlave[0] += eulerD.roll * (senzorGlaveCC / 64);
-      eulerRotacijaGlave[1] += eulerD.pitch * (senzorGlaveCC / 64);
-      eulerRotacijaGlave[2] += eulerD.yaw * (senzorGlaveCC / 64);
+      const eulerD = qWd[index].toEuler()
+      eulerRotacija[index][0] += eulerD.roll * (senzorCC[index] / 64);
+      eulerRotacija[index][1] += eulerD.pitch * (senzorCC[index] / 64);
+      eulerRotacija[index][2] += eulerD.yaw * (senzorCC[index] / 64);
 
-      const vrtenjeX = Math.abs(Math.sin(eulerRotacijaGlave[0]));
+      const vrtenjeX = Math.abs(Math.sin(eulerRotacija[index][0]));
       /*
       posljiMidi(180, 20, Math.round(vrtenjeX * 127));
       */
 
       // Roka dol/gor
-      const vrtenjeY = Math.abs(Math.sin(eulerRotacijaGlave[1]));
+      const vrtenjeY = Math.abs(Math.sin(eulerRotacija[index][1]));
       //posljiMidi(180, 20, Math.round(vrtenjeY * 127));
 
       //posljiMidi(181, 20, Math.round(vrtenjeY * 127));
@@ -163,29 +216,16 @@ oscWS.on('message', ({ address, args }) => {
 
       // Vrtenje levo/desno (stegnjena roka)
       //console.log(eulerRotacijaGlave)
-      const vrtenjeZ = normSin(eulerRotacijaGlave[2])
+      const vrtenjeZ = normSin(eulerRotacija[index][2])
       const vrtenjeZmidi = Math.round(vrtenjeZ * 127);
 
       //console.log('vrtenjeZ', vrtenjeZmidi)
       //console.log('cmp', vrtenjeZmidi, staroVrtenjeZmidi);
-      if ((vrtenjeZmidi !== staroVrtenjeZmidi)
-          && (senzorRokeCC !== 0)) {
+      if (vrtenjeZmidi !== staroVrtenjeZMidi[index]
+         && !muteMidi[index]) {
         posljiMidi(182, 20, vrtenjeZmidi);
-        staroVrtenjeZmidi = vrtenjeZmidi;
+        staroVrtenjeZMidi[index] = vrtenjeZmidi;
       }
-
-      //console.log('VRTENJE', euler.map(x => x.toFixed(3)));
-
-      /*
-      if (vrtenjeZ > 0.95 && !cakaj) {
-        console.log('POSLJI TON!');
-        //posljiMidi(151, 60, 127);
-        cakaj = true;
-        setTimeout(function () {
-          cakaj = false;
-        }, 250);
-      }
-      */
     }
   }
 })

webmidi/midipanel.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <title>Gravitacija Perspektive Midi</title>
+    <script src="touchmidi_2.2.0.js"></script>
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
+  <style type="text/css">
+
+:root {
+  /* these variables are used everywhere */
+  --bg: black; /* background colour */
+  --b-radius: min(1.9vmin, 15px); /* border radius */
+  --b-width: 0.3rem; /* border thickness */
+  --spacing: 0.3rem; /* widget spacing */
+
+  --font: 'PT Sans', sans-serif; /* Consolas, 'Courier New', monospace; */
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow-y: hidden;
+  color: white;
+  background-color: var(--bg);
+  font-family: var(--font);
+  touch-action: none;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+midi-button {
+  max-height: 7rem;
+}
+
+   .kontrole {
+       display: flex;
+       flex-direction: column;
+       height: 100%;
+   }
+
+  </style>
+  </head>
+  <body>
+    <section class="kontrole">
+      <group-row>
+        <midi-encoder cc="75" label="s1\n%v" value="64"></midi-encoder>
+        <midi-encoder cc="76" label="s2\n%v" value="64"></midi-encoder>
+        <midi-encoder cc="77" label="s3\n%v" value="64"></midi-encoder>
+      </group-row>
+      <group-row>
+        <midi-button toggle cc="78" label="Mute s1" colour="red" value="0" value-off="127"></midi-button>
+        <midi-button toggle cc="79" label="Mute s2" colour="red" value="0" value-off="127"></midi-button>
+        <midi-button toggle cc="80" label="Mute s3" colour="red" value="0" value-off="127"></midi-button>
+      </group-row>
+      <group-row>
+        <midi-button cc="81" label="cal\ns1"></midi-button>
+        <midi-button cc="82" label="cal\ns2"></midi-button>
+        <midi-button cc="83" label="cal\ns3"></midi-button>
+      </group-row>
+    </section>
+</body></html>