Added basic routing

chameleon-client/src/App.vue

@@ -3,14 +3,14 @@
       <div class="layout">
         <Layout :style="{minHeight: '100vh'}">
             <Sider collapsible :collapsed-width="78" v-model="isCollapsed">
-                <Menu @on-open-change="onOpenChange" active-name="vision-input" :open-names="['vision']"  width="auto" :class="menuitemClasses">
+                <Menu @on-open-change="onOpenChange" active-name="vision-input" :open-names="['vision']" theme="dark"  width="auto" :class="menuitemClasses">
                     <Submenu name="vision">
                       <template slot="title">
                         <Icon type="ios-videocam"/>
                         <span v-if="!isCollapsed">Vision</span>
                       </template>
-                      <MenuItem name="vision-input">Input</MenuItem>
-                      <MenuItem name="vision-3D">3D</MenuItem>
+                      <MenuItem name="vision-input" to="/input">Input</MenuItem>
+                      <MenuItem name="vision-3D" to="3d">3D</MenuItem>
                     </Submenu>
                     <Submenu name="settings">
                       <template slot="title">
@@ -22,6 +22,17 @@
                     </Submenu>
                 </Menu>
             </Sider>
+            <Layout id="main-layout">
+                <Content id="main-content">
+                  <router-view></router-view>
+                </Content>
+            </Layout>
+            <Layout id="camera">
+                <Content>
+                  Camera 1
+                  <img src="./assets/logo.png">
+                </Content>
+            </Layout>
         </Layout>
     </div>
   </div>
@@ -61,7 +72,12 @@ export default {
   color: #2c3e50;
 }
 
-.layout-con{
+#camera, #main-layout {
+  background-color: #272e35;
+  padding: 100px 30px 30px 30px;
+}
+
+.layout{
     height: 100%;
     width: 100%;
 }

chameleon-client/src/components/3DTab.vue

@@ -0,0 +1,22 @@
+<template>
+    <div id="3D">
+        <Slider v-for="slider in sliders" v-bind:key="slider.id" v-model="slider.value"></Slider>
+    </div>
+</template>
+    
+<script> 
+    export default {
+        name: '3D',
+        data () {
+            return {
+                 sliders: [
+                    { id: 'lightning', value: 25 }
+                ]
+            }
+        }
+    }
+</script>
+
+<style scoped>
+ 
+</style>

chameleon-client/src/components/Settings.vue

@@ -1,8 +0,0 @@
-<template>
-</template>
-
-<script>
-    export default {
-
-    }
-</script>

chameleon-client/src/components/Vision.vue

@@ -1,14 +0,0 @@
-<template>
-    <div id="vision">
-        <nav class="nav">
-            <router-link to="/input"><a>Input</a></router-link>
-        </nav>
-        <router-view></router-view>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: 'Vision'
-    }
-</script>

chameleon-client/src/main.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import App from './App.vue'
 import VueRouter from 'vue-router'
 import iView from 'iview';
-//import 'iview/dist/styles/iview.css'
+import router from "./routes";
 import '../theme/index.less';
 
 Vue.use(VueRouter);
@@ -11,5 +11,6 @@ Vue.use(iView);
 Vue.config.productionTip = false
 
 new Vue({
+  router,
   render: h => h(App)
 }).$mount('#app')

chameleon-client/src/routes.js

@@ -0,0 +1,15 @@
+import VueRouter from "vue-router";
+import Input from "./components/InputTab.vue";
+import ThreeD from "./components/3DTab.vue";
+
+const routes = [
+  { path: '/', redirect: '/input' },
+  { path: '/input', component: Input },
+  { path: '/3d', component: ThreeD }
+]
+
+const router = new VueRouter({
+  routes // short for `routes: routes`
+})
+
+export default router;

chameleon-client/theme/index.less

@@ -1,4 +1,5 @@
 @import '../node_modules/iview/src/styles/index.less';
 
+
 @primary-color: #ff0000;
 @link-color : #ff0000;