update spectrogram delta

1 files changed, 102 insertions, 60 deletions

diff --git a/public/bundle.js b/public/bundle.js
index 4c9e358..0de966e 100644
--- a/public/bundle.js
+++ b/public/bundle.js
@@ -1469,6 +1469,7 @@ function reorderBins(spec, order) {
 }
 
 exports.default = {
+  fft_size: fft_size, fft_overlap: fft_overlap,
   toSpectrum: toSpectrum, fromSpectrum: fromSpectrum, fromImageData: fromImageData, binToHz: binToHz,
   fadeInOut: fadeInOut,
   cloneSpectrum: cloneSpectrum,
@@ -1687,7 +1688,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.buildZip = exports.renderFrames = exports.loadPCM = exports.loadBuffer = exports.FRAME_STEP = exports.FRAME_LENGTH = undefined;
+exports.buildZip = exports.renderFrames = exports.loadPCM = exports.loadBuffer = exports.spectrum = exports.FRAME_STEP = exports.FRAME_LENGTH = undefined;
 
 var _types = __webpack_require__(/*! ../types */ "./app/client/types.js");
 
@@ -1701,10 +1702,6 @@ var _jszip = __webpack_require__(/*! jszip */ "./node_modules/jszip/lib/index.js
 
 var _jszip2 = _interopRequireDefault(_jszip);
 
-var _fileSaver = __webpack_require__(/*! file-saver */ "./node_modules/file-saver/FileSaver.js");
-
-var _fileSaver2 = _interopRequireDefault(_fileSaver);
-
 var _sprintfJs = __webpack_require__(/*! sprintf-js */ "./node_modules/sprintf-js/src/sprintf.js");
 
 var _draw = __webpack_require__(/*! ./lib/draw */ "./app/client/audio/lib/draw.js");
@@ -1731,6 +1728,7 @@ var FRAME_STEP = exports.FRAME_STEP = Math.round(FRAME_LENGTH / 4);
 var _r = 8;
 var _i = 8;
 
+exports.spectrum = _spectrum2.default;
 // requestAudioContext(() => {})
 
 var loadBuffer = exports.loadBuffer = function loadBuffer(file) {
@@ -1749,12 +1747,16 @@ var loadBuffer = exports.loadBuffer = function loadBuffer(file) {
 
 var loadPCM = exports.loadPCM = function loadPCM(file) {
   return new Promise(function (resolve, reject) {
+    // if we've already fetched this file...
+    if (file.pcm) {
+      return resolve(file);
+    }
     loadBuffer(file).then(function (buffer) {
       var pcm = buffer._buffer.getChannelData(0);
       var sr = buffer._buffer.sampleRate;
       if (!pcm) return reject();
-      console.log(buffer, pcm, sr);
-      resolve({ buffer: buffer, pcm: pcm, sr: sr });
+      console.log(pcm.length, sr);
+      resolve({ file: file, buffer: buffer, pcm: pcm, sr: sr });
     });
   });
 };
@@ -1766,37 +1768,38 @@ var renderFrames = exports.renderFrames = function renderFrames(file, _ref) {
       max = _ref$max === undefined ? 12 : _ref$max;
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
-      loadPCM(file).then(function (_ref2) {
-        var buffer = _ref2.buffer,
-            pcm = _ref2.pcm,
-            sr = _ref2.sr;
+      loadPCM(file).then(function (pcmProps) {
+        var file = pcmProps.file,
+            buffer = pcmProps.buffer,
+            pcm = pcmProps.pcm,
+            sr = pcmProps.sr;
 
         dispatch({ type: _types2.default.wav2pix.load });
-        var canvases = [];
-        var offset = 0,
-            count = 0,
-            _len = pcm.length - FRAME_LENGTH;
+        var frames = [];
+        var count = 0;
+        var _len = pcm.length - FRAME_LENGTH;
+        var offset = _len / 4;
         for (; offset < _len && count < max; offset += frame_step, count += 1) {
           frames.push(render(pcm.slice(offset, offset + FRAME_LENGTH), sr, count));
         }
         dispatch({ type: _types2.default.wav2pix.finish, message: 'Rendered ' + count + ' images' });
-        resolve(frames);
+        resolve({ pcm: pcmProps, frames: frames });
       });
     });
   };
 };
 
-var buildZip = exports.buildZip = function buildZip(name, file, _ref3) {
-  var _ref3$frame_step = _ref3.frame_step,
-      frame_step = _ref3$frame_step === undefined ? FRAME_STEP : _ref3$frame_step,
-      _ref3$max = _ref3.max,
-      max = _ref3$max === undefined ? 10000 : _ref3$max;
+var buildZip = exports.buildZip = function buildZip(name, file, _ref2) {
+  var _ref2$frame_step = _ref2.frame_step,
+      frame_step = _ref2$frame_step === undefined ? FRAME_STEP : _ref2$frame_step,
+      _ref2$max = _ref2.max,
+      max = _ref2$max === undefined ? 10000 : _ref2$max;
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
-      loadPCM(file).then(function (_ref4) {
-        var buffer = _ref4.buffer,
-            pcm = _ref4.pcm,
-            sr = _ref4.sr;
+      loadPCM(file).then(function (_ref3) {
+        var buffer = _ref3.buffer,
+            pcm = _ref3.pcm,
+            sr = _ref3.sr;
 
         dispatch({ type: _types2.default.wav2pix.load });
 
@@ -3240,10 +3243,13 @@ var Slider = function (_Component) {
 
       var old_value = opt[name];
       var new_value = e.target.value;
-      if (this.props.type === 'int') {
+      console.log(this.props);
+      console.log(new_value, this.props.defaultValue);
+      if (new_value === '') {
+        new_value = this.props.defaultValue || (this.props.max - this.props.min) / 2;
+      } else if (this.props.type === 'int') {
         new_value = parseInt(new_value);
-      }
-      if (this.props.type === 'odd') {
+      } else if (this.props.type === 'odd') {
         new_value = parseInt(Math.floor(new_value / 2) * 2 + 1);
       }
       if (old_value !== new_value) {
@@ -7737,6 +7743,7 @@ var SpectrogramUpload = function (_Component) {
 
     _this.state = {
       file: null,
+      pcm: null,
       name: "",
       frames: [],
       max: 3000,
@@ -7744,7 +7751,12 @@ var SpectrogramUpload = function (_Component) {
     };
     var audioElement = document.createElement('audio');
     audioElement.addEventListener('loadedmetadata', function () {
-      _this.setState({ duration: audioElement.duration });
+      var duration = audioElement.duration;
+      var total_frame_count = Math.floor((duration * 44100 - wav2pixActions.FRAME_LENGTH) / _this.state.frame_step);
+      _this.setState({
+        duration: duration,
+        max: Math.min(_this.state.max, total_frame_count)
+      });
     });
     _this.audioElement = audioElement;
     return _this;
@@ -7756,39 +7768,55 @@ var SpectrogramUpload = function (_Component) {
       var _this2 = this;
 
       var name = file.name.split('.')[0].replace(/\s+/g, '_').replace(/-/g, '_').replace(/_+/g, '_');
-      this.setState({ file: file, name: name });
+      this.setState({ file: file, name: name, pcm: '' }, function () {
+        if (file.size < 2 << 20) {
+          _this2.rebuildFrames();
+        }
+      });
       this.audioElement.src = URL.createObjectURL(file);
       console.log(file.size);
-      if (file.size < 2 << 20) {
-        this.props.wav2pix.renderFrames(file, {}).then(function (frames) {
-          console.log('got frames', frames.length);
-          _this2.setState(_extends({}, _this2.state, { frames: frames
-          }));
-        });
-      }
     }
   }, {
-    key: 'buildZip',
-    value: function buildZip() {
+    key: 'rebuildFrames',
+    value: function rebuildFrames() {
       var _this3 = this;
 
       var _state = this.state,
           file = _state.file,
-          max = _state.max,
+          pcm = _state.pcm,
           frame_step = _state.frame_step;
 
-      this.props.wav2pix.buildZip(this.state.name, file, {}).then(function (_ref) {
+      this.props.wav2pix.renderFrames(pcm || file, { frame_step: frame_step }).then(function (data) {
+        console.log('got frames', data.frames.length);
+        _this3.setState(_extends({}, _this3.state, {
+          frames: data.frames,
+          pcm: data.pcm
+        }));
+      });
+    }
+  }, {
+    key: 'buildZip',
+    value: function buildZip() {
+      var _this4 = this;
+
+      var _state2 = this.state,
+          pcm = _state2.pcm,
+          file = _state2.file,
+          max = _state2.max,
+          frame_step = _state2.frame_step;
+
+      this.props.wav2pix.buildZip(this.state.name, pcm || file, { frame_step: frame_step, max: max }).then(function (_ref) {
         var zip = _ref.zip,
             filename = _ref.filename,
             count = _ref.count;
 
-        _this3.props.datasetActions.uploadFile(_this3.props.module, _this3.props.folder, zip, filename, { count: count, max: max, frame_step: frame_step });
+        _this4.props.datasetActions.uploadFile(_this4.props.module, _this4.props.folder, zip, filename, { count: count, max: max, frame_step: frame_step });
       });
     }
   }, {
     key: 'render',
     value: function render() {
-      var _this4 = this;
+      var _this5 = this;
 
       // loading={pix2wav.loading}
       // progress={pix2wav.progress}
@@ -7796,9 +7824,9 @@ var SpectrogramUpload = function (_Component) {
       // module={pix2wavModule}
       // data={pix2wav.data}
       // folder={folder}
-      var _state2 = this.state,
-          file = _state2.file,
-          frames = _state2.frames;
+      var _state3 = this.state,
+          file = _state3.file,
+          frames = _state3.frames;
 
       return (0, _preact.h)(
         'div',
@@ -7824,26 +7852,26 @@ var SpectrogramUpload = function (_Component) {
               title: 'Choose a sound file',
               mime: 'image.*',
               onUpload: function onUpload(file) {
-                return _this4.pickFile(file);
+                return _this5.pickFile(file);
               }
             }),
             file && this.renderMetadata(file)
           )
         ),
         (0, _preact.h)('div', { ref: function ref(c) {
-            _this4.canvases = c;
+            _this5.canvases = c;
           }, className: 'thumbs', id: 'pix2wav_canvases' })
       );
     }
   }, {
     key: 'renderMetadata',
     value: function renderMetadata(file) {
-      var _this5 = this;
+      var _this6 = this;
 
       var duration = this.state.duration;
 
       var size = _util2.default.hush_size(file.size);
-      var total_frame_count = (duration * 44100 - wav2pixActions.FRAME_LENGTH) / this.state.frame_step;
+      var total_frame_count = Math.floor((duration * 44100 - wav2pixActions.FRAME_LENGTH) / this.state.frame_step);
       var frame_size = Math.round(wav2pixActions.FRAME_LENGTH / 44100 * 1000) + ' ms.';
       var frame_step = Math.round(this.state.frame_step / 44100 * 1000) + ' ms.';
       return (0, _preact.h)(
@@ -7893,7 +7921,7 @@ var SpectrogramUpload = function (_Component) {
           (0, _preact.h)(
             _common.Param,
             { title: 'Frames' },
-            Math.floor(total_frame_count)
+            total_frame_count
           ),
           (0, _preact.h)(
             _common.Param,
@@ -7905,6 +7933,11 @@ var SpectrogramUpload = function (_Component) {
             { title: 'Frame Step' },
             frame_step
           ),
+          (0, _preact.h)(
+            _common.Param,
+            { title: 'FFT Size' },
+            wav2pixActions.spectrum.fft_size
+          ),
           (0, _preact.h)('br', null),
           (0, _preact.h)(
             _common.Param,
@@ -7919,31 +7952,39 @@ var SpectrogramUpload = function (_Component) {
           (0, _preact.h)(_common.TextInput, {
             title: 'Dataset name',
             onChange: function onChange(e) {
-              return _this5.setState({ name: e.target.value });
+              return _this6.setState({ name: e.target.value });
             },
             value: this.state.name
           }),
           (0, _preact.h)(_common.Slider, {
-            name: 'Frame cutoff',
-            min: 10, max: 1000, type: 'int',
+            name: 'No. Frames',
+            min: 10, max: Math.min(total_frame_count, 1000), type: 'int',
             value: this.state.max,
+            defaultValue: Math.min(total_frame_count, 300),
             onChange: function onChange(max) {
-              return _this5.setState({ max: max });
+              return _this6.setState({ max: max });
             }
           }),
           (0, _preact.h)(_common.Slider, {
-            name: 'frame step',
+            name: 'Frame step',
             min: 10, max: 20000, type: 'int',
             value: this.state.frame_step,
+            defaultValue: wav2pixActions.FRAME_STEP,
             onChange: function onChange(frame_step) {
-              return _this5.setState({ frame_step: frame_step });
+              var total_frame_count = Math.floor((duration * 44100 - wav2pixActions.FRAME_LENGTH) / frame_step);
+              _this6.setState({
+                frame_step: frame_step,
+                max: Math.min(_this6.state.max, total_frame_count)
+              }, function () {
+                _this6.rebuildFrames();
+              });
             }
           }),
           (0, _preact.h)(
             _common.Button,
             {
               onClick: function onClick() {
-                return _this5.buildZip();
+                return _this6.buildZip();
               }
             },
             'Build Zip'
@@ -7955,10 +7996,11 @@ var SpectrogramUpload = function (_Component) {
   }, {
     key: 'componentDidUpdate',
     value: function componentDidUpdate() {
-      var _this6 = this;
+      var _this7 = this;
 
+      this.canvases.innerHTML = '';
       var canvases = (this.state.frames || []).map(function (c) {
-        _this6.canvases.append(c.canvas);
+        _this7.canvases.append(c.canvas);
       });
     }
   }]);