diff --git a/New client/chameleon-client/src/App.vue b/New client/chameleon-client/src/App.vue
index aa7d997b7..6c5494e4b 100644
--- a/New client/chameleon-client/src/App.vue	
+++ b/New client/chameleon-client/src/App.vue	
@@ -31,7 +31,7 @@ export default {
 
   },
   methods:{
-    handleMessage(key,val){
+    handleMessage(key,value){
       switch(key){
         default:{
           this.$store.commit(key,value);
diff --git a/New client/chameleon-client/src/main.js b/New client/chameleon-client/src/main.js
index 54acb43f7..ac6e377da 100644
--- a/New client/chameleon-client/src/main.js	
+++ b/New client/chameleon-client/src/main.js	
@@ -10,6 +10,14 @@ Vue.config.productionTip = false;
 // Vue.use(VueNativeSock,'ws://' + location.host + '/websocket',{format: 'json'});
 Vue.use(VueNativeSock,'ws://'+location.hostname+':8888/websocket');
 Vue.prototype.$msgPack = msgPack;
+Vue.mixin({
+  methods:{
+    handleInput(key,value){
+      let msg = this.$msgPack().encode({key,value})
+      this.$socket.send(msg);
+    }
+  }
+})
 new Vue({
   router,
   store,
diff --git a/New client/chameleon-client/src/views/Camera.vue b/New client/chameleon-client/src/views/Camera.vue
index b845ebf6c..bbfea85eb 100644
--- a/New client/chameleon-client/src/views/Camera.vue	
+++ b/New client/chameleon-client/src/views/Camera.vue	
@@ -110,6 +110,7 @@ import CVicon from '../components/cv-icon'
                         case 3:
                             return "OutputTab";
                     }
+                    return "";
                 }
             },
             point:{
diff --git a/New client/chameleon-client/src/views/CameraViewes/ContoursTab.vue b/New client/chameleon-client/src/views/CameraViewes/ContoursTab.vue
index 84054273b..45613d4d5 100644
--- a/New client/chameleon-client/src/views/CameraViewes/ContoursTab.vue	
+++ b/New client/chameleon-client/src/views/CameraViewes/ContoursTab.vue	
@@ -1,10 +1,10 @@
 <template>
     <div>
-        <CVrangeSlider v-model="value.Area" name="Area" :min="0" :max="100" :step="0.1"></CVrangeSlider>
-        <CVrangeSlider v-model="value.Ratio" name="Ratio (W/H)" :min="0" :max="100" :step="0.1"></CVrangeSlider>
-        <CVrangeSlider v-model="value.Extent" name="Extent" :min="0" :max="100"></CVrangeSlider>
-        <CVselect name="Target Group" :list="['Single','Dual','Triple','Quadruple','Quintuple']" v-model="value.TargetGrouping"></CVselect>
-        <CVselect name="Target Intersection" :list="['None','Up','Down','Left','Right']" :disabled="isDisabled" v-model="value.TargetIntersection"></CVselect>
+        <CVrangeSlider v-model="value.Area" name="Area" :min="0" :max="100" :step="0.1" @input="handleInput('Area',value.Area)"></CVrangeSlider>
+        <CVrangeSlider v-model="value.Ratio" name="Ratio (W/H)" :min="0" :max="100" :step="0.1" @input="handleInput('Ratio',value.Ratio)"></CVrangeSlider>
+        <CVrangeSlider v-model="value.Extent" name="Extent" :min="0" :max="100" @input="handleInput('Extent',value.Extent)"></CVrangeSlider>
+        <CVselect name="Target Group" :list="['Single','Dual','Triple','Quadruple','Quintuple']" v-model="value.TargetGrouping" @input="handleInput('TargetGrouping',value.TargetGrouping)"></CVselect>
+        <CVselect name="Target Intersection" :list="['None','Up','Down','Left','Right']" :disabled="isDisabled" v-model="value.TargetIntersection" @input="handleInput('TargetIntersection',value.TargetIntersection)"></CVselect>
 
     </div>
 </template>
diff --git a/New client/chameleon-client/src/views/CameraViewes/InputTab.vue b/New client/chameleon-client/src/views/CameraViewes/InputTab.vue
index b86fcf702..a4abd67cb 100644
--- a/New client/chameleon-client/src/views/CameraViewes/InputTab.vue	
+++ b/New client/chameleon-client/src/views/CameraViewes/InputTab.vue	
@@ -1,23 +1,20 @@
 <template>
     <div>
-        <CVslider name="Exposure" v-model="value.Exposure" @input="handleInput('exposure',value.Exposure)" :min="0" :max="100"></CVslider>
-        <CVslider name="Brightness" v-model="value.Brightness" :min="0" :max="100"></CVslider>
-        <CVselect name="Orientation" v-model="value.Orientation" :list="['Normal','Inverted']"></CVselect>
+        <CVslider name="Exposure" v-model="value.Exposure" @input="handleInput('Exposure',value.Exposure)" :min="0" :max="100"></CVslider>
+        <CVslider name="Brightness" v-model="value.Brightness" :min="0" :max="100" @input="handleInput('Brightness',value.Brightness)"></CVslider>
+        <CVselect name="Orientation" v-model="value.Orientation" :list="['Normal','Inverted']" @input="handleInput('Orientation',value.Orientation)"></CVselect>
     </div>
 </template>
 
 <script>
 import CVslider from '../../components/cv-slider'
-import rangeSlider from '../../components/cv-range-slider'
 import CVselect from '../../components/cv-select'
-import CVswitch from '../../components/cv-switch'
     export default {
         name: 'Input',
         props:['value'],
         components:{
             CVslider,
             CVselect,
-            CVswitch
         },
         data() {
             return {
@@ -26,10 +23,10 @@ import CVswitch from '../../components/cv-switch'
             }
         },
         methods:{
-            handleInput(key,val){
-                let msg = this.$msgPack().encode({key,val});
-                this.$socket.send(msg);
-            }
+            // handleInput(key,val){
+            //     let msg = this.$msgPack().encode({key,val});
+            //     this.$socket.send(msg);
+            // }
         },
         computed:{}
     }
diff --git a/New client/chameleon-client/src/views/CameraViewes/OutputTab.vue b/New client/chameleon-client/src/views/CameraViewes/OutputTab.vue
index 2416a5523..dcf9f7556 100644
--- a/New client/chameleon-client/src/views/CameraViewes/OutputTab.vue	
+++ b/New client/chameleon-client/src/views/CameraViewes/OutputTab.vue	
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <CVselect name="SortMode" v-model="value.SortMode" :list="['Largest','Smallest','Highest','Lowest','Rightmost','Leftmost','Closest']"></CVselect>
+        <CVselect name="SortMode" v-model="value.SortMode" :list="['Largest','Smallest','Highest','Lowest','Rightmost','Leftmost','Closest']" @input="handleInput('SortMode',value.SortMode)"></CVselect>
         <span>Calibrate:</span><v-divider dark color="white"></v-divider>
         <v-row align="center" justify="start">
             <v-col style="padding-right:0px" :cols="3"> 
diff --git a/New client/chameleon-client/src/views/CameraViewes/ThresholdTab.vue b/New client/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
index 162e52738..0e0716317 100644
--- a/New client/chameleon-client/src/views/CameraViewes/ThresholdTab.vue	
+++ b/New client/chameleon-client/src/views/CameraViewes/ThresholdTab.vue	
@@ -1,10 +1,10 @@
 <template>
     <div>
-        <CVrangeSlider v-model="value.Hue" name="Hue" :min="0" :max="180"></CVrangeSlider>
-        <CVrangeSlider v-model="value.Saturation" name="Saturation" :min="0" :max="255"></CVrangeSlider>
-        <CVrangeSlider v-model="value.Value" name="Value" :min="0" :max="255"></CVrangeSlider>
-        <CVswitch v-model="value.Erode" name="Erode"></CVswitch>
-        <CVswitch v-model="value.Dilate" name="Dilate"></CVswitch>
+        <CVrangeSlider v-model="value.Hue" name="Hue" :min="0" :max="180" @input="handleInput('Hue',value.Hue)"></CVrangeSlider>
+        <CVrangeSlider v-model="value.Saturation" name="Saturation" :min="0" :max="255" @input="handleInput('Saturation',value.Saturation)"></CVrangeSlider>
+        <CVrangeSlider v-model="value.Value" name="Value" :min="0" :max="255" @input="handleInput('Value',value.Value)"></CVrangeSlider>
+        <CVswitch v-model="value.Erode" name="Erode" @input="handleInput('Erode',value.Erode)"></CVswitch>
+        <CVswitch v-model="value.Dilate" name="Dilate" @input="handleInput('Dilate',value.Dilate)"></CVswitch>
     </div>
 </template>