feat(midi): Support for NoteOn and CC buttons (#507)

* feat(midi): Support for NoteOn and CC buttons

fix #506

* feat(midi): Renamed ccAsNoteOn into ccLatch and added noteOnLatch

* chore(midi): Remove unused console.log

* fix(midi): changes spread operator to foreach loop to replace state

The spread was causing the store module's state to lose the Vuex Observer, this forEach loop retains
the Observer.

fix #523

Co-authored-by: Sam Wray <sam@wray.pro>

src/application/setup-midi.js

@@ -3,6 +3,8 @@ let store;
 const clockHistory = [];
 const diffHistory = [];
 let nextBpmUpdate = 0;
+const TYPE_NOTEON = 144;
+const TYPE_CC = 176;
 
 // create a new audioContext to use intead of modV's
 // existing context - we get timing jitters otherwise
@@ -30,7 +32,7 @@ function handleInput(message) {
  return;
  }
 
- const { listenForClock, listenForInput } = device;
+ const { listenForClock, listenForInput, ccLatch, noteOnLatch } = device;
 
  // clock
  if (type === 248 && listenForClock) {
@@ -78,14 +80,52 @@ function handleInput(message) {
  }
  }
  } else if (listenForInput) {
- store.commit("midi/WRITE_DATA", {
- id: `${id}-${name}-${manufacturer}`,
- type,
- channel,
- data: type === 176 ? data / 127 : data
- });
+ let commitValue = true;
+ let _data = data;
+ let _type = type;
+
+ // Overwrite the default behavior for ControlChange messages so that they
+ // behave like NoteOn
+ if (_type === TYPE_CC && ccLatch) {
+ _type = TYPE_NOTEON;
+ }
+
+ if (_type === TYPE_NOTEON) {
+ // We want to know when the button was pressed
+ if (data > 0) {
+ if (device.channelData !== undefined && device.channelData[channel]) {
+ _data = device.channelData[channel][_type] === 1 ? 0 : 1;
+
+ // Set the inital value if no value exists yet
+ } else {
+ _data = 1;
+ }
+
+ // Don't commit the value as this is "NoteOff" and we want
+ // to make sure that the button is not deactivated when it's
+ // released by the user
+ } else if (noteOnLatch) {
+ commitValue = false;
+ }
+ }
+
+ if (_type === TYPE_CC) {
+ _data = _data / 127;
+ }
+
+ if (commitValue) {
+ store.commit("midi/WRITE_DATA", {
+ id: `${id}-${name}-${manufacturer}`,
+ type: _type,
+ channel,
+ data: _data
+ });
+ }
 
  if (store.state.midi.learning) {
+ // Make sure to use the overwritten type
+ message.data[0] = _type;
+
  store.state.midi.learning(message);
  }
  }

src/application/worker/store/modules/midi.js

@@ -37,7 +37,9 @@ const mutations = {
  manufacturer,
  channelData: {},
  listenForInput: true,
- listenForClock: false
+ listenForClock: false,
+ ccLatch: false,
+ noteOnLatch: false
  });
  },
 
@@ -58,7 +60,13 @@ const mutations = {
  },
 
  SET_STATE(state, newState) {
- state = { ...newState };
+ const keys = Object.keys(newState);
+
+ for (let i = 0, len = keys.length; i < len; i++) {
+ const key = keys[i];
+
+ state[key] = newState[key];
+ }
  }
 };
 

src/components/InputDeviceConfig/MIDI.vue

@@ -11,14 +11,16 @@
  >
  <c span="1">MIDI Inputs</c>
  <c span="1..">
- <grid columns="4">
+ <grid columns="5">
  <c>Name</c>
  <c>Input</c>
  <c>Clock</c>
+ <c>CC Latch</c>
+ <c>NoteOn Latch</c>
  </grid>
  </c>
  <c span="1.." v-for="(device, deviceId) in devices" :key="deviceId">
- <grid columns="4">
+ <grid columns="5">
  <c>{{ device.name }}</c>
  <c>
  <Button
@@ -36,6 +38,22 @@
  {{ device.listenForClock ? "On" : "Off" }}
  </Button>
  </c>
+ <c>
+ <Button
+ class="light"
+ @click="toggleCcLatch(deviceId, !device.ccLatch)"
+ >
+ {{ device.ccLatch ? "On" : "Off" }}
+ </Button>
+ </c>
+ <c>
+ <Button
+ class="light"
+ @click="toggleNoteOnLatch(deviceId, !device.noteOnLatch)"
+ >
+ {{ device.noteOnLatch ? "On" : "Off" }}
+ </Button>
+ </c>
  </grid>
  </c>
  </grid>
@@ -72,6 +90,22 @@ export default {
  key: "listenForClock",
  value
  });
+ },
+
+ toggleCcLatch(id, value) {
+ this.$modV.store.commit("midi/UPDATE_DEVICE", {
+ id,
+ key: "ccLatch",
+ value
+ });
+ },
+
+ toggleNoteOnLatch(id, value) {
+ this.$modV.store.commit("midi/UPDATE_DEVICE", {
+ id,
+ key: "noteOnLatch",
+ value
+ });
  }
  }
 };