Extra cam alignment step with stream

webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/camCalibrationExplanation.vue

@@ -1,19 +1,25 @@
 <template>
-  <div>
+  <stepTemplateWithStream>
-    <p>
+    <div>
-      <b> Before starting camera calibration: </b>
+      <p>
-    </p>
+        <b> Before starting camera calibration: </b>
-    <ul class="uk-list uk-list-bullet">
+      </p>
-      <li>Insert a slide.</li>
+      <ul class="uk-list uk-list-bullet">
-      <li>Move your slide to an empty area, ideally looking through the coverslip if your slide has one.</li>
+        <li>Ensure your illumination is on, well focused, and centred.</li>
-      <li>If your slide has no empty areas, remove it and instead calibrate with no sample.</li>
+        <li>Insert a slide with some empty regions.</li>
-      <li>Ensure your illumination is on, well focused, and centred.</li>
+      </ul>
-    </ul>
+    </div>
-  </div>
+  </stepTemplateWithStream>
 </template>
 
 <script>
+import stepTemplateWithStream from "../stepTemplateWithStream.vue";
 export default {
-  name: "CamCalibrationExplanation",
+  name: "CamExplanationStep",
+
+  components: {
+    stepTemplateWithStream,
+  },
 };
 </script>
+<style scoped></style>

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>

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) },
       ],
     };

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,

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,