From a1894c0dbf61e1b6a5d38021e2959a79a97c96a3 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Wed, 8 Jul 2026 16:58:22 +0100
Subject: [PATCH 1/2] Add an illumination adjustment step to calibration.

---
 .../illuminationAlignmentStep.vue             | 114 ++++++++++++++++++
 .../cameraCalibrationTask.vue                 |   2 +
 2 files changed, 116 insertions(+)
 create mode 100644 webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/illuminationAlignmentStep.vue

diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/illuminationAlignmentStep.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/illuminationAlignmentStep.vue
new file mode 100644
index 00000000..c4b71f0f
--- /dev/null
+++ b/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>
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationTask.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationTask.vue
index 12e6e383..e1dda34d 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationTask.vue
+++ b/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) },

From b7c0c60e63009f4bfa4711cc85208ef01a9609cf Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Wed, 8 Jul 2026 17:01:05 +0100
Subject: [PATCH 2/2] Adjust the before camera camera calibration step now
 illumination is seperate.

---
 .../cameraCalibrationSteps/camCalibrationExplanation.vue   | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/camCalibrationExplanation.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/camCalibrationExplanation.vue
index 4bb20f78..746c39f7 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/camCalibrationExplanation.vue
+++ b/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">
-        <li>Ensure your illumination is on, well focused, and centred.</li>
-        <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>
+      <p>Insert a slide with some empty areas within the coverslip.</p>
+      <p><i>If you don't have a slide with empty areas, don't insert a slide.</i></p>
     </div>
   </stepTemplateWithStream>
 </template>