toggles and layout adjust

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,