removed old ui src and moved new one to its location and builded ui for distribution

chameleon-client/src/views/CameraViewes/ContoursTab.vue

@@ -0,0 +1,40 @@
+<template>
+    <div>
+        <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']" v-model="value.targetGroup" @input="handleInput('targetGroup',value.targetGroup)"></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>
+
+<script>
+import CVrangeSlider from '../../components/cv-range-slider'
+import CVselect from '../../components/cv-select'
+    export default {
+        name: 'Contours',
+        props:['value'],
+        components:{
+            CVrangeSlider,
+            CVselect
+        },
+
+        data() {
+            return {
+            }
+        },
+        computed:{
+            isDisabled(){
+                if(this.value.targetGroup === 0){
+                    return true;
+                }
+                return false;
+            }
+        },
+    }
+</script>
+
+<style lang="" scoped>
+    
+</style>

chameleon-client/src/views/CameraViewes/InputTab.vue

@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <CVslider name="Exposure" v-model="value.exposure" :min="0" :max="100" @input="handleInput('exposure',value.exposure)"></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 CVselect from '../../components/cv-select'
+    export default {
+        name: 'Input',
+        props:['value'],
+        components:{
+            CVslider,
+            CVselect,
+        },
+        data() {
+            return {
+                t:0,
+                a:1
+            }
+        },
+        methods:{
+
+        },
+        computed:{}
+    }
+</script>
+
+<style scoped>
+    
+</style>

chameleon-client/src/views/CameraViewes/OutputTab.vue

@@ -0,0 +1,84 @@
+<template>
+    <div>
+        <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"> 
+                <v-btn small color="#4baf62" @click="takePointA">Take Point A</v-btn>
+            </v-col>
+            <v-col style="margin-left:0px" :cols="3">
+                <v-btn small color="#4baf62" @click="takePointB">Take Point B</v-btn>
+            </v-col>
+            <v-col>
+                <v-btn small @click="clearSlope" color="yellow darken-3">Clear All Points</v-btn>
+            </v-col>
+            
+        </v-row>
+        <v-snackbar :timeout="3000" v-model="snackbar" top color="error">
+            <span style="color:#000">Points are too close</span>
+            <v-btn color="black" text @click="snackbar = false">Close</v-btn>
+        </v-snackbar>
+    </div>
+</template>
+
+<script>
+import CVselect from '../../components/cv-select'
+    export default {
+        name: 'Output',
+        props:['value'],
+        components:{
+            CVselect
+        },
+        methods:{
+            takePointA(){
+                this.pointA = this.rawPoint;
+                this.calcSlope();
+            },
+            takePointB(){
+                this.pointB = this.rawPoint;
+                this.calcSlope();
+            },
+            calcSlope(){
+                if(this.pointA !== undefined && this.pointB !== undefined){
+                    let m = (this.pointB[1] - this.pointA[1]) / (this.pointB[0] - this.pointA[0]);
+                    let b = this.pointA[1] - (m * this.pointA[0]);
+                    if(isNaN(m) === false && isNaN(b) === false){
+                        this.sendSlope(m,b,true);
+                    } else {
+                         this.snackbar = true;
+                    }
+                    this.pointA = undefined;
+                    this.pointB = undefined;
+                }
+            },
+            sendSlope(m,b,valid){
+                this.handleInput('m',m);
+                this.handleInput('b',b);
+                this.handleInput('isCalibrated',valid);
+            },
+            clearSlope(){
+                this.sendSlope(1,0,false);
+                this.pointA = undefined;
+                this.pointB = undefined;
+            }
+        },
+
+        data() {
+            return {
+                snackbar: false,
+                pointA: undefined,
+                pointB: undefined 
+            }
+        },
+        computed:{
+            rawPoint:{
+                get(){
+                    return this.$store.state.point.rawPoint;
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped>
+</style>

chameleon-client/src/views/CameraViewes/ThresholdTab.vue

@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <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>
+
+<script>
+import CVrangeSlider from '../../components/cv-range-slider'
+import CVswitch from '../../components/cv-switch'
+    export default {
+        name: 'Threshold',
+        props:['value'],
+        components:{
+            CVrangeSlider,
+            CVswitch
+        },
+        data() {
+            return {
+            }
+        },
+        computed:{
+        },
+        methods:{
+        }
+    }
+</script>
+
+<style lang="" scoped>
+    
+</style>