initial work on new vision loop

chameleon-client/src/App.vue

@@ -13,6 +13,7 @@
                           <MenuItem name="/vision/input" to="/vision/input">Input</MenuItem>
                           <MenuItem name="/vision/threshold" to="/vision/threshold">Threshold</MenuItem>
                           <MenuItem name="/vision/contours" to="/vision/contours">Contours</MenuItem>
+                          <MenuItem name="/vision/output" to="/vision/output">Output</MenuItem>
                         </Submenu>
                         <Submenu name="/settings">
                           <template slot="title">

chameleon-client/src/components/contourTab.vue

@@ -1,8 +1,14 @@
 <template>
     <div id="ContourTab">
+     <chselect class="spacing" title="Sort Mode" Xkey="sort_mode" 
+        :list="['Largest','Smallest','Highest','Lowest','Rightmost','Leftmost','Closest']"></chselect>
      <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>
+     <chselect class="spacing" title="Target Group" Xkey="target_group" 
+        :list="['Single','Dual','Triple','Quadruple','Quintuple']"></chselect>
+    <chselect class="spacing" title="Target Intersaction" Xkey="target_intersection" 
+        :list="['Up','Down','Left','Right','Parallel']"></chselect>
      </div>
 </template>
 

chameleon-client/src/components/outputTab.vue

@@ -0,0 +1,37 @@
+<template>
+    <div id="OutputTab">
+     <chselect class="spacing" title="Target region" Xkey="target_region" 
+        :list="['Upmost','Rightmost','Downmost','Leftmost','Centermost']"></chselect>
+        
+     </div>
+</template>
+
+<script>
+import chslider from './ch-slider.vue'
+import chselect from './ch-select.vue'
+import chrange from './ch-range.vue'
+
+    export default {
+        name: 'OutputTab',
+        components:{
+            chslider,
+            chselect,
+            chrange
+        },
+        methods:{
+
+        },
+        data() {
+            return {
+                
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+.spacing{
+    margin-top: 20px;
+}
+</style>

chameleon-client/src/routes.js

@@ -6,13 +6,15 @@ import Threshold from "./components/ThresholdTab.vue";
 import System from "./components/SystemTab.vue";
 import Camera from "./components/CameraTab.vue";
 import Contours from "./components/contourTab.vue";
+import Output from './components/outputTab.vue'
 
 const routes = [
   { path: '/', redirect: '/vision/input'},
   { path: '/vision', component: Vision, children: [
     { path: 'input', component: Input },
     { path: 'threshold', component: Threshold },
-    { path: 'contours', component: Contours }
+    { path: 'contours', component: Contours },
+    { path: 'output', component: Output },
   ]},
   { path: '/settings', component: Setting, children: [
     { path: 'system', component: System },

chameleon-client/src/store.js

@@ -29,6 +29,9 @@ export const store = new Vuex.Store({
         area:[0,100],
         ratio:[0,1],
         extent:[0,100],
+        sort_mode:'Largest', //
+        target_group:'Single', //
+        target_intersection:'Up', //
         //Settings
         teamValue:0,
         connectionType:"DHCP",
@@ -67,7 +70,10 @@ export const store = new Vuex.Store({
         streamAdress : set('streamAdress'),
         isBinaryImage: set('isBinaryImage'),
         cameraList : set('cameraList'),
-        pipelineList: set('piplineList')
+        pipelineList: set('piplineList'),
+        sort_mode: set('sort_mode'),
+        target_group:set('target_group'),
+        target_intersection:set('target_intersection')
     },
     getters:{
         camera: state => state.camera,
@@ -92,7 +98,11 @@ export const store = new Vuex.Store({
         streamAdress: state => state.streamAdress,
         isBinaryImage: state => state.isBinaryImage,
         cameraList: state => state.cameraList,
-        pipelineList: state => state.pipelineList
+        pipelineList: state => state.pipelineList,
+        sort_mode: state => state.sort_mode,
+        target_group: state => state.target_group,
+        target_intersection: state => state.target_intersection
+
 
     },
 });