Team2890/PhotonVision
4
0
Fork 0
mirror of https://github.com/PhotonVision/photonvision synced 2026-06-29 02:21:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

new ui stacture

Browse Source
This commit is contained in:
ori agranat
2019-09-20 20:56:24 +03:00
parent 79a45f298f
commit abe01128d8
12 changed files with 7023 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
New client/chameleon-client/src/App.vue
View File

@@ -1,52 +1,49 @@
<template>
<v-app>
<v-app-bar app dark>
<img src="./assets/logo.png" class="imgClass">
<v-toolbar-title class="headline text-uppercase">
<span>Chameleon Vision</span>
</v-toolbar-title>
<v-spacer></v-spacer>
</v-app-bar>
<v-content>
<v-navigation-drawer
expand-on-hover
permanent
>
<v-list
nav
dense
>
<v-list-group
value="true"
prepend-icon="mdi-xbox-controller">
<template v-slot:activator>
<v-list-item-title> test</v-list-item-title>
</template>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-account</v-icon>
</v-list-item-icon>
<v-list-item-title>test sub</v-list-item-title>
<v-app>
<!-- <v-navigation-drawer app clipped dark width="200">
<v-list dense>
<v-list-item link to="Vision">
<v-list-item-action>
<v-icon>mdi-video</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Vision</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
<v-list-item link>
<v-list-item-icon>
<v-icon>mdi-account-multiple</v-icon>
</v-list-item-icon>
<v-list-item-title>Shared with me</v-list-item-title>
</v-list-item>
<v-list-item link>
<v-list-item-icon>
<v-icon>mdi-star</v-icon>
</v-list-item-icon>
<v-list-item-title>Starred</v-list-item-title>
<v-list-item link to="Settings">
<v-list-item-action>
<v-icon>mdi-settings</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Settings</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-navigation-drawer> -->
<v-app-bar app clipped-left dark>
<img class="imgClass" src="./assets/logo.png">
<v-toolbar-title id="title">Chameleon Vision</v-toolbar-title>
<div class="flex-grow-1"></div>
<v-toolbar-items>
<v-tabs dark height="64" slider-color="#4baf62">
<v-tab to="Vision">Vision</v-tab>
<v-tab to="Settings">Settings</v-tab>
</v-tabs>
</v-toolbar-items>
</v-app-bar>
<v-content>
<v-container fluid fill-height>
<v-layout>
<v-flex>
<router-view></router-view>
</v-flex>
</v-layout>
</v-container>
</v-content>
<v-footer app dark>
<span>&copy; 2019 Chameleon Vision Project</span>
</v-footer>
</v-app>
</template>
@@ -59,6 +56,7 @@ export default {
},
data: () => ({
drawer:null,
//
}),
};
@@ -66,7 +64,7 @@ export default {
<style>
html{
overflow-y: hidden;
overflow-y: hidden !important;
}
.imgClass{
@@ -75,5 +73,15 @@ export default {
vertical-align: middle;
padding-right: 5px;
}
.tabClass{
color: #4baf62;
}
.container{
background-color: #212121;
padding: 0!important;
}
#title{
color:#4baf62;
}
</style>

4
New client/chameleon-client/src/main.js
View File

@@ -3,9 +3,9 @@ import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify';
import VueNativeSock from 'vue-native-websocket';
Vue.config.productionTip = false
// Vue.use(VueNativeSock,'ws://' + location.hostname + ':8888/websocket',{format:'JSON'});
new Vue({
router,
store,

21
New client/chameleon-client/src/router.js
View File

@@ -1,7 +1,7 @@
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Camera from './views/Camera.vue'
import Settings from './views/Settings.vue'
Vue.use(Router)
export default new Router({
@@ -10,16 +10,17 @@ export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
redirect:'/Vision'
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
path: '/Vision',
name: 'Vision',
component: Camera
},
{
path: '/Settings',
name: 'Settings',
component: Settings
}
]
})

5
New client/chameleon-client/src/views/About.vue
View File

@@ -1,5 +0,0 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

43
New client/chameleon-client/src/views/Camera.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<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>
<div>
</div>
</v-col>
<v-col cols="6">
<img class="videoClass" src="https://pbs.twimg.com/profile_images/846659478120366082/K-kZVvT8_400x400.jpg">
</v-col>
</v-row>
</div>
</template>
<script>
export default {
name: '',
data() {
return {
}
}
}
</script>
<style scoped>
.colsClass{
padding: 0 !important;
}
.videoClass{
display: block;
margin-right: auto;
margin-left: auto;
}
</style>

12
New client/chameleon-client/src/views/Home.vue
View File

@@ -1,12 +0,0 @@
<template>
<h4>te</h4>
</template>
<script>
export default {
components: {
},
};
</script>

23
New client/chameleon-client/src/views/Settings.vue Normal file
View File

@@ -0,0 +1,23 @@
<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>
</div>
</template>
<script>
export default {
name: '',
data() {
return {
}
}
}
</script>
<style lang="" scoped>
</style>