added selction of threshold and normal images

chameleon-client/src/components/Vision.vue

@@ -16,6 +16,10 @@
                     <router-view></router-view>
                     </Col>
                     <Col span="12">
+                    <Tabs :animated="false"  v-model="isBinary" @on-click="handleImage">
+                    <TabPane label="Normal"></TabPane>    
+                    <TabPane label="Threshold"></TabPane>
+                    </Tabs>
                     <img :src="steamAdress" style="">
                     </Col>
                 </Col>
@@ -38,17 +42,29 @@
             }
         },
         methods: {
-            
+            handleImage() {
+                this.$socket.sendObj({"is_binary":this.isBinary});
+            }
         },
         computed: {
             steamAdress: {
                 get: function(){
                     return this.$store.state.streamAdress;
                 }
+            },
+            isBinary: {
+                get: function(){
+                    return this.$store.state.isBinaryImage;
+                },
+                set: function(value){
+                    this.$store.commit('isBinaryImage',value)
+                }
             }
         },
     }
 </script>
-<style scoped>
-
+<style>
+.ivu-tabs-nav .ivu-tabs-tab:hover{
+    color: #0cdfc3 !important;
+}
 </style>

chameleon-client/src/store.js

@@ -33,7 +33,8 @@ export const store = new Vuex.Store({
         gateWay:0,
         hostName:"",
         //live info
-        streamAdress:("http://"+location.hostname + ":1181/?stream")
+        streamAdress:("http://"+location.hostname + ":1181/?stream"),
+        isBinaryImage:0
 
     },
     mutations:{
@@ -59,7 +60,8 @@ export const store = new Vuex.Store({
         ip: set('ip'),
         gateWay : set('gateWay'),
         hostName : set('hostName'),
-        streamAdress : set('streamAdress')
+        streamAdress : set('streamAdress'),
+        isBinaryImage: set('isBinaryImage')
     },
     getters:{
         camera: state => state.camera,
@@ -81,7 +83,8 @@ export const store = new Vuex.Store({
         ip: state => state.ip,
         gateWay: state => state.gateWay,
         hostName: state => state.hostName,
-        streamAdress: state => state.streamAdress
+        streamAdress: state => state.streamAdress,
+        isBinaryImage: state => state.isBinaryImage
 
     },
 });