diff options
Diffstat (limited to 'app')
| -rw-r--r-- | app/client/common/paramGroup.component.js | 19 | ||||
| -rw-r--r-- | app/client/common/slider.component.js | 7 | ||||
| -rw-r--r-- | app/client/live/actions.js | 1 | ||||
| -rw-r--r-- | app/client/live/index.js | 195 | ||||
| -rw-r--r-- | app/client/live/reducer.js | 3 |
5 files changed, 126 insertions, 99 deletions
diff --git a/app/client/common/paramGroup.component.js b/app/client/common/paramGroup.component.js index ccff0b0..2533642 100644 --- a/app/client/common/paramGroup.component.js +++ b/app/client/common/paramGroup.component.js @@ -4,13 +4,28 @@ import { bindActionCreators } from 'redux' import * as liveActions from '../live/actions' class ParamGroup extends Component { + constructor(props){ + super(props) + this.handleClick = this.handleClick.bind(this) + } + handleClick(e){ + clearTimeout(this.timeout) + let new_value = e.target.checked + this.props.actions.set_param(this.props.name, new_value) + } render() { const props = this.props + const checked = this.props.opt[this.props.name] + const className = checked ? 'paramGroup active' : 'paramGroup inactive' return ( - <div class='paramGroup'> + <div className={className}> <label> <h3>{props.title}</h3> - <input type='checkbox' /> + <input + type='checkbox' + onClick={this.handleClick} + checked={checked} + /> </label> {props.children} </div> diff --git a/app/client/common/slider.component.js b/app/client/common/slider.component.js index c8b4ed1..ca22689 100644 --- a/app/client/common/slider.component.js +++ b/app/client/common/slider.component.js @@ -15,7 +15,12 @@ class Slider extends Component { this.handleInput = this.handleInput.bind(this) this.handleRange = this.handleRange.bind(this) } - + componentWillReceiveProps(nextProps) { + const next_value = nextProps.opt[nextProps.name] + if (next_value !== this.state.value) { + this.setState({ value: next_value }); + } + } handleInput(e){ let { name, opt } = this.props let old_value = opt[name] diff --git a/app/client/live/actions.js b/app/client/live/actions.js index 047e51f..bde954b 100644 --- a/app/client/live/actions.js +++ b/app/client/live/actions.js @@ -6,6 +6,7 @@ export const get_params = () => { } export const set_param = (key, value) => { + console.log('set param', key, value) socket.set_param(key, value) return { type: 'SET_PARAM', key, value, } } diff --git a/app/client/live/index.js b/app/client/live/index.js index 8d16785..411191d 100644 --- a/app/client/live/index.js +++ b/app/client/live/index.js @@ -19,108 +19,111 @@ class App extends Component { <div className='app'> <Player /> <div className='params'> + <div className='column'> + <ParamGroup + title='Transition' + name='transition' + > + <Slider + name='transition_period' + min={10} max={5000} type='int' + /> + <Slider + name='transition_min' + min={0.001} max={0.2} type='float' + /> + <Slider + name='transition_max' + min={0.1} max={1.0} type='float' + /> + </ParamGroup> - <ParamGroup - title='Transition' - > - <Slider - name='transition_period' - min={10} max={5000} type='int' - /> - <Slider - name='transition_min' - min={0.001} max={0.2} type='float' - /> - <Slider - name='transition_max' - min={0.1} max={1.0} type='float' - /> - </ParamGroup> + <ParamGroup + title='Recursion' + name='recursive' + > + <Slider + name='recursive_frac' + min={0.01} max={0.3} type='float' + /> + <Slider + name='recurse_roll' + min={-5} max={5} type='int' + /> + <Slider + name='recurse_roll_axis' + min={0} max={1} type='int' + /> + </ParamGroup> - <ParamGroup - title='Recursion' - toggle='recursive' - > - <Slider - name='recursive_frac' - min={0.01} max={0.3} type='float' - /> - <Slider - name='recurse_roll' - min={-5} max={5} type='int' - /> - <Slider - name='recurse_roll_axis' - min={0} max={1} type='int' - /> - </ParamGroup> + <ParamGroup + title='Sequence' + name='sequence' + > + <Slider + name='sequence_frac' + min={0.01} max={0.3} type='float' + /> + <Slider + name='process_frac' + min={0} max={1} type='float' + /> + </ParamGroup> + </div> + <div className='column'> + <ParamGroup + title='Clahe' + name='clahe' + > + <Slider + name='clip_limit' + min={1.0} max={4.0} type='float' + /> + </ParamGroup> - <ParamGroup - title='Sequence' - toggle='sequence' - > - <Slider - name='sequence_frac' - min={0.01} max={0.3} type='float' - /> - <Slider - name='process_frac' - min={0} max={1} type='float' - /> - </ParamGroup> + <ParamGroup + title='Posterize' + name='posterize' + > + <Slider + name='spatial_window' + min={2} max={128} type='int' + /> + <Slider + name='color_window' + min={2} max={128} type='int' + /> + </ParamGroup> - <ParamGroup - title='Clahe' - toggle='clahe' - > - <Slider - name='clip_limit' - min={1.0} max={4.0} type='float' - /> - </ParamGroup> + <ParamGroup + title='Blur' + name='blur' + > + <Slider + name='blur_radius' + min={3} max={7} type='int' + /> + <Slider + name='blur_sigma' + min={0} max={2} type='float' + /> + </ParamGroup> - <ParamGroup - title='Posterize' - toggle='posterize' - > - <Slider - name='spatial_window' - min={2} max={128} type='int' - /> - <Slider - name='color_window' - min={2} max={128} type='int' - /> - </ParamGroup> - - <ParamGroup - title='Blur' - toggle='blur' - > - <Slider - name='blur_radius' - min={3} max={7} type='int' - /> - <Slider - name='blur_sigma' - min={0} max={2} type='float' - /> - </ParamGroup> - - <ParamGroup - title='Canny Edge Detection' - toggle='canny' - > - <Slider - name='canny_lo' - min={10} max={200} type='int' - /> - <Slider - name='canny_hi' - min={10} max={200} type='int' - /> - </ParamGroup> + <ParamGroup + title='Canny Edge Detection' + name='canny' + > + <Slider + name='canny_lo' + min={10} max={200} type='int' + /> + <Slider + name='canny_hi' + min={10} max={200} type='int' + /> + </ParamGroup> + </div> </div> </div> ) diff --git a/app/client/live/reducer.js b/app/client/live/reducer.js index 6e18624..93fc448 100644 --- a/app/client/live/reducer.js +++ b/app/client/live/reducer.js @@ -11,6 +11,9 @@ const liveReducer = (state = liveInitialState, action) => { switch(action.type) { case 'LOAD_PARAMS': + if (! action.opt || ! Object.keys(action.opt).length) { + return state + } return { ...state, loading: false, |