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

Both sides previous revisionPrevious revision
Next revision		Previous revision
code61 [2026/03/14 20:40] – Yukicode61 [2026/03/14 21:33] (current) – Yuki
Line 1: Line 1:
-MIDI port: <html><select id="di"></select></html>+MIDI port: <html><select id="di"></select> <span id="connected" style="background: red; width: 1em;">&nbsp;</span></html>
  
 <WRAP tabs> <WRAP tabs>
Line 24: Line 24:
 <option value="16">Channel 16</option> <option value="16">Channel 16</option>
 </select></html>| </select></html>|
-|XY pad curve|<html><select id="option4">+|XY pad curve|<html><select id="option12">
 <option value="0">F1</option> <option value="0">F1</option>
 <option value="1">F2</option> <option value="1">F2</option>
Line 36: Line 36:
 <option value="9">S8</option> <option value="9">S8</option>
 </select></html>| </select></html>|
-|Mackie Control / HUI|<html><select id="option5">+|Mackie Control / HUI|<html><select id="option4">
 <option value="0">Mackie Control</option> <option value="0">Mackie Control</option>
 <option value="1">HUI</option> <option value="1">HUI</option>
 </select></html>| </select></html>|
-|Key Octave|<html><input id="option6" type="number" min="-3" max="3" step="1" /></html>| +|Key Octave|<html><input id="option5" type="number" min="-3" max="3" step="1" /></html>| 
-|Key Transpose|<html><input id="option7" type="number" min="-12" max="12" step="1" /></html>| +|Key Transpose|<html><input id="option6" type="number" min="-12" max="12" step="1" /></html>| 
-|Key Curve|<html><select id="option8"> +|Key Curve|<html><select id="option7"> 
-<option value="6">C1</option> +<option value="0">C1</option> 
-<option value="3">C2</option> +<option value="1">C2</option> 
-<option value="4">C3</option> +<option value="2">C3</option> 
-<option value="5">C4</option> +<option value="3">C4</option> 
-<option value="0">F1</option> +<option value="4">F1</option> 
-<option value="1">F2</option> +<option value="5">F2</option> 
-<option value="2">F3</option>+<option value="6">F3</option>
 </select></html>| </select></html>|
-|Pad Octave|<html><input id="option9" type="number" min="-5" max="5" step="1" /></html>| +|Pad Octave|<html><input id="option8" type="number" min="-5" max="5" step="1" /></html>| 
-|Pad Transpose|<html><input id="option10" type="number" min="-12" max="12" step="1" /></html>| +|Pad Transpose|<html><input id="option9" type="number" min="-12" max="12" step="1" /></html>| 
-|Pad Curve|<html><select id="option11">+|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="1">C1</option>
 <option value="2">C2</option> <option value="2">C2</option>
 <option value="3">C3</option> <option value="3">C3</option>
-<option value="4">C4</option> 
-<option value="5">F1</option> 
-<option value="6">F2</option> 
-<option value="7">F3</option> 
-<option value="8">S2</option> 
-<option value="9">S3</option> 
-<option value="10">S4</option> 
-</select></html>| 
-|Encoder Curve|<html><select id="option12"> 
-<option value="0">Off</option> 
-<option value="6">C1</option> 
-<option value="3">C2</option> 
-<option value="4">C3</option> 
 </select></html>| </select></html>|
 |Program|<html><input id="option13" type="number" min="0" max="127" step="1" /></html>| |Program|<html><input id="option13" type="number" min="0" max="127" step="1" /></html>|
Line 80: Line 80:
 <html> <html>
 <button onclick="getSettings()">Get Settings</button> <button onclick="getSettings()">Get Settings</button>
-<button onclick="setSettings()">Set Settings</button>+<button onclick="setSettings()">Send Settings</button>
 </html> </html>
 </WRAP> </WRAP>
Line 101: Line 101:
   }   }
   function getOutput(){   function getOutput(){
-    return WebMidi.getOutputByName(getInput().name);+    var name = getInput().name; 
 +    return WebMidi.getOutputByName(name.replace("IN","OUT"));
   }   }
   function onEnabled() {   function onEnabled() {
Line 107: Line 108:
       document.querySelector("#di").innerHTML += `<option value="${idx}">${device.name}</option>`;       document.querySelector("#di").innerHTML += `<option value="${idx}">${device.name}</option>`;
     });     });
-    getInput().addListener("sysex", onSysex)+    if(WebMidi.inputs.length > 0) 
 +    { 
 +      getInput().addListener("sysex", onSysex) 
 +      sendDeviceQuery(); 
 +    }
     document.querySelector("#di").addEventListener("change", e=>{     document.querySelector("#di").addEventListener("change", e=>{
       getInput().removeListener("sysex");       getInput().removeListener("sysex");
       keybDetected = false;       keybDetected = false;
 +      document.querySelector("#connected").style.background = "red";
       index = document.querySelector("#di").value;       index = document.querySelector("#di").value;
       getInput().addListener("sysex", onSysex)       getInput().addListener("sysex", onSysex)
Line 119: Line 125:
     if(e.message.manufacturerId.compare([126]) && e.dataBytes.slice(0,8).compare([127,6,2,0,1,5,49,6])){     if(e.message.manufacturerId.compare([126]) && e.dataBytes.slice(0,8).compare([127,6,2,0,1,5,49,6])){
       keybDetected = true;       keybDetected = true;
 +      document.querySelector("#connected").style.background = "green";
       sendUnlock();       sendUnlock();
     }     }
Line 124: Line 131:
       var address = e.dataBytes[6]*128+e.dataBytes[7];       var address = e.dataBytes[6]*128+e.dataBytes[7];
       var value = e.dataBytes[8]*128+e.dataBytes[9];       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;       document.querySelector("#option"+address).value = value;
       console.log([address, value])       console.log([address, value])
Line 138: Line 147:
     var lsb = id % 128;     var lsb = id % 128;
     getOutput().sendSysex([0,1,5], [0x7f, 0x31, 0x06, 0x6b, 0, 2, msb, lsb]);     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() {   function getSettings() {
     [0,4,5,6,7,8,9,10,11,12,13,14,15,16].forEach(x=>getSetting(x));     [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.1773535228.txt.gz · Last modified: by Yuki

Page Tools