mirror of
https://github.com/PhotonVision/photonvision
synced 2026-06-25 01:41:40 +00:00
Added routing and templates folder
This commit is contained in:
@@ -14,8 +14,9 @@ class ChameleonApplication(tornado.web.Application):
|
||||
handlers = [(r"/", MainHandler),
|
||||
(r"/(.*)", tornado.web.StaticFileHandler, {'path': os.path.join(os.path.dirname(__file__), "../../Site")}),
|
||||
(r"/websocket", ChameleonWebSocket),
|
||||
(r"/CSS/(.*)", tornado.web.StaticFileHandler, {'path': os.path.join(os.path.dirname(__file__), "../../Site/CSS")}),
|
||||
(r"/JS/(.*)", tornado.web.StaticFileHandler, {'path': os.path.join(os.path.dirname(__file__), "../../Site/JS")}),
|
||||
(r"/css/(.*)", tornado.web.StaticFileHandler, {'path': os.path.join(os.path.dirname(__file__), "../../Site/css")}),
|
||||
(r"/js/(.*)", tornado.web.StaticFileHandler, {'path': os.path.join(os.path.dirname(__file__), "../../Site/js")}),
|
||||
(r"/templates/(.*)", tornado.web.StaticFileHandler, {'path': os.path.join(os.path.dirname(__file__), "../../Site/templates")}),
|
||||
(r"/assets/(.*)", tornado.web.StaticFileHandler, {'path': os.path.join(os.path.dirname(__file__), "../../Site/assets")})]
|
||||
|
||||
settings = dict(
|
||||
|
||||
@@ -8,18 +8,18 @@ body {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.nav > a {
|
||||
font-size: 1.8em;
|
||||
margin-left: 15px
|
||||
.nav a {
|
||||
font-size: 1.5em;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.nav > a, .sidenav > a {
|
||||
.nav a, .sidenav a {
|
||||
color: whitesmoke;
|
||||
font-family:Verdana;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav > a:hover, .sidenav > a:hover {
|
||||
.nav a:hover, .sidenav a:hover {
|
||||
color: #17a2b8;
|
||||
}
|
||||
|
||||
@@ -43,16 +43,6 @@ body {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.main {
|
||||
#main {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.main > div {
|
||||
margin: 50px;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
}
|
||||
@@ -4,28 +4,24 @@
|
||||
<meta charset="utf-8">
|
||||
<title>Chameleon Vision</title>
|
||||
<link rel="stylesheet" type="text/css" href="assets/icons/css/all.css">
|
||||
<link rel="stylesheet" type="text/css" href="CSS/iview.css" >
|
||||
<link rel="stylesheet" type="text/css" href="CSS/main.css" >
|
||||
<link rel="stylesheet" type="text/css" href="css/iview.css" >
|
||||
<link rel="stylesheet" type="text/css" href="css/main.css" >
|
||||
</head>
|
||||
<body>
|
||||
<div class="sidenav">
|
||||
<i class="fas fa-video fa-2x"></i>
|
||||
<i class="fas fa-cog fa-2x"></i>
|
||||
</div>
|
||||
<div class="main">
|
||||
<nav class="nav">
|
||||
<a class="nav-link active" href="#">Input</a>
|
||||
<a class="nav-link" href="#">Filter</a>
|
||||
<a class="nav-link" href="#">Thresholds</a>
|
||||
<a class="nav-link" href="#">3D</a>
|
||||
</nav>
|
||||
<div id="input-tab">
|
||||
<Slider v-for="slider in sliders" v-model="slider.value"></Slider>
|
||||
<div id="app">
|
||||
<div class="sidenav">
|
||||
<router-link to="/vision"><a><i class="fas fa-video fa-2x"></i></a></router-link>
|
||||
<router-link to="/settings"><a><i class="fas fa-cog fa-2x"></i></a></router-link>
|
||||
</div>
|
||||
<div id="main">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="JS/vue.js"></script>
|
||||
<script src="JS/iview.min.js"></script>
|
||||
<script src="JS/main.js"></script>
|
||||
<script src="js/vue.js"></script>
|
||||
<script src="js/vue-router.js"></script>
|
||||
<script src="js/iview.min.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
<script src="js/routes.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -14,14 +14,4 @@
|
||||
// }
|
||||
|
||||
// document.getElementById(index).style.display = "block";
|
||||
// }
|
||||
|
||||
let inputTab = new Vue({
|
||||
el: "#input-tab",
|
||||
data: {
|
||||
sliders: [
|
||||
{ value: 25 },
|
||||
{ value: 30 }
|
||||
]
|
||||
}
|
||||
})
|
||||
// }
|
||||
22
Site/JS/routes.js
Normal file
22
Site/JS/routes.js
Normal file
@@ -0,0 +1,22 @@
|
||||
// need to import templates from files
|
||||
const Vision = { template: '<div id="vision"><nav class="nav"><router-link to="/input"><a>Input</a></router-link></nav><router-view></router-view></div>' }
|
||||
const Input = { template: '<p>Input page</p>' }
|
||||
const Setting = { template: '<p>Settings page</p>' }
|
||||
|
||||
const routes = [
|
||||
{ path: '/', component: Vision , children: [
|
||||
{ path: 'input', component: Input }
|
||||
]},
|
||||
{ path: '/vision', component: Vision , children: [
|
||||
{ path: 'input', component: Input }
|
||||
]},
|
||||
{ path: '/settings', component: Setting }
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
routes
|
||||
})
|
||||
|
||||
const app = new Vue({
|
||||
router
|
||||
}).$mount('#app')
|
||||
2626
Site/JS/vue-router.js
Normal file
2626
Site/JS/vue-router.js
Normal file
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
21
Site/templates/input-tab.vue
Normal file
21
Site/templates/input-tab.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div id="input-tab">
|
||||
<Slider v-for="slider in sliders" v-bind:key="slider.id" v-model="slider.value"></Slider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el: "#input-tab",
|
||||
data: {
|
||||
sliders: [
|
||||
{ id: 'lightning', value: 25 },
|
||||
{ id: 'saturation', value: 30 }
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
8
Site/templates/settings.vue
Normal file
8
Site/templates/settings.vue
Normal file
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
14
Site/templates/vision.vue
Normal file
14
Site/templates/vision.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<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 {
|
||||
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user