]> git.0d.be Git - nanofun.git/commitdiff
projects / nanofun.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (from parent 1: 678d5d3)
dynamically create touches
authorFrédéric Péters <fpeters@0d.be>
Tue, 21 Feb 2017 09:45:10 +0000 (10:45 +0100)
committerFrédéric Péters <fpeters@0d.be>
Tue, 21 Feb 2017 09:45:10 +0000 (10:45 +0100)
index.html patch | blob | history
nanofun.css patch | blob | history
nanofun.js patch | blob | history

diff --git a/index.html b/index.html
index 2f6e87bf23eebc08893f80f2e4dbb3c844bcbf72..71d13f292b6474eb8b768840decd475e6101e4f9 100644 (file)
--- a/index.html
+++ b/index.html
@@ -8,44 +8,17 @@
  </head>
  <body>
   <div id="nanopad">
  </head>
  <body>
   <div id="nanopad">
-   <div class="nanotouch"> <span class="name"></span> <span class="duration"></span> <input type="file"/> </div>
-   <div class="nanotouch"> <span class="name"></span> <span class="duration"></span> <input type="file"/> </div>
-   <div class="nanotouch"> <span class="name"></span> <span class="duration"></span> <input type="file"/> </div>
-   <div class="nanotouch"> <span class="name"></span> <span class="duration"></span> <input type="file"/> </div>
-   <div class="nanotouch"> <span class="name"></span> <span class="duration"></span> <input type="file"/> </div>
-   <div class="nanotouch"> <span class="name"></span> <span class="duration"></span> <input type="file"/> </div>
-   <div class="nanotouch"> <span class="name"></span> <span class="duration"></span> <input type="file"/> </div>
-   <div class="nanotouch"> <span class="name"></span> <span class="duration"></span> <input type="file"/> </div>
-   <div class="nanotouch"> <span class="name"></span> <span class="duration"></span> <input type="file"/> </div>
-   <div class="nanotouch"> <span class="name"></span> <span class="duration"></span> <input type="file"/> </div>
-   <div class="nanotouch"> <span class="name"></span> <span class="duration"></span> <input type="file"/> </div>
-   <div class="nanotouch"> <span class="name"></span> <span class="duration"></span> <input type="file"/> </div>
-   <div class="nanotouch"> <span class="name"></span> <span class="duration"></span> <input type="file"/> </div>
-   <div class="nanotouch"> <span class="name"></span> <span class="duration"></span> <input type="file"/> </div>
-   <div class="nanotouch"> <span class="name"></span> <span class="duration"></span> <input type="file"/> </div>
-   <div class="nanotouch"> <span class="name"></span> <span class="duration"></span> <input type="file"/> </div>
+   <div class="nanotouch" data-touch="0">
+     <span class="name"></span>
+     <span class="duration"></span>
+     <input type="file">
+     <input class="touch-gain" type="range" min="0" max="127" value="127">
+   </div>
   </div>
   <div id="msg"></div>
   <div id="midiinputs"></div>
   <div id="midioutputs"></div>
   <form>
   </div>
   <div id="msg"></div>
   <div id="midiinputs"></div>
   <div id="midioutputs"></div>
   <form>
-    <input class="touch-gain" data-touch="0" type="range" min="0" max="127" value="127">
-    <input class="touch-gain" data-touch="1" type="range" min="0" max="127" value="127">
-    <input class="touch-gain" data-touch="2" type="range" min="0" max="127" value="127">
-    <input class="touch-gain" data-touch="3" type="range" min="0" max="127" value="127">
-    <input class="touch-gain" data-touch="4" type="range" min="0" max="127" value="127">
-    <input class="touch-gain" data-touch="5" type="range" min="0" max="127" value="127">
-    <input class="touch-gain" data-touch="6" type="range" min="0" max="127" value="127">
-    <input class="touch-gain" data-touch="7" type="range" min="0" max="127" value="127">
-    <input class="touch-gain" data-touch="8" type="range" min="0" max="127" value="127">
-    <input class="touch-gain" data-touch="9" type="range" min="0" max="127" value="127">
-    <input class="touch-gain" data-touch="10" type="range" min="0" max="127" value="127">
-    <input class="touch-gain" data-touch="11" type="range" min="0" max="127" value="127">
-    <input class="touch-gain" data-touch="12" type="range" min="0" max="127" value="127">
-    <input class="touch-gain" data-touch="13" type="range" min="0" max="127" value="127">
-    <input class="touch-gain" data-touch="14" type="range" min="0" max="127" value="127">
-    <input class="touch-gain" data-touch="15" type="range" min="0" max="127" value="127">
-    <input class="touch-gain" data-touch="16" type="range" min="0" max="127" value="127">
     <br><input id="master-gain" type="range" min="0" max="127" value="127">
   </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>
     <br><input id="master-gain" type="range" min="0" max="127" value="127">
   </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 e4e97e3b4b9a356b04cc42b244a7965f25b497d0..e819244a0da7c36ca10caf91ed189f6b32ec98dc 100644 (file)
--- a/nanofun.css
+++ b/nanofun.css
@@ -27,7 +27,7 @@ div.nanotouch.loaded.playing {
   background: #6aff6a;
 }
 
   background: #6aff6a;
 }
 
-div.nanotouch input {
+div.nanotouch input[type=file] {
   position: absolute;
   top: 0;
   left: 0;
   position: absolute;
   top: 0;
   left: 0;
@@ -38,13 +38,22 @@ div.nanotouch input {
   cursor: pointer;
 }
 
   cursor: pointer;
 }
 
+div.nanotouch input[type=range] {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+}
+
 div.nanotouch span.name {
   position: absolute;
 }
 
 div.nanotouch span.duration {
   position: absolute;
 div.nanotouch span.name {
   position: absolute;
 }
 
 div.nanotouch span.duration {
   position: absolute;
-  bottom: 1ex;
+  bottom: 2ex;
   right: 1ex;
 }
 
   right: 1ex;
 }
 
diff --git a/nanofun.js b/nanofun.js
index 9cf77735bcc10948e1f28040a878b22f32baa604..bb571a9350cb559b3fbfa8080e82b607a3f56552 100644 (file)
--- a/nanofun.js
+++ b/nanofun.js
@@ -316,8 +316,14 @@ var nanofun = function() {
 
   self.initUI = function() {
     var $nanopad = $('#nanopad');
 
   self.initUI = function() {
     var $nanopad = $('#nanopad');
+    var $nanotouch = $('.nanotouch');
+    for (var i=1; i<16; i++) {
+      var $new_touch = $nanotouch.clone();
+      $new_touch.attr('data-touch', i);
+      $new_touch.appendTo($nanopad);
+    }
 
 
-    $('.nanotouch input').on('change', function(ev) {
+    $('.nanotouch input[type=file]').on('change', function(ev) {
       var nanotouch = $(this).parent();
       var sample_idx = $nanopad.children().index(nanotouch);
       var reader = new FileReader();
       var nanotouch = $(this).parent();
       var sample_idx = $nanopad.children().index(nanotouch);
       var reader = new FileReader();
@@ -343,7 +349,7 @@ var nanofun = function() {
       if (control > 7 && control < 16) return; /* range between sliders and pots */
       if (control > 23) return; /* after pots */
       if (control >= 16) { control -= 8; }
       if (control > 7 && control < 16) return; /* range between sliders and pots */
       if (control > 23) return; /* after pots */
       if (control >= 16) { control -= 8; }
-      $('.touch-gain[data-touch=' + control + ']').val(value).trigger('change');
+      $('[data-touch=' + control + '] .touch-gain').val(value).trigger('change');
     }
 
     $(document).keypress(function(ev) {
     }
 
     $(document).keypress(function(ev) {
@@ -360,7 +366,7 @@ var nanofun = function() {
 
     $('.touch-gain').on('change', function() {
       var fraction = parseInt(this.value) / parseInt(127);
 
     $('.touch-gain').on('change', function() {
       var fraction = parseInt(this.value) / parseInt(127);
-      var touchIdx = parseInt($(this).data('touch'));
+      var touchIdx = parseInt($(this).parent().data('touch'));
       self.touchGainNodes[touchIdx].gain.value = fraction * fraction;
     });
   }
       self.touchGainNodes[touchIdx].gain.value = fraction * fraction;
     });
   }
Sample player targetting the nanoPAD2 and nanoKONTROL2 MIDI controllers