to wayt bindig of parent and child

backend/app/handlers/SocketHandler.py

@@ -16,8 +16,8 @@ class ChameleonWebSocket(tornado.websocket.WebSocketHandler):
         print("WebSocket opened")
 
     def on_message(self, message):
-        print(json.loads(message))
-        # print(message)
+        # print(json.loads(message))
+        print(message)
         self.write_message(message)
 
     def on_close(self):

chameleon-client/src/components/InputTab.vue

@@ -1,10 +1,10 @@
 
 <template>
     <div id="InputTab">
-        <chslider class="spacing" title="exposure" v-model="expval" v-on:input="onChange(expval)"></chslider>
-        <chslider class="spacing" title="Brightness"></chslider>
-        <chselect class="spacing" title="Orientation" :list="['Normal','Inverted']" v-model="OrientationVal" v-on:input="onChange(OrientationVal)" ></chselect>
-        <chselect class="spacing" title="Resolution" :list="['idk']"></chselect>
+        <chslider class="spacing" title="exposure" :parentData="values.exposure" @input="values.exposure = $event"></chslider>
+        <chslider class="spacing" title="Brightness" :parentData="values.brightness" @input="values.brightness = $event"></chslider>
+        <chselect class="spacing" title="Orientation" :list="['Normal','Inverted']" :parentData="values.orientation" @input="values.orientation = $event" ></chselect>
+        <chselect class="spacing" title="Resolution" :list="['idk']" :parentData="values.resolution" @input="values.resolution = $event" ></chselect>
         </div>
 
 </template>
@@ -16,8 +16,12 @@ import chselect from './ch-select.vue'
         name: 'InputTab',
         data () {
             return{
-                expval,
-                OrientationVal
+                values:{
+                    exposure:0,
+                    brightness:0,
+                    orientation:0,
+                    resolution:0
+                }
             }
         },
         components: {
@@ -26,9 +30,7 @@ import chselect from './ch-select.vue'
         },
         methods: {
             onChange(i) {
-                // console.log(i);
-                this.$socket.send(JSON.stringify(i));
-                
+                console.log(i);
             }
         }
     }

chameleon-client/src/components/Vision.vue

@@ -33,7 +33,6 @@
         },
         data() {
             return {
-
             }
         },
         methods: {}

chameleon-client/src/components/ch-select.vue

@@ -16,7 +16,8 @@
         name: 'ch-select',
         props:[
             'title',
-            'list'
+            'list',
+            'parentData'
         ],
         data() {
             return {
@@ -25,8 +26,12 @@
         },
         methods: {
             handleInput() {
-                this.$emit('input',{[this.title]:this.value});
+                this.$emit('input',this.value);
+                this.$socket.sendObj({[this.title]:this.value});
             }
+        },
+        beforeMount () {
+            this.value = this.parentData
         }
     }
 </script>

chameleon-client/src/components/ch-slider.vue

@@ -16,16 +16,20 @@
 <script>
     export default {
         name: 'ch-slider',
-        props:['title','value'],
+        props:['title','parentData'],
         data() {
             return {
-                content:this.value
+                value:0,
             }
         },
         methods: {
             handleInput() {
-                this.$emit('input',{[this.title]:this.value});
+                this.$emit('input',this.value);
+                this.$socket.sendObj({[this.title]:this.value});
             }
+        },
+        beforeMount () {
+            this.value = this.parentData
         }
     }
 </script>

chameleon-client/src/main.js

@@ -9,7 +9,7 @@ import locale from 'iview/dist/locale/en-US';
 
 Vue.use(VueRouter);
 Vue.use(iView , { locale });
-Vue.use(VueNativeSock,'ws://'+location.hostname+':8888/websocket');
+Vue.use(VueNativeSock,'ws://'+location.hostname+':8888/websocket',{format:'JSON'});
 Vue.config.productionTip = false
 
 new Vue({