Merge branch 'cal-wiz-illumination-adjust' into 'v3'

Cal wiz illumination adjust

Closes #797

See merge request openflexure/openflexure-microscope-server!651

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

@@ -4,11 +4,8 @@
       <p>
         <b> Before starting camera calibration: </b>
       </p>
-      <ul class="uk-list uk-list-bullet">
+      <p>Insert a slide with some empty areas within the coverslip.</p>
-        <li>Ensure your illumination is on, well focused, and centred.</li>
+      <p><i>If you don't have a slide with empty areas, don't insert a slide.</i></p>
-        <li>Insert a slide with some empty areas.</li>
-        <li>If your slide has no empty areas, remove it and instead calibrate with no sample.</li>
-      </ul>
     </div>
   </stepTemplateWithStream>
 </template>

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

@@ -0,0 +1,114 @@
+<template>
+  <stepTemplateWithStream>
+    <div>
+      <p>
+        <b> Aligning your illumination: </b>
+      </p>
+      <ul class="uk-list uk-list-bullet">
+        <li>Ensure your illumination LED is on.</li>
+        <li>
+          Ensure the illimination spot is centred in the image.<br />
+          <i>Loosen the screws at the bottom of the illumination to adjust.</i>
+        </li>
+        <li>Adjust the height of the illumination until the light is as bright as possible.</li>
+      </ul>
+
+      <p v-if="showResetCalButton">
+        <strong
+          ><i
+            >The camera is calibrated. Aligning illumination is easier if you reset calibration.</i
+          ></strong
+        ><br />
+        <action-button
+          :button-primary="true"
+          :can-terminate="false"
+          thing="camera"
+          action="reset_lens_shading"
+          submit-label="Reset Calibration"
+          @error="modalError"
+          @finished="checkCalibrationState"
+        />
+      </p>
+    </div>
+    <template v-if="canAdjustExposure" #below-stream>
+      <div class="uk-flex uk-flex-center uk-margin-top">
+        If the image is either too dark or too bright, adjust the exposure with the buttons below.
+      </div>
+      <div class="uk-flex uk-flex-center uk-flex-middle button-gap">
+        <button
+          class="ofm-top-nav-square-button material-icon uk-button uk-button-default"
+          type="button"
+          @click="decreaseExposure"
+        >
+          <span class="material-symbols-outlined">shutter_speed_minus</span>
+        </button>
+        <button
+          class="ofm-top-nav-square-button material-icon uk-button uk-button-default"
+          type="button"
+          @click="increaseExposure"
+        >
+          <span class="material-symbols-outlined">shutter_speed_add</span>
+        </button>
+      </div>
+    </template>
+  </stepTemplateWithStream>
+</template>
+
+<script>
+import actionButton from "@/components/labThingsComponents/actionButton.vue";
+import stepTemplateWithStream from "../stepTemplateWithStream.vue";
+export default {
+  name: "IlluminationAlignmentStep",
+
+  components: {
+    actionButton,
+    stepTemplateWithStream,
+  },
+
+  data: function () {
+    return {
+      cameraCalibrated: false,
+      cameraCanReset: false,
+      canAdjustExposure: false,
+    };
+  },
+
+  computed: {
+    showResetCalButton() {
+      return this.cameraCanReset && !this.cameraCalibrated;
+    },
+  },
+
+  /**
+   * Check calibration state and if calibration can be reset on mount.
+   */
+  async mounted() {
+    const actions = this.thingDescription("camera").actions;
+    const properties = this.thingDescription("camera").properties;
+    this.canAdjustExposure = "exposure_time" in properties;
+    this.cameraCanReset = "reset_lens_shading" in actions;
+    await this.checkCalibrationState();
+  },
+  methods: {
+    /**
+     * Check if camera is calibrated
+     */
+    async checkCalibrationState() {
+      this.cameraCalibrated = await this.readThingProperty("camera", "calibration_required");
+    },
+    async decreaseExposure() {
+      let exposure = await this.readThingProperty("camera", "exposure_time");
+      await this.writeThingProperty("camera", "exposure_time", Math.round(exposure * 0.666));
+    },
+    async increaseExposure() {
+      let exposure = await this.readThingProperty("camera", "exposure_time");
+      await this.writeThingProperty("camera", "exposure_time", Math.round(exposure * 1.5));
+    },
+  },
+};
+</script>
+<style scoped>
+.button-gap {
+  gap: 35px;
+}
+</style>

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

@@ -12,6 +12,7 @@
 
 <script>
 import calibrationWizardTask from "./calibrationWizardTask.vue";
+import illuminationAlignmentStep from "./cameraCalibrationSteps/illuminationAlignmentStep.vue";
 import camCalibrationExplanation from "./cameraCalibrationSteps/camCalibrationExplanation.vue";
 import cameraMainCalibrationStep from "./cameraCalibrationSteps/cameraMainCalibrationStep.vue";
 import { markRaw } from "vue";
@@ -38,6 +39,7 @@ export default {
   data: function () {
     return {
       steps: [
+        { component: markRaw(illuminationAlignmentStep) },
         { component: markRaw(camCalibrationExplanation) },
         { component: markRaw(CameraFocusStep) },
         { component: markRaw(cameraMainCalibrationStep) },