PhotonVision/chameleon-client/src/views/Camera.vue

<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="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>
            <!-- 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-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"></component>
                </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-tab>Normal</v-tab>
                        <v-tab>Threshold</v-tab>
                    </v-tabs>
                    <!-- camera image stream -->
                    <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"></CVselect>
                    <v-checkbox v-if="cameraList.length > 1" dark :label="'To another camera'" v-model="anotherCamera"></v-checkbox>
                    <CVselect v-if="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>
    <!-- snack bar -->
    <v-snackbar :timeout="3000" v-model="snackbar" top color="error">
            <span style="color:#000">Only one pipeline left</span>
            <v-btn color="black" text @click="snackbar = false">Close</v-btn>
    </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'
    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(){
                if(!this.anotherCamera){
                    this.pipelineDuplicate.camera = -1
                }
                this.handleInput("duplicatePipeline",this.pipelineDuplicate);
                this.closeDuplicateDialog();
            },
            closeDuplicateDialog(){
                this.duplicateDialog = false;
                this.pipelineDuplicate = {
                    pipeline:undefined,
                    camera:-1
                }
            },
            deleteCurrentPipeline(){
                if (this.pipelineList.length > 1) {
                    this.andleInput('command','deleteCurrentPipeline');   
                } else {
                    this.snackbar = true;
                }
            }
        },
        data() {
            return {
                selectedTab:0,
                // camera edit variables
                isCameraNameEdit:false,
                newCameraName:"",
                cameraNameError:"",
                // pipeline edit variables
                isPipelineEdit:false,
                newPipelineName:"",
                duplicateDialog:false,
                anotherCamera:false,
                pipelineDuplicate:{
                    pipeline:undefined,
                    camera:-1
                },
                snackbar:false

            }
        },
        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>