added views and point data text

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

@@ -2,29 +2,50 @@
     <div>
         <v-row >
             <v-col cols="6" class="colsClass">
-                <v-tabs fixed-tabs background-color="#212121" dark height="50" slider-color="#4baf62">
-                    <v-tab to="">Input</v-tab>
-                    <v-tab to="">Threshold</v-tab>
-                    <v-tab to="">Contours</v-tab>
-                    <v-tab to="">Output</v-tab>
+                <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-tabs>
                 <div>
-                    
+                    <component :is="selectedComponent"></component>
                 </div>
             </v-col>
             <v-col cols="6">
-                <img class="videoClass" src="https://pbs.twimg.com/profile_images/846659478120366082/K-kZVvT8_400x400.jpg">
+                <div>
+                    <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>
             </v-col>
       </v-row>
     </div>
 </template>
 
 <script>
+import InputTab from './CameraViewes/InputTab'
     export default {
-        name: '',
+        name: 'CameraTab',
+        components:{
+            InputTab
+        },
         data() {
             return {
-                
+                selectedTab:0,
+            }
+        },
+        computed:{
+            selectedComponent(){
+                switch(this.selectedTab){
+                    case 0:
+                        return "InputTab";
+                    case 1:
+                        return "ThresholdTab";
+                    case 2:
+                        return "ContoursTab";
+                    case 3:
+                        return "OutputTab";
+                }
             }
         }
     }
@@ -40,4 +61,9 @@
         margin-right: auto;
         margin-left: auto;
     }
+    #Point{
+        padding-top: 5px;
+        text-align: center;
+        color: #f4f4f4;
+    }
 </style>

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

@@ -0,0 +1,18 @@
+<template>
+    
+</template>
+
+<script>
+    export default {
+        name: '',
+        data() {
+            return {
+                
+            }
+        }
+    }
+</script>
+
+<style lang="" scoped>
+    
+</style>

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

@@ -0,0 +1,18 @@
+<template>
+    <span>aaaaaaaaaaad</span>
+</template>
+
+<script>
+    export default {
+        name: 'Input',
+        data() {
+            return {
+                
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    
+</style>

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

@@ -0,0 +1,18 @@
+<template>
+    
+</template>
+
+<script>
+    export default {
+        name: '',
+        data() {
+            return {
+                
+            }
+        }
+    }
+</script>
+
+<style lang="" scoped>
+    
+</style>

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

@@ -0,0 +1,18 @@
+<template>
+    
+</template>
+
+<script>
+    export default {
+        name: '',
+        data() {
+            return {
+                
+            }
+        }
+    }
+</script>
+
+<style lang="" scoped>
+    
+</style>

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

@@ -1,15 +1,19 @@
 <template>
     <div>
-        <v-tabs background-color="#212121" dark height="50" slider-color="#4baf62">
-            <v-tab to="">General</v-tab>
-            <v-tab to="">Cameras</v-tab>
-        </v-tabs>
+        <v-row >
+            <v-col cols="6" class="colsClass">
+                <v-tabs background-color="#212121" dark height="50" fixed-tabs slider-color="#4baf62">
+                    <v-tab to="">General</v-tab>
+                    <v-tab to="">Cameras</v-tab>
+                </v-tabs>
+            </v-col>
+      </v-row>
     </div>
 </template>
 
 <script>
     export default {
-        name: '',
+        name: 'SettingsTab',
         data() {
             return {