add midi commands for jx8p but it isnt recognizing them

1 files changed, 129 insertions, 0 deletions

diff --git a/client/index.js b/client/index.js
new file mode 100644
index 0000000..2f47cc1
--- /dev/null
+++ b/client/index.js
@@ -0,0 +1,129 @@
+import WebMidi from 'webmidi'
+import { params } from './jx8p'
+
+let output;
+let channel = 1
+
+function init(){
+  build()
+  bind()
+  WebMidi.enable(ready)
+}
+function ready(err) {
+  if (err) {
+    console.error('webmidi failed to initialize')
+    return
+  }
+  if (!WebMidi.outputs.length) {
+    console.error('no MIDI output found')
+  }
+  console.log(WebMidi.inputs)
+  console.log(WebMidi.outputs)
+  output = WebMidi.outputs[0]
+}
+function build(){
+  const section_template = document.querySelector('#section_template').innerHTML
+  const checkbox_template = document.querySelector('#checkbox_template').innerHTML
+  const range_template = document.querySelector('#range_template').innerHTML
+  const enum_template = document.querySelector('#enum_template').innerHTML
+  const params_by_tag = params.reduce((a,b,i) => {
+    const tag = b.tag || b.name.split(' ')[0]
+    b.index = i
+    if (a[tag]) {
+      a[tag].push(b)
+    } else {
+      a[tag] = [b]
+    }
+    return a
+  }, {})
+  Object.keys(params_by_tag).map(tag => {
+    const els = params_by_tag[tag].map(param => {
+      let t, options;
+      switch (param.type) {
+        case 'checkbox':
+          t = checkbox_template.replace(/{name}/, param.name)
+            .replace(/{param_name}/, param.name.replace(/ /g, '_'))
+            .replace(/{index}/, param.index)
+          break
+        case 'range':
+          t = range_template.replace(/{name}/, param.name)
+            .replace(/{param_name}/, param.name.replace(/ /g, '_'))
+            .replace(/{index}/, param.index)
+            .replace(/{min}/, param.range[0])
+            .replace(/{max}/, param.range[1])
+            .replace(/{value}/, Math.floor((param.range[1] - param.range[0]) / 2))
+          break
+        case 'enum':
+          options = param.values.map(a => '<option value="' + a[0] + '">' + a[1] + '</option>')
+          t = enum_template.replace(/{name}/, param.name)
+            .replace(/{param_name}/, param.name.replace(/ /g, '_'))
+            .replace(/{index}/, param.index)
+            .replace(/{options}/, options)
+            .replace(/{value}/, param.values[0][0])
+          break
+        default:
+          console.log('unknown type', param)
+          t = ""
+          break
+      }
+      return t
+    }).filter(t => !!t)
+    let t = section_template.replace(/{name}/, tag).replace(/{els}/, els.join(''))
+    document.querySelector('#params').innerHTML += t
+  })
+}
+function bind(){
+  toArray(document.querySelectorAll('#params input[type=range]')).forEach(el => {
+    const index = el.dataset.index
+    const param = params[index]
+    el.addEventListener('input', () => {
+      update_param(param, el.value)
+    })
+  })
+  toArray(document.querySelectorAll('#params input[type=checkbox]')).forEach(el => {
+    const index = el.dataset.index
+    const param = params[index]
+    el.addEventListener('input', () => {
+      const isChecked = el.checked
+      const value = isChecked ? param.on : param.off
+      update_param(param, value)
+    })
+  })
+  toArray(document.querySelectorAll('#params select')).forEach(el => {
+    const index = el.dataset.index
+    const param = params[index]
+    el.addEventListener('input', () => {
+      update_param(param, el.value)
+    })
+  })
+  document.querySelector('#randomize').addEventListener('click', randomize)
+}
+function update_param(param, value){
+  if (param.fourteen) {
+    const msb = value >> 7
+    const lsb = value & 127
+    output.sendControlChange(param.fourteen[0], msb, channel)
+    output.sendControlChange(param.fourteen[1], lsb, channel)
+  } else {
+    output.sendControlChange(param.cc, value, channel)
+  }
+}
+function randint(n) {
+  return Math.floor(Math.random() * n)
+}
+function randomize(){
+  params.forEach(param => {
+    let value
+    if (param.randomize === false) return
+    if (param.type === 'range') {
+      value = randint(param.range[1])
+      update_param(param, value)
+      document.querySelector("input[name=" + param.name.replace(/ /g, '_') + "]").value = value
+    }
+  })
+}
+function toArray(a){
+  return Reflect.apply(Array.prototype.slice, a, [])
+}
+
+init()