added driver mode tab to settings in the ui

This commit is contained in:
ori agranat
2019-11-01 17:10:48 +02:00
parent 7ef05e6077
commit 51a3f677bd
18 changed files with 211 additions and 136 deletions

View File

@@ -85,7 +85,7 @@
<div style="padding-left:30px">
<keep-alive>
<!-- vision component -->
<component v-model="pipeline" :is="selectedComponent" @update="startTimer"/>
<component v-model="pipeline" :is="selectedComponent" @update="$emit('save')"/>
</keep-alive>
</div>
</v-col>
@@ -131,12 +131,6 @@
<span style="color:#000">Can not remove the only pipeline!</span>
<v-btn color="black" text @click="snackbar = false">Close</v-btn>
</v-snackbar>
<v-snackbar :timeout="1000" v-model="saveSnackbar" top color="#4baf62">
<div style="text-align: center;width: 100%;">
<h4>Saved All changes</h4>
</div>
</v-snackbar>
</div>
</template>
@@ -198,7 +192,7 @@
this.pipelineDuplicate = {
pipeline: this.currentPipelineIndex,
camera: -1
}
};
this.duplicateDialog = true;
},
closeDuplicateDialog() {
@@ -214,16 +208,6 @@
} else {
this.snackbar = true;
}
},
saveSettings() {
clearInterval(this.timer);
this.saveSnackbar = true;
},
startTimer() {
if (this.timer !== undefined) {
clearInterval(this.timer);
}
this.timer = setInterval(this.saveSettings, 4000);
}
},
data() {
@@ -243,8 +227,6 @@
camera: -1
},
snackbar: false,
saveSnackbar: false,
timer: undefined
}
},

View File

@@ -31,7 +31,7 @@
},
methods: {
handleData(val) {
this.handleInput(val, this.value[val])
this.handleInput(val, this.value[val]);
this.$emit('update')
}
},

View File

@@ -20,7 +20,7 @@
},
methods: {
handleData(val) {
this.handleInput(val, this.value[val])
this.handleInput(val, this.value[val]);
this.$emit('update')
}
},

View File

@@ -31,7 +31,7 @@
},
methods: {
handleData(val) {
this.handleInput(val, this.value[val])
this.handleInput(val, this.value[val]);
this.$emit('update')
},
doUpdate() {

View File

@@ -27,7 +27,7 @@ import CVswitch from '../../components/cv-switch'
},
methods:{
handleData(val){
this.handleInput(val,this.value[val])
this.handleInput(val,this.value[val]);
this.$emit('update')
}
}

View File

@@ -1,19 +1,20 @@
<template>
<div>
<v-row>
<v-col cols="6" class="colsClass">
<v-tabs fixed-tabs background-color="#212121" dark height="50" slider-color="#4baf62"
<v-col class="colsClass" cols="6">
<v-tabs background-color="#212121" dark fixed-tabs height="50" slider-color="#4baf62"
v-model="selectedTab">
<v-tab to="">General</v-tab>
<v-tab to="">Cameras</v-tab>
<v-tab to="">Driver Mode</v-tab>
</v-tabs>
<div style="padding-left:30px">
<component :is="selectedComponent"/>
<component :is="selectedComponent" @update="$emit('save')"/>
</div>
</v-col>
<v-col v-show="selectedTab === 1" class="colsClass">
<v-col class="colsClass" v-show="selectedTab === 1 || selectedTab === 2">
<div class="videoClass">
<img :src="steamAdress">
<img :src="steamAddress">
</div>
</v-col>
</v-row>
@@ -23,12 +24,14 @@
<script>
import General from './SettingsViewes/General'
import Cameras from './SettingsViewes/Cameras'
import DriverMode from './SettingsViewes/DriverMode'
export default {
name: 'SettingsTab',
components: {
General,
Cameras,
DriverMode
},
data() {
return {
@@ -36,15 +39,20 @@
}
},
computed: {
selectedComponent() {
switch (this.selectedTab) {
case 0:
return "General";
case 1:
return "Cameras";
selectedComponent: {
get() {
switch (this.selectedTab) {
case 0:
return "General";
case 1:
return "Cameras";
case 2:
return "DriverMode";
}
return "";
}
},
steamAdress: {
steamAddress: {
get: function () {
return "http://" + location.hostname + ":" + this.$store.state.port + "/stream.mjpg";
}

View File

@@ -0,0 +1,62 @@
<template>
<div>
<CVselect name="Camera" :list="cameraList" v-model="currentCameraIndex"/>
<CVswitch v-model="driverState.startDriver" name="Driver Mode" @input="sendDriverMode"/>
<CVslider name="Exposure" v-model="driverState.exposure" :min="0" :max="100" @input="sendDriverMode"/>
<CVslider name="Brightness" v-model="driverState.brightness" :min="0" :max="100"
@input="sendDriverMode"/>
</div>
</template>
<script>
import CVselect from '../../components/cv-select'
import CVswitch from '../../components/cv-switch'
import CVslider from '../../components/cv-slider'
export default {
name: "DriverMode",
components: {
CVselect,
CVswitch,
CVslider
},
methods: {
sendDriverMode() {
this.handleInput('driverState', this.driverState);
this.$emit("update");
}
},
computed: {
currentCameraIndex: {
get() {
return this.$store.state.currentCameraIndex;
},
set(value) {
this.$store.commit('currentCameraIndex', value);
}
},
cameraList: {
get() {
return this.$store.state.cameraList;
},
set(value) {
this.$store.commit('cameraList', value);
}
},
driverState: {
get() {
return this.$store.state.driverState;
},
set(value) {
this.$store.commit("driverState", value);
}
}
}
}
</script>
<style scoped>
</style>