toggles and layout adjust

1 files changed, 145 insertions, 108 deletions

diff --git a/public/bundle.js b/public/bundle.js
index 4fb7698..66c44b3 100644
--- a/public/bundle.js
+++ b/public/bundle.js
@@ -146,19 +146,31 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 var ParamGroup = function (_Component) {
   _inherits(ParamGroup, _Component);
 
-  function ParamGroup() {
+  function ParamGroup(props) {
     _classCallCheck(this, ParamGroup);
 
-    return _possibleConstructorReturn(this, (ParamGroup.__proto__ || Object.getPrototypeOf(ParamGroup)).apply(this, arguments));
+    var _this = _possibleConstructorReturn(this, (ParamGroup.__proto__ || Object.getPrototypeOf(ParamGroup)).call(this, props));
+
+    _this.handleClick = _this.handleClick.bind(_this);
+    return _this;
   }
 
   _createClass(ParamGroup, [{
+    key: 'handleClick',
+    value: function handleClick(e) {
+      clearTimeout(this.timeout);
+      var new_value = e.target.checked;
+      this.props.actions.set_param(this.props.name, new_value);
+    }
+  }, {
     key: 'render',
     value: function render() {
       var props = this.props;
+      var checked = this.props.opt[this.props.name];
+      var className = checked ? 'paramGroup active' : 'paramGroup inactive';
       return (0, _preact.h)(
         'div',
-        { 'class': 'paramGroup' },
+        { className: className },
         (0, _preact.h)(
           'label',
           null,
@@ -167,7 +179,11 @@ var ParamGroup = function (_Component) {
             null,
             props.title
           ),
-          (0, _preact.h)('input', { type: 'checkbox' })
+          (0, _preact.h)('input', {
+            type: 'checkbox',
+            onClick: this.handleClick,
+            checked: checked
+          })
         ),
         props.children
       );
@@ -247,6 +263,14 @@ var Slider = function (_Component) {
   }
 
   _createClass(Slider, [{
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      var next_value = nextProps.opt[nextProps.name];
+      if (next_value !== this.state.value) {
+        this.setState({ value: next_value });
+      }
+    }
+  }, {
     key: 'handleInput',
     value: function handleInput(e) {
       var _props = this.props,
@@ -425,6 +449,7 @@ var get_params = exports.get_params = function get_params() {
 };
 
 var set_param = exports.set_param = function set_param(key, value) {
+  console.log('set param', key, value);
   socket.set_param(key, value);
   return { type: 'SET_PARAM', key: key, value: value };
 };
@@ -541,112 +566,121 @@ var App = function (_Component) {
           'div',
           { className: 'params' },
           (0, _preact.h)(
-            _paramGroup2.default,
-            {
-              title: 'Transition'
-            },
-            (0, _preact.h)(_slider2.default, {
-              name: 'transition_period',
-              min: 10, max: 5000, type: 'int'
-            }),
-            (0, _preact.h)(_slider2.default, {
-              name: 'transition_min',
-              min: 0.001, max: 0.2, type: 'float'
-            }),
-            (0, _preact.h)(_slider2.default, {
-              name: 'transition_max',
-              min: 0.1, max: 1.0, type: 'float'
-            })
-          ),
-          (0, _preact.h)(
-            _paramGroup2.default,
-            {
-              title: 'Recursion',
-              toggle: 'recursive'
-            },
-            (0, _preact.h)(_slider2.default, {
-              name: 'recursive_frac',
-              min: 0.01, max: 0.3, type: 'float'
-            }),
-            (0, _preact.h)(_slider2.default, {
-              name: 'recurse_roll',
-              min: -5, max: 5, type: 'int'
-            }),
-            (0, _preact.h)(_slider2.default, {
-              name: 'recurse_roll_axis',
-              min: 0, max: 1, type: 'int'
-            })
+            'div',
+            { className: 'column' },
+            (0, _preact.h)(
+              _paramGroup2.default,
+              {
+                title: 'Transition',
+                name: 'transition'
+              },
+              (0, _preact.h)(_slider2.default, {
+                name: 'transition_period',
+                min: 10, max: 5000, type: 'int'
+              }),
+              (0, _preact.h)(_slider2.default, {
+                name: 'transition_min',
+                min: 0.001, max: 0.2, type: 'float'
+              }),
+              (0, _preact.h)(_slider2.default, {
+                name: 'transition_max',
+                min: 0.1, max: 1.0, type: 'float'
+              })
+            ),
+            (0, _preact.h)(
+              _paramGroup2.default,
+              {
+                title: 'Recursion',
+                name: 'recursive'
+              },
+              (0, _preact.h)(_slider2.default, {
+                name: 'recursive_frac',
+                min: 0.01, max: 0.3, type: 'float'
+              }),
+              (0, _preact.h)(_slider2.default, {
+                name: 'recurse_roll',
+                min: -5, max: 5, type: 'int'
+              }),
+              (0, _preact.h)(_slider2.default, {
+                name: 'recurse_roll_axis',
+                min: 0, max: 1, type: 'int'
+              })
+            ),
+            (0, _preact.h)(
+              _paramGroup2.default,
+              {
+                title: 'Sequence',
+                name: 'sequence'
+              },
+              (0, _preact.h)(_slider2.default, {
+                name: 'sequence_frac',
+                min: 0.01, max: 0.3, type: 'float'
+              }),
+              (0, _preact.h)(_slider2.default, {
+                name: 'process_frac',
+                min: 0, max: 1, type: 'float'
+              })
+            )
           ),
           (0, _preact.h)(
-            _paramGroup2.default,
-            {
-              title: 'Sequence',
-              toggle: 'sequence'
-            },
-            (0, _preact.h)(_slider2.default, {
-              name: 'sequence_frac',
-              min: 0.01, max: 0.3, type: 'float'
-            }),
-            (0, _preact.h)(_slider2.default, {
-              name: 'process_frac',
-              min: 0, max: 1, type: 'float'
-            })
-          ),
-          (0, _preact.h)(
-            _paramGroup2.default,
-            {
-              title: 'Clahe',
-              toggle: 'clahe'
-            },
-            (0, _preact.h)(_slider2.default, {
-              name: 'clip_limit',
-              min: 1.0, max: 4.0, type: 'float'
-            })
-          ),
-          (0, _preact.h)(
-            _paramGroup2.default,
-            {
-              title: 'Posterize',
-              toggle: 'posterize'
-            },
-            (0, _preact.h)(_slider2.default, {
-              name: 'spatial_window',
-              min: 2, max: 128, type: 'int'
-            }),
-            (0, _preact.h)(_slider2.default, {
-              name: 'color_window',
-              min: 2, max: 128, type: 'int'
-            })
-          ),
-          (0, _preact.h)(
-            _paramGroup2.default,
-            {
-              title: 'Blur',
-              toggle: 'blur'
-            },
-            (0, _preact.h)(_slider2.default, {
-              name: 'blur_radius',
-              min: 3, max: 7, type: 'int'
-            }),
-            (0, _preact.h)(_slider2.default, {
-              name: 'blur_sigma',
-              min: 0, max: 2, type: 'float'
-            })
-          ),
-          (0, _preact.h)(
-            _paramGroup2.default,
-            {
-              title: 'Canny Edge Detection',
-              toggle: 'canny'
-            },
-            (0, _preact.h)(_slider2.default, {
-              name: 'canny_lo',
-              min: 10, max: 200, type: 'int'
-            }),
-            (0, _preact.h)(_slider2.default, {
-              name: 'canny_hi',
-              min: 10, max: 200, type: 'int'
-            })
+            'div',
+            { className: 'column' },
+            (0, _preact.h)(
+              _paramGroup2.default,
+              {
+                title: 'Clahe',
+                name: 'clahe'
+              },
+              (0, _preact.h)(_slider2.default, {
+                name: 'clip_limit',
+                min: 1.0, max: 4.0, type: 'float'
+              })
+            ),
+            (0, _preact.h)(
+              _paramGroup2.default,
+              {
+                title: 'Posterize',
+                name: 'posterize'
+              },
+              (0, _preact.h)(_slider2.default, {
+                name: 'spatial_window',
+                min: 2, max: 128, type: 'int'
+              }),
+              (0, _preact.h)(_slider2.default, {
+                name: 'color_window',
+                min: 2, max: 128, type: 'int'
+              })
+            ),
+            (0, _preact.h)(
+              _paramGroup2.default,
+              {
+                title: 'Blur',
+                name: 'blur'
+              },
+              (0, _preact.h)(_slider2.default, {
+                name: 'blur_radius',
+                min: 3, max: 7, type: 'int'
+              }),
+              (0, _preact.h)(_slider2.default, {
+                name: 'blur_sigma',
+                min: 0, max: 2, type: 'float'
+              })
+            ),
+            (0, _preact.h)(
+              _paramGroup2.default,
+              {
+                title: 'Canny Edge Detection',
+                name: 'canny'
+              },
+              (0, _preact.h)(_slider2.default, {
+                name: 'canny_lo',
+                min: 10, max: 200, type: 'int'
+              }),
+              (0, _preact.h)(_slider2.default, {
+                name: 'canny_hi',
+                min: 10, max: 200, type: 'int'
+              })
+            )
           )
         )
       );
@@ -704,6 +738,9 @@ var liveReducer = function liveReducer() {
 
   switch (action.type) {
     case 'LOAD_PARAMS':
+      if (!action.opt || !Object.keys(action.opt).length) {
+        return state;
+      }
       return _extends({}, state, {
         loading: false,
         error: null,