From 9db509de0950dac1b29d55c14371f189c3ea26c1 Mon Sep 17 00:00:00 2001
From: Joe Knapper <jaknapper@hotmail.com>
Date: Tue, 17 Mar 2026 11:56:21 +0000
Subject: [PATCH] Extra cam alignment step with stream

---
 .../camCalibrationExplanation.vue             | 30 ++++++++++-------
 .../cameraFocusStep.vue                       | 32 +++++++++++++++++++
 .../cameraCalibrationTask.vue                 |  2 ++
 .../csmSteps/focusStep.vue                    |  2 +-
 .../csmSteps/runCsmStep.vue                   |  2 +-
 5 files changed, 54 insertions(+), 14 deletions(-)
 create mode 100644 webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/cameraFocusStep.vue

diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/camCalibrationExplanation.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/camCalibrationExplanation.vue
index f0e9f690..81b90632 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/camCalibrationExplanation.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/camCalibrationExplanation.vue
@@ -1,19 +1,25 @@
 <template>
-  <div>
-    <p>
-      <b> Before starting camera calibration: </b>
-    </p>
-    <ul class="uk-list uk-list-bullet">
-      <li>Insert a slide.</li>
-      <li>Move your slide to an empty area, ideally looking through the coverslip if your slide has one.</li>
-      <li>If your slide has no empty areas, remove it and instead calibrate with no sample.</li>
-      <li>Ensure your illumination is on, well focused, and centred.</li>
-    </ul>
-  </div>
+  <stepTemplateWithStream>
+    <div>
+      <p>
+        <b> Before starting camera calibration: </b>
+      </p>
+      <ul class="uk-list uk-list-bullet">
+        <li>Ensure your illumination is on, well focused, and centred.</li>
+        <li>Insert a slide with some empty regions.</li>
+      </ul>
+    </div>
+  </stepTemplateWithStream>
 </template>
 
 <script>
+import stepTemplateWithStream from "../stepTemplateWithStream.vue";
 export default {
-  name: "CamCalibrationExplanation",
+  name: "CamExplanationStep",
+
+  components: {
+    stepTemplateWithStream,
+  },
 };
 </script>
+<style scoped></style>
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/cameraFocusStep.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/cameraFocusStep.vue
new file mode 100644
index 00000000..85ef8c35
--- /dev/null
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/cameraFocusStep.vue
@@ -0,0 +1,32 @@
+<template>
+  <stepTemplateWithStream>
+    <ul>
+      <li>
+        Move your slide to an empty area, ideally looking through the coverslip if your slide has
+        one.
+      </li>
+      <li>
+        Use the buttons below or Page Up/Down to defocus slightly, to make sure no features are
+        visible.
+      </li>
+      <li>If your slide has no empty areas, remove it and instead calibrate with no sample.</li>
+    </ul>
+    <template #below-stream>
+      <stageControlButtons :show-dpad="false" />
+    </template>
+  </stepTemplateWithStream>
+</template>
+
+<script>
+import stepTemplateWithStream from "../stepTemplateWithStream.vue";
+import stageControlButtons from "@/components/tabContentComponents/controlComponents/stageControlButtons.vue";
+export default {
+  name: "CameraFocusStep",
+
+  components: {
+    stepTemplateWithStream,
+    stageControlButtons,
+  },
+};
+</script>
+<style scoped></style>
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationTask.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationTask.vue
index 28c785a3..12e6e383 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationTask.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationTask.vue
@@ -15,6 +15,7 @@ import calibrationWizardTask from "./calibrationWizardTask.vue";
 import camCalibrationExplanation from "./cameraCalibrationSteps/camCalibrationExplanation.vue";
 import cameraMainCalibrationStep from "./cameraCalibrationSteps/cameraMainCalibrationStep.vue";
 import { markRaw } from "vue";
+import CameraFocusStep from "./cameraCalibrationSteps/cameraFocusStep.vue";
 
 export default {
   name: "CameraCalibrationTask",
@@ -38,6 +39,7 @@ export default {
     return {
       steps: [
         { component: markRaw(camCalibrationExplanation) },
+        { component: markRaw(CameraFocusStep) },
         { component: markRaw(cameraMainCalibrationStep) },
       ],
     };
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue
index 847a4a2b..d1132822 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue
@@ -12,7 +12,7 @@
 import stepTemplateWithStream from "../stepTemplateWithStream.vue";
 import stageControlButtons from "@/components/tabContentComponents/controlComponents/stageControlButtons.vue";
 export default {
-  name: "CameraMainCalibrationStep",
+  name: "CSMFocusStep",
 
   components: {
     stepTemplateWithStream,
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/runCsmStep.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/runCsmStep.vue
index 41eee4fd..cb32bd7f 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/runCsmStep.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/runCsmStep.vue
@@ -20,7 +20,7 @@ import stepTemplateWithStream from "../stepTemplateWithStream.vue";
 import CSMCalibrationSettings from "../../../tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue";
 
 export default {
-  name: "CameraMainCalibrationStep",
+  name: "CSMMainCalibrationStep",
 
   components: {
     stepTemplateWithStream,