compute number of frames that will be generated

5 files changed, 48 insertions, 33 deletions

diff --git a/app/client/audio/pix2wav.js b/app/client/audio/pix2wav.js
index 1b103b4..beccc56 100644
--- a/app/client/audio/pix2wav.js
+++ b/app/client/audio/pix2wav.js
@@ -1,11 +1,19 @@
-function play(i) {
-  // console.log('play', i)
-  last_i = i
-  let player = players[clamp(i, 0, players.length)]
+import types from '../types'
+
+import Tone from 'tone'
+
+import * as draw from './lib/draw'
+import output from './lib/output'
+import spectrum from './lib/spectrum'
+
+const _r = 8
+const _i = 8
+
+function play(frame) {
   // const { canvas, imageData } = draw.raw_spectrum(fft, 0, 256, 0, 256, 1, 1)
   // console.log(_r, _i)
   // const { canvas, imageData } = draw.raw_spectrum(player.fft, 0, 256, 0, 256, _r, _i)
-  const new_fft = spectrum.fromImageData(player.imageData, 44100, _r, _i)
+  const new_fft = spectrum.fromImageData(frame.imageData, 44100, _r, _i)
   // gallery.innerHTML = ''
 
   // console.log(player.fft.data, new_fft.data)
@@ -18,4 +26,3 @@ function play(i) {
 function redraw(new_fft){
   const { canvas, imageData } = draw.raw_spectrum(new_fft, 0, 256, 0, 256, _r, _i)
 }
-
diff --git a/app/client/audio/wav2pix.js b/app/client/audio/wav2pix.js
index baba776..48ca140 100644
--- a/app/client/audio/wav2pix.js
+++ b/app/client/audio/wav2pix.js
@@ -49,19 +49,20 @@ export const loadPCM = (file) => {
   })
 }
 
-export const renderFrames = (file, { frame_step=FRAME_STEP, max=10 }) => dispatch => {
+export const renderFrames = (file, { frame_step=FRAME_STEP, max=12 }) => dispatch => {
   return new Promise((resolve, reject) => {
     loadPCM(file).then(({ buffer, pcm, sr }) => {
-      dispatch({ type: types.wav2pix.loaded_buffer })
+      dispatch({ type: types.wav2pix.load })
       let canvases = []
-      for (let offset = 0, count = 0, _len = pcm.length - FRAME_LENGTH;
+      let offset = 0, count = 0, _len = pcm.length - FRAME_LENGTH
+      for (;
             offset < _len && count < max;
             offset += frame_step, count += 1
           ) {
-        canvases.push(render(pcm.slice(offset, offset+FRAME_LENGTH), sr, count))
+        frames.push(render(pcm.slice(offset, offset+FRAME_LENGTH), sr, count))
       }
-      dispatch({ type: types.wav2pix.draw_finish })
-      resolve(canvases)
+      dispatch({ type: types.wav2pix.finish, message: 'Rendered ' + count + ' images' })
+      resolve(frames)
     })
   })
 }
@@ -69,26 +70,29 @@ export const renderFrames = (file, { frame_step=FRAME_STEP, max=10 }) => dispatc
 export const buildZip = (name, file, { frame_step=FRAME_STEP, max=10000 }) => dispatch => {
   return new Promise((resolve, reject) => {
     loadPCM(file).then(({ buffer, pcm, sr }) => {
-      dispatch({ type: types.wav2pix.loaded_buffer })
+      dispatch({ type: types.wav2pix.load })
 
       const zip = new JSZip()
       const zip_folder = zip.folder("wav2pix_" + name);
 
+      let steps = (pcm.length - FRAME_LENGTH) / frame_step
+      console.log(steps)
+
       let offset = 0, count = 0, _len = pcm.length - FRAME_LENGTH
       for (;
             offset < _len && count < max;
             offset += frame_step, count += 1
           ) {
         if ((count % 10) === 0) {
-          dispatch({ type: types.wav2pix.draw_progress, count })
+          dispatch({ type: types.wav2pix.progress, progress: { i: count / steps * 6, n: 6 } })
         }
         render(pcm.slice(offset, offset+FRAME_LENGTH), sr, count, zip_folder)
       }
 
       // dispatch event
-      dispatch({ type: types.wav2pix.draw_finish })
+      dispatch({ type: types.wav2pix.finish, message: 'Rendered ' + count + ' images' })
       zip.generateAsync({ type: "blob" }).then(content => {
-        dispatch({ type: types.wav2pix.load_zip })
+        dispatch({ type: types.wav2pix.zip })
         // FileSaver.saveAs(content, "wav2pix_" + name + ".zip")
         resolve({
           zip: content,
diff --git a/app/client/modules/pix2wav/pix2wav.reducer.js b/app/client/modules/pix2wav/pix2wav.reducer.js
index c1ae51c..18caad7 100644
--- a/app/client/modules/pix2wav/pix2wav.reducer.js
+++ b/app/client/modules/pix2wav/pix2wav.reducer.js
@@ -17,22 +17,22 @@ const pix2wavReducer = (state = pix2wavInitialState, action) => {
   }
 
   switch (action.type) {
-    case types.wav2pix.loaded_buffer:
+    case types.wav2pix.load:
       return {
         ...state,
         status: 'Loaded buffer',
       }
-    case types.wav2pix.draw_progress:
+    case types.wav2pix.progress:
       return {
         ...state,
         status: 'Rendering frame ' + action.count,
       }
-    case types.wav2pix.draw_finish:
+    case types.wav2pix.finish:
       return {
         ...state,
-        status: 'Render complete',
+        status: action.message || 'Render complete',
       }
-    case types.wav2pix.load_zip:
+    case types.wav2pix.zip:
       return {
         ...state,
         status: 'Built zip file',
diff --git a/app/client/modules/pix2wav/views/spectrogram.upload.js b/app/client/modules/pix2wav/views/spectrogram.upload.js
index 7d2be1f..40e6159 100644
--- a/app/client/modules/pix2wav/views/spectrogram.upload.js
+++ b/app/client/modules/pix2wav/views/spectrogram.upload.js
@@ -96,6 +96,9 @@ 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 frame_size = Math.round(wav2pixActions.FRAME_LENGTH / 44100 * 1000) + ' ms.'
+    const frame_step = Math.round(this.state.frame_step / 44100 * 1000) + ' ms.'
     return (
       <div className='fileMetadata'>
         {file.size > 2 << 20 &&
@@ -108,6 +111,9 @@ 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='Frame Size'>{frame_size}</Param>
+          <Param title='Frame Step'>{frame_step}</Param>
           <br />
           <Param title='Status'>{this.props.pix2wav.status}</Param>
           <br />
@@ -119,8 +125,8 @@ class SpectrogramUpload extends Component {
             value={this.state.name}
           />
           <Slider
-            name='max frame count'
-            min={10} max={500} type='int'
+            name='Frame cutoff'
+            min={10} max={1000} type='int'
             value={this.state.max}
             onChange={max => this.setState({ max })}
           />
diff --git a/app/client/types.js b/app/client/types.js
index 3ef6366..d65db3b 100644
--- a/app/client/types.js
+++ b/app/client/types.js
@@ -97,15 +97,13 @@ export default {
 		// reset checkpoint settings
 		// queue new checkpoint
 	},
-	pix2pix: {
-		init: 'PIX2PIX_INIT',
-		set_folder: 'PIX2PIX_SET_FOLDER',
-	},
-	pix2wav: {
-		init: 'PIX2WAV_INIT',
-		set_folder: 'PIX2WAV_SET_FOLDER',
-	},
+	pix2pix: with_type('pix2pix', [
+		'init', 'set_folder'
+	]),
+	pix2wav: with_type('pix2wav', [
+		'init', 'set_folder'
+	]),
 	wav2pix: with_type('wav2pix', [
-		'loaded_buffer', 'draw_progress', 'draw_finish', 'load_zip', 'rendered_frames',
-	])
+		'load', 'progress', 'finish', 'zip', 'uploading',
+	]),
 }