1 files changed, 126 insertions, 0 deletions
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)