working cropping with fixed WPI tag detection

Author: GGreenix

photon-client/src/App.vue

@@ -76,24 +76,6 @@ if (!is_demo) {
   }
 }
 
-/* Custom scrollbar styles */
-::-webkit-scrollbar {
-  width: 12px;
-}
-
-::-webkit-scrollbar-track {
-  background: #232c37;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: #ffd843;
-  border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: #e4c33c;
-}
-
 .main-container {
   background-color: #232c37;
   padding: 0 !important;

photon-client/src/components/app/photon-camera-stream.vue

@@ -11,41 +11,27 @@ const props = defineProps<{
   id: string;
 }>();
 
-const emptyStreamSrc = "//:0";
 const streamSrc = computed<string>(() => {
   const port =
     useCameraSettingsStore().currentCameraSettings.stream[props.streamType === "Raw" ? "inputPort" : "outputPort"];
 
   if (!useStateStore().backendConnected || port === 0) {
-    return emptyStreamSrc;
+    return loadingImage;
   }
 
   return `http://${inject("backendHostname")}:${port}/stream.mjpg`;
 });
 const streamDesc = computed<string>(() => `${props.streamType} Stream View`);
 const streamStyle = computed<StyleValue>(() => {
   if (useStateStore().colorPickingMode) {
-    return { cursor: "crosshair" };
+    return { width: "100%", cursor: "crosshair" };
   }
 
-  return {};
-});
-
-const containerStyle = computed<StyleValue>(() => {
-  const resolution = useCameraSettingsStore().currentVideoFormat.resolution;
-  const rotation = useCameraSettingsStore().currentPipelineSettings.inputImageRotationMode;
-  if (rotation === 1 || rotation === 3) {
-    return {
-      aspectRatio: `${resolution.height}/${resolution.width}`
-    };
-  }
-  return {
-    aspectRatio: `${resolution.width}/${resolution.height}`
-  };
+  return { width: "100%" };
 });
 
 const overlayStyle = computed<StyleValue>(() => {
-  if (useStateStore().colorPickingMode || streamSrc.value == emptyStreamSrc) {
+  if (useStateStore().colorPickingMode || streamSrc.value == loadingImage) {
     return { display: "none" };
   } else {
     return {};
@@ -71,23 +57,13 @@ const handleFullscreenRequest = () => {
 const mjpgStream: any = ref(null);
 onBeforeUnmount(() => {
   if (!mjpgStream.value) return;
-  mjpgStream.value["src"] = emptyStreamSrc;
+  mjpgStream.value["src"] = "//:0";
 });
 </script>
 
 <template>
-  <div class="stream-container" :style="containerStyle">
-    <img :src="loadingImage" class="stream-loading" />
-    <img
-      v-show="streamSrc !== emptyStreamSrc"
-      :id="id"
-      ref="mjpgStream"
-      class="stream-video"
-      crossorigin="anonymous"
-      :src="streamSrc"
-      :alt="streamDesc"
-      :style="streamStyle"
-    />
+  <div class="stream-container">
+    <img :id="id" ref="mjpgStream" crossorigin="anonymous" :src="streamSrc" :alt="streamDesc" :style="streamStyle" />
     <div class="stream-overlay" :style="overlayStyle">
       <pv-icon
         icon-name="mdi-camera-image"
@@ -113,21 +89,7 @@ onBeforeUnmount(() => {
 
 <style scoped>
 .stream-container {
-  display: flex;
   position: relative;
-  width: 100%;
-}
-
-.stream-loading {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-
-.stream-video {
-  position: absolute;
-  width: 100%;
-  height: 100%;
 }
 
 .stream-overlay {

photon-client/src/components/app/photon-log-view.vue

@@ -27,7 +27,7 @@ const logs = computed<LogMessage[]>(() =>
         selectedLogLevels.value[message.level] &&
         message.message.toLowerCase().includes(searchQuery.value?.toLowerCase() || "") &&
         (timeInput.value === undefined ||
-          message.timestamp.getTime() >=
+          message.timestamp >=
             new Date().setHours(
               parseInt(timeInput.value.substring(0, 2)),
               parseInt(timeInput.value.substring(3, 5)),

photon-client/src/components/cameras/CameraCalibrationCard.vue

@@ -81,11 +81,15 @@ const patternHeight = ref(8);
 const boardType = ref<CalibrationBoardTypes>(CalibrationBoardTypes.Charuco);
 const useOldPattern = ref(false);
 const tagFamily = ref<CalibrationTagFamilies>(CalibrationTagFamilies.Dict_4X4_1000);
-
-// Emperical testing - with stack size limit of 1MB, we can handle at -least- 700k points
-const tooManyPoints = computed(
-  () => useStateStore().calibrationData.imageCount * patternWidth.value * patternHeight.value > 700000
-);
+const useMrCalRef = ref(true);
+const useMrCal = computed<boolean>({
+  get() {
+    return useMrCalRef.value && useSettingsStore().general.mrCalWorking;
+  },
+  set(value) {
+    useMrCalRef.value = value && useSettingsStore().general.mrCalWorking;
+  }
+});
 
 const downloadCalibBoard = () => {
   const doc = new JsPDF({ unit: "in", format: "letter" });
@@ -165,6 +169,7 @@ const startCalibration = () => {
     patternHeight: patternHeight.value,
     patternWidth: patternWidth.value,
     boardType: boardType.value,
+    useMrCal: useMrCal.value,
     useOldPattern: useOldPattern.value,
     tagFamily: tagFamily.value
   });
@@ -196,8 +201,6 @@ const endCalibration = () => {
     });
 };
 
-let drawAllSnapshots = ref(true);
-
 let showCalDialog = ref(false);
 let selectedVideoFormat = ref<VideoFormat | undefined>(undefined);
 const setSelectedVideoFormat = (format: VideoFormat) => {
@@ -248,7 +251,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
             <pv-select
               v-model="useStateStore().calibrationData.videoFormatIndex"
               label="Resolution"
-              :select-cols="8"
+              :select-cols="7"
               :disabled="isCalibrating"
               tooltip="Resolution to calibrate at (you will have to calibrate every resolution you use 3D mode on)"
               :items="getUniqueVideoResolutionStrings()"
@@ -259,14 +262,14 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
               label="Decimation"
               tooltip="Resolution to which camera frames are downscaled for detection. Calibration still uses full-res"
               :items="calibrationDivisors"
-              :select-cols="8"
+              :select-cols="7"
               @input="(v) => useCameraSettingsStore().changeCurrentPipelineSetting({ streamingFrameDivisor: v }, false)"
             />
             <pv-select
               v-model="boardType"
               label="Board Type"
               tooltip="Calibration board pattern to use"
-              :select-cols="8"
+              :select-cols="7"
               :items="['Chessboard', 'Charuco']"
               :disabled="isCalibrating"
             />
@@ -275,7 +278,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
               v-model="tagFamily"
               label="Tag Family"
               tooltip="Dictionary of aruco markers on the charuco board"
-              :select-cols="8"
+              :select-cols="7"
               :items="['Dict_4X4_1000', 'Dict_5X5_1000', 'Dict_6X6_1000', 'Dict_7X7_1000']"
               :disabled="isCalibrating"
             />
@@ -285,7 +288,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
               tooltip="Spacing between pattern features in inches"
               :disabled="isCalibrating"
               :rules="[(v) => v > 0 || 'Size must be positive']"
-              :label-cols="4"
+              :label-cols="5"
             />
             <pv-number-input
               v-show="boardType == CalibrationBoardTypes.Charuco"
@@ -294,42 +297,39 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
               tooltip="Size of the tag markers in inches must be smaller than pattern spacing"
               :disabled="isCalibrating"
               :rules="[(v) => v > 0 || 'Size must be positive']"
-              :label-cols="4"
+              :label-cols="5"
             />
             <pv-number-input
               v-model="patternWidth"
               label="Board Width (squares)"
               tooltip="Width of the board in dots or chessboard squares"
               :disabled="isCalibrating"
               :rules="[(v) => v >= 4 || 'Width must be at least 4']"
-              :label-cols="4"
+              :label-cols="5"
             />
             <pv-number-input
               v-model="patternHeight"
               label="Board Height (squares)"
               tooltip="Height of the board in dots or chessboard squares"
               :disabled="isCalibrating"
               :rules="[(v) => v >= 4 || 'Height must be at least 4']"
-              :label-cols="4"
+              :label-cols="5"
             />
             <pv-switch
               v-show="boardType == CalibrationBoardTypes.Charuco"
               v-model="useOldPattern"
               label="Old OpenCV Pattern"
               :disabled="isCalibrating"
               tooltip="If enabled, Photon will use the old OpenCV pattern for calibration."
-              :label-cols="4"
+              :label-cols="5"
+            />
+            <pv-switch
+              v-model="useMrCal"
+              label="Try using MrCal over OpenCV"
+              :disabled="!useSettingsStore().general.mrCalWorking || isCalibrating"
+              tooltip="If enabled, Photon will (try to) use MrCal instead of OpenCV for camera calibration."
+              :label-cols="5"
             />
-            <v-banner
-              v-show="useSettingsStore().general.mrCalWorking"
-              rounded
-              color="secondary"
-              text-color="white"
-              class="mt-3"
-              icon="mdi-alert-circle-outline"
-            >
-              Mrcal was successfully loaded, and will be used!
-            </v-banner>
             <v-banner
               v-show="!useSettingsStore().general.mrCalWorking"
               rounded
@@ -418,17 +418,12 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
           </v-col>
         </v-row>
         <v-row>
-          <v-col v-if="tooManyPoints" :cols="12">
-            <v-banner rounded color="red" text-color="white" class="mt-3" icon="mdi-alert-circle-outline">
-              Too many corners - finish calibration now!
-            </v-banner>
-          </v-col>
           <v-col :cols="6">
             <v-btn
               small
               color="secondary"
               style="width: 100%"
-              :disabled="!settingsValid || tooManyPoints"
+              :disabled="!settingsValid"
               @click="isCalibrating ? useCameraSettingsStore().takeCalibrationSnapshot() : startCalibration()"
             >
               <v-icon left class="calib-btn-icon"> {{ isCalibrating ? "mdi-camera" : "mdi-flag-outline" }} </v-icon>
@@ -468,16 +463,6 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
             </v-btn>
           </v-col>
         </v-row>
-        <v-row v-if="isCalibrating" style="display: flex; flex-direction: column">
-          <pv-switch
-            v-model="drawAllSnapshots"
-            class="pt-2"
-            label="Draw Collected Corners"
-            :switch-cols="8"
-            tooltip="Draw all snapshots"
-            @input="(args) => useCameraSettingsStore().changeCurrentPipelineSetting({ drawAllSnapshots: args }, false)"
-          />
-        </v-row>
       </div>
     </v-card>
     <v-dialog v-model="showCalibEndDialog" width="500px" :persistent="true">