feature: allows flipping the webcam horizontally and vertically
This commit is contained in:
Craig Bassett
parent
5caaf20ee1
commit
b0b25839ca
12
.gitignore
vendored
Normal file
12
.gitignore
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
node_modules
|
||||
.DS_Store
|
||||
design
|
||||
*.log
|
||||
packages/test
|
||||
dist
|
||||
temp
|
||||
.vuerc
|
||||
.version
|
||||
.versions
|
||||
.changelog
|
||||
package-lock.json
|
||||
@ -1,7 +1,5 @@
|
||||
<style>
|
||||
.webcamImage {
|
||||
width: 100%;
|
||||
}
|
||||
.content { overflow: hidden; }
|
||||
</style>
|
||||
|
||||
<template>
|
||||
@ -13,18 +11,27 @@
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<v-card-text class="px-0 pb-0 pt-3 content">
|
||||
<v-card-text class="px-0 pt-3 content">
|
||||
<v-row>
|
||||
<v-col class="px-10 py-0">
|
||||
<v-text-field
|
||||
v-model="webcamUrl"
|
||||
hide-details
|
||||
label="Webcam URL"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col class="px-10 py-0">
|
||||
<v-switch v-model="boolNavi" label="Show in Navigation"></v-switch>
|
||||
|
||||
<v-row v-if="rotationEnabled">
|
||||
<v-col sm="auto">
|
||||
<v-switch v-model="rotate" hide-details label="Rotate"></v-switch>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-select :items="[{ text: '90 degrees', value: 90 }, { text: '270 degrees', value: 270 }]" v-model="rotateDegrees" hide-details></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-switch v-model="flipX" hide-details label="Flip webcam horizontally"></v-switch>
|
||||
<v-switch v-model="flipY" hide-details label="Flip webcam vertically"></v-switch>
|
||||
<v-switch v-model="boolNavi" hide-details label="Show in navigation"></v-switch>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
@ -38,24 +45,56 @@
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
|
||||
rotationEnabled: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
webcamUrl: {
|
||||
get() {
|
||||
return this.$store.state.webcam.url;
|
||||
return this.$store.state.gui.webcam.url;
|
||||
},
|
||||
set(newWebcamUrl) {
|
||||
return this.$store.dispatch('setSettings', { webcam: { url: newWebcamUrl } });
|
||||
set(url) {
|
||||
return this.$store.dispatch('setSettings', { gui: { webcam: { url } } });
|
||||
}
|
||||
},
|
||||
flipX: {
|
||||
get() {
|
||||
return this.$store.state.gui.webcam.flipX;
|
||||
},
|
||||
set(flipX) {
|
||||
return this.$store.dispatch('setSettings', { gui: { webcam: { flipX } } });
|
||||
}
|
||||
},
|
||||
flipY: {
|
||||
get() {
|
||||
return this.$store.state.gui.webcam.flipY;
|
||||
},
|
||||
set(flipY) {
|
||||
return this.$store.dispatch('setSettings', { gui: { webcam: { flipY } } });
|
||||
}
|
||||
},
|
||||
rotate: {
|
||||
get() {
|
||||
return this.$store.state.gui.webcam.rotate;
|
||||
},
|
||||
set(rotate) {
|
||||
return this.$store.dispatch('setSettings', { gui: { webcam: { rotate } } });
|
||||
}
|
||||
},
|
||||
rotateDegrees: {
|
||||
get() {
|
||||
return this.$store.state.gui.webcam.rotateDegrees;
|
||||
},
|
||||
set(rotateDegrees) {
|
||||
return this.$store.dispatch('setSettings', { gui: { webcam: { rotateDegrees } } });
|
||||
}
|
||||
},
|
||||
boolNavi: {
|
||||
get() {
|
||||
return this.$store.state.gui.webcam.bool;
|
||||
},
|
||||
set(bool) {
|
||||
return this.$store.dispatch('setSettings', { gui: { webcam: { bool: bool } } });
|
||||
set(showNav) {
|
||||
return this.$store.dispatch('setSettings', { gui: { webcam: { bool: showNav } } });
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
</v-list-item>
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<v-card-text class="px-0 py-0 content">
|
||||
<img :src="webcamUrl" class="webcamImage" />
|
||||
<img :src="webcamConfig.url" class="webcamImage" :style="webcamStyle" />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
@ -25,19 +25,29 @@
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
webcamUrl: state => state.webcam.url,
|
||||
})
|
||||
'webcamConfig': state => state.gui.webcam
|
||||
}),
|
||||
webcamStyle() {
|
||||
var transforms = '';
|
||||
if (this.webcamConfig.flipX) {
|
||||
transforms += ' scaleX(-1)'
|
||||
}
|
||||
if (this.webcamConfig.flipY) {
|
||||
transforms += ' scaleY(-1)'
|
||||
}
|
||||
if (this.webcamConfig.rotate && this.webcamConfig.rotateDegrees) {
|
||||
transforms += ` rotate(${this.webcamConfig.rotateDegrees}deg)`
|
||||
}
|
||||
if (transforms.trimLeft().length) {
|
||||
return {
|
||||
transform: transforms.trimLeft(),
|
||||
}
|
||||
}
|
||||
return '';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -12,8 +12,6 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
@ -21,9 +19,7 @@
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
webcamUrl: state => state.webcam.url,
|
||||
}),
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
@ -255,7 +255,7 @@ export default {
|
||||
},
|
||||
|
||||
showDashboardWebcam: state => {
|
||||
return (state.webcam.url !== "" && state.gui.dashboard.boolWebcam);
|
||||
return (state.gui.webcam.url !== "" && state.gui.dashboard.boolWebcam);
|
||||
},
|
||||
|
||||
getCurrentExtruder: state => {
|
||||
|
||||
@ -24,9 +24,6 @@ export default new Vuex.Store({
|
||||
loadingSaveGuiConfig: false,
|
||||
loadingEndstopStatus: false,
|
||||
},
|
||||
webcam: {
|
||||
url: ""
|
||||
},
|
||||
gui: {
|
||||
general: {
|
||||
printername: "",
|
||||
@ -39,6 +36,11 @@ export default new Vuex.Store({
|
||||
hiddenTempChart: [],
|
||||
},
|
||||
webcam: {
|
||||
url: "",
|
||||
rotate: false,
|
||||
rotateDegrees: 90,
|
||||
flipX: false,
|
||||
flipY: false,
|
||||
bool: false,
|
||||
},
|
||||
gcodefiles: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user