From 58f26c6b8c49f608f077a1eb71e99849bab3309a Mon Sep 17 00:00:00 2001
From: =?utf8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@0d.be>
Date: Thu, 23 Nov 2017 17:52:24 +0100
Subject: [PATCH] add individual checkboxes for effects

---
 index.html  |  5 ++++-
 nanofun.css | 20 ++++++++++++++++++++
 nanofun.js  | 28 ++++++++++++++++++++--------
 3 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 91e5690..1854c66 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,7 @@
    <div class="nanotouch">
      <span class="name"></span>
      <span class="duration"></span>
+     <label class="effects"><input type="checkbox">Effects</label><br>
      <label class="loop"><input type="checkbox">Loop</label><br>
      <input type="file" accept="audio/*" multiple>
      <input class="touch-gain" type="range" min="0" max="127" value="127">
@@ -24,10 +25,12 @@
 
   <form>
     <div><label>Master</label> <input id="master-gain" type="range" min="0" max="127" value="127"></div>
-    <br>
+    <fieldset>
+    <legend>Effects</legend>
     <div><label>Delay</label> <input id="delay" type="range" min="0" max="5" value="0" step="0.1"></div>
     <div><label>Feedback</label> <input id="feedback" type="range" min="0" max="1" value="0.8" step="0.1"></div>
     <div><label>Filter</label> <input id="filter" type="range" min="0" max="5000" value="1000" step="100"></div>
+    </fieldset>
   </form>
 
   <div id="gitclone">Source code at <a href="https://git.0d.be/?p=nanofun.git">https://git.0d.be/?p=nanofun.git</a></div>
diff --git a/nanofun.css b/nanofun.css
index 846a388..7422765 100644
--- a/nanofun.css
+++ b/nanofun.css
@@ -59,6 +59,13 @@ div.nanotouch input[type=range] {
   margin: 0;
 }
 
+div.nanotouch .effects {
+  position: absolute;
+  left: 0;
+  bottom: 5ex;
+  z-index: 10000;
+}
+
 div.nanotouch .loop {
   position: absolute;
   left: 0;
@@ -106,3 +113,16 @@ form label {
 #devices div.on {
   background: #6aff6a;
 }
+
+form fieldset {
+  padding: 0;
+  border: 0;
+  margin: 0;
+  margin-top: 1em;
+}
+
+form fieldset legend {
+  font-weight: bold;
+  margin: 0;
+  padding-left: 0;
+}
diff --git a/nanofun.js b/nanofun.js
index 014ebb0..bde7c13 100644
--- a/nanofun.js
+++ b/nanofun.js
@@ -295,13 +295,14 @@ var nanofun = function() {
   var self = this;
 
   self.initAudio = function() {
-    self.sample_buffers = Array(16);
-    self.samples = Array(16);
-    self.sample_start_times = Array(16);
+    self.sample_buffers = Array(NANOPAD_TOUCHS.length);
+    self.samples = Array(NANOPAD_TOUCHS.length);
+    self.sample_start_times = Array(NANOPAD_TOUCHS.length);
     self.audioCtx = new window.AudioContext();
-    self.touchGainNodes = Array(16);
+    self.touchGainNodes = Array(NANOPAD_TOUCHS.length);
     self.masterGainNode = self.audioCtx.createGain();
-    for (var i=0; i<16; i++) {
+    self.effectsGainNode = self.audioCtx.createGain();
+    for (var i=0; i<NANOPAD_TOUCHS.length; i++) {
       self.touchGainNodes[i] = self.audioCtx.createGain();
       self.touchGainNodes[i].connect(self.masterGainNode);
     }
@@ -316,11 +317,12 @@ var nanofun = function() {
     self.filter = self.audioCtx.createBiquadFilter();
     self.filter.frequency.value = 1000;
 
+    self.effectsGainNode.connect(self.delay);
     self.delay.connect(self.feedback);
     self.feedback.connect(self.filter);
     self.filter.connect(self.delay);
 
-    self.masterGainNode.connect(self.delay);
+    self.filter.connect(self.masterGainNode);
   }
 
   self.initMIDI = function() {
@@ -335,7 +337,7 @@ var nanofun = function() {
   self.initUI = function() {
     var $nanopad = $('#nanopad');
     var $nanotouch = $('.nanotouch');
-    for (var i=0; i<16; i++) {
+    for (var i=0; i<NANOPAD_TOUCHS.length; i++) {
       var $new_touch = $nanotouch.clone();
       $new_touch.attr('data-touch', i);
       $new_touch.appendTo($nanopad);
@@ -402,6 +404,16 @@ var nanofun = function() {
       }
     });
 
+    $('.effects input').on('change', function() {
+      var effects = $(this).prop('checked');
+      var i = parseInt($(this).parents('.nanotouch').data('touch'));
+      if (effects) {
+        self.touchGainNodes[i].connect(self.effectsGainNode);
+      } else {
+        self.touchGainNodes[i].disconnect(self.effectsGainNode);
+      }
+    });
+
     $('#master-gain').on('change', function() {
       var fraction = parseInt(this.value) / parseInt(127);
       self.masterGainNode.gain.value = fraction * fraction;
@@ -432,7 +444,7 @@ var nanofun = function() {
     });
 
     self.time_interval_id = setInterval(function() {
-      for (var i=0; i<16; i++) {
+      for (var i=0; i<NANOPAD_TOUCHS.length; i++) {
         var sample = self.samples[i];
         if (sample !== undefined) {
           var start_time = self.sample_start_times[i];
-- 
2.39.2