Adds App.Midi for MIDI controller mappings #74

desktop/apps/desktop.console/desktop.console.js

@@ -145,6 +145,11 @@ desktop.app.console._allowCommands = {
       description: 'Opens Musical Instruments',
       icon: 'midifighter'
     },
+    midi: {
+      command: 'desktop.ui.openWindow("midi");',
+      description: 'Audio MIDI Setup',
+      icon: 'midi'
+    },
     midifighter: {
       command: 'desktop.ui.openWindow("midifighter");',
       description: 'MIDI Fighter styled Music Pad.',

desktop/apps/desktop.midi/desktop.midi.html

@@ -0,0 +1,51 @@
+<style type="text/css">
+
+  #midi-log{
+    height: 400px;
+    overflow: auto;
+    border: 1px solid #CCC;
+    padding: 20px;
+    font-family: monospace;
+    margin-bottom: 40px;
+  }
+
+</style>
+
+<div id="window_midi" class="abs window" align="center">
+  <div class="abs window_inner">
+    <div class="window_top">
+      <span class="float_left">
+        <img src="desktop/assets/images/icons/icon_midi_64.png" />
+        MIDI Setup
+      </span>
+      <span class="float_right trafficLight">
+        <a href="#min" class="minWindow" title="Min Window">🟠</a>
+        <a href="#max" class="maxWindow" title="Max Window">🟢</a>
+        <a href="#exit" class="exitWindow" title="Exit Window">🔴</a>
+      </span>
+    </div>
+    <div class="abs window_content">
+
+      <br/>
+      <h1>Audio MIDI Setup</h1>
+
+      <p>To test MIDI Input:</p>
+      <ol>
+        <li>Plug in your MIDI device via USB to your computer.</li>
+        <li>Twiddle some knobs. View received MIDI data below.</li>
+        <li>All MIDI data is emitted as events to "desktop.emit" ( check console log )</li>
+      </ol>
+
+      <br/>
+      <br/>
+      <h2>MIDI Data Log</h2>
+
+      <div id="midi-log"></div>
+
+    </div>
+    <div class="abs window_bottom">
+      Build: v4.20.69
+    </div>
+  </div>
+  <span class="abs ui-resizable-handle ui-resizable-se"></span>
+</div>

desktop/apps/desktop.midi/desktop.midi.js

@@ -0,0 +1,77 @@
+desktop.app.midi = {};
+desktop.app.midi.label = 'Midi Setup';
+
+desktop.app.midi.load = function loadmidiGames (params, next) {
+  desktop.load.remoteAssets([
+    'midi' // this loads the sibling desktop.app.midi.html file into <div id="window_midi"></div>
+  ], function (err) {
+    $('#window_midi').css('width', 662);
+    $('#window_midi').css('height', 495);
+    $('#window_midi').css('left', 50);
+    $('#window_midi').css('top', 50);
+
+    desktop.on('midi-message', "log-midi-data-to-console" , function(event){
+      desktop.log('MIDI:', event)
+    })
+
+    var midi;
+    var log = document.getElementById("midi-log");
+    init();
+
+    function init() {
+      logText("Initializing MIDI...");
+      navigator.requestMIDIAccess().then( onSuccess, onFailure ); //get midi access
+    }
+
+    function onSuccess( access ) { 
+
+      midi = access;
+      var inputs = midi.inputs;
+
+      logText("Found " + inputs.size + " MIDI input(s)");
+
+      //connect to first device found
+      if(inputs.size > 0) {
+        var iterator = inputs.values(); // returns an iterator that loops over all inputs
+        var input = iterator.next().value; // get the first input
+        logText("Connected first input: " + input.name);
+        input.onmidimessage = handleMIDIMessage;
+      }
+    }
+
+    function onFailure( err ) {
+      logText("MIDI Init Error. Error code: " + err.code);
+    }
+
+    function handleMIDIMessage(event){
+
+      desktop.emit('midi-message', event.data)
+      //event.data & event.receivedTime are populated
+      //event.data has 3 components:
+      //0) The device id
+      //1) The controller id
+      //2) The controller value (typically in the range 0 - 127)
+
+      if (event.data.length === 3) {
+        logText('controller id: ' + event.data[1] +  ', value: ' + event.data[2]);
+      }
+    }
+
+    function logText(str){
+      log.innerHTML += str;
+      log.innerHTML += "<br>";
+      log.scrollTop = log.scrollHeight;
+    }
+
+    next();
+  });
+
+};
+
+desktop.app.midi.openWindow = function openWindow () {
+  return true;
+};
+
+desktop.app.midi.closeWindow = function closeWindow () {
+  return true;
+};

desktop/apps/desktop.profile/desktop.profile.html

@@ -183,10 +183,17 @@
                   Piano
                 </td>
               </tr>
+              <tr class="openApp" data-app="midi">
+                <td>
+                  <img class="emojiIcon float-left" src="desktop/assets/images/icons/icon_midi_64.png" />
+                </td>
+                <td>
+                  Audio MIDI Setup
+                </td>
+              </tr>
               <tr class="openApp" data-app="streamsquad">
                 <td>
                   <img class="emojiIcon float-left" src="desktop/assets/images/icons/icon_streamsquad_64.png" />
-
                 </td>
                 <td>
                   Stream Squad ( Live Streamers )