added auto save and save button

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

@@ -1,35 +1,47 @@
 <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>
-        <CVslider name="Speckle Rejection" :min="0" :max="100" v-model="value.speckle" @input="handleInput('speckle',value.speckle)"></CVslider>
-        <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>
+        <CVrangeSlider v-model="value.area" name="Area" :min="0" :max="100" :step="0.1"
+                       @input="handleData('area')"/>
+        <CVrangeSlider v-model="value.ratio" name="Ratio (W/H)" :min="0" :max="100" :step="0.1"
+                       @input="handleData('ratio')"/>
+        <CVrangeSlider v-model="value.extent" name="Extent" :min="0" :max="100"
+                       @input="handleData('extent')"/>
+        <CVslider name="Speckle Rejection" :min="0" :max="100" v-model="value.speckle"
+                  @input="handleData('speckle')"/>
+        <CVselect name="Target Group" :list="['Single','Dual']" v-model="value.targetGroup"
+                  @input="handleData('targetGroup')"/>
+        <CVselect name="Target Intersection" :list="['None','Up','Down','Left','Right']" :disabled="isDisabled"
+                  v-model="value.targetIntersection" @input="handleData('targetIntersection')"/>
 
     </div>
 </template>
 
 <script>
-import CVrangeSlider from '../../components/cv-range-slider'
-import CVselect from '../../components/cv-select'
-import CVslider from '../../components/cv-slider'
+    import CVrangeSlider from '../../components/cv-range-slider'
+    import CVselect from '../../components/cv-select'
+    import CVslider from '../../components/cv-slider'
+
     export default {
         name: 'Contours',
-        props:['value'],
-        components:{
+        props: ['value'],
+        components: {
             CVrangeSlider,
             CVselect,
             CVslider
         },
-
-        data() {
-            return {
+        methods: {
+            handleData(val) {
+                this.handleInput(val, this.value[val])
+                this.$emit('update')
             }
         },
-        computed:{
-            isDisabled(){
-                if(this.value.targetGroup === 0){
+
+        data() {
+            return {}
+        },
+        computed: {
+            isDisabled() {
+                if (this.value.targetGroup === 0) {
                     return true;
                 }
                 return false;
@@ -39,5 +51,5 @@ import CVslider from '../../components/cv-slider'
 </script>
 
 <style lang="" scoped>
-    
+
 </style>

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

@@ -1,34 +1,39 @@
 <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>
+        <CVslider name="Exposure" v-model="value.exposure" :min="0" :max="100" @input="handleData('exposure')"/>
+        <CVslider name="Brightness" v-model="value.brightness" :min="0" :max="100" @input="handleData('brightness')"/>
+        <CVselect name="Orientation" v-model="value.orientation" :list="['Normal','Inverted']"
+                  @input="handleData('orientation')"/>
     </div>
 </template>
 
 <script>
-import CVslider from '../../components/cv-slider'
-import CVselect from '../../components/cv-select'
+    import CVslider from '../../components/cv-slider'
+    import CVselect from '../../components/cv-select'
+
     export default {
         name: 'Input',
-        props:['value'],
-        components:{
+        props: ['value'],
+        components: {
             CVslider,
             CVselect,
         },
-        data() {
-            return {
-                t:0,
-                a:1
+        methods: {
+            handleData(val) {
+                this.handleInput(val, this.value[val])
+                this.$emit('update')
             }
         },
-        methods:{
-
+        data() {
+            return {
+                t: 0,
+                a: 1
+            }
         },
-        computed:{}
+        computed: {}
     }
 </script>
 
 <style scoped>
-    
+
 </style>

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

@@ -2,12 +2,12 @@
     <div>
         <CVselect name="SortMode" v-model="value.sortMode"
                   :list="['Largest','Smallest','Highest','Lowest','Rightmost','Leftmost','Closest']"
-                  @input="handleInput('sortMode',value.sortMode)"/>
+                  @input="handleData('sortMode')"/>
         <span>Calibrate:</span>
         <v-divider dark color="white"/>
         <CVselect name="Calibration Mode" v-model="value.calibrationMode" :list="['None','Single point','Dual point']"
-                  @input="handleInput('calibrationMode',value.calibrationMode)"/>
-        <component :raw-point="rawPoint" :is="selectedComponent"/>
+                  @input="handleData('calibrationMode')"/>
+        <component :raw-point="rawPoint" :is="selectedComponent" @update="doUpdate"/>
         <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>
@@ -16,19 +16,27 @@
 </template>
 
 <script>
-import CVselect from '../../components/cv-select'
-import DualCalibration from "../../components/OutputTab/DualCalibration";
-import SingleCalibration from "../../components/OutputTab/SingleCalibration";
+    import CVselect from '../../components/cv-select'
+    import DualCalibration from "../../components/OutputTab/DualCalibration";
+    import SingleCalibration from "../../components/OutputTab/SingleCalibration";
+
     export default {
         name: 'Output',
-        props:['value'],
-        components:{
+        props: ['value'],
+        components: {
             CVselect,
             SingleCalibration,
             DualCalibration,
 
         },
-        methods:{
+        methods: {
+            handleData(val) {
+                this.handleInput(val, this.value[val])
+                this.$emit('update')
+            },
+            doUpdate() {
+                this.$emit('update')
+            }
         },
 
         data() {
@@ -36,9 +44,9 @@ import SingleCalibration from "../../components/OutputTab/SingleCalibration";
                 snackbar: false,
             }
         },
-        computed:{
-            selectedComponent:{
-                get(){
+        computed: {
+            selectedComponent: {
+                get() {
                     switch (this.value.calibrationMode) {
                         case 0:
                             return "";
@@ -50,8 +58,8 @@ import SingleCalibration from "../../components/OutputTab/SingleCalibration";
                     return ""
                 }
             },
-            rawPoint:{
-                get(){
+            rawPoint: {
+                get() {
                     return this.$store.state.point.rawPoint;
                 }
             }

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

@@ -1,10 +1,11 @@
 <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>
+        <CVrangeSlider v-model="value.hue" name="Hue" :min="0" :max="180" @input="handleData('hue')"/>
+        <CVrangeSlider v-model="value.saturation" name="Saturation" :min="0" :max="255"
+                       @input="handleData('saturation')"/>
+        <CVrangeSlider v-model="value.value" name="Value" :min="0" :max="255" @input="handleData('value')"/>
+        <CVswitch v-model="value.erode" name="Erode" @input="handleData('erode')"/>
+        <CVswitch v-model="value.dilate" name="Dilate" @input="handleData('dilate')"/>
     </div>
 </template>
 
@@ -25,6 +26,10 @@ import CVswitch from '../../components/cv-switch'
         computed:{
         },
         methods:{
+            handleData(val){
+                this.handleInput(val,this.value[val])
+                this.$emit('update')
+            }
         }
     }
 </script>