Add images to calibration step

webapp/src/components/modalComponents/calibrationWizard.vue

@@ -126,7 +126,7 @@ export default {
       if (this.thingAvailable("stage") && this.thingDescription("stage").title != "DummyStage") {
         tasks.push({
           component: markRaw(singleStepTask),
-          props: { stepComponent: zMotorDirectionStep },
+          props: { title: "Stage Calibration", stepComponent: zMotorDirectionStep },
         });
       }
 

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

@@ -1,9 +1,8 @@
 <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?
+      <b>Turn z motor</b> button below?
     </p>
     <div class="uk-margin uk-flex uk-flex-center">
       <button
@@ -13,25 +12,47 @@
         @pointerup="jogZStop"
         @pointercancel="jogZStop"
       >
-        <span class="material-symbols-outlined sync-icon"> add </span>
+        <span>Turn z motor</span>
       </button>
     </div>
+
+    <!-- Direction selection -->
     <div class="uk-margin uk-flex">
-      <button
-        class="uk-button uk-button-default uk-width-1-2 uk-button-primary"
-        type="button"
-        @click="selectDir"
-      >
-        Anti-clockwise
-      </button>
-      <action-button
-        class="uk-width-1-2"
-        thing="stage"
-        action="invert_axis_direction"
-        :submit-data="{ axis: 'z' }"
-        submit-label="Clockwise"
-        @response="selectDir"
-      />
+      <!-- Anti-clockwise column -->
+      <div class="uk-width-1-2 dir-option">
+        <img
+          src="/direction_AC.png"
+          alt="Anti-clockwise"
+          class="dir-image clickable"
+          @click="selectDir"
+        />
+
+        <button
+          class="uk-button uk-button-default uk-width-1-1 uk-button-primary"
+          type="button"
+          @click="selectDir"
+        >
+          Anti-clockwise
+        </button>
+      </div>
+
+      <!-- Clockwise column -->
+      <div class="uk-width-1-2 dir-option">
+        <img
+          src="/direction_CW.png"
+          alt="Clockwise"
+          class="dir-image clickable"
+          @click="triggerClockwise"
+        />
+
+        <button
+          class="uk-button uk-button-default uk-width-1-1 uk-button-primary"
+          type="button"
+          @click="triggerClockwise"
+        >
+          Clockwise
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -42,10 +63,6 @@ import ActionButton from "../../labThingsComponents/actionButton.vue";
 export default {
   name: "ZMotorDirectionStep",
 
-  components: {
-    ActionButton,
-  },
-
   emits: ["advance", "awaiting-user"],
 
   data: function () {
@@ -84,6 +101,12 @@ export default {
     selectDir() {
       this.$emit("advance");
     },
+    // If motor moves clockwise, invert z direction, then progress to next step
+    triggerClockwise() {
+      this.invokeAction("stage", "invert_axis_direction", { axis: "z" }).then(() => {
+        this.selectDir();
+      });
+    },
   },
 };
 </script>
@@ -95,4 +118,25 @@ export default {
   padding: 0 30px;
   gap: 4px;
 }
+
+.dir-option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  margin: 5px;
+}
+
+.dir-image {
+  width: 70%;
+  height: auto;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.dir-option button {
+  text-align: center;
+}
 </style>