added data flow

New client/chameleon-client/src/App.vue

@@ -20,19 +20,13 @@
         </v-layout>
       </v-container>
     </v-content>
-    <v-footer app dark>
-      <span>&copy; 2019 Chameleon Vision</span>
-    </v-footer>
   </v-app>
 </template>
 
 <script>
-
-
 export default {
   name: 'App',
   components: {
-    
   },
   data: () => ({
   }),

New client/chameleon-client/src/plugins/vuetify.js

@@ -1,12 +1,13 @@
 
 import '@mdi/font/css/materialdesignicons.css';
+import 'material-design-icons-iconfont/dist/material-design-icons.css'
 import Vue from 'vue';
 import Vuetify from 'vuetify/lib';
 Vue.use(Vuetify);
 
 export default new Vuetify({
   icons: {
-    iconfont: 'mdi',
+    
 }
   
 });

New client/chameleon-client/src/views/Camera.vue

@@ -1,20 +1,39 @@
 <template>
     <div>
-        <v-row >
+        <div>
+            <v-row align="center">
+                <v-col :cols="3" class="colsClass">
+                    <div style="padding-left:30px">
+                        <CVselect name="Camera" :list="[1,2,3]"></CVselect>
+                    </div>
+                </v-col>
+                <v-col :cols="3" class="colsClass">
+                    <CVselect name="Pipeline" :list="[1,2,3]"></CVselect>
+                </v-col>
+                 <v-col :cols="2" class="colsClass">
+                     <v-icon color="white" @click="test">add</v-icon>
+                     <v-icon color="red darken-2" @click="test">delete</v-icon>
+                </v-col>
+            </v-row>
+        </div>
+        <v-row>
             <v-col cols="6" class="colsClass">
                 <v-tabs fixed-tabs background-color="#212121" dark height="50" slider-color="#4baf62" v-model="selectedTab">
                     <v-tab>Input</v-tab>
                     <v-tab>Threshold</v-tab>
                     <v-tab>Contours</v-tab>
                     <v-tab>Output</v-tab>
-                    <!-- <v-tab>3D</v-tab> -->
                 </v-tabs>
                 <div style="padding-left:30px">
-                    <component :is="selectedComponent"></component>
+                    <component v-model="pipeline" :is="selectedComponent"></component>
                 </div>
             </v-col>
-            <v-col cols="6">
+            <v-col cols="6" class="colsClass">
                 <div>
+                    <v-tabs background-color="#212121" dark height="50" slider-color="#4baf62" centered style="padding-bottom:10px">
+                        <v-tab>Normal</v-tab>
+                        <v-tab>Threshold</v-tab>
+                    </v-tabs>
                     <img class="videoClass" src="https://pbs.twimg.com/profile_images/846659478120366082/K-kZVvT8_400x400.jpg">
                     <h5 id="Point">Yaw: 222 Pitch: 111 FPS: 15</h5>
                 </div>
@@ -28,17 +47,40 @@ import InputTab from './CameraViewes/InputTab'
 import ThresholdTab from './CameraViewes/ThresholdTab'
 import ContoursTab from './CameraViewes/ContoursTab'
 import OutputTab from './CameraViewes/OutputTab'
+import CVselect from '../components/cv-select'
     export default {
         name: 'CameraTab',
         components:{
             InputTab,
             ThresholdTab,
             ContoursTab,
-            OutputTab
+            OutputTab,
+            CVselect
+        },
+        methods:{
+            test(){
+
+            }
         },
         data() {
             return {
                 selectedTab:0,
+                pipeline:{
+                    Exposure:0,
+                    Brightness:0,
+                    Orientation:0,
+                    Hue:[0,15],
+                    Saturation:[0,15],
+                    Value:[0,25],
+                    Erode:false,
+                    Dilate:false,
+                    Area:[0,12],
+                    Ratio:[0,12],
+                    Extent:[0,12],
+                    TargetGrouping:0,
+                    TargetIntersection:0,
+                    SortMode:0
+                }
             }
         },
         computed:{

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

@@ -1,10 +1,10 @@
 <template>
     <div>
-        <CVrangeSlider v-model="t" name="Area" :min="0" :max="100"></CVrangeSlider>
-        <CVrangeSlider v-model="t" name="Ratio (W/H)" :min="0" :max="100" :step="0.1"></CVrangeSlider>
-        <CVrangeSlider v-model="t" name="Ratio Extent" :min="0" :max="100"></CVrangeSlider>
-        <CVselect name="Target Group" :list="['Single','Dual','Triple','Quadruple','Quintuple']"></CVselect>
-        <CVselect name="Target Intersaction" :list="['None','Up','Down','Left','Right']" :disabled="isDisabled"></CVselect>
+        <CVrangeSlider v-model="value.Area" name="Area" :min="0" :max="100"></CVrangeSlider>
+        <CVrangeSlider v-model="value.Ratio" name="Ratio (W/H)" :min="0" :max="100" :step="0.1"></CVrangeSlider>
+        <CVrangeSlider v-model="value.Extent" name="Extent" :min="0" :max="100"></CVrangeSlider>
+        <CVselect name="Target Group" :list="['Single','Dual','Triple','Quadruple','Quintuple']" v-model="value.TargetGrouping"></CVselect>
+        <CVselect name="Target Intersection" :list="['None','Up','Down','Left','Right']" :disabled="isDisabled" v-model="value.TargetIntersection"></CVselect>
 
     </div>
 </template>
@@ -14,18 +14,21 @@ import CVrangeSlider from '../../components/cv-range-slider'
 import CVselect from '../../components/cv-select'
     export default {
         name: 'Contours',
+        props:['value'],
         components:{
             CVrangeSlider,
             CVselect
         },
         data() {
             return {
-                t:[0,25]
             }
         },
         computed:{
             isDisabled(){
-                return false
+                if(this.value.TargetGrouping === 0){
+                    return true;
+                }
+                return false;
             }
         }
     }

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

@@ -1,8 +1,8 @@
 <template>
     <div>
-        <CVslider name="Exposure" v-model="t" :min="0" :max="100"></CVslider>
-        <CVslider name="Brightness" v-model="t" :min="0" :max="100"></CVslider>
-        <CVselect name="Orientation" v-model="a" :list="['Normal','Inverted']"></CVselect>
+        <CVslider name="Exposure" v-model="value.Exposure" :min="0" :max="100"></CVslider>
+        <CVslider name="Brightness" v-model="value.Brightness" :min="0" :max="100"></CVslider>
+        <CVselect name="Orientation" v-model="value.Orientation" :list="['Normal','Inverted']"></CVselect>
     </div>
 </template>
 
@@ -13,6 +13,7 @@ import CVselect from '../../components/cv-select'
 import CVswitch from '../../components/cv-switch'
     export default {
         name: 'Input',
+        props:['value'],
         components:{
             CVslider,
             rangeSlider,
@@ -26,7 +27,8 @@ import CVswitch from '../../components/cv-switch'
             }
         },
         methods:{
-        }
+        },
+        computed:{}
     }
 </script>
 

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

@@ -1,10 +1,30 @@
 <template>
-    
+    <div>
+        <CVselect name="SortMode" v-model="value.SortMode" :list="['Largest','Smallest','Highest','Lowest','Rightmost','Leftmost','Closest']"></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">Take Point A</v-btn>
+            </v-col>
+            <v-col style="margin-left:0px" :cols="3">
+                <v-btn small color="#4baf62">Take Point B</v-btn>
+            </v-col>
+            <v-col>
+                <v-btn small color="yellow darken-3">Clear All Points</v-btn>
+            </v-col>
+            
+        </v-row>
+    </div>
 </template>
 
 <script>
+import CVselect from '../../components/cv-select'
     export default {
-        name: '',
+        name: 'Output',
+        props:['value'],
+        components:{
+            CVselect
+        },
         data() {
             return {
                 
@@ -13,6 +33,5 @@
     }
 </script>
 
-<style lang="" scoped>
-    
+<style scoped>
 </style>

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

@@ -1,10 +1,10 @@
 <template>
     <div>
-        <CVrangeSlider v-model="t" name="Hue" :min="0" :max="180"></CVrangeSlider>
-        <CVrangeSlider v-model="t" name="Saturation" :min="0" :max="255"></CVrangeSlider>
-        <CVrangeSlider v-model="t" name="Value" :min="0" :max="255"></CVrangeSlider>
-        <CVswitch name="Erode"></CVswitch>
-        <CVswitch name="Dilate"></CVswitch>
+        <CVrangeSlider v-model="value.Hue" name="Hue" :min="0" :max="180"></CVrangeSlider>
+        <CVrangeSlider v-model="value.Saturation" name="Saturation" :min="0" :max="255"></CVrangeSlider>
+        <CVrangeSlider v-model="value.Value" name="Value" :min="0" :max="255"></CVrangeSlider>
+        <CVswitch v-model="value.Erode" name="Erode"></CVswitch>
+        <CVswitch v-model="value.Dilate" name="Dilate"></CVswitch>
     </div>
 </template>
 
@@ -13,14 +13,16 @@ import CVrangeSlider from '../../components/cv-range-slider'
 import CVswitch from '../../components/cv-switch'
     export default {
         name: 'Threshold',
+        props:['value'],
         components:{
             CVrangeSlider,
             CVswitch
         },
         data() {
             return {
-                t:[0,5]
             }
+        },
+        computed:{
         }
     }
 </script>