add midi cc to patch interface

Author: 0la0

src/app/components/metronome/index.js

@@ -12,48 +12,27 @@ const metronome = metronomeManager.getMetronome();
 const titleSymbols = [ '\\', '|', '/', '-', ];
 
 class Metronome extends BaseComponent {
-
   constructor() {
-    super(style, markup);
+    super(style, markup, ['metronomeButton', 'metronomeInput']);
     this.isRunning = false;
-    this.metronomeButton = this.shadowRoot.getElementById('metronome-button');
-    this.input = this.shadowRoot.getElementById('metronome-input');
-    this.input.value = metronome.getTempo();
-    this.input.addEventListener('change', $event => {
-      const value = parseInt(this.input.value);
+    this.dom.metronomeInput.value = metronome.getTempo();
+    this.dom.metronomeInput.addEventListener('change', $event => {
+      const value = parseInt(this.dom.metronomeInput.value);
       metronome.setTempo(value);
     });
     this.titleIndex = 0;
   }
 
   connectedCallback() {
     this.titleElement = document.getElementsByTagName('title')[0];
-    // console.log('titleElement', titleElement);
-
     window.addEventListener('keydown', $event => {
       if ($event.code !== 'Space') { return; }
       $event.preventDefault();
       $event.stopPropagation();
-      this.metronomeButton.click();
+      this.dom.metronomeButton.click();
     });
-
-    const schedulable = {
-      processTick: (tickNumber, time) => {},
-      render: (beatNumber, lastBeatNumber) => {
-        graphicsChannel.postMessage({
-          type: 'TICK',
-          beatNumber,
-          lastBeatNumber
-        });
-        if (beatNumber % 8 !== 0) { return; }
-        const symbol = titleSymbols[ this.titleIndex++ % titleSymbols.length ];
-        this.titleElement.innerText = `${symbol} ${symbol} ${symbol}`;
-      },
-      start: () => {},
-      stop: () => {}
-    };
-    const scheduler = metronomeManager.getScheduler();
-    scheduler.register(schedulable);
+    this.schedulable = this.buildSchedulable();
+    metronomeManager.getScheduler().register(this.schedulable);
   }
 
   onMetronomeClick() {
@@ -69,8 +48,26 @@ class Metronome extends BaseComponent {
 
   disconnectedCallback() {
     metronome.stop();
+    metronomeManager.getScheduler().deregister(this.schedulable);
   };
 
+  buildSchedulable() {
+    return {
+      processTick: (tickNumber, time) => {},
+      render: (beatNumber, lastBeatNumber) => {
+        graphicsChannel.postMessage({
+          type: 'TICK',
+          beatNumber,
+          lastBeatNumber
+        });
+        if (beatNumber % 8 !== 0) { return; }
+        const symbol = titleSymbols[ this.titleIndex++ % titleSymbols.length ];
+        this.titleElement.innerText = `${symbol} ${symbol} ${symbol}`;
+      },
+      start: () => {},
+      stop: () => {}
+    };
+  }
 }
 
 export default new Component(COMPONENT_NAME, Metronome);

src/app/components/metronome/metronome-ctrl.html

@@ -1,5 +1,5 @@
 <flat-button
-  id="metronome-button"
+  id="metronomeButton"
   class="metronome-button"
   click="onMetronomeClick"
   ontext="Stop"
@@ -9,7 +9,7 @@
 
 <p class="metronome-label">Tempo:</p>
 <input
-  id="metronome-input"
+  id="metronomeInput"
   class="metronome-input"
   type="number"
   value="120" />

src/app/components/patch-midi-interface/index.js

@@ -13,18 +13,28 @@ const COMPONENT_NAME = 'patch-midi-interface';
 const style = require(`./${COMPONENT_NAME}.css`);
 const markup = require(`./${COMPONENT_NAME}.html`);
 
-const dom = [ 'deviceSelector', 'channelSelector', ];
+const dom = [ 'deviceSelector', 'channelSelector', 'noteInputContainer', 'noteInput' ];
 
 class PatchMidiInterface extends BaseComponent {
   constructor(options) {
     super(style, markup, dom);
     this.eventModel = new PatchEventModel(this.schedule.bind(this));
     this.audioModel = new PatchAudioModel('MIDI Out', this.eventModel, PATCH_EVENT.MESSAGE, PATCH_EVENT.EMPTY);
     this.outputDevice;
+    this.isNote = true;
+    this.noteValue = 60;
   }
 
   connectedCallback() {
     this.populateSelector();
+    this.dom.noteInput.addEventListener('change', event => {
+      const noteValue = parseInt(event.target.value, 10);
+      if (isNaN(noteValue)) {
+        this.dom.noteInput.value = 60;
+        return;
+      }
+      this.noteValue = noteValue;
+    });
     setTimeout(() => {
       const channels = IntArray(16).map(i => ({ label: i, value: i}));
       this.dom.channelSelector.setOptions(channels);
@@ -52,18 +62,33 @@ class PatchMidiInterface extends BaseComponent {
       });
   }
 
-  onChannelChange(channel) { this.channel = channel; }
+  onChannelChange(channel) { this.channel = parseInt(channel, 10); }
+
+  onNoteCcToggle() {
+    this.isNote = !this.isNote;
+    this.isNote ?
+      this.dom.noteInputContainer.classList.add('row-hidden') :
+      this.dom.noteInputContainer.classList.remove('row-hidden');
+  }
 
-  // TODO: note / cc toggle
   schedule(message) {
     if (!this.outputDevice) { return; }
+    this.isNote ? this.scheduleNote(message) : this.scheduleCC(message);
+  }
+
+  scheduleNote(message) {
     const offTime = message.time.midi + 100; // TODO: handle note duration
     const msgValue = 64;
     const onMessage = new MidiMessage(COMMAND.ON, this.channel, message.note, msgValue).serialize();
     const offMessage = new MidiMessage(COMMAND.OFF, this.channel, message.note, msgValue).serialize();
     this.outputDevice.send(onMessage, message.time.midi);
     this.outputDevice.send(offMessage, offTime);
   }
+
+  scheduleCC(message) {
+    const ccMessage = new MidiMessage(COMMAND.CC, this.channel, this.noteValue, message.note).serialize();
+    this.outputDevice.send(ccMessage, message.time.midi);
+  }
 }
 
 export default new Component(COMPONENT_NAME, PatchMidiInterface);

src/app/components/patch-midi-interface/patch-midi-interface.css

@@ -1,11 +1,46 @@
-.flex-end {
-  justify-content: flex-end;
+.space-between {
+  justify-content: space-between;
 }
 
 .row-margin {
   margin-bottom: 4px;
 }
 
 .label {
-  margin-right: 4px;
+  margin-right: 8px;
+}
+
+.note-toggle-row {
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.note-row {
+  justify-content: flex-end;
+  align-items: baseline;
+  width: 80px;
+  transform: scaleX(1);
+  opacity: 1;
+  transition: 0.2s transform ease, 0.2s opacity ease;
+}
+
+.row-hidden {
+  transform-origin: right;
+  transform: scaleX(0);
+  opacity: 0;
+}
+
+.note-input {
+  height: 25px;
+  font-size: 1em;
+  margin: 0;
+  width: 30px;
+  background-color: var(--color-black-light);
+  border: none;
+  border-bottom: 1px solid var(--color-grey-light);
+  outline: none;
+  color: var(--color-grey-light);
+}
+.note-input:focus {
+  outline: none;
 }

src/app/components/patch-midi-interface/patch-midi-interface.html

@@ -1,4 +1,4 @@
-<div class="row flex-end row-margin">
+<div class="row space-between row-margin">
   <flat-button
     click="populateSelector"
     ontext="&#8635;"
@@ -13,3 +13,20 @@
   <p class="label">Channel</p>
   <combo-box id="channelSelector" change="onChannelChange"></combo-box>
 </div>
+<div class="row note-toggle-row">
+  <flat-button
+    id="noteCcToggle"
+    click="onNoteCcToggle"
+    isToggle="true"
+    ontext="CC"
+    offtext="NOTE">
+  </flat-button>
+  <div id="noteInputContainer" class="row note-row row-hidden">
+    <p class="label">Note</p>
+    <input
+      id="noteInput"
+      class="note-input"
+      type="number"
+      value="60" />
+  </div>
+</div>