mirror of
https://github.com/PhotonVision/photonvision
synced 2026-07-02 02:51:40 +00:00
added driver mode tab to settings in the ui
This commit is contained in:
@@ -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
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
},
|
||||
methods: {
|
||||
handleData(val) {
|
||||
this.handleInput(val, this.value[val])
|
||||
this.handleInput(val, this.value[val]);
|
||||
this.$emit('update')
|
||||
}
|
||||
},
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
},
|
||||
methods: {
|
||||
handleData(val) {
|
||||
this.handleInput(val, this.value[val])
|
||||
this.handleInput(val, this.value[val]);
|
||||
this.$emit('update')
|
||||
}
|
||||
},
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
},
|
||||
methods: {
|
||||
handleData(val) {
|
||||
this.handleInput(val, this.value[val])
|
||||
this.handleInput(val, this.value[val]);
|
||||
this.$emit('update')
|
||||
},
|
||||
doUpdate() {
|
||||
|
||||
@@ -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')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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";
|
||||
}
|
||||
|
||||
62
chameleon-client/src/views/SettingsViewes/DriverMode.vue
Normal file
62
chameleon-client/src/views/SettingsViewes/DriverMode.vue
Normal 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>
|
||||
Reference in New Issue
Block a user