Add CSM steps to new calibration wizard.

src/openflexure_microscope_server/things/camera/simulation.py

@@ -407,7 +407,7 @@ class SimulatedCamera(BaseCamera):
         """The calibration actions for both calibration wizard and settings panel."""
         return [
             action_button_for(
-                self.full_auto_calibrate, submit_label="Full Auto Calibrate"
+                self.full_auto_calibrate, submit_label="Full Auto-Calibrate"
             ),
         ]
 

webapp/src/components/modalComponents/calibrationWizard.vue

@@ -23,6 +23,7 @@
 import singleStepTask from "./calibrationWizardComponents/singleStepTask.vue";
 import welcomeStep from "./calibrationWizardComponents/welcomeStep.vue";
 import cameraCalibrationTask from "./calibrationWizardComponents/cameraCalibrationTask.vue";
+import cameraStageMappingTask from "./calibrationWizardComponents/cameraStageMappingTask.vue";
 import finalStep from "./calibrationWizardComponents/finalStep.vue";
 
 export default {
@@ -63,6 +64,7 @@ export default {
     this.tasks = [
       {component: singleStepTask, props: {stepComponent: welcomeStep}},
       {component: cameraCalibrationTask},
+      {component: cameraStageMappingTask},
       {component: singleStepTask, props: {stepComponent: finalStep}},
     ]
   },

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

@@ -132,7 +132,7 @@
 import cameraCalibrationSettings from "../tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue";
 import CSMCalibrationSettings from "../tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue";
 import miniStreamDisplay from "../genericComponents/miniStreamDisplay.vue";
-import ActionButton from "../labThingsComponents/actionButton.vue";
+
 
 export default {
   name: "calibrationWizard",
@@ -146,11 +146,7 @@ export default {
 }
 </script>
 <style scoped>
-.mini-preview {
+
-  width: 75%;
-  margin-left: auto;
-  margin-right: auto;
-}
 .action-button-container {
   display: flex;
   flex-direction: row;   /* Stack vertically */

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

@@ -1,15 +1,17 @@
 <template>
   <stepTemplateWithStream>
     <p>
-      <b>
+      <b>Once you're ready, click Full Auto-calibrate.</b>
-        <p>Once you're ready, click auto-calibrate.</p>
-
-          <cameraCalibrationSettings
-            :show-extra-settings="false"
-            :camera-uri="cameraUri"
-          ></cameraCalibrationSettings>
-      </b>
     </p>
+
+    <template #below-stream>
+      <div class="action-button-container">
+        <cameraCalibrationSettings
+          :show-extra-settings="false"
+          :camera-uri="cameraUri"
+        />
+      </div>
+    </template>
   </stepTemplateWithStream>
 </template>
 
@@ -32,3 +34,10 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+
+.action-button-container {
+  padding: 4px;
+}
+</style>

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

@@ -0,0 +1,43 @@
+<template>
+  <calibrationWizardTask
+    title="Camera-Stage Mapping"
+    :first="first"
+    :final="final"
+    :startOnLast="startOnLast"
+    :steps="steps"
+    @next="$emit('next')"
+    @back="$emit('back')"
+  />
+</template>
+
+<script>
+import calibrationWizardTask from "./calibrationWizardTask.vue";
+import csmExplanation from "./csmSteps/csmExplanation.vue";
+import focusStep from "./csmSteps/focusStep.vue";
+import runCsmStep from "./csmSteps/runCsmStep.vue";
+
+export default {
+  name: "cameraCalibrationTask",
+  components: {calibrationWizardTask},
+  props: {
+    // Standard calibrationWizardTask props below:
+    first: Boolean,
+    final: Boolean,
+    startOnLast: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data: function() {
+    return {
+      steps: [
+        {component: csmExplanation},
+        {component: focusStep},
+        {component: runCsmStep}
+      ]
+    };
+  }
+
+}
+</script>

webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/csmExplanation.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <p>
+      Camera-stage mapping will calibrate the stage movement using the camera.
+    </p>
+    <p>
+      <b>
+        Before starting camera-stage mapping:
+      </b>
+    </p>
+    <ul class="uk-list uk-list-bullet">
+      <li>Add a sample with dense features to the microscope.</li>
+      <li>Ensure the sample is reasonably well centered on the microscope.</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "csmExplanation"
+}
+</script>

webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue

@@ -0,0 +1,66 @@
+<template>
+  <stepTemplateWithStream>
+    <p>
+      Use the buttons below to bring the sample into focus.
+    </p>
+    <p>
+      You may also adjust the z position with <b>page up</b> and <b>page down</b>.
+    </p>
+    <template #below-stream>
+      <div class="action-button-container">
+        <action-button
+        class="moveZ"
+        thing="stage"
+        action="move_relative"
+        :button-primary="false"
+        :submit-data="{ x: 0, y: 0, z: -100}"
+        :submit-label="' - '"
+        :hideOnRun="false"
+        :can-terminate="false"
+        />
+        <action-button
+        class="moveZ"
+        thing="stage"
+        action="move_relative"
+        :button-primary="false"
+        :submit-data="{ x: 0, y: 0, z: 100}"
+        :submit-label="'+'"
+        :can-terminate="false"
+        :hideOnRun="false"
+        />
+      </div>
+    </template>
+  </stepTemplateWithStream>
+</template>
+
+<script>
+import stepTemplateWithStream from "../stepTemplateWithStream.vue"
+import ActionButton from "../../../labThingsComponents/actionButton.vue";
+export default {
+  name: "cameraMainCalibrationStep",
+
+  components: {
+    stepTemplateWithStream,
+    ActionButton
+  }
+}
+</script>
+<style scoped>
+
+.action-button-container {
+  display: flex;
+  flex-direction: row;       /* Stack vertically */
+  justify-content: center;   /* Left align */
+  gap: 8px;                  /* Small space between buttons */
+  margin-top: 4px;           /* Gap from image */
+}
+.moveZ >>> .uk-button.uk-width-1-1 {
+  line-height: 50px;
+  font-size: 50px !important;
+  height: 60px; 
+  padding-bottom: 46px;
+  margin: 0;                 /* Remove default margin */
+  width: 120px;
+  min-width: 80px;
+}
+</style>

webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/runCsmStep.vue

@@ -0,0 +1,39 @@
+<template>
+  <stepTemplateWithStream>
+    <p>
+      <b>Once you're ready, click Auto-Calibrate Using Camera.</b>
+    </p>
+    <template #below-stream>
+      <div class="action-button-container">
+        <CSMCalibrationSettings :show-extra-settings="false" />
+      </div>
+    </template>
+  </stepTemplateWithStream>
+</template>
+
+<script>
+import stepTemplateWithStream from "../stepTemplateWithStream.vue"
+import CSMCalibrationSettings from "../../../tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue";
+
+export default {
+  name: "cameraMainCalibrationStep",
+
+  components: {
+    stepTemplateWithStream,
+    CSMCalibrationSettings
+  },
+
+  computed: {
+    cameraUri: function() {
+      return `${this.$store.getters.baseUri}/camera/`;
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.action-button-container {
+  padding: 4px;
+}
+</style>

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

@@ -2,6 +2,7 @@
   <div>
     <slot></slot>
     <miniStreamDisplay class="mini-preview" />
+    <slot name="below-stream"></slot>
   </div>
 </template>