Calibration wizard asks about motor direction

webapp/src/components/modalComponents/calibrationWizard.vue

@@ -28,6 +28,7 @@
 <script>
 import singleStepTask from "./calibrationWizardComponents/singleStepTask.vue";
 import welcomeStep from "./calibrationWizardComponents/welcomeStep.vue";
+import zMotorDirectionStep from "./calibrationWizardComponents/zMotorDirectionStep.vue";
 import cameraCalibrationTask from "./calibrationWizardComponents/cameraCalibrationTask.vue";
 import cameraStageMappingTask from "./calibrationWizardComponents/cameraStageMappingTask.vue";
 import finalStep from "./calibrationWizardComponents/finalStep.vue";
@@ -120,6 +121,15 @@ export default {
         });
       }
 
+      // Ask which way the z motor turns, right after the welcome screen but before any
+      // other tasks, so the stage is correctly oriented before anything else runs.
+      if (this.thingDescription("stage").title != "DummyStage") {
+        tasks.push({
+          component: markRaw(singleStepTask),
+          props: { stepComponent: zMotorDirectionStep },
+        });
+      }
+
       // Add calibration task for each thing
       for (const thing of thingsToCal) {
         const taskComponent = this.availableCalibrationTasks[thing];

webapp/src/components/modalComponents/calibrationWizardComponents/calibrationWizardTask.vue

@@ -29,6 +29,7 @@ gets very confusing.
       :key="stepIndex"
       @awaiting-user="handleAwaitingUser"
       @prevent-navigation="handlePreventNavigation"
+      @advance="nextStep"
     />
     <p class="uk-text-right">
       <button

webapp/src/components/modalComponents/calibrationWizardComponents/zmotordirectionstep.vue

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <p>First, let's check your stage's z motor direction.</p>
+    <p>Looking at the exposed z gear from above, which way does it turn when you press and hold the button below?</p>
+    <div class="uk-margin uk-flex uk-flex-center">
+      <button
+        class="uk-button uk-button-primary jog-z-btn"
+        type="button"
+        @pointerdown="jogZ"
+        @pointerup="jogZStop"
+        @pointercancel="jogZStop"
+      >
+        <span class="material-symbols-outlined sync-icon"> add </span>
+      </button>
+    </div>
+    <div class="uk-margin uk-flex">
+      <button
+        class="uk-button uk-button-default uk-width-1-2 uk-button-primary"
+        type="button"
+        @click="selectRightToLeft"
+      >
+        Right to left (anti-clockwise)
+      </button>
+      <action-button
+        class="uk-width-1-2"
+        thing="stage"
+        action="invert_axis_direction"
+        :submit-data="{ axis: 'z' }"
+        submit-label="Left to right (clockwise)"
+        @response="selectLeftToRight"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import ActionButton from "../../labThingsComponents/actionButton.vue";
+
+export default {
+  name: "ZMotorDirectionStep",
+
+  components: {
+    ActionButton,
+  },
+
+  data: function () {
+    return {
+      jogIntervalId: null,
+      jogDistance: 100,
+      jogTime: 300,
+    };
+  },
+
+  emits: ["advance", "awaiting-user"],
+
+  methods: {
+    jogZ(pointerEvent) {
+      if (pointerEvent.button !== 0) return;
+
+      if (this.jogIntervalId) {
+        clearInterval(this.jogIntervalId);
+      }
+
+      pointerEvent.target.setPointerCapture(pointerEvent.pointerId);
+
+      let invokeJog = () => this.invokeAction("stage", "jog", { z: this.jogDistance });
+      invokeJog();
+      this.jogIntervalId = setInterval(invokeJog, this.jogTime);
+    },
+    jogZStop() {
+      if (this.jogIntervalId) {
+        clearInterval(this.jogIntervalId);
+      }
+      this.invokeAction("stage", "jog", { stop: true });
+    },
+    selectRightToLeft() {
+      this.$emit("advance");
+    },
+    selectLeftToRight() {
+      this.$emit("advance");
+    },
+  },
+
+  mounted() {
+    this.$emit("awaiting-user", true);
+  }
+};
+
+
+</script>
+
+<style lang="less">
+.jog-z-btn {
+  display: flex;
+  align-items: center;
+  padding: 0px 30px;
+  gap: 4px;
+}
+</style>