added contour tab and more filters to threshold

chameleon-client/src/components/ThresholdTab.vue

@@ -3,12 +3,15 @@
         <chrange class="spacing" title="Hue" Xkey="hue"></chrange>
         <chrange class="spacing" title="Saturation" Xkey="saturation"></chrange>
         <chrange class="spacing" title="Value" Xkey="value"></chrange>
+        <chswitch class="spacing" title="Erode" Xkey="erode"></chswitch>
+        <chswitch class="spacing" title="Dilate" Xkey="dilate"></chswitch>
     </div>
 </template>
     
 <script> 
 import chrange from './ch-range.vue'
 import chselect from './ch-select.vue'
+import chswitch from './ch-switch.vue'
     export default {
         name: 'Threshold',
         data () {
@@ -17,7 +20,8 @@ import chselect from './ch-select.vue'
         },
         components:{
             chrange,
-            chselect
+            chselect,
+            chswitch
         },
         methods:{
         }

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

@@ -0,0 +1,44 @@
+<template>
+    <Row type="flex" justify="start" align="middle" :gutter="1" >
+        <Col span="4">
+            <h4>{{title.charAt(0).toUpperCase() + title.slice(1)}} :</h4>
+        </Col>
+        <Col span="4" style="text-align: left">
+        <i-switch v-model="value" @on-change="handleInput" style="align-self: flex-start"></i-switch>
+       </Col>
+    </Row>
+</template>
+
+<script>
+    export default {
+        name: 'ch-switch',
+        props:{
+            title: String,
+            Xkey: String
+        },
+        methods:{
+            handleInput() {
+                this.$socket.sendObj({[this.Xkey]:this.value});
+            }
+        },
+        computed:{
+            value:{
+                get: function(){
+                    return this.$store.state[this.Xkey];
+                },
+                set: function(value){
+                    this.$store.commit(this.Xkey,value);
+                }
+            }
+        },
+        data() {
+            return {
+                
+            }
+        }
+    }
+</script>
+
+<style lang="" scoped>
+    
+</style>

chameleon-client/src/components/contourTab.vue

@@ -1,10 +1,26 @@
 <template>
-    
+    <div id="ContourTab">
+     <chrange class="spacing" title="Area" Xkey="area"></chrange>
+     <chrange class="spacing" title="Ratio (W/H)" Xkey="ratio"></chrange>
+     <chrange class="spacing" title="Extent" Xkey="extent"></chrange>
+     </div>
 </template>
 
 <script>
+import chslider from './ch-slider.vue'
+import chselect from './ch-select.vue'
+import chrange from './ch-range.vue'
+
     export default {
-        name: '',
+        name: 'ContourTab',
+        components:{
+            chslider,
+            chselect,
+            chrange
+        },
+        methods:{
+
+        },
         data() {
             return {