From b92b633cf0c2d528e45c04828a9ce1f5679aeaa3 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 6 Jun 2018 04:16:37 +0200
Subject: frame count slider

---
 app/client/common/slider.component.js              |  6 +--
 app/client/modules/pix2pix/views/pix2pix.live.js   | 32 +++++++--------
 .../modules/pix2wav/views/spectrogram.upload.js    | 45 ++++++++++++++--------
 3 files changed, 47 insertions(+), 36 deletions(-)

(limited to 'app')

diff --git a/app/client/common/slider.component.js b/app/client/common/slider.component.js
index 942640a..fccbc5e 100644
--- a/app/client/common/slider.component.js
+++ b/app/client/common/slider.component.js
@@ -10,7 +10,7 @@ class Slider extends Component {
     super(props)
     this.timeout = 0
     this.state = {
-      value: props.opt[props.name]
+      value: props.live ? props.opt[props.name] : props.value
     }
     this.handleInput = this.handleInput.bind(this)
     this.handleRange = this.handleRange.bind(this)
@@ -33,7 +33,7 @@ class Slider extends Component {
     }
     if (old_value !== new_value) {
       this.setState({ value: new_value })
-      this.props.actions.set_param(this.props.name, new_value)
+      this.props.live && this.props.actions.set_param(this.props.name, new_value)
       this.props.onChange && this.props.onChange(new_value)
     }
     clearTimeout(this.timeout)
@@ -49,7 +49,7 @@ class Slider extends Component {
     }
     this.setState({ value: new_value })
     this.timeout = setTimeout(() => {
-      this.props.actions.set_param(this.props.name, new_value)
+      this.props.live && this.props.actions.set_param(this.props.name, new_value)
       this.props.onChange && this.props.onChange(new_value)
     }, SLIDER_THROTTLE_TIME)
   }
diff --git a/app/client/modules/pix2pix/views/pix2pix.live.js b/app/client/modules/pix2pix/views/pix2pix.live.js
index fc6bc9b..eebb364 100644
--- a/app/client/modules/pix2pix/views/pix2pix.live.js
+++ b/app/client/modules/pix2pix/views/pix2pix.live.js
@@ -93,7 +93,7 @@ class Pix2PixLive extends Component {
                 options={this.props.epochs}
                 onChange={this.changeEpoch}
               />
-              <Slider
+              <Slider live
                 name='position'
                 min={0.0} max={1.0} type='float'
                 value={(this.props.frame.sequence_i || 0) / (this.props.frame.sequence_len || 1)}
@@ -130,15 +130,15 @@ class Pix2PixLive extends Component {
               title='Transition'
               name='transition'
             >
-              <Slider
+              <Slider live
                 name='transition_period'
                 min={10} max={5000} type='int'
               />
-              <Slider
+              <Slider live
                 name='transition_min'
                 min={0.001} max={0.2} type='float'
               />
-              <Slider
+              <Slider live
                 name='transition_max'
                 min={0.1} max={1.0} type='float'
               />
@@ -148,15 +148,15 @@ class Pix2PixLive extends Component {
               title='Recursion'
               name='recursive'
             >
-              <Slider
+              <Slider live
                 name='recursive_frac'
                 min={0.0} max={0.5} type='float'
               />
-              <Slider
+              <Slider live
                 name='recurse_roll'
                 min={-64} max={64} type='int'
               />
-              <Slider
+              <Slider live
                 name='recurse_roll_axis'
                 min={0} max={1} type='int'
               />
@@ -166,11 +166,11 @@ class Pix2PixLive extends Component {
               title='Sequence'
               name='sequence'
             >
-              <Slider
+              <Slider live
                 name='sequence_frac'
                 min={0.0} max={0.5} type='float'
               />
-              <Slider
+              <Slider live
                 name='process_frac'
                 min={0} max={1} type='float'
               />
@@ -181,7 +181,7 @@ class Pix2PixLive extends Component {
               title='Clahe'
               name='clahe'
             >
-              <Slider
+              <Slider live
                 name='clip_limit'
                 min={1.0} max={4.0} type='float'
               />
@@ -191,11 +191,11 @@ class Pix2PixLive extends Component {
               title='Posterize'
               name='posterize'
             >
-              <Slider
+              <Slider live
                 name='spatial_window'
                 min={2} max={128} type='int'
               />
-              <Slider
+              <Slider live
                 name='color_window'
                 min={2} max={128} type='int'
               />
@@ -205,11 +205,11 @@ class Pix2PixLive extends Component {
               title='Blur'
               name='blur'
             >
-              <Slider
+              <Slider live
                 name='blur_radius'
                 min={3} max={7} type='odd'
               />
-              <Slider
+              <Slider live
                 name='blur_sigma'
                 min={0} max={2} type='float'
               />
@@ -219,11 +219,11 @@ class Pix2PixLive extends Component {
               title='Canny Edge Detection'
               name='canny'
             >
-              <Slider
+              <Slider live
                 name='canny_lo'
                 min={10} max={200} type='int'
               />
-              <Slider
+              <Slider live
                 name='canny_hi'
                 min={10} max={200} type='int'
               />
diff --git a/app/client/modules/pix2wav/views/spectrogram.upload.js b/app/client/modules/pix2wav/views/spectrogram.upload.js
index 0279e80..087af6a 100644
--- a/app/client/modules/pix2wav/views/spectrogram.upload.js
+++ b/app/client/modules/pix2wav/views/spectrogram.upload.js
@@ -9,7 +9,7 @@ import * as pix2wavTasks from '../pix2wav.tasks'
 
 import {
   Loading, Progress,
-  Group, Param, FileUpload, TextInput, Button
+  Group, Param, FileUpload, TextInput, Button, Slider,
 } from '../../../common'
 
 import * as datasetActions from '../../../dataset/dataset.actions'
@@ -24,6 +24,7 @@ class SpectrogramUpload extends Component {
       file: null,
       name: "",
       frames: [],
+      max: 3000,
     }
     const audioElement = document.createElement('audio')
     audioElement.addEventListener('loadedmetadata', () => {
@@ -66,7 +67,6 @@ class SpectrogramUpload extends Component {
     // module={pix2wavModule}
     // data={pix2wav.data}
     // folder={folder}
-    console.log(this.props)
     const { file, frames } = this.state
     return (
       <div className='row'>
@@ -98,21 +98,32 @@ class SpectrogramUpload extends Component {
           <p>
             <i>Careful, your file is larger than 2 MB.</i>
           </p>}
-        <Param title='Name'>{file.name}</Param>
-        <Param title='Type'>{file.type}</Param>
-        <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>
-        <br />
-        <Param title='Status'>{this.props.pix2wav.status}{this.props.upload.status}</Param>
-        <TextInput
-          title='Dataset name'
-          onChange={e => this.setState({ name: e.target.value })}
-          value={this.state.name}
-        />
-        <Button
-          onClick={() => this.buildZip()}
-        >Build Zip</Button>
+        <Group title='Metadata'>
+          <Param title='Name'>{file.name}</Param>
+          <Param title='Type'>{file.type}</Param>
+          <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>
+          <br />
+          <Param title='Status'>{this.props.pix2wav.status}{this.props.upload.status}</Param>
+          <br />
+        </Group>
+        <Group title='Data settings'>
+          <TextInput
+            title='Dataset name'
+            onChange={e => this.setState({ name: e.target.value })}
+            value={this.state.name}
+          />
+          <Slider
+            name='max frame count'
+            min={10} max={10000} type='int'
+            value={this.state.max}
+            onChange={max => this.setState({ max })}
+          />
+          <Button
+            onClick={() => this.buildZip()}
+          >Build Zip</Button>
+        </Group>
         <Progress />
       </div>
     )
-- 
cgit v1.2.3-70-g09d2