</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>
- <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>
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();
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) {
$('.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;
});
}