[PhotonClient] Update dependencies to latest, update assets, and styling fixes (#767)

Currently, there is a difficult-to-reproduce bug where the backend reports that camera calibration was successful in logs via the logger but then throws an exception causing the backend to return a 500 error code with no request body which causes the frontend to interpret this as a failed calibration attempt. This ultimately leads to the entire instance of photonvision crashing and requiring the entire pi to be restarted. It is believed this issue resides inside the ConfigManager's saving action following the calibration update but is not confirmed.
2026-06-22 01:11:40 +00:00 · 2023-06-09 13:09:41 -04:00
parent f63283e187
commit 7b8fb3385b
46 changed files with 7764 additions and 19050 deletions
--- a/photon-client/src/components/common/cv-image.vue
+++ b/photon-client/src/components/common/cv-image.vue
@@ -7,7 +7,7 @@
    :alt="alt"
    @click="clickHandler"
    @error="loadErrHandler"
-  />
+  >
 </template>

 <script>
@@ -34,7 +34,7 @@
                      "margin-right": "auto",
                      "max-height": this.maxHeight,
                      height: `${this.scale}%`,
-                      cursor: (this.colorPicking ? `url(${require("../../assets/eyedropper.svg")}),` : "pointer") + "default",
+                      cursor: (this.colorPicking ? `url(${require("../../assets/icons/eyedropper.svg")}),` : "pointer") + "default",
                    };

                    if (this.$vuetify.breakpoint.xl) {
@@ -50,10 +50,10 @@
            },
            src: {
              get() {
-                var port = this.getCurPort();
+                const port = this.getCurPort();
                if(port <= 0){
-                  //Invalid port, keep it spinny
-                  return require("../../assets/loading.gif");
+                  //Invalid port, keep it spiny
+                  return require("../../../public/loading.svg");
                } else {
                  //Valid port, connect
                  return this.getSrcURLFromPort(port);
@@ -66,13 +66,13 @@
        },
        methods: {
            getCurPort(){
-              var port = -1;
+              let port = -1;
              if(this.disconnected){
                //Disconnected, port is unknown.
                port = -1;
              } else {
                //Connected - get the port
-                if(this.id == 'raw-stream'){
+                if(this.id === 'raw-stream'){
                  port = this.$store.state.cameraSettings[this.$store.state.currentCameraIndex].inputStreamPort
                } else {
                  port = this.$store.state.cameraSettings[this.$store.state.currentCameraIndex].outputStreamPort
@@ -92,7 +92,7 @@
              if(this.colorPicking){
                this.$emit('click', event);
              } else {
-                var port = this.getCurPort();
+                const port = this.getCurPort();
                if(port <= 0){
                  console.log("No valid port, ignoring click.");
                } else {
--- a/photon-client/src/components/common/cv-input.vue
+++ b/photon-client/src/components/common/cv-input.vue
@@ -4,7 +4,7 @@
      dense
      align="center"
    >
-      <v-col :cols="12 - (inputCols || 8)">
+      <v-col :cols="labelCols || (12 - (inputCols || 8))">
        <tooltipped-label
          :tooltip="tooltip"
          :text="name"
@@ -36,7 +36,7 @@
          TooltippedLabel
        },
        // eslint-disable-next-line vue/require-prop-types
-        props: ['name', 'value', 'disabled', 'errorMessage', 'inputCols', 'rules', 'tooltip'],
+        props: ['name', 'value', 'disabled', 'errorMessage', 'inputCols', 'labelCols', 'rules', 'tooltip'],
        data() {
            return {}
        },
--- a/photon-client/src/components/common/cv-range-slider.vue
+++ b/photon-client/src/components/common/cv-range-slider.vue
@@ -106,7 +106,7 @@ export default {

      await this.delay(200).then(() => {
        let i = 0;
-        if (this.prependFocused === false && this.appendFocused === true) {
+        if (!this.prependFocused && this.appendFocused) {
          i = 1;
        }

--- a/photon-client/src/components/pipeline/3D/MiniMap.vue
+++ b/photon-client/src/components/pipeline/3D/MiniMap.vue
@@ -8,7 +8,7 @@
        align="center"
        cols="12"
      >
-        <span class="white--text">Target Location</span>
+        <span class="white--text">Target Visualization</span>
      </v-col>
    </v-row>
    <v-row>
@@ -22,19 +22,17 @@
          style="width:100%;height:100%"
        />
      </v-col>
-      <v-row>
-        <v-col>
+      <v-row style="margin-bottom: 24px">
+        <v-col style="display: flex; justify-content: center">
          <v-btn
-            class="ml-10"
            color="secondary"
            @click="resetCamFirstPerson"
          >
            First Person
          </v-btn>
        </v-col>
-        <v-col>
+        <v-col style="display: flex; justify-content: center">
          <v-btn
-            class="ml-10"
            color="secondary"
            @click="resetCamThirdPerson"
          >
@@ -57,11 +55,13 @@ import {
  PerspectiveCamera,
  Quaternion,
  Scene,
-  TrackballControls,
  Vector3,
    Color,
  WebGLRenderer
-} from "three-full";
+} from "three";
+
+// This import conflicts with Three.js docs but is required for the build to succeed
+import { TrackballControls } from "three/examples/jsm/controls/TrackballControls"

 export default {
  name: "MiniMap",
@@ -138,7 +138,7 @@ export default {
    this.refFrameCues.push(camBody)
    this.refFrameCues.push(camLens)

-    var controls = new TrackballControls(
+    const controls = new TrackballControls(
        camera,
        renderer.domElement
    );
@@ -231,7 +231,7 @@ export default {
    },

    onWindowResize() {
-      var container = document.getElementById("MapContainer")
+      const container = document.getElementById("MapContainer");
      if(container){
        this.canvas.width = container.clientWidth * 0.95;
        this.canvas.height = container.clientWidth * 0.85;
--- a/photon-client/src/components/pipeline/CameraAndPipelineSelect.vue
+++ b/photon-client/src/components/pipeline/CameraAndPipelineSelect.vue
@@ -2,7 +2,7 @@
  <div>
    <v-row
      align="center"
-      class="pl-6"
+      style="padding: 12px 12px 12px 24px"
    >
      <v-col
        cols="10"
@@ -31,12 +31,13 @@
        cols="2"
        md="1"
        lg="2"
+        class="pl-5"
      >
        <CVicon
          v-if="isCameraNameEdit === false"
          color="#c5c5c5"
          :hover="true"
-          text="edit"
+          text="mdi-pencil"
          tooltip="Edit camera name"
          @click="changeCameraName"
        />
@@ -45,7 +46,7 @@
            color="#c5c5c5"
            style="display: inline-block;"
            :hover="true"
-            text="save"
+            text="mdi-content-save"
            tooltip="Save Camera Name"
            @click="saveCameraNameChange"
          />
@@ -53,7 +54,7 @@
            color="error"
            style="display: inline-block;"
            :hover="true"
-            text="close"
+            text="mdi-close"
            tooltip="Discard Changes"
            @click="discardCameraNameChange"
          />
@@ -79,6 +80,7 @@
        cols="2"
        md="1"
        lg="2"
+        class="pl-5"
      >
        <v-menu
          v-if="!$store.getters.isDriverMode"
@@ -90,7 +92,7 @@
              color="#c5c5c5"
              v-on="on"
            >
-              menu
+              mdi-menu
            </v-icon>
          </template>
          <v-list
@@ -103,7 +105,7 @@
                <CVicon
                  color="#c5c5c5"
                  :right="true"
-                  text="edit"
+                  text="mdi-pencil"
                  tooltip="Edit pipeline name"
                />
              </v-list-item-title>
@@ -113,7 +115,7 @@
                <CVicon
                  color="#c5c5c5"
                  :right="true"
-                  text="add"
+                  text="mdi-plus"
                  tooltip="Add new pipeline"
                />
              </v-list-item-title>
@@ -123,7 +125,7 @@
                <CVicon
                  color="red darken-2"
                  :right="true"
-                  text="delete"
+                  text="mdi-delete"
                  tooltip="Delete pipeline"
                />
              </v-list-item-title>
@@ -249,156 +251,156 @@ import CVselect from '../common/cv-select'
 import CVinput from '../common/cv-input'

 export default {
-  name: "CameraAndPipelineSelect",
-  components: {
-    CVicon,
-    CVselect,
-    CVinput
-  },
-  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
-    }
-  },
-  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"
-              }
+    name: "CameraAndPipelineSelect",
+    components: {
+        CVicon,
+        CVselect,
+        CVinput
+    },
+    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
+        }
+    },
+    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"
+                }
            }
-          }
-        } 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 === false) {
-        if (this.re.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]) {
-                return "A pipeline with this name already exists"
-              }
+            return "";
+        },
+        checkPipelineName() {
+            if (this.newPipelineName !== this.$store.getters.pipelineList[this.currentPipelineIndex - 1] || !this.isPipelineNameEdit) {
+                if (this.re.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]) {
+                                return "A pipeline with this name already exists"
+                            }
+                        }
+                    }
+                } else {
+                    return "A pipeline name can only contain letters, numbers, and spaces"
+                }
+            }
+            return ""
+        },
+        currentCameraIndex: {
+            get() {
+                return this.$store.getters.currentCameraIndex;
+            },
+            set(value) {
+                this.$store.commit('currentCameraIndex', value);
+            }
+        },
+        currentPipelineIndex: {
+            get() {
+                return this.$store.getters.currentPipelineIndex + (this.$store.getters.isDriverMode ? 1 : 0);
+            },
+            set(value) {
+                this.$store.commit('currentPipelineIndex', value - (this.$store.getters.isDriverMode ? 1 : 0));
+            }
+        },
+        currentPipelineType: {
+            get() {
+                return this.$store.getters.currentPipelineSettings.pipelineType - 2;
+            },
+            set(value) {
+                value; // nop, since we have the dialog for this
            }
-          }
-        } else {
-          return "A pipeline name can only contain letters, numbers, and spaces"
        }
-      }
-      return ""
    },
-    currentCameraIndex: {
-      get() {
-        return this.$store.getters.currentCameraIndex;
-      },
-      set(value) {
-        this.$store.commit('currentCameraIndex', value);
-      }
-    },
-    currentPipelineIndex: {
-      get() {
-        return this.$store.getters.currentPipelineIndex + (this.$store.getters.isDriverMode ? 1 : 0);
-      },
-      set(value) {
-        this.$store.commit('currentPipelineIndex', value - (this.$store.getters.isDriverMode ? 1 : 0));
-      }
-    },
-    currentPipelineType: {
-      get() {
-        return this.$store.getters.currentPipelineSettings.pipelineType - 2;
-      },
-      set(value) {
-        value; // nop, since we have the dialog for this
-      }
+    methods: {
+        showTypeDialog(idx) {
+            // Only show the dialog if it's a new type
+            this.showPipeTypeDialog = idx !== this.currentPipelineType;
+            this.proposedPipelineType = idx;
+        },
+        changePipeType(actuallyChange) {
+            const newIdx = actuallyChange ? this.proposedPipelineType : this.currentPipelineType
+            this.handleInputWithIndex('pipelineType', newIdx);
+            this.showPipeTypeDialog = false;
+        },
+        changeCameraName() {
+            this.newCameraName = this.$store.getters.cameraList[this.currentCameraIndex];
+            this.isCameraNameEdit = true;
+        },
+        saveCameraNameChange() {
+            if (this.checkCameraName === "") {
+                // this.handleInputWithIndex("changeCameraName", this.newCameraName);
+                this.axios.post('http://' + this.$address + '/api/setCameraNickname',
+                    {name: this.newCameraName, cameraIndex: this.$store.getters.currentCameraIndex})
+                    // eslint-disable-next-line
+                    .then(r => {
+                        this.$emit('camera-name-changed')
+                    })
+                    .catch(e => {
+                        console.log("HTTP error while changing camera name " + e);
+                        this.$emit('camera-name-changed')
+                    })
+                this.discardCameraNameChange();
+            }
+        },
+        discardCameraNameChange() {
+            this.isCameraNameEdit = false;
+            this.newCameraName = "";
+        },
+        toPipelineNameChange() {
+            this.newPipelineName = this.$store.getters.pipelineList[this.currentPipelineIndex - 1];
+            this.isPipelineNameEdit = true;
+            this.namingDialog = true;
+        },
+        toCreatePipeline() {
+            this.newPipelineName = "New Pipeline";
+            this.isPipelineNameEdit = false;
+            this.namingDialog = true;
+        },
+        deleteCurrentPipeline() {
+            if (this.$store.getters.pipelineList.length > 1) {
+                this.handleInputWithIndex('deleteCurrentPipeline', {});
+            } else {
+                this.snackbar = true;
+            }
+        },
+        savePipelineNameChange() {
+            if (this.checkPipelineName === "") {
+                if (this.isPipelineNameEdit) {
+                    this.handleInputWithIndex("changePipelineName", this.newPipelineName);
+                } else {
+                    this.handleInputWithIndex("addNewPipeline", [this.newPipelineName, this.currentPipelineType]); // 0 for reflective, 1 for colored shape
+                }
+                this.discardPipelineNameChange();
+            }
+        },
+        duplicatePipeline() {
+            this.handleInputWithIndex("duplicatePipeline", this.currentPipelineIndex);
+        },
+        discardPipelineNameChange() {
+            this.namingDialog = false;
+            this.isPipelineNameEdit = false;
+            this.newPipelineName = "";
+        },
    }
-  },
-  methods: {
-    showTypeDialog(idx) {
-      // Only show the dialog if it's a new type
-      this.showPipeTypeDialog = idx !== this.currentPipelineType;
-      this.proposedPipelineType = idx;
-    },
-    changePipeType(actuallyChange) {
-      const newIdx = actuallyChange ? this.proposedPipelineType : this.currentPipelineType
-      this.handleInputWithIndex('pipelineType', newIdx);
-      this.showPipeTypeDialog = false;
-    },
-    changeCameraName() {
-      this.newCameraName = this.$store.getters.cameraList[this.currentCameraIndex];
-      this.isCameraNameEdit = true;
-    },
-    saveCameraNameChange() {
-      if (this.checkCameraName === "") {
-        // this.handleInputWithIndex("changeCameraName", this.newCameraName);
-        this.axios.post('http://' + this.$address + '/api/setCameraNickname',
-            {name: this.newCameraName, cameraIndex: this.$store.getters.currentCameraIndex})
-            // eslint-disable-next-line
-            .then(r => {
-              this.$emit('camera-name-changed')
-            })
-            .catch(e => {
-              console.log("HTTP error while changing camera name " + e);
-              this.$emit('camera-name-changed')
-            })
-        this.discardCameraNameChange();
-      }
-    },
-    discardCameraNameChange() {
-      this.isCameraNameEdit = false;
-      this.newCameraName = "";
-    },
-    toPipelineNameChange() {
-      this.newPipelineName = this.$store.getters.pipelineList[this.currentPipelineIndex - 1];
-      this.isPipelineNameEdit = true;
-      this.namingDialog = true;
-    },
-    toCreatePipeline() {
-      this.newPipelineName = "New Pipeline";
-      this.isPipelineNameEdit = false;
-      this.namingDialog = true;
-    },
-    deleteCurrentPipeline() {
-      if (this.$store.getters.pipelineList.length > 1) {
-        this.handleInputWithIndex('deleteCurrentPipeline', {});
-      } else {
-        this.snackbar = true;
-      }
-    },
-    savePipelineNameChange() {
-      if (this.checkPipelineName === "") {
-        if (this.isPipelineNameEdit) {
-          this.handleInputWithIndex("changePipelineName", this.newPipelineName);
-        } else {
-          this.handleInputWithIndex("addNewPipeline", [this.newPipelineName, this.currentPipelineType]); // 0 for reflective, 1 for colored shpae
-        }
-        this.discardPipelineNameChange();
-      }
-    },
-    duplicatePipeline() {
-      this.handleInputWithIndex("duplicatePipeline", this.currentPipelineIndex);
-    },
-    discardPipelineNameChange() {
-      this.namingDialog = false;
-      this.isPipelineNameEdit = false;
-      this.newPipelineName = "";
-    },
-  }

 }
 </script>