diff options
Diffstat (limited to 'app/client/live')
| -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 |
3 files changed, 103 insertions, 96 deletions
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, |