Extra cam alignment step with stream

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>

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>