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 {
                 

chameleon-client/src/store.js

@@ -19,7 +19,14 @@ export const store = new Vuex.Store({
         //threshold
         hue:[0,10],
         saturation:[0,10],
-        value:[0,10]
+        value:[0,10],
+        erode: false,
+        dilate: false,
+        //contours
+        area:[0,100],
+        ratio:[0,0],
+        extent:[0,100]
+
     },
     mutations:{
         camera (state,value){
@@ -33,7 +40,12 @@ export const store = new Vuex.Store({
         resolution: set('resolution'),
         hue: set('hue'),
         saturation: set('saturation'),
-        value: set('value')
+        value: set('value'),
+        erode: set('erode'),
+        dilate: set('dilate'),
+        area: set('area'),
+        ratio: set('ratio'),
+        extent: set('extent')
     },
     getters:{
         camera: state => state.camera,
@@ -45,5 +57,10 @@ export const store = new Vuex.Store({
         hue: state => state.hue,
         saturation: state => state.saturation,
         value: state => state.value,
+        erode: state => state.dilate,
+        dilate: state => state.dilate,
+        area: state =>state.area,
+        ratio: state =>state.ratio,
+        extent: state =>state.extent
     },
 });