update spectrogram delta

4 files changed, 64 insertions, 27 deletions

diff --git a/app/client/audio/lib/spectrum.js b/app/client/audio/lib/spectrum.js
index c7252f1..a60cdcf 100644
--- a/app/client/audio/lib/spectrum.js
+++ b/app/client/audio/lib/spectrum.js
@@ -266,6 +266,7 @@ function reorderBins(spec, order){
 }
 
 export default {
+  fft_size, fft_overlap,
   toSpectrum, fromSpectrum, fromImageData, binToHz,
   fadeInOut,
   cloneSpectrum,
diff --git a/app/client/audio/wav2pix.js b/app/client/audio/wav2pix.js
index 48ca140..5f48814 100644
--- a/app/client/audio/wav2pix.js
+++ b/app/client/audio/wav2pix.js
@@ -2,7 +2,6 @@ import types from '../types'
 
 import Tone from 'tone'
 import JSZip from 'jszip'
-import FileSaver from 'file-saver'
 import { sprintf } from 'sprintf-js'
 
 import * as draw from './lib/draw'
@@ -17,6 +16,7 @@ export const FRAME_STEP = Math.round(FRAME_LENGTH / 4)
 const _r = 8
 const _i = 8
 
+export { spectrum }
 // requestAudioContext(() => {})
 
 export const loadBuffer = file => {
@@ -39,22 +39,29 @@ export const loadBuffer = file => {
 
 export const loadPCM = (file) => {
   return new Promise((resolve, reject) => {
+    // if we've already fetched this file...
+    if (file.pcm) {
+      return resolve(file)
+    }
     loadBuffer(file).then(buffer => {
       const pcm = buffer._buffer.getChannelData(0)
       const sr = buffer._buffer.sampleRate
       if (! pcm) return reject()
-      console.log(buffer, pcm, sr)
-      resolve({ buffer, pcm, sr })
+      console.log(pcm.length, sr)
+      resolve({ file, buffer, pcm, sr })
     })
   })
 }
 
 export const renderFrames = (file, { frame_step=FRAME_STEP, max=12 }) => dispatch => {
   return new Promise((resolve, reject) => {
-    loadPCM(file).then(({ buffer, pcm, sr }) => {
+    loadPCM(file).then((pcmProps) => {
+      const { file, buffer, pcm, sr } = pcmProps
       dispatch({ type: types.wav2pix.load })
-      let canvases = []
-      let offset = 0, count = 0, _len = pcm.length - FRAME_LENGTH
+      let frames = []
+      let count = 0
+      let _len = pcm.length - FRAME_LENGTH
+      let offset = _len / 4
       for (;
             offset < _len && count < max;
             offset += frame_step, count += 1
@@ -62,7 +69,7 @@ export const renderFrames = (file, { frame_step=FRAME_STEP, max=12 }) => dispatc
         frames.push(render(pcm.slice(offset, offset+FRAME_LENGTH), sr, count))
       }
       dispatch({ type: types.wav2pix.finish, message: 'Rendered ' + count + ' images' })
-      resolve(frames)
+      resolve({ pcm: pcmProps, frames })
     })
   })
 }
diff --git a/app/client/common/slider.component.js b/app/client/common/slider.component.js
index fccbc5e..cc00650 100644
--- a/app/client/common/slider.component.js
+++ b/app/client/common/slider.component.js
@@ -25,10 +25,15 @@ class Slider extends Component {
     let { name, opt } = this.props
     let old_value = opt[name]
     let 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) {
diff --git a/app/client/modules/pix2wav/views/spectrogram.upload.js b/app/client/modules/pix2wav/views/spectrogram.upload.js
index 40e6159..609c5e8 100644
--- a/app/client/modules/pix2wav/views/spectrogram.upload.js
+++ b/app/client/modules/pix2wav/views/spectrogram.upload.js
@@ -22,6 +22,7 @@ class SpectrogramUpload extends Component {
     super(props)
     this.state = {
       file: null,
+      pcm: null,
       name: "",
       frames: [],
       max: 3000,
@@ -29,7 +30,12 @@ class SpectrogramUpload extends Component {
     }
     const audioElement = document.createElement('audio')
     audioElement.addEventListener('loadedmetadata', () => {
-      this.setState({ duration: audioElement.duration })
+      const duration = audioElement.duration
+      const total_frame_count = Math.floor((duration * 44100 - wav2pixActions.FRAME_LENGTH) / this.state.frame_step)
+      this.setState({
+        duration,
+        max: Math.min(this.state.max, total_frame_count),
+      })
     })
     this.audioElement = audioElement
   }
@@ -38,22 +44,29 @@ class SpectrogramUpload extends Component {
       .replace(/\s+/g, '_')
       .replace(/-/g, '_')
       .replace(/_+/g, '_')
-    this.setState({ file, name })
+    this.setState({ file, name, pcm: '' }, () => {
+      if (file.size < 2 << 20) {
+        this.rebuildFrames()
+      }
+    })
     this.audioElement.src = URL.createObjectURL(file)
     console.log(file.size)
-    if (file.size < 2 << 20) {
-      this.props.wav2pix.renderFrames(file, {})
-      .then(frames => {
-        console.log('got frames', frames.length)
-        this.setState({
-          ...this.state, frames
-        })
+  }
+  rebuildFrames(){
+    const { file, pcm, frame_step } = this.state
+    this.props.wav2pix.renderFrames(pcm || file, { frame_step })
+    .then(data => {
+      console.log('got frames', data.frames.length)
+      this.setState({
+        ...this.state,
+        frames: data.frames,
+        pcm: data.pcm,
       })
-    }
+    })
   }
   buildZip(){
-    const { file, max, frame_step } = this.state
-    this.props.wav2pix.buildZip(this.state.name, file, {})
+    const { pcm, file, max, frame_step } = this.state
+    this.props.wav2pix.buildZip(this.state.name, pcm || file, { frame_step, max })
     .then(({ zip, filename, count }) => {
       this.props.datasetActions.uploadFile(
         this.props.module,
@@ -96,7 +109,7 @@ class SpectrogramUpload extends Component {
   renderMetadata(file){
     const { duration } = this.state
     const size = util.hush_size(file.size)
-    const total_frame_count = (duration * 44100 - wav2pixActions.FRAME_LENGTH) / this.state.frame_step
+    const total_frame_count = Math.floor((duration * 44100 - wav2pixActions.FRAME_LENGTH) / this.state.frame_step)
     const frame_size = Math.round(wav2pixActions.FRAME_LENGTH / 44100 * 1000) + ' ms.'
     const frame_step = Math.round(this.state.frame_step / 44100 * 1000) + ' ms.'
     return (
@@ -111,9 +124,11 @@ class SpectrogramUpload extends Component {
           <Param title='Size'><span className={size[0]}>{size[1]}</span></Param>
           <Param title='Date'>{moment(file.lastModifiedDate).format("YYYY-MM-DD h:mm a")}</Param>
           <Param title='Duration'>{Math.floor(duration) + ' s.'}</Param>
-          <Param title='Frames'>{Math.floor(total_frame_count)}</Param>
+          <Param title='Frames'>{total_frame_count}</Param>
           <Param title='Frame Size'>{frame_size}</Param>
           <Param title='Frame Step'>{frame_step}</Param>
+          <Param title='FFT Size'>{wav2pixActions.spectrum.fft_size}</Param>
+
           <br />
           <Param title='Status'>{this.props.pix2wav.status}</Param>
           <br />
@@ -125,16 +140,24 @@ class SpectrogramUpload extends Component {
             value={this.state.name}
           />
           <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={max => this.setState({ max })}
           />
           <Slider
-            name='frame step'
+            name='Frame step'
             min={10} max={20000} type='int'
             value={this.state.frame_step}
-            onChange={frame_step => this.setState({ frame_step })}
+            defaultValue={wav2pixActions.FRAME_STEP}
+            onChange={frame_step => {
+              const total_frame_count = Math.floor((duration * 44100 - wav2pixActions.FRAME_LENGTH) / frame_step)
+              this.setState({
+                frame_step,
+                max: Math.min(this.state.max, total_frame_count)
+              }, () => { this.rebuildFrames() })
+            }}
           />
           <Button
             onClick={() => this.buildZip()}
@@ -145,6 +168,7 @@ class SpectrogramUpload extends Component {
     )
   }
   componentDidUpdate(){
+    this.canvases.innerHTML = ''
     const canvases = (this.state.frames || []).map(c => {
       this.canvases.append(c.canvas)
     })