From bbf3c187c4967509a8097b168533786daacc2ec6 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Mon, 21 May 2018 11:17:31 +0200
Subject: rpc

---
 app/client/index.jsx       |   2 +-
 app/client/live/actions.js |  23 +++--
 app/client/live/index.js   | 213 ++++++++++++++++++++++++---------------------
 app/client/live/reducer.js |   6 +-
 app/client/socket.js       |  20 +++--
 app/relay/index.js         |   2 +-
 6 files changed, 143 insertions(+), 123 deletions(-)

(limited to 'app')

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,
diff --git a/app/relay/index.js b/app/relay/index.js
index 9fa070e..3174729 100644
--- a/app/relay/index.js
+++ b/app/relay/index.js
@@ -13,7 +13,7 @@ remote.on('cmd', (data) => {
   }
   console.log('got', data.cmd)
   switch (data.cmd) {
-    case 'send_param':
+    case 'set_param':
       if (! data.payload) return
       rpc.invoke(data.cmd, data.payload.key, data.payload.value, (err, res, more) => {
         console.log('sent param, got response', res)
-- 
cgit v1.2.3-70-g09d2