Add camera calibration steps into refactored calibration wizard.

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

@@ -3,18 +3,7 @@
   structure
 -->
 <div v-show="stepValue == 0">
-        <p>
-          <b
-            >Some important microscope calibration data is currently missing.</b
-          >
-        </p>
-        <p>
-          Your microscope will still function, however some functionality will
-          be limited, and image quality will likely suffer.
-        </p>
-        <p>
-          <b>Click Next to begin microscope calibration.</b>
-        </p>
+        
       </div>
 
       <div v-show="stepValue == 1">
@@ -28,16 +17,7 @@
           </p>
         </div>
         <div v-else>
-          <p>
-            <b
-              >Follow the important steps below before starting lens-shading
-              calibration!</b
-            >
-          </p>
-          <ul class="uk-list uk-list-bullet">
-            <li>Remove any samples from your microscope</li>
-            <li>Ensure your illumination is on and properly fixed in place</li>
-          </ul>
+          
 
           <miniStreamDisplay
             v-if="stepValue == 1"

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

@@ -11,6 +11,7 @@ Tasks can be divided into multiple steps.
 -->
 <template>
   <div>
+    <h3 v-if="title">{{ title }}</h3>
     <component
       v-if="currentStep"
       :is="currentStep.component"
@@ -43,6 +44,10 @@ export default {
   name: "calibrationWizardTask",
 
   props: {
+    title: {
+      type: String,
+      default: null
+    },
     first: Boolean,
     final: Boolean,
     startOnLast: {
@@ -61,10 +66,6 @@ export default {
     };
   },
 
-  mounted() {
-    console.log("Steps received:", this.steps);
-  },
-
   computed: {
     currentStep() {
       return this.steps[this.stepIndex] || null;

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

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <p>
+      <b>
+        Before starting camera calibration:
+      </b>
+    </p>
+    <ul class="uk-list uk-list-bullet">
+      <li>Remove any samples from your microscope</li>
+      <li>Ensure your illumination is on, well focussed, and centred.</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "camCalibrationExplanation"
+}
+</script>

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

@@ -0,0 +1,34 @@
+<template>
+  <stepTemplateWithStream>
+    <p>
+      <b>
+        <p>Once you're ready, click auto-calibrate.</p>
+
+          <cameraCalibrationSettings
+            :show-extra-settings="false"
+            :camera-uri="cameraUri"
+          ></cameraCalibrationSettings>
+      </b>
+    </p>
+  </stepTemplateWithStream>
+</template>
+
+<script>
+import stepTemplateWithStream from "../stepTemplateWithStream.vue"
+import cameraCalibrationSettings from "../../../tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue";
+
+export default {
+  name: "cameraMainCalibrationStep",
+
+  components: {
+    stepTemplateWithStream,
+    cameraCalibrationSettings
+  },
+
+  computed: {
+    cameraUri: function() {
+      return `${this.$store.getters.baseUri}/camera/`;
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,41 @@
+<template>
+  <calibrationWizardTask
+    title="Camera Calibration"
+    :first="first"
+    :final="final"
+    :startOnLast="startOnLast"
+    :steps="steps"
+    @next="$emit('next')"
+    @back="$emit('back')"
+  />
+</template>
+
+<script>
+import calibrationWizardTask from "./calibrationWizardTask.vue";
+import camCalibrationExplanation from "./cameraCalibrationSteps/camCalibrationExplanation.vue";
+import cameraMainCalibrationStep from "./cameraCalibrationSteps/cameraMainCalibrationStep.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: camCalibrationExplanation},
+        {component: cameraMainCalibrationStep},
+      ]
+    };
+  }
+
+}
+</script>

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

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <p>
+        <b>Calibration complete</b>
+    </p>
+    <p>
+        Click Finish to return to your microscope.
+    </p>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "finalStep"
+}
+</script>

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

@@ -1,5 +1,6 @@
 <template>
   <calibrationWizardTask
+    :title="title"
     :first="first"
     :final="final"
     :startOnLast="startOnLast"
@@ -24,6 +25,10 @@ export default {
       default: () => ({})
     },
     // Standard calibrationWizardTask props below:
+    title: {
+      type: String,
+      default: null
+    },
     first: Boolean,
     final: Boolean,
     startOnLast: {
@@ -39,9 +44,5 @@ export default {
       ]
     };
   },
-
-  mounted(){
-    console.log(this.stepComponent);
-  }
 }
 </script>

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

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <slot></slot>
+    <miniStreamDisplay class="mini-preview" />
+  </div>
+</template>
+
+<script>
+
+import miniStreamDisplay from "../../genericComponents/miniStreamDisplay.vue";
+
+export default {
+  name: "stepTemplateWithStream",
+
+  components: {
+    miniStreamDisplay
+  }
+}
+</script>
+
+<style scoped>
+.mini-preview {
+  width: 75%;
+  margin-left: auto;
+  margin-right: auto;
+}
+</style>