[PhotonClient] Bug fixes and features

photon-client/src/components/common/cv-icon.vue

@@ -9,6 +9,7 @@
         <v-icon
           :class="hoverClass"
           :color="color"
+          :disabled="disabled"
           @click="handleClick"
           v-on="on"
         >
@@ -24,7 +25,7 @@
     export default {
         name: 'Icon',
       // eslint-disable-next-line vue/require-prop-types
-        props: ['color', 'tooltip', 'text', 'right', 'hover'],
+        props: ['color', 'tooltip', 'text', 'right', 'hover', 'disabled'],
         data() {
             return {}
         },

photon-client/src/components/pipeline/CameraAndPipelineSelect.vue

@@ -20,54 +20,12 @@
         class="pa-0"
       >
         <CVselect
-          v-if="isCameraNameEdit === false"
           v-model="currentCameraIndex"
           name="Camera"
           :list="$store.getters.cameraList"
-          @input="handleInput('currentCamera',currentCameraIndex)"
-        />
-        <CVinput
-          v-else
-          v-model="newCameraName"
-          name="Camera"
-          input-cols="9"
-          :error-message="checkCameraName"
-          @Enter="saveCameraNameChange"
+          @input="handleInput('currentCamera', currentCameraIndex)"
         />
       </v-col>
-      <v-col
-        cols="2"
-        md="1"
-        lg="2"
-        class="pl-5"
-      >
-        <CVicon
-          v-if="isCameraNameEdit === false"
-          color="#c5c5c5"
-          :hover="true"
-          text="mdi-pencil"
-          tooltip="Edit camera name"
-          @click="changeCameraName"
-        />
-        <div v-else>
-          <CVicon
-            color="#c5c5c5"
-            style="display: inline-block;"
-            :hover="true"
-            text="mdi-content-save"
-            tooltip="Save Camera Name"
-            @click="saveCameraNameChange"
-          />
-          <CVicon
-            color="error"
-            style="display: inline-block;"
-            :hover="true"
-            text="mdi-close"
-            tooltip="Discard Changes"
-            @click="discardCameraNameChange"
-          />
-        </div>
-      </v-col>
       <v-col
         cols="10"
         md="5"
@@ -267,17 +225,16 @@ export default {
     },
     data: () => {
         return {
-            re: RegExp("^[A-Za-z0-9_ \\-)(]*[A-Za-z0-9][A-Za-z0-9_ \\-)(.]*$"),
-            isCameraNameEdit: false,
-            newCameraName: "",
-            cameraNameError: "",
             isPipelineNameEdit: false,
             namingDialog: false,
             newPipelineName: "",
             duplicateDialog: false,
             showPipeTypeDialog: false,
             proposedPipelineType : 0,
             pipeIndexToDuplicate: undefined,
+            showPipeImportDialog: false,
+            pipelineImportData: undefined,
+            importedPipelineName: "",
             snack: false,
             snackbar: {
               color: "success",
@@ -286,25 +243,10 @@ export default {
         }
     },
     computed: {
-        checkCameraName() {
-            if (this.newCameraName !== this.$store.getters.cameraList[this.currentCameraIndex]) {
-                if (this.re.test(this.newCameraName)) {
-                    for (let cam in this.cameraList) {
-                        if (this.cameraList.hasOwnProperty(cam)) {
-                            if (this.newCameraName === this.cameraList[cam]) {
-                                return "A camera by that name already exists"
-                            }
-                        }
-                    }
-                } else {
-                    return "A camera name can only contain letters, numbers, and spaces"
-                }
-            }
-            return "";
-        },
         checkPipelineName() {
             if (this.newPipelineName !== this.$store.getters.pipelineList[this.currentPipelineIndex - 1] || !this.isPipelineNameEdit) {
-                if (this.re.test(this.newPipelineName)) {
+                const pipelineNameChangeRegex = RegExp("^[A-Za-z0-9_ \\-)(]*[A-Za-z0-9][A-Za-z0-9_ \\-)(.]*$")
+                if (pipelineNameChangeRegex.test(this.newPipelineName)) {
                     for (let pipe in this.$store.getters.pipelineList) {
                         if (this.$store.getters.pipelineList.hasOwnProperty(pipe)) {
                             if (this.newPipelineName === this.$store.getters.pipelineList[pipe]) {
@@ -435,6 +377,11 @@ export default {
             this.newPipelineName = "";
         },
     }
-
 }
 </script>
+
+<style>
+.v-application .headline {
+  font-family: 'Prompt', sans-serif !important;
+}
+</style>

photon-client/src/views/CamerasView.vue

@@ -16,25 +16,71 @@
         >
           <v-card-title>Camera Settings</v-card-title>
           <div class="ml-5">
-            <CVselect
-              v-model="currentCameraIndex"
-              name="Camera"
-              :list="$store.getters.cameraList"
-              :select-cols="$vuetify.breakpoint.mdAndUp ? 10 : 7"
-              @input="handleInput('currentCamera',currentCameraIndex)"
-            />
+            <v-row>
+              <v-col cols="10">
+                <CVselect
+                  v-if="!cameraNicknameEditInProgress"
+                  v-model="currentCameraIndex"
+                  name="Camera"
+                  :list="$store.getters.cameraList"
+                  :select-cols="$vuetify.breakpoint.mdAndUp ? 9 : 7"
+                  @input="handleInput('currentCamera', currentCameraIndex)"
+                />
+                <CVinput
+                  v-else
+                  v-model="cameraTempNameValue"
+                  name="Camera"
+                  :error-message="checkCameraName"
+                  :input-cols="$vuetify.breakpoint.mdAndUp ? 9 : 7"
+                />
+              </v-col>
+              <v-col
+                v-if="!cameraNicknameEditInProgress"
+                cols="2"
+                style="display: flex; align-items: center"
+              >
+                <CVicon
+                  color="#c5c5c5"
+                  :hover="true"
+                  style="padding-left: 8px"
+                  text="mdi-pencil"
+                  tooltip="Edit camera name"
+                  @click="changeCameraName"
+                />
+              </v-col>
+              <v-col
+                v-else
+                style="display: flex; align-items: center; justify-content: space-around"
+              >
+                <CVicon
+                  :hover="true"
+                  :disabled="cameraNicknameChangeDisabled"
+                  text="mdi-content-save"
+                  tooltip="Save Changes"
+                  @click="saveCameraNicknameChange"
+                />
+                <CVicon
+                  color="error"
+                  :hover="true"
+                  text="mdi-close"
+                  tooltip="Discard Changes"
+                  @click="() => cameraNicknameEditInProgress = false"
+                />
+              </v-col>
+            </v-row>
             <CVnumberinput
               v-model="cameraSettings.fov"
               :tooltip="cameraSettings.isFovConfigurable ? 'Field of view (in degrees) of the camera measured across the diagonal of the frame, in a video mode which covers the whole sensor area.' : 'This setting is managed by a vendor'"
               name="Maximum Diagonal FOV"
               :disabled="!cameraSettings.isFovConfigurable"
-              :label-cols="$vuetify.breakpoint.mdAndUp ? undefined : 7"
+              :label-cols="$vuetify.breakpoint.mdAndUp ? 4 : 7"
             />
             <br>
             <v-btn
               style="margin-top:10px"
               small
               color="secondary"
+              :disabled="cameraNicknameEditInProgress"
               @click="sendCameraSettings"
             >
               <v-icon left>
@@ -419,10 +465,14 @@ import CVimage from "../components/common/cv-image";
 import TooltippedLabel from "../components/common/cv-tooltipped-label";
 import jsPDF from "jspdf";
 import "../jsPDFFonts/Prompt-Regular-normal.js";
+import CVicon from "@/components/common/cv-icon.vue";
+import CVinput from "@/components/common/cv-input.vue";
 
 export default {
     name: 'Cameras',
     components: {
+      CVinput,
+      CVicon,
         TooltippedLabel,
         CVselect,
         CVnumberinput,
@@ -432,7 +482,8 @@ export default {
     },
     data() {
         return {
-            calibrationDialog: false,
+            cameraNicknameEditInProgress : false,
+            cameraTempNameValue: "",
             calibrationInProgress: false,
             calibrationFailed: false,
             filteredVideomodeIndex: 0,
@@ -603,8 +654,50 @@ export default {
                 this.$store.commit('mutateCalibrationState', {['videoModeIndex']: this.filteredResolutionList[i].index});
             }
         },
+        cameraNicknameChangeDisabled() {
+          if(this.checkCameraName !== '') return true;
+          if(this.cameraTempNameValue === this.$store.getters.cameraList[this.currentCameraIndex]) return true;
+          return false;
+        },
+        checkCameraName() {
+          if (this.cameraTempNameValue !== this.$store.getters.cameraList[this.currentCameraIndex]) {
+            const cameraNameRegex = RegExp("^[A-Za-z0-9_ \\-)(]*[A-Za-z0-9][A-Za-z0-9_ \\-)(.]*$")
+            if (cameraNameRegex.test(this.cameraTempNameValue)) {
+              for (let cam in this.cameraList) {
+                if (this.cameraList.hasOwnProperty(cam)) {
+                  if (this.cameraTempNameValue === this.cameraList[cam]) {
+                    return "A camera by that name already exists"
+                  }
+                }
+              }
+            } else {
+              return "Please enter a valid camera name. It should only contain letters, numbers, underscores, hyphens, parentheses, and periods."
+            }
+          }
+          return "";
+        }
     },
     methods: {
+        changeCameraName() {
+          this.cameraTempNameValue = this.$store.getters.cameraList[this.currentCameraIndex];
+          this.cameraNicknameEditInProgress = true
+        },
+        saveCameraNicknameChange() {
+          // This should already be handled but just to be safe
+          if(this.checkCameraName !== "") return;
+
+          this.axios.post('http://' + this.$address + '/api/setCameraNickname',
+              {name: this.cameraTempNameValue, cameraIndex: this.$store.getters.currentCameraIndex})
+              .then(() => {
+                this.$emit('camera-name-changed')
+              })
+              .catch(e => {
+                console.log("HTTP error while changing camera name " + e);
+                this.$emit('camera-name-changed')
+              })
+
+          this.cameraNicknameEditInProgress = false;
+        },
         readImportedCalibration(event) {
             // let formData = new FormData();
             // formData.append("zipData", event.target.files[0]);

photon-client/src/views/SettingsView.vue

@@ -15,7 +15,7 @@
           class="mb-3 pr-6 pb-3"
           style="background-color: #006492;"
         >
-          <v-card-title>{{ item.name }}</v-card-title>
+          <v-card-title>{{ item.name.replaceAll("_", " ") }}</v-card-title>
           <component
             :is="item"
             class="ml-5"

photon-client/src/views/SettingsViews/DeviceControl.vue

@@ -202,7 +202,7 @@ import CVselect from "../../components/common/cv-select";
 
 export default {
   // eslint-disable-next-line
-  name: "DeviceControl",
+  name: "Device_Control",
   components: {
     CVselect
   },

photon-client/src/views/SettingsViews/Lighting.vue

@@ -17,7 +17,7 @@
 
     export default {
         // eslint-disable-next-line
-        name: 'LEDControl',
+        name: 'LED_Control',
         components: {
             CVslider,
         },