summaryrefslogtreecommitdiff
path: root/app/client
diff options
context:
space:
mode:
Diffstat (limited to 'app/client')
-rw-r--r--app/client/index.jsx2
-rw-r--r--app/client/live/actions.js23
-rw-r--r--app/client/live/index.js213
-rw-r--r--app/client/live/reducer.js6
-rw-r--r--app/client/socket.js20
5 files changed, 142 insertions, 122 deletions
diff --git a/app/client/index.jsx b/app/client/index.jsx
index 63757bf..8cf0ecd 100644
--- a/app/client/index.jsx
+++ b/app/client/index.jsx
@@ -3,9 +3,9 @@ import { Provider } from 'react-redux'
// import { } from 'react-router-redux'
import { BrowserRouter, Route } from 'react-router-dom'
// import client from './client'
-import socket from './socket'
import { store, history } from './store'
+import socket from './socket'
import Header from './common/header.component'
import Live from './live'
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: {
diff --git a/app/client/socket.js b/app/client/socket.js
index 289fc4e..3528139 100644
--- a/app/client/socket.js
+++ b/app/client/socket.js
@@ -1,16 +1,24 @@
+import { store } from './store'
+
let socket = io.connect('/client')
let got_frame = false
socket.on('res', (data) => {
+ console.log(data.cmd)
switch (data.cmd) {
case 'get_last_frame':
- console.log('get last frame!')
if (data.res !== 'working') {
socket.emit('cmd', {
cmd: 'get_last_frame',
})
}
break
+ case 'get_params':
+ store.dispatch({
+ type: 'LOAD_PARAMS',
+ opt: data.payload,
+ })
+ break
default:
break
}
@@ -31,10 +39,6 @@ socket.on('frame', (data) => {
img.src = url
})
-socket.emit('cmd', {
- cmd: 'get_params',
-})
-
setTimeout(() => {
if (!got_frame) {
// socket.emit('cmd', {
@@ -43,14 +47,14 @@ setTimeout(() => {
}
}, 500)
-export function get_params(key, value) {
+export function get_params() {
socket.emit('cmd', {
cmd: 'get_params',
})
}
-export function send_param(key, value) {
+export function set_param(key, value) {
socket.emit('cmd', {
- cmd: 'send_param',
+ cmd: 'set_param',
payload: {
'key': key,
'value': value,
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 14:52:23 +0000