mirror of
https://github.com/PhotonVision/photonvision
synced 2026-07-06 03:31:41 +00:00
added auto save and save button
This commit is contained in:
ori agranat
@@ -26,64 +26,75 @@
|
||||
@input="handleInput('currentPipeline',currentPipelineIndex)"/>
|
||||
<CVinput v-else name="Pipeline" v-model="newPipelineName" @Enter="savePipelineNameChange"/>
|
||||
</v-col>
|
||||
<v-col :cols="1" class="colsClass">
|
||||
<v-menu v-if="isPipelineEdit === false" offset-y dark auto>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-icon color="white" v-on="on">menu</v-icon>
|
||||
</template>
|
||||
<v-list dense>
|
||||
<v-list-item @click="toPipelineNameChange">
|
||||
<v-list-item-title>
|
||||
<CVicon color="#c5c5c5" :right="true" text="edit" tooltip="Edit pipeline name"/>
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item @click="handleInput('command','addNewPipeline')">
|
||||
<v-list-item-title>
|
||||
<CVicon color="#c5c5c5" :right="true" text="add" tooltip="Add new pipeline"/>
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item @click="deleteCurrentPipeline">
|
||||
<v-list-item-title>
|
||||
<CVicon color="red darken-2" :right="true" text="delete"
|
||||
tooltip="Delete pipeline"/>
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item @click="openDuplicateDialog">
|
||||
<v-list-item-title>
|
||||
<CVicon color="#c5c5c5" :right="true" text="mdi-content-copy"
|
||||
tooltip="Duplicate pipeline"/>
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<div v-else>
|
||||
<CVicon color="#c5c5c5" style="display: inline-block;" hover text="save"
|
||||
@click="savePipelineNameChange" tooltip="Save Pipeline Name"/>
|
||||
<CVicon color="error" style="display: inline-block;" hover text="close"
|
||||
@click="discardPipelineNameChange" tooltip="Discard Changes"/>
|
||||
</div>
|
||||
<v-col :cols="1" class="colsClass" md="3">
|
||||
<v-menu v-if="isPipelineEdit === false" offset-y dark auto>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-icon color="white" v-on="on">menu</v-icon>
|
||||
</template>
|
||||
<v-list dense>
|
||||
<v-list-item @click="toPipelineNameChange">
|
||||
<v-list-item-title>
|
||||
<CVicon color="#c5c5c5" :right="true" text="edit" tooltip="Edit pipeline name"/>
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item @click="handleInput('command','addNewPipeline')">
|
||||
<v-list-item-title>
|
||||
<CVicon color="#c5c5c5" :right="true" text="add" tooltip="Add new pipeline"/>
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item @click="deleteCurrentPipeline">
|
||||
<v-list-item-title>
|
||||
<CVicon color="red darken-2" :right="true" text="delete"
|
||||
tooltip="Delete pipeline"/>
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item @click="openDuplicateDialog">
|
||||
<v-list-item-title>
|
||||
<CVicon color="#c5c5c5" :right="true" text="mdi-content-copy"
|
||||
tooltip="Duplicate pipeline"/>
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<div v-else>
|
||||
<CVicon color="#c5c5c5" style="display: inline-block;" hover text="save"
|
||||
@click="savePipelineNameChange" tooltip="Save Pipeline Name"/>
|
||||
<CVicon color="error" style="display: inline-block;" hover text="close"
|
||||
@click="discardPipelineNameChange" tooltip="Discard Changes"/>
|
||||
</div>
|
||||
</v-col>
|
||||
|
||||
|
||||
<v-btn style="position: absolute; top:5px;right: 0;" tile color="#4baf62"
|
||||
@click="handleInput('command','save')">
|
||||
<v-icon>save</v-icon>
|
||||
Save
|
||||
</v-btn>
|
||||
|
||||
</v-row>
|
||||
</div>
|
||||
<v-row>
|
||||
<!-- vision tabs -->
|
||||
<v-col cols="6" class="colsClass">
|
||||
<v-tabs fixed-tabs background-color="#212121" dark height="48" slider-color="#4baf62" v-model="selectedTab">
|
||||
<v-tabs fixed-tabs background-color="#212121" dark height="48" slider-color="#4baf62"
|
||||
v-model="selectedTab">
|
||||
<v-tab>Input</v-tab>
|
||||
<v-tab>Threshold</v-tab>
|
||||
<v-tab>Contours</v-tab>
|
||||
<v-tab>Output</v-tab>
|
||||
</v-tabs>
|
||||
<div style="padding-left:30px">
|
||||
<!-- vision component -->
|
||||
<component v-model="pipeline" :is="selectedComponent"/>
|
||||
<keep-alive>
|
||||
<!-- vision component -->
|
||||
<component v-model="pipeline" :is="selectedComponent" @update="startTimer"/>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="6" class="colsClass">
|
||||
<div>
|
||||
<!-- camera image tabs -->
|
||||
<v-tabs background-color="#212121" dark height="48" slider-color="#4baf62" centered style="padding-bottom:10px" v-model="isBinaryNumber" @change="handleInput('isBinary',pipeline.isBinary)">
|
||||
<v-tabs background-color="#212121" dark height="48" slider-color="#4baf62" centered
|
||||
style="padding-bottom:10px" v-model="isBinaryNumber"
|
||||
@change="handleInput('isBinary',pipeline.isBinary)">
|
||||
<v-tab>Normal</v-tab>
|
||||
<v-tab>Threshold</v-tab>
|
||||
</v-tabs>
|
||||
@@ -95,11 +106,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- pipeline duplicate dialog -->
|
||||
<v-dialog dark v-model="duplicateDialog" width="500" height="357" >
|
||||
<v-card dark>
|
||||
<v-card-title class="headline" primary-title>Duplicate Pipeline</v-card-title>
|
||||
</v-row>
|
||||
<!-- pipeline duplicate dialog -->
|
||||
<v-dialog dark v-model="duplicateDialog" width="500" height="357">
|
||||
<v-card dark>
|
||||
<v-card-title class="headline" primary-title>Duplicate Pipeline</v-card-title>
|
||||
<v-card-text>
|
||||
<CVselect name="Pipeline" :list="pipelineList" v-model="pipelineDuplicate.pipeline"/>
|
||||
<v-checkbox v-if="cameraList.length > 1" dark :label="'To another camera'" v-model="anotherCamera"/>
|
||||
@@ -113,27 +124,34 @@
|
||||
<v-btn color="#4baf62" text @click="duplicatePipeline">Duplicate</v-btn>
|
||||
<v-btn color="error" text @click="closeDuplicateDialog">Cancels</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<!-- snack bar -->
|
||||
<v-snackbar :timeout="3000" v-model="snackbar" top color="error">
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<!-- snack bar -->
|
||||
<v-snackbar :timeout="3000" v-model="snackbar" top color="error">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
import InputTab from './CameraViewes/InputTab'
|
||||
import ThresholdTab from './CameraViewes/ThresholdTab'
|
||||
import ContoursTab from './CameraViewes/ContoursTab'
|
||||
import OutputTab from './CameraViewes/OutputTab'
|
||||
import CVselect from '../components/cv-select'
|
||||
import CVicon from '../components/cv-icon'
|
||||
import CVinput from '../components/cv-input'
|
||||
import InputTab from './CameraViewes/InputTab'
|
||||
import ThresholdTab from './CameraViewes/ThresholdTab'
|
||||
import ContoursTab from './CameraViewes/ContoursTab'
|
||||
import OutputTab from './CameraViewes/OutputTab'
|
||||
import CVselect from '../components/cv-select'
|
||||
import CVicon from '../components/cv-icon'
|
||||
import CVinput from '../components/cv-input'
|
||||
|
||||
export default {
|
||||
name: 'CameraTab',
|
||||
components:{
|
||||
components: {
|
||||
InputTab,
|
||||
ThresholdTab,
|
||||
ContoursTab,
|
||||
@@ -142,107 +160,116 @@ import CVinput from '../components/cv-input'
|
||||
CVicon,
|
||||
CVinput
|
||||
},
|
||||
methods:{
|
||||
test(value){
|
||||
console.log(value)
|
||||
},
|
||||
toCameraNameChange(){
|
||||
methods: {
|
||||
toCameraNameChange() {
|
||||
this.newCameraName = this.cameraList[this.currentCameraIndex];
|
||||
this.isCameraNameEdit = true;
|
||||
},
|
||||
saveCameraNameChange(){
|
||||
if(this.cameraNameError === ""){
|
||||
this.handleInput("changeCameraName",this.newCameraName);
|
||||
this.discardCameraNameChange();
|
||||
saveCameraNameChange() {
|
||||
if (this.cameraNameError === "") {
|
||||
this.handleInput("changeCameraName", this.newCameraName);
|
||||
this.discardCameraNameChange();
|
||||
}
|
||||
},
|
||||
discardCameraNameChange(){
|
||||
discardCameraNameChange() {
|
||||
this.isCameraNameEdit = false;
|
||||
this.newCameraName = "";
|
||||
},
|
||||
toPipelineNameChange(){
|
||||
toPipelineNameChange() {
|
||||
this.newPipelineName = this.pipelineList[this.currentPipelineIndex];
|
||||
this.isPipelineEdit = true;
|
||||
},
|
||||
savePipelineNameChange(){
|
||||
this.handleInput("changePipelineName",this.newPipelineName);
|
||||
savePipelineNameChange() {
|
||||
this.handleInput("changePipelineName", this.newPipelineName);
|
||||
this.discardPipelineNameChange();
|
||||
},
|
||||
discardPipelineNameChange(){
|
||||
discardPipelineNameChange() {
|
||||
this.isPipelineEdit = false;
|
||||
this.newPipelineName = "";
|
||||
},
|
||||
duplicatePipeline(){
|
||||
if(!this.anotherCamera){
|
||||
duplicatePipeline() {
|
||||
if (!this.anotherCamera) {
|
||||
this.pipelineDuplicate.camera = -1
|
||||
}
|
||||
this.handleInput("duplicatePipeline",this.pipelineDuplicate);
|
||||
this.handleInput("duplicatePipeline", this.pipelineDuplicate);
|
||||
this.closeDuplicateDialog();
|
||||
},
|
||||
openDuplicateDialog(){
|
||||
openDuplicateDialog() {
|
||||
this.pipelineDuplicate = {
|
||||
pipeline:this.currentPipelineIndex,
|
||||
camera:-1
|
||||
pipeline: this.currentPipelineIndex,
|
||||
camera: -1
|
||||
}
|
||||
this.duplicateDialog = true;
|
||||
},
|
||||
closeDuplicateDialog(){
|
||||
closeDuplicateDialog() {
|
||||
this.duplicateDialog = false;
|
||||
this.pipelineDuplicate = {
|
||||
pipeline:undefined,
|
||||
camera:-1
|
||||
pipeline: undefined,
|
||||
camera: -1
|
||||
}
|
||||
},
|
||||
deleteCurrentPipeline(){
|
||||
deleteCurrentPipeline() {
|
||||
if (this.pipelineList.length > 1) {
|
||||
this.handleInput('command','deleteCurrentPipeline');
|
||||
this.handleInput('command', 'deleteCurrentPipeline');
|
||||
} 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() {
|
||||
return {
|
||||
selectedTab:0,
|
||||
selectedTab: 1,
|
||||
// camera edit variables
|
||||
isCameraNameEdit:false,
|
||||
newCameraName:"",
|
||||
cameraNameError:"",
|
||||
isCameraNameEdit: false,
|
||||
newCameraName: "",
|
||||
cameraNameError: "",
|
||||
// pipeline edit variables
|
||||
isPipelineEdit:false,
|
||||
newPipelineName:"",
|
||||
duplicateDialog:false,
|
||||
anotherCamera:false,
|
||||
pipelineDuplicate:{
|
||||
pipeline:undefined,
|
||||
camera:-1
|
||||
isPipelineEdit: false,
|
||||
newPipelineName: "",
|
||||
duplicateDialog: false,
|
||||
anotherCamera: false,
|
||||
pipelineDuplicate: {
|
||||
pipeline: undefined,
|
||||
camera: -1
|
||||
},
|
||||
snackbar:false
|
||||
snackbar: false,
|
||||
saveSnackbar: false,
|
||||
timer: undefined
|
||||
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
checkCameraName(){
|
||||
if(this.newCameraName !== this.cameraList[this.currentCameraIndex]){
|
||||
for(let cam in this.cameraList){
|
||||
if(this.newCameraName === this.cameraList[cam]){
|
||||
computed: {
|
||||
checkCameraName() {
|
||||
if (this.newCameraName !== this.cameraList[this.currentCameraIndex]) {
|
||||
for (let cam in this.cameraList) {
|
||||
if (this.newCameraName === this.cameraList[cam]) {
|
||||
return "Camera by that name already Exists"
|
||||
}
|
||||
}
|
||||
}
|
||||
return ""
|
||||
},
|
||||
isBinaryNumber:{
|
||||
get(){
|
||||
return this.pipeline.isBinary ? 1:0
|
||||
isBinaryNumber: {
|
||||
get() {
|
||||
return this.pipeline.isBinary ? 1 : 0
|
||||
},
|
||||
set(value){
|
||||
set(value) {
|
||||
this.pipeline.isBinary = !!value;
|
||||
}
|
||||
},
|
||||
selectedComponent:{
|
||||
get(){
|
||||
switch(this.selectedTab){
|
||||
selectedComponent: {
|
||||
get() {
|
||||
switch (this.selectedTab) {
|
||||
case 0:
|
||||
return "InputTab";
|
||||
case 1:
|
||||
@@ -255,51 +282,51 @@ import CVinput from '../components/cv-input'
|
||||
return "";
|
||||
}
|
||||
},
|
||||
point:{
|
||||
get:function(){
|
||||
point: {
|
||||
get: function () {
|
||||
let p = this.$store.state.point.calculated;
|
||||
let fps = this.$store.state.point.fps;
|
||||
if(p !== undefined){
|
||||
if (p !== undefined) {
|
||||
return ("Pitch: " + parseFloat(p['pitch']).toFixed(2) + " Yaw: " + parseFloat(p['yaw']).toFixed(2) + " FPS: " + fps.toFixed(2))
|
||||
} else{
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
},
|
||||
currentCameraIndex:{
|
||||
get(){
|
||||
currentCameraIndex: {
|
||||
get() {
|
||||
return this.$store.state.currentCameraIndex;
|
||||
},
|
||||
set(value){
|
||||
this.$store.commit('currentCameraIndex',value);
|
||||
set(value) {
|
||||
this.$store.commit('currentCameraIndex', value);
|
||||
}
|
||||
},
|
||||
currentPipelineIndex:{
|
||||
get(){
|
||||
currentPipelineIndex: {
|
||||
get() {
|
||||
return this.$store.state.currentPipelineIndex;
|
||||
},
|
||||
set(value){
|
||||
this.$store.commit('currentPipelineIndex',value);
|
||||
set(value) {
|
||||
this.$store.commit('currentPipelineIndex', value);
|
||||
}
|
||||
},
|
||||
cameraList:{
|
||||
get(){
|
||||
cameraList: {
|
||||
get() {
|
||||
return this.$store.state.cameraList;
|
||||
}
|
||||
},
|
||||
pipelineList:{
|
||||
get(){
|
||||
pipelineList: {
|
||||
get() {
|
||||
return this.$store.state.pipelineList;
|
||||
}
|
||||
},
|
||||
pipeline:{
|
||||
get(){
|
||||
pipeline: {
|
||||
get() {
|
||||
return this.$store.state.pipeline;
|
||||
}
|
||||
},
|
||||
streamAddress: {
|
||||
get: function(){
|
||||
return "http://"+location.hostname + ":"+ this.$store.state.port +"/stream.mjpg";
|
||||
get: function () {
|
||||
return "http://" + location.hostname + ":" + this.$store.state.port + "/stream.mjpg";
|
||||
}
|
||||
},
|
||||
}
|
||||
@@ -307,19 +334,22 @@ import CVinput from '../components/cv-input'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.colsClass{
|
||||
.colsClass {
|
||||
padding: 0 !important;
|
||||
|
||||
|
||||
}
|
||||
.videoClass{
|
||||
|
||||
.videoClass {
|
||||
text-align: center;
|
||||
}
|
||||
.videoClass img{
|
||||
|
||||
.videoClass img {
|
||||
height: auto !important;
|
||||
width: 70%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#Point{
|
||||
|
||||
#Point {
|
||||
padding-top: 5px;
|
||||
text-align: center;
|
||||
color: #f4f4f4;
|
||||
|
||||
@@ -1,35 +1,47 @@
|
||||
<template>
|
||||
<div>
|
||||
<CVrangeSlider v-model="value.area" name="Area" :min="0" :max="100" :step="0.1" @input="handleInput('area',value.area)"></CVrangeSlider>
|
||||
<CVrangeSlider v-model="value.ratio" name="Ratio (W/H)" :min="0" :max="100" :step="0.1" @input="handleInput('ratio',value.ratio)"></CVrangeSlider>
|
||||
<CVrangeSlider v-model="value.extent" name="Extent" :min="0" :max="100" @input="handleInput('extent',value.extent)"></CVrangeSlider>
|
||||
<CVslider name="Speckle Rejection" :min="0" :max="100" v-model="value.speckle" @input="handleInput('speckle',value.speckle)"></CVslider>
|
||||
<CVselect name="Target Group" :list="['Single','Dual']" v-model="value.targetGroup" @input="handleInput('targetGroup',value.targetGroup)"></CVselect>
|
||||
<CVselect name="Target Intersection" :list="['None','Up','Down','Left','Right']" :disabled="isDisabled" v-model="value.targetIntersection" @input="handleInput('targetIntersection',value.targetIntersection)"></CVselect>
|
||||
<CVrangeSlider v-model="value.area" name="Area" :min="0" :max="100" :step="0.1"
|
||||
@input="handleData('area')"/>
|
||||
<CVrangeSlider v-model="value.ratio" name="Ratio (W/H)" :min="0" :max="100" :step="0.1"
|
||||
@input="handleData('ratio')"/>
|
||||
<CVrangeSlider v-model="value.extent" name="Extent" :min="0" :max="100"
|
||||
@input="handleData('extent')"/>
|
||||
<CVslider name="Speckle Rejection" :min="0" :max="100" v-model="value.speckle"
|
||||
@input="handleData('speckle')"/>
|
||||
<CVselect name="Target Group" :list="['Single','Dual']" v-model="value.targetGroup"
|
||||
@input="handleData('targetGroup')"/>
|
||||
<CVselect name="Target Intersection" :list="['None','Up','Down','Left','Right']" :disabled="isDisabled"
|
||||
v-model="value.targetIntersection" @input="handleData('targetIntersection')"/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CVrangeSlider from '../../components/cv-range-slider'
|
||||
import CVselect from '../../components/cv-select'
|
||||
import CVslider from '../../components/cv-slider'
|
||||
import CVrangeSlider from '../../components/cv-range-slider'
|
||||
import CVselect from '../../components/cv-select'
|
||||
import CVslider from '../../components/cv-slider'
|
||||
|
||||
export default {
|
||||
name: 'Contours',
|
||||
props:['value'],
|
||||
components:{
|
||||
props: ['value'],
|
||||
components: {
|
||||
CVrangeSlider,
|
||||
CVselect,
|
||||
CVslider
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
methods: {
|
||||
handleData(val) {
|
||||
this.handleInput(val, this.value[val])
|
||||
this.$emit('update')
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
isDisabled(){
|
||||
if(this.value.targetGroup === 0){
|
||||
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
isDisabled() {
|
||||
if (this.value.targetGroup === 0) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
@@ -39,5 +51,5 @@ import CVslider from '../../components/cv-slider'
|
||||
</script>
|
||||
|
||||
<style lang="" scoped>
|
||||
|
||||
|
||||
</style>
|
||||
@@ -1,34 +1,39 @@
|
||||
<template>
|
||||
<div>
|
||||
<CVslider name="Exposure" v-model="value.exposure" :min="0" :max="100" @input="handleInput('exposure',value.exposure)"></CVslider>
|
||||
<CVslider name="Brightness" v-model="value.brightness" :min="0" :max="100" @input="handleInput('brightness',value.brightness)"></CVslider>
|
||||
<CVselect name="Orientation" v-model="value.orientation" :list="['Normal','Inverted']" @input="handleInput('orientation',value.orientation)"></CVselect>
|
||||
<CVslider name="Exposure" v-model="value.exposure" :min="0" :max="100" @input="handleData('exposure')"/>
|
||||
<CVslider name="Brightness" v-model="value.brightness" :min="0" :max="100" @input="handleData('brightness')"/>
|
||||
<CVselect name="Orientation" v-model="value.orientation" :list="['Normal','Inverted']"
|
||||
@input="handleData('orientation')"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CVslider from '../../components/cv-slider'
|
||||
import CVselect from '../../components/cv-select'
|
||||
import CVslider from '../../components/cv-slider'
|
||||
import CVselect from '../../components/cv-select'
|
||||
|
||||
export default {
|
||||
name: 'Input',
|
||||
props:['value'],
|
||||
components:{
|
||||
props: ['value'],
|
||||
components: {
|
||||
CVslider,
|
||||
CVselect,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
t:0,
|
||||
a:1
|
||||
methods: {
|
||||
handleData(val) {
|
||||
this.handleInput(val, this.value[val])
|
||||
this.$emit('update')
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
|
||||
data() {
|
||||
return {
|
||||
t: 0,
|
||||
a: 1
|
||||
}
|
||||
},
|
||||
computed:{}
|
||||
computed: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
</style>
|
||||
@@ -2,12 +2,12 @@
|
||||
<div>
|
||||
<CVselect name="SortMode" v-model="value.sortMode"
|
||||
:list="['Largest','Smallest','Highest','Lowest','Rightmost','Leftmost','Closest']"
|
||||
@input="handleInput('sortMode',value.sortMode)"/>
|
||||
@input="handleData('sortMode')"/>
|
||||
<span>Calibrate:</span>
|
||||
<v-divider dark color="white"/>
|
||||
<CVselect name="Calibration Mode" v-model="value.calibrationMode" :list="['None','Single point','Dual point']"
|
||||
@input="handleInput('calibrationMode',value.calibrationMode)"/>
|
||||
<component :raw-point="rawPoint" :is="selectedComponent"/>
|
||||
@input="handleData('calibrationMode')"/>
|
||||
<component :raw-point="rawPoint" :is="selectedComponent" @update="doUpdate"/>
|
||||
<v-snackbar :timeout="3000" v-model="snackbar" top color="error">
|
||||
<span style="color:#000">Points are too close</span>
|
||||
<v-btn color="black" text @click="snackbar = false">Close</v-btn>
|
||||
@@ -16,19 +16,27 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CVselect from '../../components/cv-select'
|
||||
import DualCalibration from "../../components/OutputTab/DualCalibration";
|
||||
import SingleCalibration from "../../components/OutputTab/SingleCalibration";
|
||||
import CVselect from '../../components/cv-select'
|
||||
import DualCalibration from "../../components/OutputTab/DualCalibration";
|
||||
import SingleCalibration from "../../components/OutputTab/SingleCalibration";
|
||||
|
||||
export default {
|
||||
name: 'Output',
|
||||
props:['value'],
|
||||
components:{
|
||||
props: ['value'],
|
||||
components: {
|
||||
CVselect,
|
||||
SingleCalibration,
|
||||
DualCalibration,
|
||||
|
||||
},
|
||||
methods:{
|
||||
methods: {
|
||||
handleData(val) {
|
||||
this.handleInput(val, this.value[val])
|
||||
this.$emit('update')
|
||||
},
|
||||
doUpdate() {
|
||||
this.$emit('update')
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
@@ -36,9 +44,9 @@ import SingleCalibration from "../../components/OutputTab/SingleCalibration";
|
||||
snackbar: false,
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
selectedComponent:{
|
||||
get(){
|
||||
computed: {
|
||||
selectedComponent: {
|
||||
get() {
|
||||
switch (this.value.calibrationMode) {
|
||||
case 0:
|
||||
return "";
|
||||
@@ -50,8 +58,8 @@ import SingleCalibration from "../../components/OutputTab/SingleCalibration";
|
||||
return ""
|
||||
}
|
||||
},
|
||||
rawPoint:{
|
||||
get(){
|
||||
rawPoint: {
|
||||
get() {
|
||||
return this.$store.state.point.rawPoint;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<CVrangeSlider v-model="value.hue" name="Hue" :min="0" :max="180" @input="handleInput('hue',value.hue)"></CVrangeSlider>
|
||||
<CVrangeSlider v-model="value.saturation" name="Saturation" :min="0" :max="255" @input="handleInput('saturation',value.saturation)"></CVrangeSlider>
|
||||
<CVrangeSlider v-model="value.value" name="Value" :min="0" :max="255" @input="handleInput('value',value.value)"></CVrangeSlider>
|
||||
<CVswitch v-model="value.erode" name="Erode" @input="handleInput('erode',value.erode)"></CVswitch>
|
||||
<CVswitch v-model="value.dilate" name="Dilate" @input="handleInput('dilate',value.dilate)"></CVswitch>
|
||||
<CVrangeSlider v-model="value.hue" name="Hue" :min="0" :max="180" @input="handleData('hue')"/>
|
||||
<CVrangeSlider v-model="value.saturation" name="Saturation" :min="0" :max="255"
|
||||
@input="handleData('saturation')"/>
|
||||
<CVrangeSlider v-model="value.value" name="Value" :min="0" :max="255" @input="handleData('value')"/>
|
||||
<CVswitch v-model="value.erode" name="Erode" @input="handleData('erode')"/>
|
||||
<CVswitch v-model="value.dilate" name="Dilate" @input="handleData('dilate')"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -25,6 +26,10 @@ import CVswitch from '../../components/cv-switch'
|
||||
computed:{
|
||||
},
|
||||
methods:{
|
||||
handleData(val){
|
||||
this.handleInput(val,this.value[val])
|
||||
this.$emit('update')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -2,12 +2,13 @@
|
||||
<div>
|
||||
<v-row>
|
||||
<v-col cols="6" class="colsClass">
|
||||
<v-tabs fixed-tabs background-color="#212121" dark height="50" slider-color="#4baf62" v-model="selectedTab">
|
||||
<v-tabs fixed-tabs background-color="#212121" dark height="50" slider-color="#4baf62"
|
||||
v-model="selectedTab">
|
||||
<v-tab to="">General</v-tab>
|
||||
<v-tab to="">Cameras</v-tab>
|
||||
</v-tabs>
|
||||
<div style="padding-left:30px">
|
||||
<component :is="selectedComponent"></component>
|
||||
<component :is="selectedComponent"/>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col v-show="selectedTab === 1" class="colsClass">
|
||||
@@ -15,28 +16,28 @@
|
||||
<img :src="steamAdress">
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import General from './SettingsViewes/General'
|
||||
import Cameras from './SettingsViewes/Cameras'
|
||||
import General from './SettingsViewes/General'
|
||||
import Cameras from './SettingsViewes/Cameras'
|
||||
|
||||
export default {
|
||||
name: 'SettingsTab',
|
||||
components:{
|
||||
components: {
|
||||
General,
|
||||
Cameras,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedTab:0,
|
||||
selectedTab: 0,
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
selectedComponent(){
|
||||
switch(this.selectedTab){
|
||||
computed: {
|
||||
selectedComponent() {
|
||||
switch (this.selectedTab) {
|
||||
case 0:
|
||||
return "General";
|
||||
case 1:
|
||||
@@ -44,8 +45,8 @@ import Cameras from './SettingsViewes/Cameras'
|
||||
}
|
||||
},
|
||||
steamAdress: {
|
||||
get: function(){
|
||||
return "http://"+location.hostname + ":"+ this.$store.state.port +"/stream.mjpg";
|
||||
get: function () {
|
||||
return "http://" + location.hostname + ":" + this.$store.state.port + "/stream.mjpg";
|
||||
}
|
||||
},
|
||||
}
|
||||
@@ -53,16 +54,18 @@ import Cameras from './SettingsViewes/Cameras'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.videoClass{
|
||||
.videoClass {
|
||||
text-align: center;
|
||||
}
|
||||
.videoClass img{
|
||||
|
||||
.videoClass img {
|
||||
padding-top: 10px;
|
||||
height: auto !important;
|
||||
width: 75%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.colsClass{
|
||||
|
||||
.colsClass {
|
||||
padding: 0 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,69 +1,69 @@
|
||||
<template>
|
||||
<div>
|
||||
<CVselect name="Camera" :list="cameraList" v-model="currentCameraIndex"></CVselect>
|
||||
<CVselect name="Resolution" v-model="cameraSettings.resolution" :list="resolutionList"></CVselect>
|
||||
<CVselect name="Stream Resolution" v-model="cameraSettings.streamDivisor" :list="['1:1','1:2','1:4','1:6']"></CVselect>
|
||||
<CVnumberinput name="Diagonal FOV" v-model="cameraSettings.fov" ></CVnumberinput>
|
||||
<CVselect name="Camera" :list="cameraList" v-model="currentCameraIndex"/>
|
||||
<CVselect name="Resolution" v-model="cameraSettings.resolution" :list="resolutionList"/>
|
||||
<CVselect name="Stream Resolution" v-model="cameraSettings.streamDivisor"
|
||||
:list="['1:1','1:2','1:4','1:6']"/>
|
||||
<CVnumberinput name="Diagonal FOV" v-model="cameraSettings.fov"/>
|
||||
<v-btn style="margin-top:10px" small color="#4baf62" @click="sendCameraSettings">Save Camera Settings</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CVselect from '../../components/cv-select'
|
||||
import CVnumberinput from '../../components/cv-number-input'
|
||||
import CVselect from '../../components/cv-select'
|
||||
import CVnumberinput from '../../components/cv-number-input'
|
||||
|
||||
export default {
|
||||
name: 'CameraSettings',
|
||||
components:{
|
||||
components: {
|
||||
CVselect,
|
||||
CVnumberinput
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
return {}
|
||||
},
|
||||
methods:{
|
||||
sendCameraSettings(){
|
||||
this.handleInput('cameraSettings',this.cameraSettings);
|
||||
methods: {
|
||||
sendCameraSettings() {
|
||||
this.handleInput('cameraSettings', this.cameraSettings);
|
||||
},
|
||||
|
||||
},
|
||||
computed:{
|
||||
|
||||
currentCameraIndex:{
|
||||
get(){
|
||||
},
|
||||
computed: {
|
||||
|
||||
currentCameraIndex: {
|
||||
get() {
|
||||
return this.$store.state.currentCameraIndex;
|
||||
},
|
||||
set(value){
|
||||
this.$store.commit('currentCameraIndex',value);
|
||||
set(value) {
|
||||
this.$store.commit('currentCameraIndex', value);
|
||||
}
|
||||
},
|
||||
cameraList:{
|
||||
get(){
|
||||
cameraList: {
|
||||
get() {
|
||||
return this.$store.state.cameraList;
|
||||
},
|
||||
set(value){
|
||||
this.$store.commit('cameraList',value);
|
||||
set(value) {
|
||||
this.$store.commit('cameraList', value);
|
||||
}
|
||||
},
|
||||
resolutionList:{
|
||||
get(){
|
||||
resolutionList: {
|
||||
get() {
|
||||
return this.$store.state.resolutionList;
|
||||
}
|
||||
},
|
||||
cameraSettings:{
|
||||
get(){
|
||||
cameraSettings: {
|
||||
get() {
|
||||
return this.$store.state.cameraSettings;
|
||||
},
|
||||
set(value){
|
||||
this.$store.commit('cameraSettings',value);
|
||||
set(value) {
|
||||
this.$store.commit('cameraSettings', value);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="" scoped>
|
||||
|
||||
|
||||
</style>
|
||||
@@ -1,46 +1,46 @@
|
||||
<template>
|
||||
<div>
|
||||
<CVnumberinput v-model="settings.teamNumber" name="Team Number"></CVnumberinput>
|
||||
<CVradio v-model="settings.connectionType" :list="['DHCP','Static']"></CVradio>
|
||||
<v-divider color="white"></v-divider>
|
||||
<CVinput name="IP" v-model="settings.ip" :disabled="isDisabled"></CVinput>
|
||||
<CVinput name="NetMask" v-model="settings.netmask" :disabled="isDisabled"></CVinput>
|
||||
<CVinput name="Gateway" v-model="settings.gateway" :disabled="isDisabled"></CVinput>
|
||||
<v-divider color="white"></v-divider>
|
||||
<CVinput name="Hostname" v-model="settings.hostname"></CVinput>
|
||||
<CVnumberinput v-model="settings.teamNumber" name="Team Number"/>
|
||||
<CVradio v-model="settings.connectionType" :list="['DHCP','Static']"/>
|
||||
<v-divider color="white"/>
|
||||
<CVinput name="IP" v-model="settings.ip" :disabled="isDisabled"/>
|
||||
<CVinput name="NetMask" v-model="settings.netmask" :disabled="isDisabled"/>
|
||||
<CVinput name="Gateway" v-model="settings.gateway" :disabled="isDisabled"/>
|
||||
<v-divider color="white"/>
|
||||
<CVinput name="Hostname" v-model="settings.hostname"/>
|
||||
<v-btn style="margin-top:10px" small color="#4baf62" @click="sendGeneralSettings">Save General Settings</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CVnumberinput from '../../components/cv-number-input'
|
||||
import CVradio from '../../components/cv-radio'
|
||||
import CVinput from '../../components/cv-input'
|
||||
import CVnumberinput from '../../components/cv-number-input'
|
||||
import CVradio from '../../components/cv-radio'
|
||||
import CVinput from '../../components/cv-input'
|
||||
|
||||
export default {
|
||||
name: 'General',
|
||||
components:{
|
||||
components: {
|
||||
CVnumberinput,
|
||||
CVradio,
|
||||
CVinput
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
sendGeneralSettings() {
|
||||
this.handleInput('generalSettings', this.settings);
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
sendGeneralSettings(){
|
||||
this.handleInput('generalSettings',this.settings);
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
isDisabled(){
|
||||
if(this.settings.connectionType === 0){
|
||||
computed: {
|
||||
isDisabled() {
|
||||
if (this.settings.connectionType === 0) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
settings:{
|
||||
get(){
|
||||
settings: {
|
||||
get() {
|
||||
return this.$store.state.settings;
|
||||
}
|
||||
}
|
||||
@@ -49,5 +49,5 @@ import CVinput from '../../components/cv-input'
|
||||
</script>
|
||||
|
||||
<style lang="" scoped>
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user