From fffb981f9f28265935799da60f036962f8e3c64f Mon Sep 17 00:00:00 2001
From: ori agranat <oriagranat9@gmail.com>
Date: Sun, 24 Mar 2019 22:11:29 +0200
Subject: [PATCH] fixed align in range and added contours tab

---
 chameleon-client/src/App.vue                  |  2 +-
 .../src/components/ThresholdTab.vue           | 10 ++++---
 chameleon-client/src/components/ch-range.vue  | 28 +++++++++----------
 .../src/components/contourTab.vue             | 21 ++++++++++++++
 chameleon-client/src/routes.js                |  4 ++-
 5 files changed, 45 insertions(+), 20 deletions(-)
 create mode 100644 chameleon-client/src/components/contourTab.vue

diff --git a/chameleon-client/src/App.vue b/chameleon-client/src/App.vue
index 1c4bc6c00..3604a5e64 100644
--- a/chameleon-client/src/App.vue
+++ b/chameleon-client/src/App.vue
@@ -12,6 +12,7 @@
                           </template>
                           <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>
                         </Submenu>
                         <Submenu name="/settings">
                           <template slot="title">
@@ -39,7 +40,6 @@
                         <Col span="12">
                         <router-view></router-view>
                         </Col>
-                        <Colspan="12">
                           <img src="./assets/logo.png">
                       </Col>
                       </row>
diff --git a/chameleon-client/src/components/ThresholdTab.vue b/chameleon-client/src/components/ThresholdTab.vue
index 9f308836f..a659af80a 100644
--- a/chameleon-client/src/components/ThresholdTab.vue
+++ b/chameleon-client/src/components/ThresholdTab.vue
@@ -1,8 +1,8 @@
 <template>
     <div id="Threshold">
-        <chrange title="Hue" :value="[0,10]"></chrange>
-        <chrange title="Saturation" :value="[0,10]"></chrange>
-        <chrange title="Value" :value="[0,10]"></chrange>
+        <chrange class="spacing" title="Hue" :value="[0,10]"></chrange>
+        <chrange class="spacing" title="Saturation" :value="[0,10]"></chrange>
+        <chrange class="spacing" title="Value" :value="[0,10]"></chrange>
     </div>
 </template>
     
@@ -25,5 +25,7 @@ import chselect from './ch-select.vue'
 </script>
 
 <style scoped>
- 
+.spacing{
+    margin-top: 20px;
+}
 </style>
\ No newline at end of file
diff --git a/chameleon-client/src/components/ch-range.vue b/chameleon-client/src/components/ch-range.vue
index 82a1471de..a3938ffdb 100644
--- a/chameleon-client/src/components/ch-range.vue
+++ b/chameleon-client/src/components/ch-range.vue
@@ -1,18 +1,18 @@
 
 <template>
-            <row type="flex" justify="start" align="middle" :gutter="1" >
-                <Col>
-                    <h4 style="width:100%">{{title}}</h4>
-                </Col>
-                <col >
-                    <InputNumber  style="margin-left: 5px ;width:10%;"  v-model="value[0]" size="small"></InputNumber>
-                </col>
-                <Col span="14">
-                    <Slider range style="margin-left:10px;" v-model="value" @on-input="handleInput"></Slider>
-                </col>
-                <col >
-                    <InputNumber  style="margin-left: 5px ;width:10%;"  v-model="value[1]" size="small"></InputNumber>
-                </col>
+        <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">
+                <InputNumber style="align-self: flex-start;" v-model="value[0]" size="small"></InputNumber>
+            </Col>
+            <Col span="10">
+                <Slider range v-model="value" @on-input="handleInput"></Slider>
+            </Col>
+            <Col span="4" style="text-align: right">
+                <InputNumber style="align-self: flex-end;" v-model="value[1]" size="small"></InputNumber>
+            </Col>
         </row>
 </template>
 
@@ -33,7 +33,7 @@
     }
 </script>
 
-<style >
+<style>
 h4 {
      color: #e6ebf1;
  }
diff --git a/chameleon-client/src/components/contourTab.vue b/chameleon-client/src/components/contourTab.vue
new file mode 100644
index 000000000..bd679f120
--- /dev/null
+++ b/chameleon-client/src/components/contourTab.vue
@@ -0,0 +1,21 @@
+<template>
+    
+</template>
+
+<script>
+    export default {
+        name: '',
+        data() {
+            return {
+                
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+.spacing{
+    margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/chameleon-client/src/routes.js b/chameleon-client/src/routes.js
index 9a927d4b0..6ec209569 100644
--- a/chameleon-client/src/routes.js
+++ b/chameleon-client/src/routes.js
@@ -3,13 +3,15 @@ import Input from "./components/InputTab.vue";
 import Threshold from "./components/ThresholdTab.vue";
 import System from "./components/SystemTab.vue";
 import Camera from "./components/CameraTab.vue";
+import Contours from "./components/contourTab.vue";
 
 const routes = [
   { path: '/', redirect: '/vision/input'},
   { path: '/vision/input', component: Input, name:'input' },
   { path: '/vision/threshold', component: Threshold ,name:'threshold'},
   {path:'/settings/system', component: System },
-  {path:'/settings/camera', component: Camera}
+  {path:'/settings/camera', component: Camera},
+  {path:'/settings/contours', component: Contours}
 ]
 
 const router = new VueRouter({