Added menu to modal to adjust z height

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>