From 0de3f6df666667679f88d66f8e199c093c4a3819 Mon Sep 17 00:00:00 2001
From: Chish36 <b.chisholm2002@gmail.com>
Date: Wed, 13 Aug 2025 15:42:32 +0100
Subject: [PATCH 1/4] Added menu to modal to adjust z height

---
 .../modalComponents/calibrationModal.vue      | 80 +++++++++++++++++--
 1 file changed, 73 insertions(+), 7 deletions(-)

diff --git a/webapp/src/components/modalComponents/calibrationModal.vue b/webapp/src/components/modalComponents/calibrationModal.vue
index 9d24d533..efae9e36 100644
--- a/webapp/src/components/modalComponents/calibrationModal.vue
+++ b/webapp/src/components/modalComponents/calibrationModal.vue
@@ -54,6 +54,51 @@
       </div>
 
       <div v-show="stepValue == 2">
+        <h3>Adjust z height</h3>
+        <p>
+          Insert a sample and adjust the z position of 
+          the stage using the buttons below, until the 
+          sample is in focus.
+        </p>
+        <p>
+          You may also adjust the z position with <b>page up</b> and <b>page down</b>.
+        </p>
+
+        <miniStreamDisplay
+          v-if="stepValue == 2"
+          class="mini-preview"
+        ></miniStreamDisplay>
+        <div class="action-button-container">
+          <action-button
+          ref="moveZ"
+          thing="stage"
+          action="move_relative"
+          :button-primary="false"
+          :submit-data="{ x: 0, y: 0, z: -100}"
+          :submit-label="'-'"
+          :can-terminate="false"
+          @finished="
+            updatePosition();
+          "
+          class="action-button"
+          />
+          <action-button
+          ref="moveZ"
+          thing="stage"
+          action="move_relative"
+          :button-primary="false"
+          :submit-data="{ x: 0, y: 0, z: 100}"
+          :submit-label="'+'"
+          :can-terminate="false"
+          @finished="
+            updatePosition();
+          "
+          class="action-button"
+          />
+        </div>
+      </div>
+
+      <div v-show="stepValue == 3">
         <h3>Camera-stage mapping</h3>
         <div v-if="isCSMCalibrated">
           <p>
@@ -87,7 +132,7 @@
           </ul>
 
           <miniStreamDisplay
-            v-if="stepValue == 2"
+            v-if="stepValue == 3"
             class="mini-preview"
           ></miniStreamDisplay>
 
@@ -99,7 +144,7 @@
         </div>
       </div>
 
-      <div v-show="stepValue == 3">
+      <div v-show="stepValue == 4">
         <p>
           <b>Calibration complete</b>
         </p>
@@ -118,7 +163,7 @@
           Cancel
         </button>
         <button
-          v-show="stepValue == 3"
+          v-show="stepValue == 4"
           class="uk-button uk-button-default"
           type="button"
           @click="restart()"
@@ -126,7 +171,7 @@
           Restart
         </button>
         <button
-          v-show="stepValue < 3"
+          v-show="stepValue < 4"
           class="uk-button uk-button-primary uk-margin-left"
           type="button"
           @click="increment()"
@@ -134,7 +179,7 @@
           Next
         </button>
         <button
-          v-show="stepValue == 3"
+          v-show="stepValue == 4"
           class="uk-button uk-button-primary uk-margin-left"
           type="button"
           @click="hide()"
@@ -150,6 +195,7 @@
 import cameraCalibrationSettings from "../tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue";
 import CSMCalibrationSettings from "../tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue";
 import miniStreamDisplay from "../genericComponents/miniStreamDisplay.vue";
+import ActionButton from "../labThingsComponents/actionButton.vue";
 
 export default {
   name: "CalibrationModal",
@@ -157,7 +203,8 @@ export default {
   components: {
     cameraCalibrationSettings,
     CSMCalibrationSettings,
-    miniStreamDisplay
+    miniStreamDisplay,
+    ActionButton
   },
 
   data: function() {
@@ -223,6 +270,11 @@ export default {
         this.onHide();
       }
     },
+
+    async updatePosition() {
+      this.setPosition = await this.readThingProperty("stage", "position");
+    },
+
     // Forces modal to show on button press
     force_show: function() {
       this.ready = true;
@@ -260,7 +312,7 @@ export default {
 
     increment: function() {
       // Upper bound on section number
-      if (this.stepValue < 3) {
+      if (this.stepValue < 4) {
         this.stepValue = this.stepValue + 1;
         return true;
       }
@@ -275,4 +327,18 @@ export default {
   margin-left: auto;
   margin-right: auto;
 }
+.action-button-container {
+  display: flex;
+  flex-direction: row;   /* Stack vertically */
+  justify-content: center;  /* Left align */
+  gap: 8px;                  /* Small space between buttons */
+  margin-top: 4px;           /* Gap from image */
+}
+.action-button {
+  padding: 6px 12px;      /* Smaller button */
+  font-size: 22px !important;
+  margin: 0;                 /* Remove default margin */
+  width: 120px;
+  min-width: 80px;
+}
 </style>

From 858ddf6edf58caa76d0048ea1820a1099aaf8436 Mon Sep 17 00:00:00 2001
From: jaknapper <jaknapper@hotmail.com>
Date: Wed, 13 Aug 2025 17:42:52 +0100
Subject: [PATCH 2/4] Optional hideOnRun for action buttons

---
 .../src/components/labThingsComponents/actionButton.vue  | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/webapp/src/components/labThingsComponents/actionButton.vue b/webapp/src/components/labThingsComponents/actionButton.vue
index b33233a2..54710499 100644
--- a/webapp/src/components/labThingsComponents/actionButton.vue
+++ b/webapp/src/components/labThingsComponents/actionButton.vue
@@ -4,7 +4,7 @@
     class="uk-margin-remove uk-padding-remove"
   >
     <div v-if="taskStarted" ref="isPollingElement">
-      <action-progress-bar :progress="progress" :task-status="taskStatus" />
+      <action-progress-bar v-if="taskStarted && hideOnRun" :progress="progress" :task-status="taskStatus" />
       <button
         v-if="canTerminate && taskRunning"
         type="button"
@@ -19,7 +19,7 @@
       <button
         type="button"
         :disabled="isDisabled"
-        :hidden="taskStarted"
+        :hidden="taskStarted && hideOnRun"
         class="uk-button uk-width-1-1"
         :class="[buttonPrimary ? 'uk-button-primary' : 'uk-button-default']"
         @click="bootstrapTask()"
@@ -139,6 +139,11 @@ export default {
       required: false,
       default: false
     },
+    hideOnRun: {
+      type: Boolean,
+      required: false,
+      default: true      
+    }
   },
 
   data: function() {

From 213de461bbc70d27a40b57505e876209fe036d76 Mon Sep 17 00:00:00 2001
From: jaknapper <jaknapper@hotmail.com>
Date: Wed, 13 Aug 2025 17:43:43 +0100
Subject: [PATCH 3/4] Update position and behaviour of +/- buttons

---
 .../modalComponents/calibrationModal.vue       | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/webapp/src/components/modalComponents/calibrationModal.vue b/webapp/src/components/modalComponents/calibrationModal.vue
index efae9e36..6ad694a6 100644
--- a/webapp/src/components/modalComponents/calibrationModal.vue
+++ b/webapp/src/components/modalComponents/calibrationModal.vue
@@ -70,30 +70,30 @@
         ></miniStreamDisplay>
         <div class="action-button-container">
           <action-button
-          ref="moveZ"
+          class="moveZ"
           thing="stage"
           action="move_relative"
           :button-primary="false"
           :submit-data="{ x: 0, y: 0, z: -100}"
-          :submit-label="'-'"
+          :submit-label="' - '"
+          :hideOnRun="false"
           :can-terminate="false"
           @finished="
             updatePosition();
           "
-          class="action-button"
           />
           <action-button
-          ref="moveZ"
+          class="moveZ"
           thing="stage"
           action="move_relative"
           :button-primary="false"
           :submit-data="{ x: 0, y: 0, z: 100}"
           :submit-label="'+'"
           :can-terminate="false"
+          :hideOnRun="false"
           @finished="
             updatePosition();
           "
-          class="action-button"
           />
         </div>
       </div>
@@ -334,9 +334,11 @@ export default {
   gap: 8px;                  /* Small space between buttons */
   margin-top: 4px;           /* Gap from image */
 }
-.action-button {
-  padding: 6px 12px;      /* Smaller button */
-  font-size: 22px !important;
+>>> .moveZ .uk-button.uk-width-1-1 {
+  line-height: 50px;
+  font-size: 50px !important;
+  height: 60px; 
+  padding-bottom: 46px;
   margin: 0;                 /* Remove default margin */
   width: 120px;
   min-width: 80px;

From 0617a5a6a481f17fcad6efa61d8d1011992b23f5 Mon Sep 17 00:00:00 2001
From: Chish36 <b.chisholm2002@gmail.com>
Date: Thu, 14 Aug 2025 11:47:08 +0100
Subject: [PATCH 4/4] Added comment and removed unused method

---
 .../components/labThingsComponents/actionButton.vue    |  1 +
 .../components/modalComponents/calibrationModal.vue    | 10 ----------
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/webapp/src/components/labThingsComponents/actionButton.vue b/webapp/src/components/labThingsComponents/actionButton.vue
index 54710499..80783c25 100644
--- a/webapp/src/components/labThingsComponents/actionButton.vue
+++ b/webapp/src/components/labThingsComponents/actionButton.vue
@@ -5,6 +5,7 @@
   >
     <div v-if="taskStarted" ref="isPollingElement">
       <action-progress-bar v-if="taskStarted && hideOnRun" :progress="progress" :task-status="taskStatus" />
+      <!-- hideOnRun selects if the button hides, don't show progress bar if button doesn't hide. -->
       <button
         v-if="canTerminate && taskRunning"
         type="button"
diff --git a/webapp/src/components/modalComponents/calibrationModal.vue b/webapp/src/components/modalComponents/calibrationModal.vue
index 6ad694a6..03bdfbf9 100644
--- a/webapp/src/components/modalComponents/calibrationModal.vue
+++ b/webapp/src/components/modalComponents/calibrationModal.vue
@@ -78,9 +78,6 @@
           :submit-label="' - '"
           :hideOnRun="false"
           :can-terminate="false"
-          @finished="
-            updatePosition();
-          "
           />
           <action-button
           class="moveZ"
@@ -91,9 +88,6 @@
           :submit-label="'+'"
           :can-terminate="false"
           :hideOnRun="false"
-          @finished="
-            updatePosition();
-          "
           />
         </div>
       </div>
@@ -271,10 +265,6 @@ export default {
       }
     },
 
-    async updatePosition() {
-      this.setPosition = await this.readThingProperty("stage", "position");
-    },
-
     // Forces modal to show on button press
     force_show: function() {
       this.ready = true;