csm info in webapp tab

webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="CSMCalibrationSettings">
+  <div v-observe-visibility="visibilityChanged" id="CSMCalibrationSettings">
     <!--Show auto calibrate if default plugin is enabled-->
     <div v-if="'calibrate_xy' in actions" class="uk-margin-small">
       <action-button
@@ -26,6 +26,9 @@
     >
       Download calibration data
     </button>
+    <p v-if="this.csmMatrix!='undefined'">Current CSM matrix: {{ csmMatrix }} at a resolution of {{ csmResolution }} <br>
+    This means that one motor step is roughly {{ csmRatio }} pixels <br>
+    The full field of view is roughly {{ csmFOV }} motor steps</p>
   </div>
 </template>
 
@@ -47,6 +50,16 @@ export default {
       default: true
     }
   },
+  
+  data() {
+    return {
+      csmMatrix: "undefined",
+      csmResolution: "undefined",
+      csmRatio: "undefined"
+    };
+  },
+
+
 
   computed: {
     actions() {
@@ -60,6 +73,11 @@ export default {
   },
 
   methods: {
+    visibilityChanged(isVisible) {
+      if (isVisible) {
+        this.updateDisplayedCSM();
+      }
+    },
     getCalibrationData: async function() {
       try {
         let data = await this.readThingProperty(
@@ -80,9 +98,33 @@ export default {
         this.modalError(error); // Let mixin handle error
       }
     },
-
+    updateDisplayedCSM: async function() {
+      let csmMatrix = await this.readThingProperty(
+          "camera_stage_mapping",
+          "image_to_stage_displacement_matrix"
+        );
+      this.csmResolution = await this.readThingProperty(
+        "camera_stage_mapping",
+        "image_resolution"
+      );
+      let streamResolution = await this.readThingProperty(
+        "camera",
+        "stream_resolution"
+      );
+      csmMatrix[0][0] = Number(csmMatrix[0][0].toFixed(3));
+      csmMatrix[0][1] = Number(csmMatrix[0][1].toFixed(3));
+      csmMatrix[1][0] = Number(csmMatrix[1][0].toFixed(3));
+      csmMatrix[1][1] = Number(csmMatrix[1][1].toFixed(3));
+      this.csmMatrix = csmMatrix;
+      this.csmRatio = Number((Math.abs(csmMatrix[1][0]) + Math.abs(csmMatrix[0][1])) / 2).toFixed(3);
+      this.csmFOV = [
+        Number((streamResolution[0]**2 * this.csmRatio / this.csmResolution[1]).toFixed(0)),
+        Number((streamResolution[1]**2 * this.csmRatio / this.csmResolution[0]).toFixed(0)),
+      ]
+    },
     onRecalibrateResponse: function() {
       this.modalNotify("Finished stage-to-camera calibration.");
+      this.updateDisplayedCSM();
     }
   }
 };