Add camera calibration steps into refactored calibration wizard.

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>