basic css for form elements

4 files changed, 187 insertions, 0 deletions

diff --git a/app/client/live/actions.js b/app/client/live/actions.js
new file mode 100644
index 0000000..30a25ff
--- /dev/null
+++ b/app/client/live/actions.js
@@ -0,0 +1,10 @@
+import socket from '../socket'
+
+export const loadOptFromServer = (opt) => ({
+  type: 'LIVE_LOAD_OPT_FROM_SERVER', opt,
+})
+// export const updateOptFromServer = (key, value) => {
+//   return {
+//     type: 'LIVE_LOAD_OPT_FROM_SERVER', opt,
+//   }
+// }
diff --git a/app/client/live/components/player.component.js b/app/client/live/components/player.component.js
new file mode 100644
index 0000000..3c5fc9e
--- /dev/null
+++ b/app/client/live/components/player.component.js
@@ -0,0 +1,16 @@
+import { h, Component } from 'preact'
+import { connect } from 'react-redux'
+
+function Player(props) {
+  return (
+    <div className='player' />
+  )
+}
+
+const mapStateToProps = state => ({
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Player)
diff --git a/app/client/live/index.js b/app/client/live/index.js
new file mode 100644
index 0000000..80f531a
--- /dev/null
+++ b/app/client/live/index.js
@@ -0,0 +1,126 @@
+import { h, Component } from 'preact'
+import { connect } from 'react-redux'
+
+import Player from './components/player.component'
+import ParamGroup from '../common/paramGroup.component'
+import Slider from '../common/slider.component'
+
+function App(props) {
+  return (
+    <div className='app'>
+      <Player />
+      <div className='params'>
+
+        <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'
+          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'
+          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='Clahe'
+          toggle='clahe'
+        >
+          <Slider
+            name='clip_limit'
+            min={1.0} max={4.0} 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>
+
+      </div>
+    </div>
+  )
+}
+
+const mapStateToProps = state => ({
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(App)
diff --git a/app/client/live/reducer.js b/app/client/live/reducer.js
new file mode 100644
index 0000000..9d41c6f
--- /dev/null
+++ b/app/client/live/reducer.js
@@ -0,0 +1,35 @@
+import { combineReducers } from 'redux'
+
+const liveInitialState = {
+  loading: false,
+  error: null,
+  opt: {},
+}
+
+const liveReducer = (state = liveInitialState, action) => {
+  let results;
+
+  switch(action.type) {
+    case 'LIVE_LOAD_OPT_FROM_SERVER':
+      return {
+        ...state,
+        loading: false,
+        error: null,
+        opt: action.opt,
+      }
+
+    case 'LIVE_SET_OPT':
+      return {
+        ...state,
+        opt: {
+          ...state.opt,
+          [action.key]: action.value,
+        }
+      }
+
+    default:
+      return state
+  }
+}
+
+export default liveReducer