neige d'aout

knowledge, art, and other stuff

User Tools

Site Tools

Trace:
code61

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision		Previous revision
code61 [2026/03/14 17:05] – created Yukicode61 [2026/03/14 21:33] (current) – Yuki
Line 1: Line 1:
 +MIDI port: <html><select id="di"></select> <span id="connected" style="background: red; width: 1em;">&nbsp;</span></html>
 +
 +<WRAP tabs>
 +  * [[#wrap_settings|Global Settings]]
 +</WRAP>
 +
 +<WRAP settings>
 +|Global channel|<html><select id="option0">
 +<option value="1">Channel 1</option>
 +<option value="2">Channel 2</option>
 +<option value="3">Channel 3</option>
 +<option value="4">Channel 4</option>
 +<option value="5">Channel 5</option>
 +<option value="6">Channel 6</option>
 +<option value="7">Channel 7</option>
 +<option value="8">Channel 8</option>
 +<option value="9">Channel 9</option>
 +<option value="10">Channel 10</option>
 +<option value="11">Channel 11</option>
 +<option value="12">Channel 12</option>
 +<option value="13">Channel 13</option>
 +<option value="14">Channel 14</option>
 +<option value="15">Channel 15</option>
 +<option value="16">Channel 16</option>
 +</select></html>|
 +|XY pad curve|<html><select id="option12">
 +<option value="0">F1</option>
 +<option value="1">F2</option>
 +<option value="2">F3</option>
 +<option value="3">S2</option>
 +<option value="4">S3</option>
 +<option value="5">S4</option>
 +<option value="6">S5</option>
 +<option value="7">S6</option>
 +<option value="8">S7</option>
 +<option value="9">S8</option>
 +</select></html>|
 +|Mackie Control / HUI|<html><select id="option4">
 +<option value="0">Mackie Control</option>
 +<option value="1">HUI</option>
 +</select></html>|
 +|Key Octave|<html><input id="option5" type="number" min="-3" max="3" step="1" /></html>|
 +|Key Transpose|<html><input id="option6" type="number" min="-12" max="12" step="1" /></html>|
 +|Key Curve|<html><select id="option7">
 +<option value="0">C1</option>
 +<option value="1">C2</option>
 +<option value="2">C3</option>
 +<option value="3">C4</option>
 +<option value="4">F1</option>
 +<option value="5">F2</option>
 +<option value="6">F3</option>
 +</select></html>|
 +|Pad Octave|<html><input id="option8" type="number" min="-5" max="5" step="1" /></html>|
 +|Pad Transpose|<html><input id="option9" type="number" min="-12" max="12" step="1" /></html>|
 +|Pad Curve|<html><select id="option10">
 +<option value="0">C1</option>
 +<option value="1">C2</option>
 +<option value="2">C3</option>
 +<option value="3">C4</option>
 +<option value="4">F1</option>
 +<option value="5">F2</option>
 +<option value="6">F3</option>
 +<option value="7">S2</option>
 +<option value="8">S3</option>
 +<option value="9">S4</option>
 +</select></html>|
 +|Encoder Curve|<html><select id="option11">
 +<option value="0">Off</option>
 +<option value="1">C1</option>
 +<option value="2">C2</option>
 +<option value="3">C3</option>
 +</select></html>|
 +|Program|<html><input id="option13" type="number" min="0" max="127" step="1" /></html>|
 +|MSB|<html><input id="option14" type="number" min="0" max="127" step="1" /></html>|
 +|LSB|<html><input id="option15" type="number" min="0" max="127" step="1" /></html>|
 +|MIDI DIN Out|<html><select id="option16">
 +<option value="0">Off</option>
 +<option value="1">On</option>
 +</select></html>|
 +<html>
 +<button onclick="getSettings()">Get Settings</button>
 +<button onclick="setSettings()">Send Settings</button>
 +</html>
 +</WRAP>
 +
 <html> <html>
-<p> 
-<select id="di"></select> 
-</p> 
-<p> 
-<button id="getsettings">Get Settings</button> 
-</p> 
 <script src="https://cdn.jsdelivr.net/npm/webmidi@latest/dist/iife/webmidi.iife.js"></script> <script src="https://cdn.jsdelivr.net/npm/webmidi@latest/dist/iife/webmidi.iife.js"></script>
-<script type="module">+<script> 
 +  Array.prototype.compare = function(a){ 
 +    return this.length === a.length && this.every((v, i) => v === a[i]) 
 +  } 
 +  
   WebMidi   WebMidi
     .enable({sysex: true})     .enable({sysex: true})
     .then(onEnabled)     .then(onEnabled)
     .catch(err => console.log(err));     .catch(err => console.log(err));
 +  var index = 0;
 +  var keybDetected = false;
   function getInput(){   function getInput(){
-    return WebMidi.inputs[document.querySelector("#di").value];+    return WebMidi.inputs[index];
   }   }
   function getOutput(){   function getOutput(){
-    return WebMidi.getOutputByName(getInpiut().name);+    var name = getInput().name; 
 +    return WebMidi.getOutputByName(name.replace("IN","OUT"));
   }   }
   function onEnabled() {   function onEnabled() {
-    WebMidi.inputs.forEach((device, index) => { +    WebMidi.inputs.forEach((device, idx) => { 
-      document.querySelector("#di").innerHTML += `<option value="${index}">${device.name}</option>`;+      document.querySelector("#di").innerHTML += `<option value="${idx}">${device.name}</option>`; 
 +    }); 
 +    if(WebMidi.inputs.length > 0) 
 +    { 
 +      getInput().addListener("sysex", onSysex) 
 +      sendDeviceQuery(); 
 +    } 
 +    document.querySelector("#di").addEventListener("change", e=>{ 
 +      getInput().removeListener("sysex"); 
 +      keybDetected = false; 
 +      document.querySelector("#connected").style.background = "red"; 
 +      index = document.querySelector("#di").value; 
 +      getInput().addListener("sysex", onSysex) 
 +      sendDeviceQuery(); 
 +    }); 
 +  } 
 +  function onSysex(e) { 
 +    if(e.message.manufacturerId.compare([126]) && e.dataBytes.slice(0,8).compare([127,6,2,0,1,5,49,6])){ 
 +      keybDetected = true; 
 +      document.querySelector("#connected").style.background = "green"; 
 +      sendUnlock(); 
 +    } 
 +    if(e.message.manufacturerId.compare([0,1,5]) && e.dataBytes.slice(0,4).compare([127,49,6,108])){ 
 +      var address = e.dataBytes[6]*128+e.dataBytes[7]; 
 +      var value = e.dataBytes[8]*128+e.dataBytes[9]; 
 +      if(address == 5 || address == 8) value -= 5; 
 +      if(address == 6 || address == 9) value -= 12; 
 +      document.querySelector("#option"+address).value = value; 
 +      console.log([address, value]) 
 +    } 
 +  } 
 +  function sendDeviceQuery() { 
 +    getOutput().sendSysex(0x7e, [127,6,1]); 
 +  } 
 +  function sendUnlock() { 
 +    getOutput().sendSysex([0,1,5], [0x7f, 0x31, 0x06, 0x6d, 0, 1, 1]); 
 +  } 
 +  function getSetting(id) { 
 +    var msb = id / 128 % 128; 
 +    var lsb = id % 128; 
 +    getOutput().sendSysex([0,1,5], [0x7f, 0x31, 0x06, 0x6b, 0, 2, msb, lsb]); 
 +  } 
 +  function sendSetting(id, value) { 
 +    var amsb = id / 128 % 128; 
 +    var alsb = id % 128; 
 +    var vmsb = value / 128 % 128; 
 +    var vlsb = value % 128; 
 +    getOutput().sendSysex([0,1,5], [0x7f, 0x31, 0x06, 0x6a, 0, 4, amsb, alsb, vmsb, vlsb]); 
 +  } 
 +  function getSettings() { 
 +    [0,4,5,6,7,8,9,10,11,12,13,14,15,16].forEach(x=>getSetting(x)); 
 +  } 
 +  function setSettings() { 
 +    [0,4,5,6,7,8,9,10,11,12,13,14,15,16].forEach(address=>{ 
 +      var value = document.querySelector("#option"+address).value; 
 +      if(address == 5 || address == 8) value += 5; 
 +      if(address == 6 || address == 9) value += 12; 
 +      sendSetting(address, value)
     });     });
   }   }
 </script> </script>
 </html> </html>
code61.1773522326.txt.gz · Last modified: by Yuki

Page Tools