Added new UI to display midi input

4 files changed, 22 insertions, 17 deletions

diff --git a/desktop/sources/scripts/client.js b/desktop/sources/scripts/client.js
index ea0f555..2909522 100644
--- a/desktop/sources/scripts/client.js
+++ b/desktop/sources/scripts/client.js
@@ -12,7 +12,7 @@
 /* global Theme */
 
 function Client () {
-  this.version = 163
+  this.version = 164
   this.library = library
 
   this.theme = new Theme(this)
@@ -115,9 +115,9 @@ function Client () {
     this.acels.set('View', 'Zoom Out', 'CmdOrCtrl+-', () => { this.modZoom(-0.0625) })
     this.acels.set('View', 'Zoom Reset', 'CmdOrCtrl+0', () => { this.modZoom(1, true) })
 
-    this.acels.set('Midi', 'Play/Pause Midi', 'Shift+Space', () => { this.clock.togglePlay(true) })
-    this.acels.set('Midi', 'Next Input Device', 'CmdOrCtrl+}', () => { this.io.midi.selectNextInput() })
-    this.acels.set('Midi', 'Next Output Device', 'CmdOrCtrl+]', () => { this.io.midi.selectNextOutput() })
+    this.acels.set('Midi', 'Play/Pause Midi', 'CmdOrCtrl+Space', () => { this.clock.togglePlay(true) })
+    this.acels.set('Midi', 'Next Input Device', 'CmdOrCtrl+,', () => { this.clock.setFrame(0); this.io.midi.selectNextInput() })
+    this.acels.set('Midi', 'Next Output Device', 'CmdOrCtrl+.', () => { this.clock.setFrame(0); this.io.midi.selectNextOutput() })
     this.acels.set('Midi', 'Refresh Devices', 'CmdOrCtrl+Shift+M', () => { this.io.midi.refresh() })
 
     this.acels.set('Communication', 'Choose OSC Port', 'alt+O', () => { this.commander.start('osc:') })
@@ -316,12 +316,12 @@ function Client () {
   }
 
   this.drawInterface = () => {
-    this.write(`${this.cursor.inspect()}`, this.grid.w * 0, this.orca.h, this.grid.w)
+    this.write(`${this.cursor.inspect()}`, this.grid.w * 0, this.orca.h, this.grid.w - 1)
     this.write(`${this.cursor.x},${this.cursor.y}${this.cursor.ins ? '+' : ''}`, this.grid.w * 1, this.orca.h, this.grid.w, this.cursor.ins ? 1 : 2)
     this.write(`${this.cursor.w}:${this.cursor.h}`, this.grid.w * 2, this.orca.h, this.grid.w)
     this.write(`${this.orca.f}f${this.clock.isPaused ? '~' : ''}`, this.grid.w * 3, this.orca.h, this.grid.w)
-    this.write(`${this.io.inspect(this.grid.w)}`, this.grid.w * 4, this.orca.h, this.grid.w)
-    this.write(`${display(Object.keys(this.orca.variables).join(''), this.orca.f, this.grid.w)}`, this.grid.w * 5, this.orca.h, this.grid.w)
+    this.write(`${this.io.inspect(this.grid.w)}`, this.grid.w * 4, this.orca.h, this.grid.w - 1)
+    this.write(this.orca.f < 500 ? `< ${this.io.midi.toInputString()}` : '', this.grid.w * 5, this.orca.h, this.grid.w * 4)
 
     if (this.commander.isActive === true) {
       this.write(`${this.commander.query}${this.orca.f % 2 === 0 ? '_' : ''}`, this.grid.w * 0, this.orca.h + 1, this.grid.w * 4)
@@ -330,7 +330,8 @@ function Client () {
       this.write(`${this.orca.w}x${this.orca.h}`, this.grid.w * 1, this.orca.h + 1, this.grid.w)
       this.write(`${this.grid.w}/${this.grid.h}${this.tile.w !== 10 ? ' ' + (this.tile.w / 10).toFixed(1) : ''}`, this.grid.w * 2, this.orca.h + 1, this.grid.w)
       this.write(`${this.clock}`, this.grid.w * 3, this.orca.h + 1, this.grid.w, this.clock.isPuppet === true ? 3 : 2)
-      this.write(`${this.io.midi}`, this.grid.w * 4, this.orca.h + 1, this.grid.w * 4)
+      this.write(`${display(Object.keys(this.orca.variables).join(''), this.orca.f, this.grid.w - 1)}`, this.grid.w * 4, this.orca.h + 1, this.grid.w - 1)
+      this.write(this.orca.f < 500 ? `> ${this.io.midi.toOutputString()}` : '', this.grid.w * 5, this.orca.h + 1, this.grid.w * 4)
     }
   }
 
diff --git a/desktop/sources/scripts/clock.js b/desktop/sources/scripts/clock.js
index d1aab0a..2ce7cb4 100644
--- a/desktop/sources/scripts/clock.js
+++ b/desktop/sources/scripts/clock.js
@@ -57,7 +57,7 @@ function Clock (client) {
   }
 
   this.play = function (msg = false) {
-    console.log('Clock', 'Play')
+    console.log('Clock', 'Play', msg)
     if (this.isPaused === false) { return }
     if (this.isPuppet === true) { console.warn('Clock', 'External Midi control'); return }
     this.isPaused = false
diff --git a/desktop/sources/scripts/core/io/midi.js b/desktop/sources/scripts/core/io/midi.js
index 1b0119b..bd037bd 100644
--- a/desktop/sources/scripts/core/io/midi.js
+++ b/desktop/sources/scripts/core/io/midi.js
@@ -125,15 +125,11 @@ function Midi (client) {
   }
 
   this.receive = function (msg) {
-    // listen for clock all the time
-    // check for clock in?
-    if (msg.data[0] === 0xF8) { client.clock.tap() }
-
     switch (msg.data[0]) {
       // Clock
-      // case 0xF8:
-      //  client.clock.tap()
-      //  break
+      case 0xF8:
+        client.clock.tap()
+        break
       case 0xFA:
         console.log('MIDI', 'Start Received')
         client.clock.play()
@@ -235,6 +231,14 @@ function Midi (client) {
     return !navigator.requestMIDIAccess ? 'No Midi Support' : this.outputDevice() ? `${this.outputDevice().name}` : 'No Midi Device'
   }
 
+  this.toInputString = () => {
+    return !navigator.requestMIDIAccess ? 'No Midi Support' : this.inputDevice() ? `${this.inputDevice().name}` : 'No Input Device'
+  }
+
+  this.toOutputString = () => {
+    return !navigator.requestMIDIAccess ? 'No Midi Support' : this.outputDevice() ? `${this.outputDevice().name}` : 'No Output Device'
+  }
+
   this.length = function () {
     return this.stack.length
   }
diff --git a/sw.js b/sw.js
index be4d90f..2c159ba 100644
--- a/sw.js
+++ b/sw.js
@@ -1,4 +1,4 @@
-// 163
+// 164
 
 const assets = [
   './',