Team2890/PhotonVision
4
0
Fork 0
mirror of https://github.com/PhotonVision/photonvision synced 2026-06-24 01:31:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

made ui denser and finished all ui commands

Browse Source
This commit is contained in:
ori agranat
2019-10-18 16:48:08 +03:00
parent 188f6496aa
commit a60cbadac4
7 changed files with 113 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
New client/chameleon-client/src/components/cv-input.vue
View File

@@ -1,11 +1,11 @@
<template>
<div>
<v-row align="center">
<v-col :cols="2">
<v-row dense align="center">
<v-col :cols="3">
<span>{{name}}</span>
</v-col>
<v-col>
<v-text-field dark v-model="localValue" class="mt-0 pt-0" hide-details single-line :disabled="disabled"></v-text-field>
<v-col :cols="9">
<v-text-field @keydown="handleKeyboard" dark v-model="localValue" dense :disabled="disabled" :error-messages="errorMessage"></v-text-field>
</v-col>
</v-row>
</div>
@@ -14,12 +14,19 @@
<script>
export default {
name: 'Input',
props:['name','value','disabled'],
props:['name','value','disabled','errorMessage'],
data() {
return {
}
},
methods:{
handleKeyboard(event){
if(event.key == "Enter"){
this.$emit("Enter");
}
}
},
computed:{
localValue:{
get(){

2
New client/chameleon-client/src/components/cv-number-input.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<v-row align="center">
<v-row dense align="center">
<v-col :cols="2">
<span>{{name}}</span>
</v-col>

2
New client/chameleon-client/src/components/cv-range-slider.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<v-row align="center">
<v-row dense align="center">
<v-col :cols="2">
<span>{{name}}</span>
</v-col>

4
New client/chameleon-client/src/components/cv-select.vue
View File

@@ -1,11 +1,11 @@
<template>
<div>
<v-row align="center">
<v-row dense align="center">
<v-col :cols="3">
<span>{{name}}</span>
</v-col>
<v-col :cols="9">
<v-select v-model="localValue" :items="indexList" item-text="name" item-value="index" dark color="#4baf62" item-color="green" dense :disabled="disabled"></v-select>
<v-select v-model="localValue" :items="indexList" item-text="name" item-value="index" dark color="#4baf62" item-color="green" :disabled="disabled"></v-select>
</v-col>
</v-row>
</div>

2
New client/chameleon-client/src/components/cv-slider.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<v-row align="center">
<v-row dense align="center">
<v-col :cols="2">
<span>{{name}}</span>
</v-col>

2
New client/chameleon-client/src/components/cv-switch.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<v-row align="center">
<v-row dense align="center">
<v-col :cols="2">
<span>{{name}}</span>
</v-col>

105
New client/chameleon-client/src/views/Camera.vue
View File

@@ -4,44 +4,55 @@
<v-row align="center">
<v-col :cols="3" class="colsClass">
<div style="padding-left:30px">
<CVselect name="Camera" v-model="currentCameraIndex" :list="cameraList"></CVselect>
<CVselect v-if="isCameraNameEdit == false" name="Camera" v-model="currentCameraIndex" :list="cameraList"></CVselect>
<CVinput v-else name="Camera" v-model="newCameraName" @Enter="saveCameraNameChange" :errorMessage="checkCameraName"></CVinput>
</div>
</v-col>
<v-col :cols="1">
<CVicon color="#c5c5c5" hover text="edit" @click="test" tooltip="Edit camera name"></CVicon>
<CVicon color="#c5c5c5" v-if="isCameraNameEdit == false" hover text="edit" @click="toCameraNameChange" tooltip="Edit camera name"></CVicon>
<div v-else>
<CVicon color="#c5c5c5" style="display: inline-block;" hover text="save" @click="saveCameraNameChange" tooltip="Save Camera Name"></CVicon>
<CVicon color="error" style="display: inline-block;" hover text="close" @click="discardCameraNameChange" tooltip="Discard Changes"></CVicon>
</div>
</v-col>
<v-col :cols="3" class="colsClass">
<CVselect name="Pipeline" :list="pipelineList" v-model="currentPipelineIndex" @input="handleInput('currentPipeline',currentPipelineIndex)"></CVselect>
<CVselect v-if="isPipelineEdit == false" name="Pipeline" :list="pipelineList" v-model="currentPipelineIndex" @input="handleInput('currentPipeline',currentPipelineIndex)"></CVselect>
<CVinput v-else name="Pipeline" v-model="newPipelineName" @Enter="savePipelineNameChange"></CVinput>
</v-col>
<v-col :cols="1" class="colsClass">
<v-menu offset-y dark auto>
<v-menu v-if="isPipelineEdit == false" offset-y dark auto>
<template v-slot:activator="{ on }">
<v-icon color="white" @click="test" v-on="on">menu</v-icon>
<v-icon color="white" v-on="on">menu</v-icon>
</template>
<v-list dense>
<v-list-item @click="test">
<v-list-item @click="toPipelineNameChange">
<v-list-item-title>
<CVicon color="#c5c5c5" :right="true" text="edit" tooltip="Edit pipeline name"></CVicon>
</v-list-item-title>
</v-list-item>
<v-list-item @click="test">
<v-list-item @click="handleInput('command','addNewPipeline')">
<v-list-item-title>
<CVicon color="#c5c5c5" :right="true" text="add" tooltip="Add new pipeline"></CVicon>
</v-list-item-title>
</v-list-item>
<v-list-item @click="test">
<v-list-item @click="handleInput('command','deleteCurrentPipeline')">
<v-list-item-title>
<CVicon color="red darken-2" :right="true" text="delete" tooltip="Delete pipeline"></CVicon>
</v-list-item-title>
</v-list-item>
<v-list-item @click="test">
<v-list-item @click="duplicateDialog = true">
<v-list-item-title>
<CVicon color="#c5c5c5" :right="true" text="mdi-content-copy" tooltip="Duplicate pipeline"></CVicon>
</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>
<CVicon color="error" style="display: inline-block;" hover text="close" @click="discardPipelineNameChange" tooltip="Discard Changes"></CVicon>
</div>
</v-col>
</v-row>
</div>
<v-row>
@@ -70,6 +81,24 @@
</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-card-text>
<CVselect name="Pipeline" :list="pipelineList" v-model="pipelineDuplicate.pipeline" @input="handleInput('currentPipeline',currentPipelineIndex)"></CVselect>
<v-checkbox dark :label="'To another camera'" v-model="pipelineDuplicate.anotherCamera"></v-checkbox>
<CVselect v-if="pipelineDuplicate.anotherCamera === true" name="Camera" v-model="pipelineDuplicate.camera" :list="cameraList"></CVselect>
</v-card-text>
<v-divider>
</v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="#4baf62" text @click="duplicatePipeline">Duplicate</v-btn>
<v-btn color="error" text @click="closeDuplicateDialog">Discard</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
@@ -80,6 +109,7 @@ 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:{
@@ -88,19 +118,74 @@ import CVicon from '../components/cv-icon'
ContoursTab,
OutputTab,
CVselect,
CVicon
CVicon,
CVinput
},
methods:{
test(value){
console.log(value)
},
toCameraNameChange(){
this.newCameraName = this.cameraList[this.currentCameraIndex];
this.isCameraNameEdit = true;
},
saveCameraNameChange(){
if(this.cameraNameError === ""){
this.handleInput("changeCameraName",this.newCameraName);
this.discardCameraNameChange();
}
},
discardCameraNameChange(){
this.isCameraNameEdit = false;
this.newCameraName = "";
},
toPipelineNameChange(){
this.newPipelineName = this.pipelineList[this.currentPipelineIndex];
this.isPipelineEdit = true;
},
savePipelineNameChange(){
this.handleInput("changePipelineName",this.newPipelineName);
this.discardPipelineNameChange();
},
discardPipelineNameChange(){
this.isPipelineEdit = false;
this.newPipelineName = "";
},
duplicatePipeline(){
this.handleInput("dupicatePipeline",this.pipelineDuplicate);
this.closeDuplicateDialog();
},
closeDuplicateDialog(){
this.duplicateDialog = false;
this.pipelineDuplicate = {}
}
},
data() {
return {
selectedTab:0,
// camera edit variables
isCameraNameEdit:false,
newCameraName:"",
cameraNameError:"",
// pipeline edit variables
isPipelineEdit:false,
newPipelineName:"",
duplicateDialog:false,
pipelineDuplicate:{},
}
},
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