From 8799ebbaab4cb239e19741dc17ed6a37feacdb1f Mon Sep 17 00:00:00 2001
From: Joe Knapper <jaknapper@hotmail.com>
Date: Thu, 5 Sep 2024 17:41:53 +0100
Subject: [PATCH 1/3] csm info in webapp tab

---
 .../CSMCalibrationSettings.vue                | 46 ++++++++++++++++++-
 1 file changed, 44 insertions(+), 2 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
index 5c9d02c4..10b73ab1 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
+++ b/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();
     }
   }
 };

From b66912ac8ffbb8bba7f4908dd5a965419441e556 Mon Sep 17 00:00:00 2001
From: jaknapper <jaknapper@hotmail.com>
Date: Wed, 21 May 2025 15:56:04 +0100
Subject: [PATCH 2/3] CSM settings hidden by default in a details section

---
 .../CSMCalibrationSettings.vue                      | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
index 10b73ab1..b9386616 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
@@ -26,9 +26,16 @@
     >
       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 v-if="this.csmMatrix!='undefined'" style="margin:10px;">
+    <details><summary>Calibration Details</summary>
+    <strong>CSM calculated for images with a resolution of {{ csmResolution }}</strong>
+    <ul>
+    <li>Current CSM Matrix: <tt>{{ csmMatrix }}</tt></li>
+    <li>Pixels per motor step: {{ csmRatio }}</li>
+    <li>Full field of view: {{ csmFOV }} motor steps</li>
+    </ul>
+    </details>
+    </div>
   </div>
 </template>
 

From c0cf95bac1c61f14de12f4e7b045b2e4fbac3ee3 Mon Sep 17 00:00:00 2001
From: jaknapper <jaknapper@hotmail.com>
Date: Wed, 21 May 2025 15:56:50 +0100
Subject: [PATCH 3/3] Widen the info area of the CSM tab to use space more
 efficiently and not break lines (tested on three screens)

---
 .../tabContentComponents/settingsComponents/CSMSettings.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
index adf0c863..266fe485 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
@@ -4,7 +4,7 @@
     class="uk-grid uk-grid-divider uk-child-width-expand"
     uk-grid
   >
-    <div class="uk-width-large">
+    <div class="uk-width-xlarge">
       <h3>Camera/stage mapping</h3>
       <p>
         Camera/stage mapping allows the stage to move relative to the camera