diff --git a/backend/app/handlers/SocketHandler.py b/backend/app/handlers/SocketHandler.py
index ab0a0aba1..2d08d8fa3 100644
--- a/backend/app/handlers/SocketHandler.py
+++ b/backend/app/handlers/SocketHandler.py
@@ -5,6 +5,14 @@ class ChameleonWebSocket(tornado.websocket.WebSocketHandler):
     def check_origin(self, origin):
         return True
     def open(self):
+        self.write_message(json.dumps(
+            {
+                'cam1':{
+                    'pipeline':1,
+                    'exposure':12
+                }
+            }
+        ))
         print("WebSocket opened")
 
     def on_message(self, message):
diff --git a/chameleon-client/package-lock.json b/chameleon-client/package-lock.json
index f6adf12f0..d34e56726 100644
--- a/chameleon-client/package-lock.json
+++ b/chameleon-client/package-lock.json
@@ -3490,7 +3490,8 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
       "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "coa": {
       "version": "2.0.2",
@@ -5848,11 +5849,13 @@
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -5869,6 +5872,7 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -6028,7 +6032,8 @@
         },
         "safe-buffer": {
           "version": "5.1.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -6120,7 +6125,8 @@
         },
         "yallist": {
           "version": "3.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         }
       }
     },
@@ -9666,7 +9672,8 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
       "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "rx-lite-aggregates": {
       "version": "4.0.8",
@@ -13605,7 +13612,8 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -13970,7 +13978,8 @@
             },
             "safe-buffer": {
               "version": "5.1.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -14018,6 +14027,7 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -14056,11 +14066,13 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.0.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             }
           }
         },
diff --git a/chameleon-client/src/App.vue b/chameleon-client/src/App.vue
index 521a3c772..1c4bc6c00 100644
--- a/chameleon-client/src/App.vue
+++ b/chameleon-client/src/App.vue
@@ -11,7 +11,7 @@
                             <span v-if="!isCollapsed">Vision</span>
                           </template>
                           <MenuItem name="/vision/input" to="/vision/input">Input</MenuItem>
-                          <MenuItem name="/vision/3d" to="/vision/3d">Threshold</MenuItem>
+                          <MenuItem name="/vision/threshold" to="/vision/threshold">Threshold</MenuItem>
                         </Submenu>
                         <Submenu name="/settings">
                           <template slot="title">
@@ -96,7 +96,7 @@
       }
     },
     created () {
-    // this.$options.sockets.onmessage = (data) => console.log(data.data); // console writes recived data
+    this.$options.sockets.onmessage = (data) => console.log(data.data); // console writes recived data
   }
   }
 
diff --git a/chameleon-client/src/components/ThresholdTab.vue b/chameleon-client/src/components/ThresholdTab.vue
index 238efd43c..9f308836f 100644
--- a/chameleon-client/src/components/ThresholdTab.vue
+++ b/chameleon-client/src/components/ThresholdTab.vue
@@ -1,20 +1,27 @@
 <template>
-    <div id="3D">
-        <Slider v-for="slider in sliders" v-bind:key="slider.id" v-model="slider.value"></Slider>
+    <div id="Threshold">
+        <chrange title="Hue" :value="[0,10]"></chrange>
+        <chrange title="Saturation" :value="[0,10]"></chrange>
+        <chrange title="Value" :value="[0,10]"></chrange>
     </div>
 </template>
     
 <script> 
+import chrange from './ch-range.vue'
+import chselect from './ch-select.vue'
     export default {
-        name: '3D',
+        name: 'Threshold',
         data () {
             return {
-                 sliders: [
-                    { id: 'lightning', value: 25 }
-                ]
             }
+        },
+        components:{
+            chrange,
+            chselect
         }
+
     }
+
 </script>
 
 <style scoped>
diff --git a/chameleon-client/src/components/ch-range.vue b/chameleon-client/src/components/ch-range.vue
new file mode 100644
index 000000000..82a1471de
--- /dev/null
+++ b/chameleon-client/src/components/ch-range.vue
@@ -0,0 +1,45 @@
+
+<template>
+            <row type="flex" justify="start" align="middle" :gutter="1" >
+                <Col>
+                    <h4 style="width:100%">{{title}}</h4>
+                </Col>
+                <col >
+                    <InputNumber  style="margin-left: 5px ;width:10%;"  v-model="value[0]" size="small"></InputNumber>
+                </col>
+                <Col span="14">
+                    <Slider range style="margin-left:10px;" v-model="value" @on-input="handleInput"></Slider>
+                </col>
+                <col >
+                    <InputNumber  style="margin-left: 5px ;width:10%;"  v-model="value[1]" size="small"></InputNumber>
+                </col>
+        </row>
+</template>
+
+<script>
+    export default {
+        name: 'ch-slider',
+        props:['title','value'],
+        data() {
+            return {
+                content:this.value
+            }
+        },
+        methods: {
+            handleInput() {
+                this.$emit('input',{[this.title]:this.value});
+            }
+        }
+    }
+</script>
+
+<style >
+h4 {
+     color: #e6ebf1;
+ }
+ /* .ivu-input-number-input{
+     background-color: #2c3e50 !important;
+     color: #fff !important;
+ } */
+</style>
+
diff --git a/chameleon-client/src/components/ch-select.vue b/chameleon-client/src/components/ch-select.vue
index bb87ed973..5d9dce042 100644
--- a/chameleon-client/src/components/ch-select.vue
+++ b/chameleon-client/src/components/ch-select.vue
@@ -36,11 +36,11 @@ h4 {
      color: #e6ebf1;
       text-align: left;
  }
- .ivu-select-selection{
+ /* .ivu-select-selection{
      background-color: #2c3e50 !important;
- }
- .ivu-select-selected-value{
+ } */
+ /* .ivu-select-selected-value{
      color: #fff !important;
- }
+ } */
 
 </style>
\ No newline at end of file
diff --git a/chameleon-client/src/components/ch-slider.vue b/chameleon-client/src/components/ch-slider.vue
index 747902da7..05e318019 100644
--- a/chameleon-client/src/components/ch-slider.vue
+++ b/chameleon-client/src/components/ch-slider.vue
@@ -32,13 +32,11 @@
 
 <style>
 h4 {
-    color: #e6ebf1;
-    text-align: left;
-}
-.ivu-input-number-input{
-    background-color: #2c3e50 !important;
-    color: #fff !important;
-}
-
+     color: #e6ebf1;
+ }
+ /* .ivu-input-number-input{
+     background-color: #2c3e50 !important;
+     color: #fff !important;
+ } */
 </style>
 
diff --git a/chameleon-client/src/main.js b/chameleon-client/src/main.js
index d45662fd7..d51ce89d9 100644
--- a/chameleon-client/src/main.js
+++ b/chameleon-client/src/main.js
@@ -4,10 +4,11 @@ import VueRouter from 'vue-router'
 import iView from 'iview';
 import router from "./routes";
 import '../theme/index.less';
-import VueNativeSock from 'vue-native-websocket'
+import VueNativeSock from 'vue-native-websocket';
+import locale from 'iview/dist/locale/en-US';
 
 Vue.use(VueRouter);
-Vue.use(iView);
+Vue.use(iView , { locale });
 Vue.use(VueNativeSock,'ws://'+location.hostname+':8888/websocket');
 Vue.config.productionTip = false
 
diff --git a/chameleon-client/src/routes.js b/chameleon-client/src/routes.js
index 243d2b002..9a927d4b0 100644
--- a/chameleon-client/src/routes.js
+++ b/chameleon-client/src/routes.js
@@ -7,7 +7,7 @@ import Camera from "./components/CameraTab.vue";
 const routes = [
   { path: '/', redirect: '/vision/input'},
   { path: '/vision/input', component: Input, name:'input' },
-  { path: '/vision/3d', component: Threshold ,name:'threshold'},
+  { path: '/vision/threshold', component: Threshold ,name:'threshold'},
   {path:'/settings/system', component: System },
   {path:'/settings/camera', component: Camera}
 ]