summaryrefslogtreecommitdiff
path: root/app/client/live
diff options
context:
space:
mode:
Diffstat (limited to 'app/client/live')
-rw-r--r--app/client/live/actions.js23
-rw-r--r--app/client/live/index.js213
-rw-r--r--app/client/live/reducer.js6
3 files changed, 129 insertions, 113 deletions
diff --git a/app/client/live/actions.js b/app/client/live/actions.js
index 30a25ff..047e51f 100644
--- a/app/client/live/actions.js
+++ b/app/client/live/actions.js
@@ -1,10 +1,15 @@
-import socket from '../socket'
+import * as 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,
-// }
-// }
+export const get_params = () => {
+ socket.get_params()
+ return { type: 'GET_PARAMS', }
+}
+
+export const set_param = (key, value) => {
+ socket.set_param(key, value)
+ return { type: 'SET_PARAM', key, value, }
+}
+
+export const get_checkpoints = () => {
+ return { type: 'GET_CHECKPOINTS', }
+}
diff --git a/app/client/live/index.js b/app/client/live/index.js
index 80f531a..8d16785 100644
--- a/app/client/live/index.js
+++ b/app/client/live/index.js
@@ -1,126 +1,137 @@
import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
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'>
+import * as liveActions from './actions'
- <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>
+class App extends Component {
+ constructor(props){
+ super()
+ props.actions.get_params()
+ }
+ render(){
+ const props = this.props
+ return (
+ <div className='app'>
+ <Player />
+ <div className='params'>
- <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='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='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='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='Clahe'
- toggle='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'
- 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='Clahe'
+ toggle='clahe'
+ >
+ <Slider
+ name='clip_limit'
+ min={1.0} max={4.0} type='float'
+ />
+ </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='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='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='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>
- </div>
- )
+ )
+ }
}
const mapStateToProps = state => ({
})
const mapDispatchToProps = (dispatch, ownProps) => ({
+ actions: bindActionCreators(liveActions, dispatch)
})
export default connect(mapStateToProps, mapDispatchToProps)(App)
diff --git a/app/client/live/reducer.js b/app/client/live/reducer.js
index 9d41c6f..09a00b5 100644
--- a/app/client/live/reducer.js
+++ b/app/client/live/reducer.js
@@ -8,9 +8,9 @@ const liveInitialState = {
const liveReducer = (state = liveInitialState, action) => {
let results;
-
+ console.log(action.type)
switch(action.type) {
- case 'LIVE_LOAD_OPT_FROM_SERVER':
+ case 'LOAD_PARAMS':
return {
...state,
loading: false,
@@ -18,7 +18,7 @@ const liveReducer = (state = liveInitialState, action) => {
opt: action.opt,
}
- case 'LIVE_SET_OPT':
+ case 'SET_PARAM':
return {
...state,
opt: {
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 12:56:51 +0000