mirror of
https://github.com/PhotonVision/photonvision
synced 2026-06-29 02:21:41 +00:00
removed old ui src and moved new one to its location and builded ui for distribution
This commit is contained in:
ori agranat
281
chameleon-client/src/views/Camera.vue
Normal file
281
chameleon-client/src/views/Camera.vue
Normal file
@@ -0,0 +1,281 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<v-row align="center">
|
||||
<v-col :cols="3" class="colsClass">
|
||||
<div style="padding-left:30px">
|
||||
<CVselect v-if="isCameraNameEdit == false" name="Camera" v-model="currentCameraIndex" :list="cameraList" @input="handleInput('currentCamera',currentCameraIndex)"></CVselect>
|
||||
<CVinput v-else name="Camera" v-model="newCameraName" @Enter="saveCameraNameChange" :errorMessage="checkCameraName"></CVinput>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col :cols="1">
|
||||
<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 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 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"></CVicon>
|
||||
</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"></CVicon>
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
<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="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>
|
||||
<v-col cols="6" class="colsClass">
|
||||
<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">
|
||||
<component v-model="pipeline" :is="selectedComponent"></component>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="6" class="colsClass">
|
||||
<div>
|
||||
<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>
|
||||
<div class="videoClass">
|
||||
<img v-if="cameraList.length > 0" :src="steamAdress">
|
||||
<span v-else>No Cameras Are connected</span>
|
||||
<h5 id="Point">{{point}}</h5>
|
||||
</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-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>
|
||||
|
||||
<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'
|
||||
export default {
|
||||
name: 'CameraTab',
|
||||
components:{
|
||||
InputTab,
|
||||
ThresholdTab,
|
||||
ContoursTab,
|
||||
OutputTab,
|
||||
CVselect,
|
||||
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
|
||||
},
|
||||
set(value){
|
||||
this.pipeline.isBinary = !!value;
|
||||
}
|
||||
},
|
||||
selectedComponent:{
|
||||
get(){
|
||||
switch(this.selectedTab){
|
||||
case 0:
|
||||
return "InputTab";
|
||||
case 1:
|
||||
return "ThresholdTab";
|
||||
case 2:
|
||||
return "ContoursTab";
|
||||
case 3:
|
||||
return "OutputTab";
|
||||
}
|
||||
return "";
|
||||
}
|
||||
},
|
||||
point:{
|
||||
get:function(){
|
||||
let p = this.$store.state.point.calculated;
|
||||
let fps = this.$store.state.point.fps;
|
||||
if(p !== undefined){
|
||||
return ("Pitch: " + parseFloat(p['pitch']).toFixed(2) + " Yaw: " + parseFloat(p['yaw']).toFixed(2) + " FPS: " + fps.toFixed(2))
|
||||
} else{
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
},
|
||||
currentCameraIndex:{
|
||||
get(){
|
||||
return this.$store.state.currentCameraIndex;
|
||||
},
|
||||
set(value){
|
||||
this.$store.commit('currentCameraIndex',value);
|
||||
}
|
||||
},
|
||||
currentPipelineIndex:{
|
||||
get(){
|
||||
return this.$store.state.currentPipelineIndex;
|
||||
},
|
||||
set(value){
|
||||
this.$store.commit('currentPipelineIndex',value);
|
||||
}
|
||||
},
|
||||
cameraList:{
|
||||
get(){
|
||||
return this.$store.state.cameraList;
|
||||
}
|
||||
},
|
||||
pipelineList:{
|
||||
get(){
|
||||
return this.$store.state.pipelineList;
|
||||
}
|
||||
},
|
||||
pipeline:{
|
||||
get(){
|
||||
return this.$store.state.pipeline;
|
||||
}
|
||||
},
|
||||
steamAdress: {
|
||||
get: function(){
|
||||
return "http://"+location.hostname + ":"+ this.$store.state.port +"/stream.mjpg";
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.colsClass{
|
||||
padding: 0 !important;
|
||||
|
||||
}
|
||||
.videoClass{
|
||||
text-align: center;
|
||||
}
|
||||
.videoClass img{
|
||||
height: auto !important;
|
||||
width: 70%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#Point{
|
||||
padding-top: 5px;
|
||||
text-align: center;
|
||||
color: #f4f4f4;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user