From: Frédéric Péters <fpeters@0d.be>
Date: Wed, 22 Feb 2017 17:25:34 +0000 (+0100)
Subject: add indicators for devices
X-Git-Url: https://git.0d.be/?p=nanofun.git;a=commitdiff_plain;h=c39eb1d972d764fb13e7f3d06d9ac89f30c15f8a;hp=79b11f9aca3effea13a7d98ec87babb1a1a34369

add indicators for devices
---

diff --git a/index.html b/index.html
index 039f0f3..9c92333 100644
--- a/index.html
+++ b/index.html
@@ -19,8 +19,7 @@
    </div>
   </div>
   <div id="msg"></div>
-  <div id="midiinputs"></div>
-  <div id="midioutputs"></div>
+  <div id="devices"><div class="nanopad">nanoPAD</div><div class="nanokontrol">nanoKONTROL</div></div>
 
   <form>
     <div><label>Master</label> <input id="master-gain" type="range" min="0" max="127" value="127"></div>
diff --git a/nanofun.css b/nanofun.css
index 99c357e..ea67cf5 100644
--- a/nanofun.css
+++ b/nanofun.css
@@ -84,3 +84,18 @@ form label {
   display: inline-block;
   width: 10em;
 }
+
+#devices {
+  position: absolute;
+  bottom: 2em;
+  right: 1em;
+}
+
+#devices div {
+  padding: 1px 5px;
+  margin-top: 2px;
+}
+
+#devices div.on {
+  background: #6aff6a;
+}
diff --git a/nanofun.js b/nanofun.js
index 6b8ba95..34e1dcc 100644
--- a/nanofun.js
+++ b/nanofun.js
@@ -54,10 +54,6 @@ onMIDIAccessChange: function(e) {
     console.log('on midi access change', e);
     //console.log(this);
     var port = e.port;
-    var portContainer = $("#midi" + port.type + "s");
-    if (portContainer.html().startsWith("<p>No connected")) {
-        portContainer.empty();
-    }
 
     if (port.state == "disconnected") {
       if (port.type == "input") {
@@ -65,12 +61,17 @@ onMIDIAccessChange: function(e) {
       } else {
         this.outputs[port.name] = undefined;
       }
+      if (port.name == 'nanoPAD2 MIDI 1') { $('#devices .nanopad').removeClass('on'); }
+      if (port.name == 'nanoKONTROL2 MIDI 1') { $('#devices .nanokontrol').removeClass('on'); }
     } else {
       if (port.type == "input") {
         if (this.inputs[port.name] === undefined) { this.registerPort(port); }
       } else {
         if (this.outputs[port.name] === undefined) { this.registerPort(port); }
       }
+            console.log('hello:', port.name);
+      if (port.name == 'nanoPAD2 MIDI 1') { $('#devices .nanopad').addClass('on'); }
+      if (port.name == 'nanoKONTROL2 MIDI 1') { $('#devices .nanokontrol').addClass('on'); }
       this.renderPort(port);
     }
 },