From 1ba1d455167bfd507d3cf14d43fbd430caeb7fe7 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 6 Jun 2018 16:13:52 +0200
Subject: update spectrogram delta

---
 .../modules/pix2wav/views/spectrogram.upload.js    | 60 +++++++++++++++-------
 1 file changed, 42 insertions(+), 18 deletions(-)

(limited to 'app/client/modules/pix2wav')

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)
     })
-- 
cgit v1.2.3-70-g09d2