RickRongen/WallE
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: added vue router

Browse Source
This commit is contained in:
Rick Rongen
2020-10-29 22:46:30 +01:00
parent 2aebb5c869
commit 6ce268fc49
7 changed files with 134 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app.py
View File

@@ -52,20 +52,13 @@ class CameraListener:
sio.sleep(0.05)
@app.route('/')
def index():
@app.route('/', defaults={'path': ''})
@app.route('/<string:path>')
@app.route('/<path:path>') # does not seem to work
def index(path):
return send_file('client/dist/index.html')
@app.route('/imagestream.mjpg')
def image_stream():
# ps = redisdb.pubsub()
# cam = Camera()
# return Response(cam.mjpeg_stream(boundary.encode()),
# mimetype='multipart/x-mixed-replace; boundary=lkajflkasdjlkfaj')
return ""
@sio.on("camera")
def camera_message(directions):
# walle.set_eye_velocity(directions['angle'], directions['force'])

6
client/package.json
View File

@@ -5,18 +5,20 @@
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"buildw": "vue-cli-service build --watch",
"lint": "vue-cli-service lint"
"lint": "vue-cli-service lint",
"buildw": "vue-cli-service build --watch"
},
"dependencies": {
"core-js": "^3.6.4",
"nipplejs": "^0.8.5",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vue-socket.io": "^3.0.7"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.2.0",
"@vue/cli-plugin-eslint": "~4.2.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.2.0",
"@vue/eslint-config-airbnb": "^5.0.2",
"babel-eslint": "^10.0.3",

52
client/src/App.vue
View File

@@ -1,26 +1,19 @@
<template>
<div id="app">
<div class="toggle-button" @click="toggleFullScreen">
toggleFullScreen
<div id="nav">
<div class="nav-item toggle-button" @click="toggleFullScreen">
toggleFullScreen
</div> |
<router-link to="/">Camera</router-link>
</div>
<image-stream/>
<Nipple :position="'left'" @move="moveCamera"/>
<Nipple :position="'right'" @move="moveWalle"/>
<router-view/>
</div>
</template>
<script>
import ImageStream from './components/ImageStream.vue';
import Nipple from './components/Nipple.vue';
export default {
name: 'App',
mounted() {
},
data() {
return {
};
},
methods: {
toggleFullScreen() {
if (document.fullscreenElement) {
@@ -29,20 +22,6 @@ export default {
window.document.body.requestFullscreen();
}
},
moveCamera({ force, angle }) {
this.$socket.emit('camera', {
force, angle,
});
},
moveWalle({ force, angle }) {
this.$socket.emit('move', {
force, angle,
});
},
},
components: {
ImageStream,
Nipple,
},
};
</script>
@@ -53,13 +32,20 @@ export default {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
.toggle-button {
position: fixed;
top: 0;
left: 0;
background: #42b983;
color: white;
#nav {
padding: 30px;
a, div.nav-item {
display: inline;
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>

2
client/src/main.js
View File

@@ -1,6 +1,7 @@
import Vue from 'vue';
import VueSocketIO from 'vue-socket.io';
import App from './App.vue';
import router from './router';
Vue.use(new VueSocketIO({
debug: true,
@@ -13,5 +14,6 @@ Vue.use(new VueSocketIO({
Vue.config.productionTip = false;
new Vue({
router,
render: (h) => h(App),
}).$mount('#app');

29
client/src/router/index.js Normal file
View File

@@ -0,0 +1,29 @@
import Vue from 'vue';
import VueRouter from 'vue-router';
import Camera from '../views/Camera.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'Camera',
component: Camera,
},
// {
// 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'),
// },
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
});
export default router;

45
client/src/views/Camera.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<div>
<image-stream/>
<Nipple :position="'left'" @move="moveCamera"/>
<Nipple :position="'right'" @move="moveWalle"/>
</div>
</template>
<script>
import ImageStream from '../components/ImageStream.vue';
import Nipple from '../components/Nipple.vue';
export default {
name: 'Camera',
mounted() {
},
data() {
return {
};
},
methods: {
toggleFullScreen() {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
window.document.body.requestFullscreen();
}
},
moveCamera({ force, angle }) {
this.$socket.emit('camera', {
force, angle,
});
},
moveWalle({ force, angle }) {
this.$socket.emit('move', {
force, angle,
});
},
},
components: {
ImageStream,
Nipple,
},
};
</script>

32
client/yarn.lock
View File

@@ -991,6 +991,13 @@
dependencies:
"@vue/cli-shared-utils" "^4.2.2"
"@vue/cli-plugin-router@~4.5.0":
version "4.5.8"
resolved "https://registry.npm.taobao.org/@vue/cli-plugin-router/download/@vue/cli-plugin-router-4.5.8.tgz?cache=0&sync_timestamp=1603104127291&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcli-plugin-router%2Fdownload%2F%40vue%2Fcli-plugin-router-4.5.8.tgz#db70a69df4edc90690765f8c25749a68b20dd850"
integrity sha1-23CmnfTtyQaQdl+MJXSaaLIN2FA=
dependencies:
"@vue/cli-shared-utils" "^4.5.8"
"@vue/cli-plugin-vuex@^4.2.2":
version "4.2.2"
resolved "https://registry.npm.taobao.org/@vue/cli-plugin-vuex/download/@vue/cli-plugin-vuex-4.2.2.tgz?cache=0&sync_timestamp=1581074021158&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcli-plugin-vuex%2Fdownload%2F%40vue%2Fcli-plugin-vuex-4.2.2.tgz#f504b554e7edde945342e3c42cffad80ffa41933"
@@ -1073,6 +1080,24 @@
semver "^6.1.0"
strip-ansi "^6.0.0"
"@vue/cli-shared-utils@^4.5.8":
version "4.5.8"
resolved "https://registry.npm.taobao.org/@vue/cli-shared-utils/download/@vue/cli-shared-utils-4.5.8.tgz?cache=0&sync_timestamp=1603104132347&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcli-shared-utils%2Fdownload%2F%40vue%2Fcli-shared-utils-4.5.8.tgz#d454306aaa510e666a34b144afc81830fc23acc9"
integrity sha1-1FQwaqpRDmZqNLFEr8gYMPwjrMk=
dependencies:
"@hapi/joi" "^15.0.1"
chalk "^2.4.2"
execa "^1.0.0"
launch-editor "^2.2.1"
lru-cache "^5.1.1"
node-ipc "^9.1.1"
open "^6.3.0"
ora "^3.4.0"
read-pkg "^5.1.1"
request "^2.88.2"
semver "^6.1.0"
strip-ansi "^6.0.0"
"@vue/component-compiler-utils@^3.0.2", "@vue/component-compiler-utils@^3.1.0":
version "3.1.1"
resolved "https://registry.npm.taobao.org/@vue/component-compiler-utils/download/@vue/component-compiler-utils-3.1.1.tgz?cache=0&sync_timestamp=1578324373467&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcomponent-compiler-utils%2Fdownload%2F%40vue%2Fcomponent-compiler-utils-3.1.1.tgz#d4ef8f80292674044ad6211e336a302e4d2a6575"
@@ -7249,7 +7274,7 @@ request-promise-native@^1.0.8:
stealthy-require "^1.1.1"
tough-cookie "^2.3.3"
request@^2.87.0, request@^2.88.0:
request@^2.87.0, request@^2.88.0, request@^2.88.2:
version "2.88.2"
resolved "https://registry.npm.taobao.org/request/download/request-2.88.2.tgz?cache=0&sync_timestamp=1581439170162&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Frequest%2Fdownload%2Frequest-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
integrity sha1-1zyRhzHLWofaBH4gcjQUb2ZNErM=
@@ -8668,6 +8693,11 @@ vue-loader@^15.8.3:
vue-hot-reload-api "^2.3.0"
vue-style-loader "^4.1.0"
vue-router@^3.2.0:
version "3.4.8"
resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.4.8.tgz?cache=0&sync_timestamp=1603710690404&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.4.8.tgz#2c06261d35d8075893470352d42d70b6287b8194"
integrity sha1-LAYmHTXYB1iTRwNS1C1wtih7gZQ=
vue-socket.io@^3.0.7:
version "3.0.7"
resolved "https://registry.yarnpkg.com/vue-socket.io/-/vue-socket.io-3.0.7.tgz#fa6db12014243039f2d633d4458e461075d52dc8"