diff --git a/backend/app/handlers/SocketHandler.py b/backend/app/handlers/SocketHandler.py
index 2d08d8fa3..7f1bf87b6 100644
--- a/backend/app/handlers/SocketHandler.py
+++ b/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):
diff --git a/chameleon-client/src/components/InputTab.vue b/chameleon-client/src/components/InputTab.vue
index b26c609f2..28e6dfe4a 100644
--- a/chameleon-client/src/components/InputTab.vue
+++ b/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);
             }
         }
     }
diff --git a/chameleon-client/src/components/Vision.vue b/chameleon-client/src/components/Vision.vue
index 6c2d25216..6e1d4a6d7 100644
--- a/chameleon-client/src/components/Vision.vue
+++ b/chameleon-client/src/components/Vision.vue
@@ -33,7 +33,6 @@
         },
         data() {
             return {
-
             }
         },
         methods: {}
diff --git a/chameleon-client/src/components/ch-select.vue b/chameleon-client/src/components/ch-select.vue
index 5d9dce042..a005d168c 100644
--- a/chameleon-client/src/components/ch-select.vue
+++ b/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>
diff --git a/chameleon-client/src/components/ch-slider.vue b/chameleon-client/src/components/ch-slider.vue
index 05e318019..0540071d4 100644
--- a/chameleon-client/src/components/ch-slider.vue
+++ b/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>
diff --git a/chameleon-client/src/main.js b/chameleon-client/src/main.js
index d51ce89d9..ace124dd2 100644
--- a/chameleon-client/src/main.js
+++ b/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({