From 2ae750f00f7fe4db4bb683f03f0dac29dbeb231f Mon Sep 17 00:00:00 2001
From: Matt <matthew.morley.ca@gmail.com>
Date: Sat, 21 Nov 2020 18:14:27 -0800
Subject: [PATCH] Add modal and animations while calibration is running (#157)

* Add modal for calibration

* Run wpiformat
---
 photon-client/src/views/CamerasView.vue       | 157 +++++++++++-------
 .../photonvision/server/RequestHandler.java   |   2 +
 .../vision/pipeline/Calibrate3dPipeline.java  |  11 ++
 3 files changed, 111 insertions(+), 59 deletions(-)

diff --git a/photon-client/src/views/CamerasView.vue b/photon-client/src/views/CamerasView.vue
index 5b385ee3f..b16a31d8f 100644
--- a/photon-client/src/views/CamerasView.vue
+++ b/photon-client/src/views/CamerasView.vue
@@ -143,7 +143,7 @@
                         v-for="(value, index) in filteredResolutionList"
                         :key="index"
                       >
-                        <td> {{ value.width }} X {{ value.height }} </td>
+                        <td> {{ value.width }} X {{ value.height }}</td>
                         <td>
                           {{ isCalibrated(value) ? value.mean.toFixed(2) + "px" : "—" }}
                         </td>
@@ -218,7 +218,7 @@
                   :disabled="checkCancellation"
                   @click="sendCalibrationFinish"
                 >
-                  {{ hasEnough ? "End Calibration" : "Cancel Calibration" }}
+                  {{ hasEnough ? "Finish Calibration" : "Cancel Calibration" }}
                 </v-btn>
               </v-col>
               <v-col>
@@ -250,21 +250,72 @@
         cols="12"
         md="5"
       >
-        <CVimage
-          :address="$store.getters.streamAddress[1]"
-          :disconnected="!$store.state.backendConnected"
-          scale="100"
-          style="border-radius: 5px;"
-        />
+        <template>
+          <CVimage
+            :address="$store.getters.streamAddress[1]"
+            :disconnected="!$store.state.backendConnected"
+            scale="100"
+            style="border-radius: 5px;"
+          />
+          <v-dialog
+            v-model="snack"
+            width="500px"
+            persistent="true"
+          >
+            <v-card
+              color="primary"
+              dark
+            >
+              <v-card-title> Camera Calibration </v-card-title>
+              <div
+                class="ml-3"
+              >
+                <v-col align="center">
+                  <template v-if="calibrationInProgress">
+                    <v-progress-circular
+                      indeterminate
+                      :size="70"
+                      :width="8"
+                      color="accent"
+                    />
+                    <v-card-text>Camera is being calibrated. This process make take several minutes...</v-card-text>
+                  </template>
+                  <template v-else-if="!calibrationFailed">
+                    <v-icon
+                      color="green"
+                      size="70"
+                    >
+                      mdi-check-bold
+                    </v-icon>
+                    <v-card-text>Camera has been successfully calibrated at {{ stringResolutionList[selectedFilteredResIndex] }}!</v-card-text>
+                  </template>
+                  <template v-else>
+                    <v-icon
+                      color="red"
+                      size="70"
+                    >
+                      mdi-close
+                    </v-icon>
+                    <v-card-text>Camera calibration failed! Make sure that the photos are taken such that the rainbow grid circles align with the corners of the chessboard, and try again. More information is available in the program logs.</v-card-text>
+                  </template>
+                </v-col>
+              </div>
+              <v-card-actions>
+                <v-spacer />
+                <v-btn
+                  v-if="!calibrationInProgress"
+                  color="white"
+                  text
+                  @click="closeDialog"
+                >
+                  OK
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
+        </template>
       </v-col>
     </v-row>
-    <v-snackbar
-      v-model="snack"
-      top
-      :color="snackbar.color"
-    >
-      <span>{{ snackbar.text }}</span>
-    </v-snackbar>
   </div>
 </template>
 
@@ -278,7 +329,7 @@ import TooltippedLabel from "../components/common/cv-tooltipped-label";
 export default {
     name: 'Cameras',
     components: {
-      TooltippedLabel,
+        TooltippedLabel,
         CVselect,
         CVnumberinput,
         CVslider,
@@ -286,11 +337,9 @@ export default {
     },
     data() {
         return {
-            snackbar: {
-                color: "success",
-                text: ""
-            },
             snack: false,
+            calibrationInProgress: false,
+            calibrationFailed: false,
             filteredVideomodeIndex: undefined,
         }
     },
@@ -325,7 +374,7 @@ export default {
                     if (!filtered.some(e => e.width === it.width && e.height === it.height)) {
                         it['index'] = i;
                         const calib = this.getCalibrationCoeffs(it);
-                        if(calib != null) {
+                        if (calib != null) {
                             it['standardDeviation'] = calib.standardDeviation;
                             it['mean'] = calib.perViewErrors.reduce((a, b) => a + b) / calib.perViewErrors.length;
                         }
@@ -421,12 +470,16 @@ export default {
         },
     },
     methods: {
-
+        closeDialog() {
+            this.snack = false;
+            this.calibrationInProgress = false;
+            this.calibrationFailed = false;
+        },
         getCalibrationCoeffs(resolution) {
             const calList = this.$store.getters.calibrationList;
             let ret = null;
             calList.forEach(cal => {
-                if(cal.width === resolution.width && cal.height === resolution.height) {
+                if (cal.width === resolution.width && cal.height === resolution.height) {
                     ret = cal
                 }
             });
@@ -475,34 +528,19 @@ export default {
         sendCalibrationFinish() {
             console.log("finishing calibration for index " + this.$store.getters.currentCameraIndex);
 
-            this.snackbar.text = "Calibrating...";
-            this.snackbar.color = "secondary";
             this.snack = true;
+            this.calibrationInProgress = true;
 
             this.axios.post("http://" + this.$address + "/api/settings/endCalibration", this.$store.getters.currentCameraIndex)
                 .then((response) => {
-                    if (response.status === 200) {
-                        this.snackbar = {
-                            color: "success",
-                            text: "Calibration successful! \n" +
-                                "Standard deviation: " + response.data.toFixed(5)
-                        };
-                        this.snack = true;
+                        if (response.status === 200) {
+                            this.calibrationInProgress = false;
+                        } else {
+                            this.calibrationFailed = true;
+                        }
                     }
-                    else {
-                        this.snackbar = {
-                            color: "error",
-                            text: "Calibration Failed!"
-                        };
-                        this.snack = true;
-                    }
-                }
-            ).catch(() => {
-                this.snackbar = {
-                    color: "error",
-                    text: "Calibration Failed!"
-                };
-                this.snack = true;
+                ).catch(() => {
+                    this.calibrationFailed = true;
             });
         }
     }
@@ -510,18 +548,19 @@ export default {
 </script>
 
 <style scoped>
-    .v-data-table {
-        text-align: center;
-        background-color: transparent !important;
-        width: 100%;
-        height: 100%;
-        overflow-y: auto;
-    }
-    .v-data-table th {
-        background-color: #006492 !important;
-    }
+.v-data-table {
+    text-align: center;
+    background-color: transparent !important;
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+}
 
-    .v-data-table th,td {
-        font-size: 1rem !important;
-    }
+.v-data-table th {
+    background-color: #006492 !important;
+}
+
+.v-data-table th, td {
+    font-size: 1rem !important;
+}
 </style>
\ No newline at end of file
diff --git a/photon-server/src/main/java/org/photonvision/server/RequestHandler.java b/photon-server/src/main/java/org/photonvision/server/RequestHandler.java
index 2109e63ef..1c73b2b75 100644
--- a/photon-server/src/main/java/org/photonvision/server/RequestHandler.java
+++ b/photon-server/src/main/java/org/photonvision/server/RequestHandler.java
@@ -162,6 +162,7 @@ public class RequestHandler {
     }
 
     public static void onCalibrationEnd(Context ctx) {
+        logger.info("Calibrating camera! This will take a long time...");
         var index = Integer.parseInt(ctx.body());
         var calData = VisionModuleManager.getInstance().getModule(index).endCalibration();
         if (calData == null) {
@@ -171,6 +172,7 @@ public class RequestHandler {
 
         ctx.result(String.valueOf(calData.standardDeviation));
         ctx.status(200);
+        logger.info("Camera calibrated!");
     }
 
     public static void restartDevice(Context ctx) {
diff --git a/photon-server/src/main/java/org/photonvision/vision/pipeline/Calibrate3dPipeline.java b/photon-server/src/main/java/org/photonvision/vision/pipeline/Calibrate3dPipeline.java
index 40adfbb01..d1ec08b8b 100644
--- a/photon-server/src/main/java/org/photonvision/vision/pipeline/Calibrate3dPipeline.java
+++ b/photon-server/src/main/java/org/photonvision/vision/pipeline/Calibrate3dPipeline.java
@@ -60,6 +60,8 @@ public class Calibrate3dPipeline
 
     private int minSnapshots;
 
+    private boolean calibrating = false;
+
     public Calibrate3dPipeline() {
         this(25);
     }
@@ -89,6 +91,11 @@ public class Calibrate3dPipeline
         // Set the pipe parameters
         setPipeParams(frame.frameStaticProperties, settings);
 
+        if (this.calibrating) {
+            return new CVPipelineResult(
+                    0, null, new Frame(new CVMat(frame.image.getMat()), frame.frameStaticProperties));
+        }
+
         long sumPipeNanosElapsed = 0L;
 
         // Check if the frame has chessboard corners
@@ -131,10 +138,14 @@ public class Calibrate3dPipeline
             return null;
         }
 
+        this.calibrating = true;
+
         /*Pass the board corners to the pipe, which will check again to see if all boards are valid
         and returns the corresponding image and object points*/
         calibrationOutput = calibrate3dPipe.run(foundCornersList);
 
+        this.calibrating = false;
+
         return calibrationOutput.output;
     }