From 1ba1a3082b09e4bb4ee8e2dc9373580dd996c615 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Wed, 5 Nov 2025 17:05:34 +0000
Subject: [PATCH 01/19] More consitent use of mixins for interaactiong with
 thing descriptions

---
 webapp/src/App.vue                            |  2 +-
 .../modalComponents/calibrationWizard.vue     |  4 +---
 .../aboutComponents/statusPane.vue            | 20 +++++++++--------
 .../tabContentComponents/powerContent.vue     |  6 ++---
 .../tabContentComponents/scanListContent.vue  |  7 +-----
 .../CSMCalibrationSettings.vue                |  4 ++--
 .../cameraCalibrationSettings.vue             |  2 +-
 webapp/src/main.js                            | 22 +++++++++++++++----
 webapp/src/wot-client.js                      |  7 ++++++
 9 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index b798e568..cc28983b 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -214,7 +214,7 @@ export default {
       try {
         await this.$store.dispatch("wot/fetchThingDescriptions", `${baseUri}/thing_descriptions/`);
         for (let requiredThing of ["camera", "stage"]) {
-          if (!this.$store.getters["wot/thingAvailable"](requiredThing)) {
+          if (!this.thingAvailable(requiredThing)) {
             throw new Error(`No ${requiredThing} found, the GUI won't work without one.`);
           }
         }
diff --git a/webapp/src/components/modalComponents/calibrationWizard.vue b/webapp/src/components/modalComponents/calibrationWizard.vue
index 6deb09ed..687263d8 100644
--- a/webapp/src/components/modalComponents/calibrationWizard.vue
+++ b/webapp/src/components/modalComponents/calibrationWizard.vue
@@ -78,13 +78,11 @@ export default {
       const calibrateableThings = Object.keys(this.availableCalibrationTasks);
 
       for (const name of calibrateableThings) {
-        try {
+        if (this.thingPropertyAvailable(name, "calibration_required")) {
           const thingNeedsCal = await this.readThingProperty(name, "calibration_required");
           if (thingNeedsCal) {
             needsCalibration.push(name);
           }
-        } catch (e) {
-          console.error(`${name}: missing calibration_required property`, e);
         }
       }
 
diff --git a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
index 2a045bb2..3a04754d 100644
--- a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
+++ b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
@@ -34,18 +34,16 @@
       <div class="uk-margin-small-bottom">
         <b>Camera:</b>
         <br />
-        <div v-if="'camera' in things">
-          {{ things.camera.title }}
+        <div>
+          {{ cameraType }}
         </div>
-        <div v-else class="uk-text-danger"><b>No camera configured</b></div>
       </div>
-      <div>
+      <div v-if="stageType">
         <b>Stage:</b>
         <br />
-        <div v-if="'stage' in things">
-          {{ things.stage.title }}
+        <div>
+          {{ stageType }}
         </div>
-        <div v-else class="uk-text-danger"><b>No stage configured</b></div>
       </div>
 
       <hr />
@@ -71,8 +69,12 @@ export default {
   },
 
   computed: {
-    things: function () {
-      return this.$store.getters["wot/thingDescriptions"];
+    cameraType() {
+      // No need to check as the microscope won't start up without a camera defined
+      return this.thingDescription("camera").title;
+    },
+    stageType() {
+      return this.thingAvailable("stage") ? this.thingDescription("stage").title : undefined;
     },
   },
 
diff --git a/webapp/src/components/tabContentComponents/powerContent.vue b/webapp/src/components/tabContentComponents/powerContent.vue
index ecb1c419..a1a6de49 100644
--- a/webapp/src/components/tabContentComponents/powerContent.vue
+++ b/webapp/src/components/tabContentComponents/powerContent.vue
@@ -10,7 +10,7 @@
     </p>
     <div class="buttons-container">
       <button
-        v-show="'shutdown' in things.system.actions"
+        v-show="shutdownAvailable"
         class="uk-button uk-button-primary uk-width-1-3 shutdown-button"
         @click="systemRequest('shutdown')"
       >
@@ -42,8 +42,8 @@ export default {
   },
 
   computed: {
-    things: function () {
-      return this.$store.getters["wot/thingDescriptions"];
+    shutdownAvailable() {
+      return this.thingActionAvailable("system", "shutdown");
     },
   },
 
diff --git a/webapp/src/components/tabContentComponents/scanListContent.vue b/webapp/src/components/tabContentComponents/scanListContent.vue
index bf85dd44..09f731c0 100644
--- a/webapp/src/components/tabContentComponents/scanListContent.vue
+++ b/webapp/src/components/tabContentComponents/scanListContent.vue
@@ -119,12 +119,7 @@ export default {
 
   computed: {
     scansUri() {
-      return this.$store.getters["wot/thingPropertyUrl"](
-        "smart_scan",
-        "scans",
-        "readproperty",
-        true,
-      );
+      return this.thingPropertyUrl("smart_scan", "scans");
     },
     scansEmpty() {
       return this.scans.length == 0;
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
index fc3359c4..1aea1b80 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
@@ -69,10 +69,10 @@ export default {
 
   computed: {
     actions() {
-      return this.$store.getters["wot/thingDescription"]("camera_stage_mapping").actions;
+      return this.thingDescription("camera_stage_mapping").actions;
     },
     properties() {
-      return this.$store.getters["wot/thingDescription"]("camera_stage_mapping").properties;
+      return this.thingDescription("camera_stage_mapping").properties;
     },
   },
 
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
index 9bc847de..80d674e6 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
@@ -52,7 +52,7 @@ export default {
 
   computed: {
     actions() {
-      return this.$store.getters["wot/thingDescription"]("camera").actions;
+      return this.thingDescription("camera").actions;
     },
   },
 
diff --git a/webapp/src/main.js b/webapp/src/main.js
index c60a7563..fb582300 100644
--- a/webapp/src/main.js
+++ b/webapp/src/main.js
@@ -36,13 +36,27 @@ Vue.mixin({
     thingAvailable(thing) {
       return this.$store.getters["wot/thingAvailable"](thing);
     },
-    async readThingProperty(thing, property, silence_errors = false) {
+    thingPropertyUrl(thing, property, allowUndefined = false) {
+      return this.$store.getters["wot/thingPropertyUrl"](
+        thing,
+        property,
+        "readproperty",
+        allowUndefined,
+      );
+    },
+    thingActionAvailable(thing, action) {
+      return this.$store.getters["wot/thingAffordanceAvailable"](thing, "actions", action);
+    },
+    thingPropertyAvailable(thing, property) {
+      return this.$store.getters["wot/thingAffordanceAvailable"](thing, "properties", property);
+    },
+    async readThingProperty(thing, property, silenceErrors = false) {
       let url = this.$store.getters["wot/thingPropertyUrl"](thing, property, "readproperty", false);
       try {
         let response = await axios.get(url);
         return response.data;
       } catch (error) {
-        if (!silence_errors) this.modalError(error);
+        if (!silenceErrors) this.modalError(error);
         return undefined;
       }
     },
@@ -71,12 +85,12 @@ Vue.mixin({
         return undefined;
       }
     },
-    thingActionUrl(thing, action, allow_missing = false) {
+    thingActionUrl(thing, action, allowUndefined = false) {
       let url = this.$store.getters["wot/thingActionUrl"](
         thing,
         action,
         "invokeaction",
-        allow_missing,
+        allowUndefined,
       );
       return url;
     },
diff --git a/webapp/src/wot-client.js b/webapp/src/wot-client.js
index ab717ee9..354fcd5e 100644
--- a/webapp/src/wot-client.js
+++ b/webapp/src/wot-client.js
@@ -57,6 +57,13 @@ export const wotStoreModule = {
     thingAvailable: (state) => (thingName) => {
       return thingName in state.thingDescriptions;
     },
+    thingAffordanceAvailable: (state) => (thing, affordanceType, affordance) => {
+      let td = state.thingDescriptions[thing];
+      if (!td) {
+        return false;
+      }
+      return affordance in td[affordanceType];
+    },
     thingFormUrl:
       (state) =>
       (thing, affordanceType, affordance, op, allowUndefined = true) => {

From cb74db80619eeaeef0e0258acc9e2295c612a759 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Wed, 5 Nov 2025 17:11:05 +0000
Subject: [PATCH 02/19] Remove genversion as it is no longer used

---
 webapp/package-lock.json | 193 ---------------------------------------
 webapp/package.json      |   5 +-
 webapp/src/main.js       |   4 -
 3 files changed, 2 insertions(+), 200 deletions(-)

diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 6dc1855c..109a45f9 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -29,7 +29,6 @@
         "eslint-config-prettier": "^8.10.2",
         "eslint-plugin-prettier": "^3.4.1",
         "eslint-plugin-vue": "^7.20.0",
-        "genversion": "^3.2.0",
         "less": "^4.4.2",
         "less-loader": "^11.1.4",
         "material-symbols": "^0.39.1",
@@ -7480,39 +7479,6 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
-    "node_modules/filelist": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
-      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "minimatch": "^5.0.1"
-      }
-    },
-    "node_modules/filelist/node_modules/brace-expansion": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
-      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/filelist/node_modules/minimatch": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/finalhandler": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
@@ -7566,16 +7532,6 @@
         "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
       }
     },
-    "node_modules/find-package": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/find-package/-/find-package-1.0.0.tgz",
-      "integrity": "sha512-yVn71XCCaNgxz58ERTl8nA/8YYtIQDY9mHSrgFBfiFtdNNfY0h183Vh8BRkKxD8x9TUw3ec290uJKhDVxqGZBw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "parents": "^1.0.1"
-      }
-    },
     "node_modules/find-up": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -7787,40 +7743,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/genversion": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/genversion/-/genversion-3.2.0.tgz",
-      "integrity": "sha512-OIYSX6XYA8PHecLDCTri30hadSZfAjZ8Iq1+BBDXqLWP4dRLuJNLoNjsSWtTpw97IccK2LDWzkEstxAB8GdN7g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "commander": "^7.2.0",
-        "ejs": "^3.1.9",
-        "find-package": "^1.0.0"
-      },
-      "bin": {
-        "genversion": "bin/genversion.js"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/genversion/node_modules/ejs": {
-      "version": "3.1.10",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
-      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "jake": "^10.8.5"
-      },
-      "bin": {
-        "ejs": "bin/cli.js"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -8646,101 +8568,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/jake": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.2.tgz",
-      "integrity": "sha512-2P4SQ0HrLQ+fw6llpLnOaGAvN2Zu6778SJMrCUwns4fOoG9ayrTiZk3VV8sCPkVZF8ab0zksVpS8FDY5pRCNBA==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "async": "^3.2.3",
-        "chalk": "^4.0.2",
-        "filelist": "^1.0.4",
-        "minimatch": "^3.1.2"
-      },
-      "bin": {
-        "jake": "bin/cli.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/jake/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/jake/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/jake/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/jake/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/jake/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jake/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/javascript-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.1.0.tgz",
@@ -10231,16 +10058,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/parents": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/parents/-/parents-1.0.1.tgz",
-      "integrity": "sha512-mXKF3xkoUt5td2DoxpLmtOmZvko9VfFpwRwkKDHSNvgmpLAeBo18YDhcPbBzJq+QLCHMbGOfzia2cX4U+0v9Mg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "path-platform": "~0.11.15"
-      }
-    },
     "node_modules/parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -10336,16 +10153,6 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
-    "node_modules/path-platform": {
-      "version": "0.11.15",
-      "resolved": "https://registry.npmjs.org/path-platform/-/path-platform-0.11.15.tgz",
-      "integrity": "sha512-Y30dB6rab1A/nfEKsZxmr01nUotHX0c/ZiIAsCTatEe1CmS5Pm5He7fZ195bPT7RdquoaL8lLxFCMQi/bS7IJg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
     "node_modules/path-to-regexp": {
       "version": "0.1.12",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index ed33319d..647643a3 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -6,8 +6,8 @@
   "author": "OpenFlexure <contact@openflexure.org> (https://www.openflexure.org)",
   "scripts": {
     "gv": "genversion src/version.js",
-    "serve": "npm run gv && vue-cli-service serve --mode development",
-    "build": "npm run gv && vue-cli-service build --mode production",
+    "serve": "vue-cli-service serve --mode development",
+    "build": "vue-cli-service build --mode production",
     "lint": "vue-cli-service lint --no-fix --max-warnings 0",
     "lint:fix": "vue-cli-service lint --fix"
   },
@@ -32,7 +32,6 @@
     "eslint-config-prettier": "^8.10.2",
     "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-vue": "^7.20.0",
-    "genversion": "^3.2.0",
     "less": "^4.4.2",
     "less-loader": "^11.1.4",
     "material-symbols": "^0.39.1",
diff --git a/webapp/src/main.js b/webapp/src/main.js
index fb582300..cad61001 100644
--- a/webapp/src/main.js
+++ b/webapp/src/main.js
@@ -8,7 +8,6 @@ import VueObserveVisibility from "vue-observe-visibility";
 
 // Import MD icons
 import "material-symbols/outlined.css";
-import version from "./version.js";
 
 // UIKit overrides
 UIkit.mixin(
@@ -27,9 +26,6 @@ Vue.config.productionTip = false;
 
 Vue.mixin({
   methods: {
-    app_version() {
-      return version;
-    },
     thingDescription(thing) {
       return this.$store.getters["wot/thingDescription"](thing);
     },

From 629126384681b3881c3303844f52f6efc7faf266 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Thu, 6 Nov 2025 15:19:04 +0000
Subject: [PATCH 03/19] Allow GUI to start without stage

---
 webapp/src/App.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index cc28983b..91a61659 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -1,5 +1,7 @@
 <template>
   <div id="app" class="uk-height-1-1 uk-margin-remove uk-padding-remove" :class="handleTheme">
+    <!-- this stops the app loading until setConnected is committed in the store, this means
+     other components will not load until we have Thing Descriptions. -->
     <loadingContent v-if="!$store.getters.ready" />
     <appContent v-if="$store.getters.ready" />
     <!-- Runtime modals -->
@@ -213,7 +215,7 @@ export default {
       // TODO: should we purge existing consumedThings?
       try {
         await this.$store.dispatch("wot/fetchThingDescriptions", `${baseUri}/thing_descriptions/`);
-        for (let requiredThing of ["camera", "stage"]) {
+        for (let requiredThing of ["camera", "system"]) {
           if (!this.thingAvailable(requiredThing)) {
             throw new Error(`No ${requiredThing} found, the GUI won't work without one.`);
           }
@@ -225,6 +227,7 @@ export default {
         } catch {
           this.$store.commit("changeMicroscopeHostname", null);
         }
+        // start rendering components
         this.$store.commit("setConnected");
         this.$store.commit("setErrorMessage", null);
       } catch (error) {

From 2ca69f942051e7180cacef47567c189c3894c92a Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Fri, 7 Nov 2025 12:24:44 +0000
Subject: [PATCH 04/19] split mixins into own directories

---
 webapp/src/main.js                   | 187 +--------------------------
 webapp/src/mixins/labThingsMixins.js |  78 +++++++++++
 webapp/src/mixins/modalMixins.js     | 127 ++++++++++++++++++
 3 files changed, 210 insertions(+), 182 deletions(-)
 create mode 100644 webapp/src/mixins/labThingsMixins.js
 create mode 100644 webapp/src/mixins/modalMixins.js

diff --git a/webapp/src/main.js b/webapp/src/main.js
index cad61001..2eef77b7 100644
--- a/webapp/src/main.js
+++ b/webapp/src/main.js
@@ -1,7 +1,6 @@
 import Vue from "vue";
 import App from "./App.vue";
 import store from "./store";
-import axios from "axios";
 import UIkit from "uikit";
 
 import VueObserveVisibility from "vue-observe-visibility";
@@ -9,6 +8,9 @@ import VueObserveVisibility from "vue-observe-visibility";
 // Import MD icons
 import "material-symbols/outlined.css";
 
+import queryMixin from "@/mixins/labThingsMixins.js";
+import modalMixin from "@/mixins/modalMixins.js";
+
 // UIKit overrides
 UIkit.mixin(
   {
@@ -24,187 +26,8 @@ Vue.use(VueObserveVisibility);
 
 Vue.config.productionTip = false;
 
-Vue.mixin({
-  methods: {
-    thingDescription(thing) {
-      return this.$store.getters["wot/thingDescription"](thing);
-    },
-    thingAvailable(thing) {
-      return this.$store.getters["wot/thingAvailable"](thing);
-    },
-    thingPropertyUrl(thing, property, allowUndefined = false) {
-      return this.$store.getters["wot/thingPropertyUrl"](
-        thing,
-        property,
-        "readproperty",
-        allowUndefined,
-      );
-    },
-    thingActionAvailable(thing, action) {
-      return this.$store.getters["wot/thingAffordanceAvailable"](thing, "actions", action);
-    },
-    thingPropertyAvailable(thing, property) {
-      return this.$store.getters["wot/thingAffordanceAvailable"](thing, "properties", property);
-    },
-    async readThingProperty(thing, property, silenceErrors = false) {
-      let url = this.$store.getters["wot/thingPropertyUrl"](thing, property, "readproperty", false);
-      try {
-        let response = await axios.get(url);
-        return response.data;
-      } catch (error) {
-        if (!silenceErrors) this.modalError(error);
-        return undefined;
-      }
-    },
-    async writeThingProperty(thing, property, value) {
-      let url = this.$store.getters["wot/thingPropertyUrl"](
-        thing,
-        property,
-        "writeproperty",
-        false,
-      );
-      // `false` fails because axios somehow eats it!
-      // Other values should not be stringified or pydantic
-      // can't parse them.
-      if ((value === false) | (value === true)) {
-        value = JSON.stringify(value);
-      }
-      await axios.put(url, value);
-    },
-    async invokeAction(thing, action, data) {
-      let url = this.$store.getters["wot/thingActionUrl"](thing, action, "invokeaction", false);
-      try {
-        let response = await axios.post(url, data);
-        return response;
-      } catch (error) {
-        this.modalError(error);
-        return undefined;
-      }
-    },
-    thingActionUrl(thing, action, allowUndefined = false) {
-      let url = this.$store.getters["wot/thingActionUrl"](
-        thing,
-        action,
-        "invokeaction",
-        allowUndefined,
-      );
-      return url;
-    },
-    modalConfirm: function (modalText) {
-      var context = this;
-
-      // Stop GPU preview to show modal
-      context.$root.$emit("globalTogglePreview", false);
-
-      // force OK to be capitalised
-      UIkit.modal.i18n = { ok: "OK", cancel: "Cancel" };
-
-      var showModal = function (resolve, reject) {
-        UIkit.modal
-          .confirm(modalText, { stack: true })
-          .then(
-            function () {
-              resolve();
-            },
-            function () {
-              reject();
-            },
-          )
-          .finally(function () {
-            // Re-enable the GPU preview, if it was active before the modal
-            if (context.$store.state.autoGpuPreview) {
-              context.$root.$emit("globalTogglePreview", true);
-            }
-            context.$root.$emit("modalClosed");
-          });
-      };
-      return new Promise(showModal);
-    },
-
-    modalNotify: function (message, status = "success") {
-      UIkit.notification({
-        message: message,
-        status: status,
-      });
-    },
-
-    modalDialog: function (title, message) {
-      UIkit.modal.dialog(
-        `
-        <button class="uk-modal-close-default" type="button" uk-close></button>
-        <div class="uk-modal-header">
-          <h2 class="uk-modal-title">${title}</h2>
-        </div>
-        <div class="uk-modal-body">
-          <p>${message}</p>
-        </div>
-      `,
-        { stack: true },
-      );
-    },
-
-    modalError: function (error) {
-      var errormsg = this.getErrorMessage(error);
-      this.$store.commit("setErrorMessage", errormsg);
-      UIkit.notification({
-        message: `${errormsg}`,
-        status: "danger",
-      });
-    },
-
-    getErrorMessage: function (error) {
-      // Format the error.
-      let data = this.getErrorData(error);
-      // Get error data may get an object. Handle edge cases and if not try to use
-      // JSON to get the best string. This stops "objectObject" showing as an error.
-      if (data === null) return "null";
-      if (data === undefined) return "undefined";
-      if (typeof data === "string") return data;
-      try {
-        return JSON.stringify(data, null, 2);
-      } catch (err) {
-        return String(data);
-      }
-    },
-    getErrorData: function (error) {
-      // If a response was obtained, extract the most specific message
-      if (error.response) {
-        // If the response is a nicely formatted JSON response from the server
-        if (error.response.data.message) {
-          return error.response.data.message;
-        }
-        if (error.response.data.detail) {
-          try {
-            return error.response.data.detail[0].msg;
-          } catch (err) {
-            return error.response.data.detail;
-          }
-        }
-        // If the response is just some generic error response
-        if (error.response.data) {
-          return error.response.data;
-        }
-        return error.response;
-      }
-      // If we have an error object with a message, use that
-      if (error.message) return error.message;
-      // At this point just formatting the whole error object is the best we can do.
-      return error;
-    },
-
-    showModalElement: function (element) {
-      UIkit.modal(element).show();
-    },
-
-    hideModalElement: function (element) {
-      UIkit.modal(element).hide();
-    },
-
-    toggleModalElement: function (element) {
-      UIkit.modal(element).toggle();
-    },
-  },
-});
+Vue.mixin(queryMixin);
+Vue.mixin(modalMixin);
 
 new Vue({
   store,
diff --git a/webapp/src/mixins/labThingsMixins.js b/webapp/src/mixins/labThingsMixins.js
new file mode 100644
index 00000000..84938d70
--- /dev/null
+++ b/webapp/src/mixins/labThingsMixins.js
@@ -0,0 +1,78 @@
+/**
+ * @fileoverview
+ * Global mixin providing access to the LabThings (WoT) API.
+ *
+ * This mixin is registered globally in `main.js` using. Do not
+ * manually import it in components.
+ */
+
+import axios from "axios";
+
+export default {
+  methods: {
+    thingDescription(thing) {
+      return this.$store.getters["wot/thingDescription"](thing);
+    },
+    thingAvailable(thing) {
+      return this.$store.getters["wot/thingAvailable"](thing);
+    },
+    thingPropertyUrl(thing, property, allowUndefined = false) {
+      return this.$store.getters["wot/thingPropertyUrl"](
+        thing,
+        property,
+        "readproperty",
+        allowUndefined,
+      );
+    },
+    thingActionAvailable(thing, action) {
+      return this.$store.getters["wot/thingAffordanceAvailable"](thing, "actions", action);
+    },
+    thingPropertyAvailable(thing, property) {
+      return this.$store.getters["wot/thingAffordanceAvailable"](thing, "properties", property);
+    },
+    async readThingProperty(thing, property, silenceErrors = false) {
+      let url = this.$store.getters["wot/thingPropertyUrl"](thing, property, "readproperty", false);
+      try {
+        let response = await axios.get(url);
+        return response.data;
+      } catch (error) {
+        if (!silenceErrors) this.modalError(error);
+        return undefined;
+      }
+    },
+    async writeThingProperty(thing, property, value) {
+      let url = this.$store.getters["wot/thingPropertyUrl"](
+        thing,
+        property,
+        "writeproperty",
+        false,
+      );
+      // `false` fails because axios somehow eats it!
+      // Other values should not be stringified or pydantic
+      // can't parse them.
+      if ((value === false) | (value === true)) {
+        value = JSON.stringify(value);
+      }
+      await axios.put(url, value);
+    },
+    async invokeAction(thing, action, data) {
+      let url = this.$store.getters["wot/thingActionUrl"](thing, action, "invokeaction", false);
+      try {
+        let response = await axios.post(url, data);
+        return response;
+      } catch (error) {
+        this.modalError(error);
+        return undefined;
+      }
+    },
+    thingActionUrl(thing, action, allowUndefined = false) {
+      let url = this.$store.getters["wot/thingActionUrl"](
+        thing,
+        action,
+        "invokeaction",
+        allowUndefined,
+      );
+      return url;
+    },
+  },
+};
diff --git a/webapp/src/mixins/modalMixins.js b/webapp/src/mixins/modalMixins.js
new file mode 100644
index 00000000..f13dc21f
--- /dev/null
+++ b/webapp/src/mixins/modalMixins.js
@@ -0,0 +1,127 @@
+/**
+ * @fileoverview
+ * Global mixin providing modal functionality.
+ *
+ * This mixin is registered globally in `main.js` using. Do not
+ * manually import it in components.
+ */
+
+import UIkit from "uikit";
+
+export default {
+  methods: {
+    modalConfirm: function (modalText) {
+      var context = this;
+
+      // Stop GPU preview to show modal
+      context.$root.$emit("globalTogglePreview", false);
+
+      // force OK to be capitalised
+      UIkit.modal.i18n = { ok: "OK", cancel: "Cancel" };
+
+      var showModal = function (resolve, reject) {
+        UIkit.modal
+          .confirm(modalText, { stack: true })
+          .then(
+            function () {
+              resolve();
+            },
+            function () {
+              reject();
+            },
+          )
+          .finally(function () {
+            // Re-enable the GPU preview, if it was active before the modal
+            if (context.$store.state.autoGpuPreview) {
+              context.$root.$emit("globalTogglePreview", true);
+            }
+            context.$root.$emit("modalClosed");
+          });
+      };
+      return new Promise(showModal);
+    },
+
+    modalNotify: function (message, status = "success") {
+      UIkit.notification({
+        message: message,
+        status: status,
+      });
+    },
+
+    modalDialog: function (title, message) {
+      UIkit.modal.dialog(
+        `
+        <button class="uk-modal-close-default" type="button" uk-close></button>
+        <div class="uk-modal-header">
+          <h2 class="uk-modal-title">${title}</h2>
+        </div>
+        <div class="uk-modal-body">
+          <p>${message}</p>
+        </div>
+      `,
+        { stack: true },
+      );
+    },
+
+    modalError: function (error) {
+      var errormsg = this.getErrorMessage(error);
+      this.$store.commit("setErrorMessage", errormsg);
+      UIkit.notification({
+        message: `${errormsg}`,
+        status: "danger",
+      });
+    },
+
+    getErrorMessage: function (error) {
+      // Format the error.
+      let data = this.getErrorData(error);
+      // Get error data may get an object. Handle edge cases and if not try to use
+      // JSON to get the best string. This stops "objectObject" showing as an error.
+      if (data === null) return "null";
+      if (data === undefined) return "undefined";
+      if (typeof data === "string") return data;
+      try {
+        return JSON.stringify(data, null, 2);
+      } catch (err) {
+        return String(data);
+      }
+    },
+    getErrorData: function (error) {
+      // If a response was obtained, extract the most specific message
+      if (error.response) {
+        // If the response is a nicely formatted JSON response from the server
+        if (error.response.data.message) {
+          return error.response.data.message;
+        }
+        if (error.response.data.detail) {
+          try {
+            return error.response.data.detail[0].msg;
+          } catch (err) {
+            return error.response.data.detail;
+          }
+        }
+        // If the response is just some generic error response
+        if (error.response.data) {
+          return error.response.data;
+        }
+        return error.response;
+      }
+      // If we have an error object with a message, use that
+      if (error.message) return error.message;
+      // At this point just formatting the whole error object is the best we can do.
+      return error;
+    },
+
+    showModalElement: function (element) {
+      UIkit.modal(element).show();
+    },
+
+    hideModalElement: function (element) {
+      UIkit.modal(element).hide();
+    },
+
+    toggleModalElement: function (element) {
+      UIkit.modal(element).toggle();
+    },
+  },
+};

From bb5bc503ef905bba065cc39b26b62d6f2db1f280 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Fri, 7 Nov 2025 12:54:00 +0000
Subject: [PATCH 05/19] Improve importing of tabs

---
 webapp/src/components/appContent.vue | 26 +++++++-------------------
 webapp/src/store.js                  |  4 ----
 webapp/src/wot-client.js             |  3 +++
 3 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/webapp/src/components/appContent.vue b/webapp/src/components/appContent.vue
index 401b6d16..e4c6743a 100644
--- a/webapp/src/components/appContent.vue
+++ b/webapp/src/components/appContent.vue
@@ -81,19 +81,18 @@ import tabIcon from "./genericComponents/tabIcon";
 import tabContent from "./genericComponents/tabContent";
 
 // Import new content components
-import controlContent from "./tabContentComponents/controlContent.vue";
-import slideScanContent from "./tabContentComponents/slideScanContent.vue";
-import backgroundDetectContent from "./tabContentComponents/backgroundDetectContent.vue";
-import viewContent from "./tabContentComponents/viewContent.vue";
-import settingsContent from "./tabContentComponents/settingsContent.vue";
 import aboutContent from "./tabContentComponents/aboutContent.vue";
+import backgroundDetectContent from "./tabContentComponents/backgroundDetectContent.vue";
+import controlContent from "./tabContentComponents/controlContent.vue";
 import loggingContent from "./tabContentComponents/loggingContent.vue";
 import powerContent from "./tabContentComponents/powerContent.vue";
+import scanListContent from "./tabContentComponents/scanListContent.vue";
+import settingsContent from "./tabContentComponents/settingsContent.vue";
+import slideScanContent from "./tabContentComponents/slideScanContent.vue";
+import viewContent from "./tabContentComponents/viewContent.vue";
 
 // Import modal components for device initialisation
 import calibrationWizard from "./modalComponents/calibrationWizard.vue";
-import TabIcon from "./genericComponents/tabIcon.vue";
-import ScanListContent from "./tabContentComponents/scanListContent.vue";
 
 // Export main app
 export default {
@@ -102,15 +101,7 @@ export default {
   components: {
     tabIcon,
     tabContent,
-    controlContent,
-    slideScanContent,
-    viewContent,
-    settingsContent,
     calibrationWizard,
-    aboutContent,
-    loggingContent,
-    TabIcon,
-    powerContent,
   },
   data: function () {
     return {
@@ -178,12 +169,9 @@ export default {
         {
           id: "scan list",
           icon: "photo_library",
-          component: ScanListContent,
+          component: scanListContent,
         },
       ];
-      if (!this.$store.state.galleryEnabled) {
-        tabs = tabs.filter((tab) => tab.id != "gallery");
-      }
       return tabs;
     },
     allTabs() {
diff --git a/webapp/src/store.js b/webapp/src/store.js
index 625e376b..8b8a88c6 100644
--- a/webapp/src/store.js
+++ b/webapp/src/store.js
@@ -66,7 +66,6 @@ export default new Vuex.Store({
     error: "",
     autoGpuPreview: false,
     trackWindow: true,
-    galleryEnabled: true,
     activeStreams: {},
     microscopeHostname: "",
     // Persistent items:
@@ -108,9 +107,6 @@ export default new Vuex.Store({
     changeAppTheme(state, theme) {
       state.appTheme = theme;
     },
-    changeGalleryEnabled(state, enabled) {
-      state.galleryEnabled = enabled;
-    },
     resetState(state) {
       state.waiting = false;
       state.available = false;
diff --git a/webapp/src/wot-client.js b/webapp/src/wot-client.js
index 354fcd5e..64910ed5 100644
--- a/webapp/src/wot-client.js
+++ b/webapp/src/wot-client.js
@@ -51,6 +51,9 @@ export const wotStoreModule = {
     thingDescriptions: (state) => {
       return state.thingDescriptions;
     },
+    thingList: (state) => {
+      return Object.keys(state.thingDescriptions);
+    },
     thingDescription: (state) => (thingName) => {
       return state.thingDescriptions[thingName];
     },

From 0b0483f4c77e632db77b2daee75b404f43bc8974 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Fri, 7 Nov 2025 13:14:15 +0000
Subject: [PATCH 06/19] Use tabIcon title for tabs seperate id from what is
 displayed

Closes #385
---
 webapp/src/components/appContent.vue | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/webapp/src/components/appContent.vue b/webapp/src/components/appContent.vue
index e4c6743a..d23b29ef 100644
--- a/webapp/src/components/appContent.vue
+++ b/webapp/src/components/appContent.vue
@@ -15,6 +15,7 @@
             :id="item.id + '-tab-icon'"
             :key="item.id + '-tab-icon'"
             :tab-i-d="item.id"
+            :title="item.title"
             :require-connection="true"
             :current-tab="currentTab"
             :class="item.class"
@@ -42,6 +43,7 @@
             :id="item.id + '-tab-icon'"
             :key="item.id + '-tab-icon'"
             :tab-i-d="item.id"
+            :title="item.title"
             :require-connection="true"
             :current-tab="currentTab"
             :class="item.class"
@@ -109,22 +111,26 @@ export default {
       bottomTabs: [
         {
           id: "settings",
+          title: "Settings",
           icon: "settings",
           component: settingsContent,
           class: "uk-margin-auto-top",
         },
         {
           id: "logging",
+          title: "Logging",
           icon: "assignment_late",
           component: loggingContent,
         },
         {
           id: "about",
+          title: "About",
           icon: "info",
           component: aboutContent,
         },
         {
           id: "power",
+          title: "Power",
           icon: "power_settings_new",
           component: powerContent,
         },
@@ -148,26 +154,31 @@ export default {
       let tabs = [
         {
           id: "view",
+          title: "View",
           icon: "visibility",
           component: viewContent,
         },
         {
           id: "control",
+          title: "Control",
           icon: "gamepad",
           component: controlContent,
         },
         {
-          id: "background detect",
+          id: "background-detect",
+          title: "Background Detect",
           icon: "background_replace",
           component: backgroundDetectContent,
         },
         {
-          id: "slide scan",
+          id: "slide-scan",
+          title: "Slide Scan",
           icon: "settings_overscan",
           component: slideScanContent,
         },
         {
-          id: "scan list",
+          id: "scan-list",
+          title: "Scan List",
           icon: "photo_library",
           component: scanListContent,
         },

From f35c96d653a61b5460d8e6b7a990546b776a6e00 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Fri, 7 Nov 2025 14:10:09 +0000
Subject: [PATCH 07/19] Conditionally render tabs based on available Things

---
 webapp/src/components/appContent.vue          | 78 +++++++++++--------
 .../controlComponents/paneControl.vue         |  5 +-
 .../tabContentComponents/slideScanContent.vue |  7 +-
 webapp/src/mixins/labThingsMixins.js          |  3 +
 4 files changed, 53 insertions(+), 40 deletions(-)

diff --git a/webapp/src/components/appContent.vue b/webapp/src/components/appContent.vue
index d23b29ef..d2460eba 100644
--- a/webapp/src/components/appContent.vue
+++ b/webapp/src/components/appContent.vue
@@ -135,6 +135,45 @@ export default {
           component: powerContent,
         },
       ],
+      coreTopTabs: [
+        {
+          id: "view",
+          title: "View",
+          icon: "visibility",
+          component: viewContent,
+          requiredThings: [],
+        },
+        {
+          id: "control",
+          title: "Control",
+          icon: "gamepad",
+          component: controlContent,
+          requiredThings: [],
+        },
+        {
+          id: "background-detect",
+          title: "Background Detect",
+          icon: "background_replace",
+          component: backgroundDetectContent,
+          // While stage isn't needed; automatic background detect has little function
+          // for a manual microscope.
+          requiredThings: ["stage"],
+        },
+        {
+          id: "slide-scan",
+          title: "Slide Scan",
+          icon: "settings_overscan",
+          component: slideScanContent,
+          requiredThings: ["smart_scan"],
+        },
+        {
+          id: "scan-list",
+          title: "Scan List",
+          icon: "photo_library",
+          component: scanListContent,
+          requiredThings: ["smart_scan"],
+        },
+      ],
     };
   },
 
@@ -151,39 +190,12 @@ export default {
     },
 
     topTabs: function () {
-      let tabs = [
-        {
-          id: "view",
-          title: "View",
-          icon: "visibility",
-          component: viewContent,
-        },
-        {
-          id: "control",
-          title: "Control",
-          icon: "gamepad",
-          component: controlContent,
-        },
-        {
-          id: "background-detect",
-          title: "Background Detect",
-          icon: "background_replace",
-          component: backgroundDetectContent,
-        },
-        {
-          id: "slide-scan",
-          title: "Slide Scan",
-          icon: "settings_overscan",
-          component: slideScanContent,
-        },
-        {
-          id: "scan-list",
-          title: "Scan List",
-          icon: "photo_library",
-          component: scanListContent,
-        },
-      ];
-      return tabs;
+      // Filter core top tabs based on available Things. Once Things can specify a
+      // custom tab those will need to be added here
+      return this.coreTopTabs.filter((tab) => {
+        if (!tab.requiredThings || tab.requiredThings.length === 0) return true;
+        return tab.requiredThings.every((thing) => this.thingAvailable(thing));
+      });
     },
     allTabs() {
       return [...this.topTabs, ...this.bottomTabs];
diff --git a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
index 6122db74..34c4776a 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="paneControl" class="uk-padding-small">
-    <div v-if="setPosition">
+    <div v-if="stageAvailable">
       <ul uk-accordion="multiple: true">
         <li>
           <a class="uk-accordion-title" href="#">Configure</a>
@@ -167,6 +167,9 @@ export default {
   },
 
   computed: {
+    stageAvailable() {
+      return this.thingAvailable("stage");
+    },
     // Note that as stepSize and invert are set based on internals we can use
     // get() and set() to interact with the store. Instead use a deep watcher to
     // update the store (see ``watch:`` below)
diff --git a/webapp/src/components/tabContentComponents/slideScanContent.vue b/webapp/src/components/tabContentComponents/slideScanContent.vue
index 21d3ce2a..0fdf6e1f 100644
--- a/webapp/src/components/tabContentComponents/slideScanContent.vue
+++ b/webapp/src/components/tabContentComponents/slideScanContent.vue
@@ -1,7 +1,5 @@
 <template>
-  <div v-if="!backendOK" class="uk-alert-danger">No scan back-end found.</div>
-  <!-- Grid managing tab content -->
-  <div v-else uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
+  <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
     <div class="control-component uk-padding-small">
       <div v-show="!scanning" class="uk-padding-small">
         <ul uk-accordion="multiple: true">
@@ -183,9 +181,6 @@ export default {
   },
 
   computed: {
-    backendOK() {
-      return this.thingAvailable("smart_scan");
-    },
     cancellable() {
       return (this.taskStatus == "running") | (this.taskStatus == "pending");
     },
diff --git a/webapp/src/mixins/labThingsMixins.js b/webapp/src/mixins/labThingsMixins.js
index 84938d70..30e54a14 100644
--- a/webapp/src/mixins/labThingsMixins.js
+++ b/webapp/src/mixins/labThingsMixins.js
@@ -13,6 +13,9 @@ export default {
     thingDescription(thing) {
       return this.$store.getters["wot/thingDescription"](thing);
     },
+    thingList() {
+      return this.$store.getters["wot/thingList"];
+    },
     thingAvailable(thing) {
       return this.$store.getters["wot/thingAvailable"](thing);
     },

From f9020fc6a05bc04372a9a452c374e281825ec5f8 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Fri, 7 Nov 2025 14:46:55 +0000
Subject: [PATCH 08/19] Conditionally render settings tabs based on available
 Things

---
 .../settingsComponents/displaySettings.vue    |  21 +++
 .../appSettings.vue                           |   0
 .../streamSettings.vue                        |   0
 .../tabContentComponents/settingsContent.vue  | 136 ++++++++++--------
 4 files changed, 94 insertions(+), 63 deletions(-)
 create mode 100644 webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue
 rename webapp/src/components/tabContentComponents/settingsComponents/{ => displaySetttingsComponents}/appSettings.vue (100%)
 rename webapp/src/components/tabContentComponents/settingsComponents/{ => displaySetttingsComponents}/streamSettings.vue (100%)

diff --git a/webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue
new file mode 100644
index 00000000..450c803c
--- /dev/null
+++ b/webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <appSettings />
+    <streamSettings />
+  </div>
+</template>
+
+<script>
+import appSettings from "./displaySetttingsComponents/appSettings.vue";
+import streamSettings from "./displaySetttingsComponents/streamSettings.vue";
+
+// Export main app
+export default {
+  name: "SettingsContent",
+
+  components: {
+    streamSettings,
+    appSettings,
+  },
+};
+</script>
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/appSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/displaySetttingsComponents/appSettings.vue
similarity index 100%
rename from webapp/src/components/tabContentComponents/settingsComponents/appSettings.vue
rename to webapp/src/components/tabContentComponents/settingsComponents/displaySetttingsComponents/appSettings.vue
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/streamSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/displaySetttingsComponents/streamSettings.vue
similarity index 100%
rename from webapp/src/components/tabContentComponents/settingsComponents/streamSettings.vue
rename to webapp/src/components/tabContentComponents/settingsComponents/displaySetttingsComponents/streamSettings.vue
diff --git a/webapp/src/components/tabContentComponents/settingsContent.vue b/webapp/src/components/tabContentComponents/settingsContent.vue
index 7f1003bc..51b2867d 100644
--- a/webapp/src/components/tabContentComponents/settingsContent.vue
+++ b/webapp/src/components/tabContentComponents/settingsContent.vue
@@ -5,17 +5,17 @@
     <div class="settings-nav">
       <ul class="uk-nav uk-nav-default">
         <li class="uk-nav-header">Application Settings</li>
-        <li>
+        <li v-for="item in appTabs" :key="'setting' + item.id + '-tab-content'">
           <tabIcon
-            id="settings-display-icon"
-            tab-i-d="display"
+            :id="'setting' + item.id + '-tab-content'"
+            :tab-i-d="item.id"
             :show-title="false"
             :show-tooltip="false"
-            :require-connection="false"
+            :require-connection="item.requireConnection"
             :current-tab="currentTab"
             @set-tab="setTab"
           >
-            Display
+            {{ item.title }}
           </tabIcon>
         </li>
         <li class="uk-nav-header">Microscope Settings</li>
@@ -27,81 +27,40 @@
         >
           Launch Calibration Wizard
         </button>
-        <li>
+        <li v-for="item in calibrationTabs" :key="'setting' + item.id + '-tab-content'">
           <tabIcon
-            id="settings-camera-icon"
-            tab-i-d="camera"
+            :id="'setting' + item.id + '-tab-content'"
+            :tab-i-d="item.id"
             :show-title="false"
             :show-tooltip="false"
-            :require-connection="true"
+            :require-connection="item.requireConnection"
             :current-tab="currentTab"
             @set-tab="setTab"
           >
-            Camera
-          </tabIcon>
-        </li>
-        <li>
-          <tabIcon
-            id="settings-stage-icon"
-            tab-i-d="stage"
-            :show-title="false"
-            :show-tooltip="false"
-            :require-connection="true"
-            :current-tab="currentTab"
-            @set-tab="setTab"
-          >
-            Stage
-          </tabIcon>
-        </li>
-        <li>
-          <tabIcon
-            id="settings-mapping-icon"
-            tab-i-d="mapping"
-            :show-title="false"
-            :show-tooltip="false"
-            :require-connection="true"
-            :current-tab="currentTab"
-            @set-tab="setTab"
-          >
-            Camera to Stage Mapping
+            {{ item.title }}
           </tabIcon>
         </li>
       </ul>
     </div>
     <div class="view-component uk-width-expand uk-padding-small">
-      <tabContent tab-i-d="display" :require-connection="false" :current-tab="currentTab">
-        <div class="settings-pane uk-padding-small">
-          <appSettings />
-          <streamSettings />
-        </div>
-      </tabContent>
-
-      <tabContent tab-i-d="camera" :require-connection="true" :current-tab="currentTab">
-        <div class="settings-pane uk-padding-small">
-          <cameraSettings />
-        </div>
-      </tabContent>
-
-      <tabContent tab-i-d="stage" :require-connection="true" :current-tab="currentTab">
-        <div class="settings-pane uk-padding-small">
-          <stageSettings />
-        </div>
-      </tabContent>
-
-      <tabContent tab-i-d="mapping" :require-connection="true" :current-tab="currentTab">
-        <div class="settings-pane uk-padding-small">
-          <CSMSettings />
-        </div>
+      <tabContent
+        v-for="item in allTabs"
+        :id="'setting' + item.id + '-tab-content'"
+        :key="'setting' + item.id + '-tab-content'"
+        :tab-i-d="item.id"
+        :require-connection="item.requireConnection"
+        :current-tab="currentTab"
+      >
+        <component :is="item.component"></component>
       </tabContent>
     </div>
   </div>
 </template>
 
 <script>
-import streamSettings from "./settingsComponents/streamSettings.vue";
+import displaySettings from "./settingsComponents/displaySettings.vue";
 import calibrationWizard from "../modalComponents/calibrationWizard.vue";
 import cameraSettings from "./settingsComponents/cameraSettings.vue";
-import appSettings from "./settingsComponents/appSettings.vue";
 import CSMSettings from "./settingsComponents/CSMSettings.vue";
 import stageSettings from "./settingsComponents/stageSettings.vue";
 // Import generic components
@@ -113,11 +72,10 @@ export default {
   name: "SettingsContent",
 
   components: {
-    streamSettings,
+    displaySettings,
     cameraSettings,
     stageSettings,
     CSMSettings,
-    appSettings,
     tabIcon,
     tabContent,
     calibrationWizard,
@@ -127,9 +85,61 @@ export default {
     return {
       selected: "display",
       currentTab: "display",
+      coreAppTabs: [
+        {
+          id: "display",
+          title: "Display",
+          requireConnection: false,
+          component: displaySettings,
+          requiredThings: [],
+        },
+      ],
+      coreCalibrationTabs: [
+        {
+          id: "camera",
+          title: "Camera",
+          requireConnection: true,
+          component: cameraSettings,
+          requiredThings: [],
+        },
+        {
+          id: "stage",
+          title: "Stage",
+          requireConnection: true,
+          component: stageSettings,
+          requiredThings: ["stage"],
+        },
+        {
+          id: "mapping",
+          title: "Camera to Stage Mapping",
+          requireConnection: true,
+          component: CSMSettings,
+          requiredThings: ["camera_stage_mapping"],
+        },
+      ],
     };
   },
 
+  computed: {
+    allTabs() {
+      return [...this.appTabs, ...this.calibrationTabs];
+    },
+    appTabs() {
+      console.log(this.coreAppTabs);
+      // Filter core top tabs based on available Things.
+      return this.coreAppTabs.filter((tab) => {
+        if (!tab.requiredThings || tab.requiredThings.length === 0) return true;
+        return tab.requiredThings.every((thing) => this.thingAvailable(thing));
+      });
+    },
+    calibrationTabs() {
+      // Filter core top tabs based on available Things.
+      return this.coreCalibrationTabs.filter((tab) => {
+        if (!tab.requiredThings || tab.requiredThings.length === 0) return true;
+        return tab.requiredThings.every((thing) => this.thingAvailable(thing));
+      });
+    },
+  },
   methods: {
     setTab: function (event, tab) {
       if (!(this.currentTab == tab)) {

From e2c2db3d1790fbaae546e75eefb67b5bfae19547 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Fri, 7 Nov 2025 15:39:32 +0000
Subject: [PATCH 09/19] Move stage control preferences to settings

---
 .../controlComponents/paneControl.vue         | 90 +++----------------
 .../settingsComponents/displaySettings.vue    |  2 +-
 .../stageControlSettings.vue                  | 69 ++++++++++++++
 .../tabContentComponents/settingsContent.vue  | 13 +--
 4 files changed, 92 insertions(+), 82 deletions(-)
 create mode 100644 webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue

diff --git a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
index 34c4776a..7080daac 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
@@ -2,50 +2,6 @@
   <div id="paneControl" class="uk-padding-small">
     <div v-if="stageAvailable">
       <ul uk-accordion="multiple: true">
-        <li>
-          <a class="uk-accordion-title" href="#">Configure</a>
-          <div class="uk-accordion-content">
-            <b>Keyboard Step Size</b>
-            <div class="uk-grid-small uk-child-width-1-3" uk-grid>
-              <div>
-                <label class="uk-form-label" for="form-stacked-text">x</label>
-                <div class="uk-form-controls">
-                  <input v-model="stepSize.x" class="uk-input uk-form-small" type="number" />
-                </div>
-                <label class="uk-margin-small-right"
-                  ><input v-model="invert.x" class="uk-checkbox" type="checkbox" /> Invert x</label
-                >
-              </div>
-
-              <div>
-                <label class="uk-form-label" for="form-stacked-text">y</label>
-                <div class="uk-form-controls">
-                  <input v-model="stepSize.y" class="uk-input uk-form-small" type="number" />
-                </div>
-                <label class="uk-margin-small-right"
-                  ><input v-model="invert.y" class="uk-checkbox" type="checkbox" /> Invert y</label
-                >
-              </div>
-
-              <div>
-                <label class="uk-form-label" for="form-stacked-text">z</label>
-                <div class="uk-form-controls">
-                  <input v-model="stepSize.z" class="uk-input uk-form-small" type="number" />
-                </div>
-              </div>
-            </div>
-            <br />
-            <action-button
-              thing="stage"
-              action="set_zero_position"
-              submit-label="Zero Coordinates"
-              :can-terminate="false"
-              @finished="updatePosition"
-              @error="modalError"
-            />
-          </div>
-        </li>
-
         <li class="uk-open">
           <a class="uk-accordion-title" href="#">Position</a>
           <div class="uk-accordion-content">
@@ -80,9 +36,16 @@
                 />
               </p>
             </form>
+            <action-button
+              thing="stage"
+              action="set_zero_position"
+              submit-label="Zero Coordinates"
+              :can-terminate="false"
+              @finished="updatePosition"
+              @error="modalError"
+            />
           </div>
         </li>
-
         <!--Show autofocus if default plugin is enabled-->
         <li class="uk-open">
           <a class="uk-accordion-title" href="#">Autofocus</a>
@@ -170,15 +133,6 @@ export default {
     stageAvailable() {
       return this.thingAvailable("stage");
     },
-    // Note that as stepSize and invert are set based on internals we can use
-    // get() and set() to interact with the store. Instead use a deep watcher to
-    // update the store (see ``watch:`` below)
-    stepSize() {
-      return this.$store.state.navigationStepSize;
-    },
-    invert() {
-      return this.$store.state.navigationInvert;
-    },
     baseUri: function () {
       return this.$store.getters.baseUri;
     },
@@ -190,21 +144,6 @@ export default {
     },
   },
 
-  watch: {
-    stepSize: {
-      deep: true,
-      handler(newVal) {
-        this.$store.commit("changeNavigationStepSize", newVal);
-      },
-    },
-    invert: {
-      deep: true,
-      handler(newVal) {
-        this.$store.commit("changeNavigationInvert", newVal);
-      },
-    },
-  },
-
   async mounted() {
     let self = this;
     // A global signal listener to perform a move action
@@ -215,13 +154,12 @@ export default {
     });
     // A global signal listener to perform a move in multiples of a step size
     this.$root.$on("globalMoveStepEvent", (x_steps, y_steps, z_steps) => {
-      this.$root.$emit(
-        "globalMoveEvent",
-        x_steps * this.stepSize.x * (this.invert.x ? -1 : 1),
-        y_steps * this.stepSize.y * (this.invert.y ? -1 : 1),
-        z_steps * this.stepSize.z * (this.invert.z ? -1 : 1),
-        false,
-      );
+      const navigationStepSize = this.$store.state.navigationStepSize;
+      const navigationInvert = this.$store.state.navigationInvert;
+      const x = x_steps * navigationStepSize.x * (navigationInvert.x ? -1 : 1);
+      const y = y_steps * navigationStepSize.y * (navigationInvert.y ? -1 : 1);
+      const z = z_steps * navigationStepSize.z * (navigationInvert.z ? -1 : 1);
+      this.$root.$emit("globalMoveEvent", x, y, z, false);
     });
     // Update the current position in text boxes
     await this.updatePosition();
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue
index 450c803c..4a5476ba 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue
@@ -11,7 +11,7 @@ import streamSettings from "./displaySetttingsComponents/streamSettings.vue";
 
 // Export main app
 export default {
-  name: "SettingsContent",
+  name: "DisplaySettings",
 
   components: {
     streamSettings,
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue
new file mode 100644
index 00000000..d8118876
--- /dev/null
+++ b/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <a class="uk-accordion-title" href="#">Configure</a>
+    <div class="uk-accordion-content">
+      <b>Keyboard Step Size</b>
+      <div class="uk-grid-small uk-child-width-1-3" uk-grid>
+        <div>
+          <label class="uk-form-label" for="form-stacked-text">x</label>
+          <div class="uk-form-controls">
+            <input v-model="stepSize.x" class="uk-input uk-form-small" type="number" />
+          </div>
+          <label class="uk-margin-small-right"
+            ><input v-model="invert.x" class="uk-checkbox" type="checkbox" /> Invert x</label
+          >
+        </div>
+
+        <div>
+          <label class="uk-form-label" for="form-stacked-text">y</label>
+          <div class="uk-form-controls">
+            <input v-model="stepSize.y" class="uk-input uk-form-small" type="number" />
+          </div>
+          <label class="uk-margin-small-right"
+            ><input v-model="invert.y" class="uk-checkbox" type="checkbox" /> Invert y</label
+          >
+        </div>
+
+        <div>
+          <label class="uk-form-label" for="form-stacked-text">z</label>
+          <div class="uk-form-controls">
+            <input v-model="stepSize.z" class="uk-input uk-form-small" type="number" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SatgeControlSettings",
+
+  computed: {
+    // Note that as stepSize and invert are set based on internals we can use
+    // get() and set() to interact with the store. Instead use a deep watcher to
+    // update the store (see ``watch:`` below)
+    stepSize() {
+      return this.$store.state.navigationStepSize;
+    },
+    invert() {
+      return this.$store.state.navigationInvert;
+    },
+  },
+
+  watch: {
+    stepSize: {
+      deep: true,
+      handler(newVal) {
+        this.$store.commit("changeNavigationStepSize", newVal);
+      },
+    },
+    invert: {
+      deep: true,
+      handler(newVal) {
+        this.$store.commit("changeNavigationInvert", newVal);
+      },
+    },
+  },
+};
+</script>
diff --git a/webapp/src/components/tabContentComponents/settingsContent.vue b/webapp/src/components/tabContentComponents/settingsContent.vue
index 51b2867d..97ca3fbc 100644
--- a/webapp/src/components/tabContentComponents/settingsContent.vue
+++ b/webapp/src/components/tabContentComponents/settingsContent.vue
@@ -59,6 +59,7 @@
 
 <script>
 import displaySettings from "./settingsComponents/displaySettings.vue";
+import stageControlSettings from "./settingsComponents/stageControlSettings.vue";
 import calibrationWizard from "../modalComponents/calibrationWizard.vue";
 import cameraSettings from "./settingsComponents/cameraSettings.vue";
 import CSMSettings from "./settingsComponents/CSMSettings.vue";
@@ -72,10 +73,6 @@ export default {
   name: "SettingsContent",
 
   components: {
-    displaySettings,
-    cameraSettings,
-    stageSettings,
-    CSMSettings,
     tabIcon,
     tabContent,
     calibrationWizard,
@@ -93,6 +90,13 @@ export default {
           component: displaySettings,
           requiredThings: [],
         },
+        {
+          id: "stage-control",
+          title: "Stage Control Preferences",
+          requireConnection: false,
+          component: stageControlSettings,
+          requiredThings: ["stage"],
+        },
       ],
       coreCalibrationTabs: [
         {
@@ -125,7 +129,6 @@ export default {
       return [...this.appTabs, ...this.calibrationTabs];
     },
     appTabs() {
-      console.log(this.coreAppTabs);
       // Filter core top tabs based on available Things.
       return this.coreAppTabs.filter((tab) => {
         if (!tab.requiredThings || tab.requiredThings.length === 0) return true;

From f6285c52b62e351ac4c50733eef73717d37b35f0 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Fri, 7 Nov 2025 16:17:38 +0000
Subject: [PATCH 10/19] Begin splitting up the pane for control.

---
 .../controlComponents/paneControl.vue         | 282 +++---------------
 .../controlComponents/positionControl.vue     | 195 ++++++++++++
 .../tabContentComponents/controlContent.vue   |   6 +
 3 files changed, 248 insertions(+), 235 deletions(-)
 create mode 100644 webapp/src/components/tabContentComponents/controlComponents/positionControl.vue

diff --git a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
index 7080daac..a095514f 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
@@ -1,108 +1,52 @@
 <template>
   <div id="paneControl" class="uk-padding-small">
-    <div v-if="stageAvailable">
-      <ul uk-accordion="multiple: true">
-        <li class="uk-open">
-          <a class="uk-accordion-title" href="#">Position</a>
-          <div class="uk-accordion-content">
-            <form>
-              <!-- Text boxes to set and view position -->
-              <div class="input-and-buttons-container">
-                <input
-                  v-for="(_v, key) in setPosition"
-                  :key="`setPosition_${key}`"
-                  v-model="setPosition[key]"
-                  class="uk-form-small numeric-setting-line-input"
-                  type="number"
-                  @keyup.enter="startMoveTask"
-                />
-                <sync-property-button @click="updatePosition" />
-              </div>
-              <p>
-                <action-button
-                  ref="moveButton"
-                  thing="stage"
-                  action="move_absolute"
-                  :submit-data="setPosition"
-                  :submit-label="'Move'"
-                  :can-terminate="true"
-                  :poll-interval="0.05"
-                  @taskStarted="moveLock = true"
-                  @finished="
-                    updatePosition();
-                    moveLock = false;
-                  "
-                  @error="modalError"
-                />
-              </p>
-            </form>
-            <action-button
-              thing="stage"
-              action="set_zero_position"
-              submit-label="Zero Coordinates"
-              :can-terminate="false"
-              @finished="updatePosition"
-              @error="modalError"
-            />
-          </div>
-        </li>
-        <!--Show autofocus if default plugin is enabled-->
-        <li class="uk-open">
-          <a class="uk-accordion-title" href="#">Autofocus</a>
-          <div class="uk-accordion-content">
-            <div class="uk-grid-small uk-child-width-expand" uk-grid>
-              <div v-show="!isAutofocusing || isAutofocusing == 1">
-                <action-button
-                  thing="autofocus"
-                  action="fast_autofocus"
-                  :submit-data="{ dz: 2000 }"
-                  :submit-label="'Autofocus'"
-                  :button-primary="true"
-                  :submit-on-event="'globalFastAutofocusEvent'"
-                  @taskStarted="isAutofocusing = 1"
-                  @finished="
-                    updatePosition();
-                    isAutofocusing = 0;
-                  "
-                  @error="modalError"
-                />
-              </div>
-            </div>
-          </div>
-        </li>
-        <li class="uk-open">
-          <a class="uk-accordion-title" href="#">Image Capture</a>
-          <div class="uk-accordion-content">
-            <div class="uk-margin">
-              <action-button
-                thing="camera"
-                action="capture_jpeg"
-                :submit-data="{ stream_name: 'main' }"
-                :submit-label="'Low Resolution'"
-                :submit-on-event="'globalCaptureEvent'"
-                @response="handleCaptureResponse"
-                @error="modalError"
-              />
-            </div>
+    <positionControl />
 
-            <div class="uk-margin">
-              <action-button
-                thing="camera"
-                action="capture_jpeg"
-                :submit-data="{ stream_name: 'full' }"
-                submit-label="Full Resolution"
-                :submit-on-event="'globalCaptureEvent'"
-                @response="handleCaptureResponse"
-                @error="modalError"
-              />
-            </div>
-          </div>
-        </li>
-      </ul>
+    <p>Autofocus</p>
+
+    <div class="uk-grid-small uk-child-width-expand" uk-grid>
+      <div v-show="!isAutofocusing || isAutofocusing == 1">
+        <action-button
+          thing="autofocus"
+          action="fast_autofocus"
+          :submit-data="{ dz: 2000 }"
+          :submit-label="'Autofocus'"
+          :button-primary="true"
+          :submit-on-event="'globalFastAutofocusEvent'"
+          @taskStarted="isAutofocusing = 1"
+          @finished="
+            updatePosition();
+            isAutofocusing = 0;
+          "
+          @error="modalError"
+        />
+      </div>
     </div>
-    <div v-else class="uk-text-warning">
-      <p>Stage positioning is disabled since no stage is connected.</p>
-      <p>Please check all data and power connections to your motor controller board.</p>
+
+    <p>Image Capture</p>
+
+    <div class="uk-margin">
+      <action-button
+        thing="camera"
+        action="capture_jpeg"
+        :submit-data="{ stream_name: 'main' }"
+        :submit-label="'Low Resolution'"
+        :submit-on-event="'globalCaptureEvent'"
+        @response="handleCaptureResponse"
+        @error="modalError"
+      />
+    </div>
+
+    <div class="uk-margin">
+      <action-button
+        thing="camera"
+        action="capture_jpeg"
+        :submit-data="{ stream_name: 'full' }"
+        submit-label="Full Resolution"
+        :submit-on-event="'globalCaptureEvent'"
+        @response="handleCaptureResponse"
+        @error="modalError"
+      />
     </div>
   </div>
 </template>
@@ -110,129 +54,23 @@
 <script>
 import axios from "axios";
 import ActionButton from "../../labThingsComponents/actionButton.vue";
-import syncPropertyButton from "../../labThingsComponents/syncPropertyButton.vue";
+import positionControl from "./positionControl.vue";
 
-// Export main app
 export default {
   name: "PaneControl",
 
   components: {
     ActionButton,
-    syncPropertyButton,
+    positionControl,
   },
 
   data: function () {
     return {
-      setPosition: null,
       isAutofocusing: 0,
-      moveLock: false,
     };
   },
 
-  computed: {
-    stageAvailable() {
-      return this.thingAvailable("stage");
-    },
-    baseUri: function () {
-      return this.$store.getters.baseUri;
-    },
-    positionStatusUri: function () {
-      return `${this.baseUri}/stage/position`;
-    },
-    moveInImageCoordinatesUri: function () {
-      return this.thingActionUrl("camera_stage_mapping", "move_in_image_coordinates");
-    },
-  },
-
-  async mounted() {
-    let self = this;
-    // A global signal listener to perform a move action
-    this.$root.$on("globalMoveEvent", self.move);
-    // A global signal listener to perform a move action in pixels
-    this.$root.$on("globalMoveInImageCoordinatesEvent", (x, y, absolute) => {
-      this.moveInImageCoordinatesRequest(x, y, absolute);
-    });
-    // A global signal listener to perform a move in multiples of a step size
-    this.$root.$on("globalMoveStepEvent", (x_steps, y_steps, z_steps) => {
-      const navigationStepSize = this.$store.state.navigationStepSize;
-      const navigationInvert = this.$store.state.navigationInvert;
-      const x = x_steps * navigationStepSize.x * (navigationInvert.x ? -1 : 1);
-      const y = y_steps * navigationStepSize.y * (navigationInvert.y ? -1 : 1);
-      const z = z_steps * navigationStepSize.z * (navigationInvert.z ? -1 : 1);
-      this.$root.$emit("globalMoveEvent", x, y, z, false);
-    });
-    // Update the current position in text boxes
-    await this.updatePosition();
-  },
-
-  beforeDestroy() {
-    // Remove global signal listener to perform a move action
-    this.$root.$off("globalMoveEvent");
-    this.$root.$off("globalMoveInImageCoordinatesEvent");
-    this.$root.$off("globalMoveStepEvent");
-  },
-
   methods: {
-    timeout(ms) {
-      return new Promise((resolve) => setTimeout(resolve, ms));
-    },
-    async move(x, y, z, absolute) {
-      // Move the stage, by updating the controls and starting a move task
-      // This is equivalent to clicking the "move" button.
-      if (this.moveLock) return; // Discard move requests if we're already moving
-      // NB moveLock is just  boolean flag - it's not as safe as a "proper" lock.
-      this.moveLock = true; // This will also be set by the task submitter, but
-      // setting it here avoids multiple moves being requested simultaneously.
-      if (absolute) {
-        this.setPosition = { x: x, y: y, z: z };
-      } else {
-        await this.updatePosition();
-        this.setPosition = {
-          x: this.setPosition.x + x,
-          y: this.setPosition.y + y,
-          z: this.setPosition.z + z,
-        };
-      }
-      await this.timeout(1); // Wait for Vue to update the position
-      await this.startMoveTask();
-    },
-    async startMoveTask() {
-      await this.$refs.moveButton.startTask();
-    },
-    moveInImageCoordinatesRequest: function (x, y) {
-      // If not movement-locked
-      if (!this.moveLock) {
-        // Lock move requests
-        this.moveLock = true;
-
-        if (!this.moveInImageCoordinatesUri) {
-          this.modalError(
-            "Moving in image coordinates is not supported - you will need to upgrade your microscope's software.",
-          );
-        }
-
-        // Send move request
-        axios
-          .post(this.moveInImageCoordinatesUri, {
-            x: x, // NB the coordinates are numpy/PIL style, meaning X and Y are swapped.
-            y: y,
-          })
-          .then(() => {
-            this.updatePosition(); // Update the position in text boxes
-          })
-          .catch((error) => {
-            this.modalError(error); // Let mixin handle error
-          })
-          .then(() => {
-            this.moveLock = false; // Release the move lock
-          });
-      }
-    },
-
-    async updatePosition() {
-      this.setPosition = await this.readThingProperty("stage", "position");
-    },
-
     handleCaptureResponse: async function (response) {
       // Retrieve the captured image and save it
       let imageUri = response.output.href;
@@ -253,29 +91,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-.input-and-buttons-container {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: flex-start;
-  align-content: stretch;
-  align-items: center;
-  width: 100%;
-}
-.numeric-setting-line-input {
-  flex-grow: 1;
-  margin-left: 5px;
-  margin-right: 5px;
-  width: 3em;
-  /* Stop Firefox showing input spinners, other
-  browsers set with block below */
-  -moz-appearance: textfield;
-}
-/* Chrome, Safari, Edge, Opera */
-.numeric-setting-line-input::-webkit-outer-spin-button,
-.numeric-setting-line-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-</style>
diff --git a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
new file mode 100644
index 00000000..fc4d4bc3
--- /dev/null
+++ b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
@@ -0,0 +1,195 @@
+<template>
+  <ul uk-accordion="multiple: true">
+    <li class="uk-closed">
+      <a class="uk-accordion-title" href="#">Position</a>
+      <div class="uk-accordion-content">
+        <form>
+          <!-- Text boxes to set and view position -->
+          <div class="input-and-buttons-container">
+            <input
+              v-for="(_v, key) in setPosition"
+              :key="`setPosition_${key}`"
+              v-model="setPosition[key]"
+              class="uk-form-small numeric-setting-line-input"
+              type="number"
+              @keyup.enter="startMoveTask"
+            />
+            <sync-property-button @click="updatePosition" />
+          </div>
+          <p>
+            <action-button
+              ref="moveButton"
+              thing="stage"
+              action="move_absolute"
+              :submit-data="setPosition"
+              :submit-label="'Move'"
+              :can-terminate="true"
+              :poll-interval="0.05"
+              @taskStarted="moveLock = true"
+              @finished="
+                updatePosition();
+                moveLock = false;
+              "
+              @error="modalError"
+            />
+          </p>
+        </form>
+        <action-button
+          thing="stage"
+          action="set_zero_position"
+          submit-label="Zero Coordinates"
+          :can-terminate="false"
+          @finished="updatePosition"
+          @error="modalError"
+        />
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script>
+import axios from "axios";
+import ActionButton from "../../labThingsComponents/actionButton.vue";
+import syncPropertyButton from "../../labThingsComponents/syncPropertyButton.vue";
+
+export default {
+  name: "PaneControl",
+
+  components: {
+    ActionButton,
+    syncPropertyButton,
+  },
+
+  data: function () {
+    return {
+      setPosition: null,
+      moveLock: false,
+    };
+  },
+
+  computed: {
+    baseUri: function () {
+      return this.$store.getters.baseUri;
+    },
+    positionStatusUri: function () {
+      return `${this.baseUri}/stage/position`;
+    },
+    moveInImageCoordinatesUri: function () {
+      return this.thingActionUrl("camera_stage_mapping", "move_in_image_coordinates");
+    },
+  },
+
+  async mounted() {
+    let self = this;
+    // A global signal listener to perform a move action
+    this.$root.$on("globalMoveEvent", self.move);
+    // A global signal listener to perform a move action in pixels
+    this.$root.$on("globalMoveInImageCoordinatesEvent", (x, y, absolute) => {
+      this.moveInImageCoordinatesRequest(x, y, absolute);
+    });
+    // A global signal listener to perform a move in multiples of a step size
+    this.$root.$on("globalMoveStepEvent", (x_steps, y_steps, z_steps) => {
+      const navigationStepSize = this.$store.state.navigationStepSize;
+      const navigationInvert = this.$store.state.navigationInvert;
+      const x = x_steps * navigationStepSize.x * (navigationInvert.x ? -1 : 1);
+      const y = y_steps * navigationStepSize.y * (navigationInvert.y ? -1 : 1);
+      const z = z_steps * navigationStepSize.z * (navigationInvert.z ? -1 : 1);
+      this.$root.$emit("globalMoveEvent", x, y, z, false);
+    });
+    // Update the current position in text boxes
+    await this.updatePosition();
+  },
+
+  beforeDestroy() {
+    // Remove global signal listener to perform a move action
+    this.$root.$off("globalMoveEvent");
+    this.$root.$off("globalMoveInImageCoordinatesEvent");
+    this.$root.$off("globalMoveStepEvent");
+  },
+
+  methods: {
+    timeout(ms) {
+      return new Promise((resolve) => setTimeout(resolve, ms));
+    },
+    async move(x, y, z, absolute) {
+      // Move the stage, by updating the controls and starting a move task
+      // This is equivalent to clicking the "move" button.
+      if (this.moveLock) return; // Discard move requests if we're already moving
+      // NB moveLock is just  boolean flag - it's not as safe as a "proper" lock.
+      this.moveLock = true; // This will also be set by the task submitter, but
+      // setting it here avoids multiple moves being requested simultaneously.
+      if (absolute) {
+        this.setPosition = { x: x, y: y, z: z };
+      } else {
+        await this.updatePosition();
+        this.setPosition = {
+          x: this.setPosition.x + x,
+          y: this.setPosition.y + y,
+          z: this.setPosition.z + z,
+        };
+      }
+      await this.timeout(1); // Wait for Vue to update the position
+      await this.startMoveTask();
+    },
+    async startMoveTask() {
+      await this.$refs.moveButton.startTask();
+    },
+    moveInImageCoordinatesRequest: function (x, y) {
+      // If not movement-locked
+      if (!this.moveLock) {
+        // Lock move requests
+        this.moveLock = true;
+
+        if (!this.moveInImageCoordinatesUri) {
+          this.modalError(
+            "Moving in image coordinates is not supported - you will need to upgrade your microscope's software.",
+          );
+        }
+
+        // Send move request
+        axios
+          .post(this.moveInImageCoordinatesUri, {
+            x: x, // NB the coordinates are numpy/PIL style, meaning X and Y are swapped.
+            y: y,
+          })
+          .then(() => {
+            this.updatePosition(); // Update the position in text boxes
+          })
+          .catch((error) => {
+            this.modalError(error); // Let mixin handle error
+          })
+          .then(() => {
+            this.moveLock = false; // Release the move lock
+          });
+      }
+    },
+
+    async updatePosition() {
+      this.setPosition = await this.readThingProperty("stage", "position");
+    },
+  },
+};
+</script>
+<style scoped>
+.input-and-buttons-container {
+  display: flex;
+  flex-flow: column wrap;
+  justify-content: flex-start;
+  align-content: stretch;
+  align-items: center;
+  width: 100%;
+}
+.numeric-setting-line-input {
+  flex-grow: 1;
+  margin: 5px 0px;
+  width: 5em;
+  /* Stop Firefox showing input spinners, other
+  browsers set with block below */
+  -moz-appearance: textfield;
+}
+/* Chrome, Safari, Edge, Opera */
+.numeric-setting-line-input::-webkit-outer-spin-button,
+.numeric-setting-line-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+</style>
diff --git a/webapp/src/components/tabContentComponents/controlContent.vue b/webapp/src/components/tabContentComponents/controlContent.vue
index d9b7101d..11cc87c4 100644
--- a/webapp/src/components/tabContentComponents/controlContent.vue
+++ b/webapp/src/components/tabContentComponents/controlContent.vue
@@ -23,3 +23,9 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.control-component {
+  width: 160px;
+}
+</style>

From 03481f24352f333c30439fb740009c2f0559ed17 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Fri, 7 Nov 2025 17:18:01 +0000
Subject: [PATCH 11/19] Add way to poll invoked action

---
 .../controlComponents/positionControl.vue     | 56 +++++++------------
 webapp/src/mixins/labThingsMixins.js          | 28 ++++++++++
 2 files changed, 49 insertions(+), 35 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
index fc4d4bc3..6fc3edec 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
@@ -25,11 +25,7 @@
               :submit-label="'Move'"
               :can-terminate="true"
               :poll-interval="0.05"
-              @taskStarted="moveLock = true"
-              @finished="
-                updatePosition();
-                moveLock = false;
-              "
+              @finished="moveComplete"
               @error="modalError"
             />
           </p>
@@ -48,7 +44,6 @@
 </template>
 
 <script>
-import axios from "axios";
 import ActionButton from "../../labThingsComponents/actionButton.vue";
 import syncPropertyButton from "../../labThingsComponents/syncPropertyButton.vue";
 
@@ -68,14 +63,8 @@ export default {
   },
 
   computed: {
-    baseUri: function () {
-      return this.$store.getters.baseUri;
-    },
     positionStatusUri: function () {
-      return `${this.baseUri}/stage/position`;
-    },
-    moveInImageCoordinatesUri: function () {
-      return this.thingActionUrl("camera_stage_mapping", "move_in_image_coordinates");
+      return this.thingActionUrl("stage", "position");
     },
   },
 
@@ -132,35 +121,32 @@ export default {
       await this.startMoveTask();
     },
     async startMoveTask() {
+      this.moveLock = true;
       await this.$refs.moveButton.startTask();
     },
-    moveInImageCoordinatesRequest: function (x, y) {
+    moveComplete() {
+      this.updatePosition();
+      this.moveLock = false;
+    },
+    async moveInImageCoordinatesRequest(x, y) {
       // If not movement-locked
       if (!this.moveLock) {
         // Lock move requests
         this.moveLock = true;
-
-        if (!this.moveInImageCoordinatesUri) {
-          this.modalError(
-            "Moving in image coordinates is not supported - you will need to upgrade your microscope's software.",
-          );
-        }
-
-        // Send move request
-        axios
-          .post(this.moveInImageCoordinatesUri, {
-            x: x, // NB the coordinates are numpy/PIL style, meaning X and Y are swapped.
+        const response = await this.invokeAction(
+          "camera_stage_mapping",
+          "move_in_image_coordinates",
+          {
+            x: x,
             y: y,
-          })
-          .then(() => {
-            this.updatePosition(); // Update the position in text boxes
-          })
-          .catch((error) => {
-            this.modalError(error); // Let mixin handle error
-          })
-          .then(() => {
-            this.moveLock = false; // Release the move lock
-          });
+          },
+        );
+        this.pollUntilComplete(
+          response.data.href,
+          null, // Nothing to do while ongoing
+          this.moveComplete, // Call move complete once done.
+          200,
+        );
       }
     },
 
diff --git a/webapp/src/mixins/labThingsMixins.js b/webapp/src/mixins/labThingsMixins.js
index 30e54a14..b6ae7aa4 100644
--- a/webapp/src/mixins/labThingsMixins.js
+++ b/webapp/src/mixins/labThingsMixins.js
@@ -9,6 +9,12 @@
 import axios from "axios";
 
 export default {
+  data() {
+    return {
+      pollTimers: {},
+    };
+  },
+
   methods: {
     thingDescription(thing) {
       return this.$store.getters["wot/thingDescription"](thing);
@@ -68,6 +74,28 @@ export default {
         return undefined;
       }
     },
+    async pollUntilComplete(taskUrl, ongoingMethod, finalMethod, interval = 500) {
+      try {
+        const response = await axios.get(taskUrl, { baseURL: this.$store.getters.baseUri });
+        const result = response.data.status;
+
+        if ((result == "running") | (result == "pending")) {
+          ongoingMethod?.(response);
+          this.pollTimers[taskUrl] = setTimeout(() => {
+            this.pollUntilComplete(taskUrl, ongoingMethod, finalMethod, interval);
+          }, interval);
+        } else {
+          clearTimeout(this.pollTimers[taskUrl]);
+          delete this.pollTimers[taskUrl];
+          finalMethod?.(response);
+        }
+      } catch (error) {
+        clearTimeout(this.pollTimers[taskUrl]);
+        delete this.pollTimers[taskUrl];
+        this.modalError(error);
+      }
+    },
+
     thingActionUrl(thing, action, allowUndefined = false) {
       let url = this.$store.getters["wot/thingActionUrl"](
         thing,

From f19d6681c42437a41170456e291dc85c8dc759a4 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Fri, 7 Nov 2025 17:38:10 +0000
Subject: [PATCH 12/19] Split autofocus component

---
 .../labThingsComponents/actionButton.vue      |  2 +
 .../controlComponents/autofocusControl.vue    | 46 +++++++++++++++++++
 .../controlComponents/paneControl.vue         | 31 ++-----------
 .../controlComponents/positionControl.vue     |  2 +
 4 files changed, 53 insertions(+), 28 deletions(-)
 create mode 100644 webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue

diff --git a/webapp/src/components/labThingsComponents/actionButton.vue b/webapp/src/components/labThingsComponents/actionButton.vue
index fad5f5fb..aa4d2265 100644
--- a/webapp/src/components/labThingsComponents/actionButton.vue
+++ b/webapp/src/components/labThingsComponents/actionButton.vue
@@ -209,6 +209,8 @@ export default {
     // A global signal listener to perform the action
     if (this.submitOnEvent) {
       this.$root.$on(this.submitOnEvent, () => {
+        if (this.isDisabled) return;
+        // Bootstrap task if button is not disabled.
         this.bootstrapTask();
       });
     }
diff --git a/webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue b/webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue
new file mode 100644
index 00000000..c2e5256e
--- /dev/null
+++ b/webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <p>Autofocus</p>
+    <div class="uk-margin">
+      <action-button
+        thing="autofocus"
+        action="fast_autofocus"
+        :submit-data="{ dz: 2000 }"
+        :submit-label="'Autofocus'"
+        :button-primary="true"
+        :submit-on-event="'globalFastAutofocusEvent'"
+        :is-disabled="isAutofocusing"
+        @taskStarted="onAutofocus"
+        @finished="afterAutofocus"
+        @error="modalError"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import ActionButton from "../../labThingsComponents/actionButton.vue";
+
+export default {
+  name: "AutofocusControl",
+
+  components: {
+    ActionButton,
+  },
+
+  data: function () {
+    return {
+      isAutofocusing: false,
+    };
+  },
+
+  methods: {
+    onAutofocus() {
+      this.isAutofocusing = true;
+    },
+    afterAutofocus() {
+      this.isAutofocusing = false;
+      this.$root.$emit("globalUpdatePositionEvent");
+    },
+  },
+};
+</script>
diff --git a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
index a095514f..365bb26c 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
@@ -1,28 +1,7 @@
 <template>
   <div id="paneControl" class="uk-padding-small">
     <positionControl />
-
-    <p>Autofocus</p>
-
-    <div class="uk-grid-small uk-child-width-expand" uk-grid>
-      <div v-show="!isAutofocusing || isAutofocusing == 1">
-        <action-button
-          thing="autofocus"
-          action="fast_autofocus"
-          :submit-data="{ dz: 2000 }"
-          :submit-label="'Autofocus'"
-          :button-primary="true"
-          :submit-on-event="'globalFastAutofocusEvent'"
-          @taskStarted="isAutofocusing = 1"
-          @finished="
-            updatePosition();
-            isAutofocusing = 0;
-          "
-          @error="modalError"
-        />
-      </div>
-    </div>
-
+    <autofocusControl />
     <p>Image Capture</p>
 
     <div class="uk-margin">
@@ -55,6 +34,7 @@
 import axios from "axios";
 import ActionButton from "../../labThingsComponents/actionButton.vue";
 import positionControl from "./positionControl.vue";
+import autofocusControl from "./autofocusControl.vue";
 
 export default {
   name: "PaneControl",
@@ -62,12 +42,7 @@ export default {
   components: {
     ActionButton,
     positionControl,
-  },
-
-  data: function () {
-    return {
-      isAutofocusing: 0,
-    };
+    autofocusControl,
   },
 
   methods: {
diff --git a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
index 6fc3edec..91efa9ce 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
@@ -72,6 +72,7 @@ export default {
     let self = this;
     // A global signal listener to perform a move action
     this.$root.$on("globalMoveEvent", self.move);
+    this.$root.$on("globalUpdatePositionEvent", self.updatePosition);
     // A global signal listener to perform a move action in pixels
     this.$root.$on("globalMoveInImageCoordinatesEvent", (x, y, absolute) => {
       this.moveInImageCoordinatesRequest(x, y, absolute);
@@ -94,6 +95,7 @@ export default {
     this.$root.$off("globalMoveEvent");
     this.$root.$off("globalMoveInImageCoordinatesEvent");
     this.$root.$off("globalMoveStepEvent");
+    this.$root.$off("globalUpdatePositionEvent");
   },
 
   methods: {

From d899e1ba75a97b6edbf52ceda3592ffd2d97beb3 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Fri, 7 Nov 2025 17:41:17 +0000
Subject: [PATCH 13/19] Only show autofocus and position controls when Things
 are available

---
 .../controlComponents/paneControl.vue               | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
index 365bb26c..aa0cd426 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="paneControl" class="uk-padding-small">
-    <positionControl />
-    <autofocusControl />
+    <positionControl v-if="stageAvailable" />
+    <autofocusControl v-if="autofocusAvailable" />
     <p>Image Capture</p>
 
     <div class="uk-margin">
@@ -45,6 +45,15 @@ export default {
     autofocusControl,
   },
 
+  computed: {
+    stageAvailable() {
+      return this.thingAvailable("stage");
+    },
+    autofocusAvailable() {
+      return this.thingAvailable("autofocus");
+    },
+  },
+
   methods: {
     handleCaptureResponse: async function (response) {
       // Retrieve the captured image and save it

From ef9b3375876a5a1c0780aeb9f3425da691865d0c Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Fri, 7 Nov 2025 18:12:31 +0000
Subject: [PATCH 14/19] Add d-pad style buttons

---
 .../controlComponents/positionControl.vue     | 92 ++++++++++---------
 .../controlComponents/stageControlButtons.vue | 85 +++++++++++++++++
 2 files changed, 135 insertions(+), 42 deletions(-)
 create mode 100644 webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue

diff --git a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
index 91efa9ce..11ad1d1b 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
@@ -1,58 +1,66 @@
 <template>
-  <ul uk-accordion="multiple: true">
-    <li class="uk-closed">
-      <a class="uk-accordion-title" href="#">Position</a>
-      <div class="uk-accordion-content">
-        <form>
-          <!-- Text boxes to set and view position -->
-          <div class="input-and-buttons-container">
-            <input
-              v-for="(_v, key) in setPosition"
-              :key="`setPosition_${key}`"
-              v-model="setPosition[key]"
-              class="uk-form-small numeric-setting-line-input"
-              type="number"
-              @keyup.enter="startMoveTask"
-            />
-            <sync-property-button @click="updatePosition" />
+  <div>
+    <ul uk-accordion="multiple: true">
+      <li class="uk-closed">
+        <a class="uk-accordion-title" href="#">Position</a>
+        <div class="uk-accordion-content">
+          <form>
+            <!-- Text boxes to set and view position -->
+            <div class="input-and-buttons-container">
+              <input
+                v-for="(_v, key) in setPosition"
+                :key="`setPosition_${key}`"
+                v-model="setPosition[key]"
+                class="uk-form-small numeric-setting-line-input"
+                type="number"
+                @keyup.enter="startMoveTask"
+              />
+              <sync-property-button @click="updatePosition" />
+            </div>
+            <p>
+              <action-button
+                ref="moveButton"
+                thing="stage"
+                action="move_absolute"
+                :submit-data="setPosition"
+                :submit-label="'Move'"
+                :can-terminate="true"
+                :poll-interval="0.05"
+                @finished="moveComplete"
+                @error="modalError"
+              />
+            </p>
+          </form>
+          <action-button
+            thing="stage"
+            action="set_zero_position"
+            submit-label="Zero Coordinates"
+            :can-terminate="false"
+            @finished="updatePosition"
+            @error="modalError"
+          />
+          <div class="uk-flex uk-flex-center uk-margin">
+            <hr class="uk-divider-small" />
           </div>
-          <p>
-            <action-button
-              ref="moveButton"
-              thing="stage"
-              action="move_absolute"
-              :submit-data="setPosition"
-              :submit-label="'Move'"
-              :can-terminate="true"
-              :poll-interval="0.05"
-              @finished="moveComplete"
-              @error="modalError"
-            />
-          </p>
-        </form>
-        <action-button
-          thing="stage"
-          action="set_zero_position"
-          submit-label="Zero Coordinates"
-          :can-terminate="false"
-          @finished="updatePosition"
-          @error="modalError"
-        />
-      </div>
-    </li>
-  </ul>
+        </div>
+      </li>
+    </ul>
+
+    <stageControlButtons />
+  </div>
 </template>
 
 <script>
 import ActionButton from "../../labThingsComponents/actionButton.vue";
 import syncPropertyButton from "../../labThingsComponents/syncPropertyButton.vue";
-
+import stageControlButtons from "./stageControlButtons.vue";
 export default {
   name: "PaneControl",
 
   components: {
     ActionButton,
     syncPropertyButton,
+    stageControlButtons,
   },
 
   data: function () {
diff --git a/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue b/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue
new file mode 100644
index 00000000..64364b11
--- /dev/null
+++ b/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="uk-flex uk-flex-center uk-flex-middle uk-margin">
+    <div class="dpad-grid">
+      <button class="uk-button uk-button-primary dpad-btn" @click="move(0, 1, 0)">
+        <span class="material-symbols-outlined sync-icon"> arrow_upward </span>
+      </button>
+
+      <button class="uk-button uk-button-primary dpad-btn" @click="move(-1, 0, 0)">
+        <span class="material-symbols-outlined sync-icon"> arrow_back </span>
+      </button>
+
+      <button class="uk-button uk-button-primary dpad-btn" @click="move(1, 0, 0)">
+        <span class="material-symbols-outlined sync-icon"> arrow_forward </span>
+      </button>
+
+      <button class="uk-button uk-button-primary dpad-btn" @click="move(0, -1, 0)">
+        <span class="material-symbols-outlined sync-icon"> arrow_downward </span>
+      </button>
+
+      <button class="uk-button uk-button-primary dpad-btn" @click="move(0, 0, -1)">
+        <span class="material-symbols-outlined sync-icon"> remove </span>
+      </button>
+
+      <button class="uk-button uk-button-primary dpad-btn" @click="move(0, 0, 1)">
+        <span class="material-symbols-outlined sync-icon"> add </span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "StageControlButtons",
+  methods: {
+    move(x, y, z) {
+      this.$root.$emit("globalMoveStepEvent", x, y, z);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.dpad-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 40px);
+  grid-template-rows: 40px 40px 40px 20px 40px;
+  gap: 1px;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Place buttons within grid */
+.dpad-grid button:nth-child(1) {
+  grid-column: 2;
+  grid-row: 1;
+}
+.dpad-grid button:nth-child(2) {
+  grid-column: 1;
+  grid-row: 2;
+}
+.dpad-grid button:nth-child(3) {
+  grid-column: 3;
+  grid-row: 2;
+}
+.dpad-grid button:nth-child(4) {
+  grid-column: 2;
+  grid-row: 3;
+}
+.dpad-grid button:nth-child(5) {
+  grid-column: 1;
+  grid-row: 5;
+}
+.dpad-grid button:nth-child(6) {
+  grid-column: 3;
+  grid-row: 5;
+}
+
+.dpad-btn {
+  width: 40px;
+  height: 40px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+</style>

From cb9d134ac31611ee2b6cf37f3fb35230de6bc670 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Fri, 7 Nov 2025 19:07:50 +0000
Subject: [PATCH 15/19] Don't show flash led if there is no stage

---
 .../tabContentComponents/aboutComponents/statusPane.vue          | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
index 3a04754d..6b4e8c6f 100644
--- a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
+++ b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
@@ -13,6 +13,7 @@
           {{ $store.state.origin }}
         </div>
         <action-button
+          v-if="stageType"
           thing="stage"
           action="flash_led"
           submit-label="Flash Illumination"

From 8babf3f17bd1da501620bf95445438ea94653088 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Fri, 7 Nov 2025 22:24:47 +0000
Subject: [PATCH 16/19] Format the stage control so it isn't so wide

---
 .../stageControlSettings.vue                  | 56 ++++++++++---------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue
index d8118876..c3915f02 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue
@@ -1,34 +1,38 @@
 <template>
-  <div>
-    <a class="uk-accordion-title" href="#">Configure</a>
-    <div class="uk-accordion-content">
-      <b>Keyboard Step Size</b>
-      <div class="uk-grid-small uk-child-width-1-3" uk-grid>
-        <div>
-          <label class="uk-form-label" for="form-stacked-text">x</label>
-          <div class="uk-form-controls">
-            <input v-model="stepSize.x" class="uk-input uk-form-small" type="number" />
-          </div>
-          <label class="uk-margin-small-right"
-            ><input v-model="invert.x" class="uk-checkbox" type="checkbox" /> Invert x</label
-          >
+  <div class="uk-width-large">
+    <p><b>Single Move Step Size</b></p>
+    <p>
+      This sets the size (and direction) of movements within the web app. Including keyboard arrow
+      keys (and PageUp/PageDown). It also includes the navigation buttons in the control tab.
+    </p>
+    <p>These settings do not affect the operation of other actions your microscope performs.</p>
+    <div class="uk-grid-small uk-child-width-1-3" uk-grid>
+      <div>
+        <label class="uk-form-label" for="form-stacked-text">x</label>
+        <div class="uk-form-controls">
+          <input v-model="stepSize.x" class="uk-input uk-form-small" type="number" />
         </div>
+        <label class="uk-margin-small-right">
+          <input v-model="invert.x" class="uk-checkbox" type="checkbox" />
+          Invert x
+        </label>
+      </div>
 
-        <div>
-          <label class="uk-form-label" for="form-stacked-text">y</label>
-          <div class="uk-form-controls">
-            <input v-model="stepSize.y" class="uk-input uk-form-small" type="number" />
-          </div>
-          <label class="uk-margin-small-right"
-            ><input v-model="invert.y" class="uk-checkbox" type="checkbox" /> Invert y</label
-          >
+      <div>
+        <label class="uk-form-label" for="form-stacked-text">y</label>
+        <div class="uk-form-controls">
+          <input v-model="stepSize.y" class="uk-input uk-form-small" type="number" />
         </div>
+        <label class="uk-margin-small-right">
+          <input v-model="invert.y" class="uk-checkbox" type="checkbox" />
+          Invert y
+        </label>
+      </div>
 
-        <div>
-          <label class="uk-form-label" for="form-stacked-text">z</label>
-          <div class="uk-form-controls">
-            <input v-model="stepSize.z" class="uk-input uk-form-small" type="number" />
-          </div>
+      <div>
+        <label class="uk-form-label" for="form-stacked-text">z</label>
+        <div class="uk-form-controls">
+          <input v-model="stepSize.z" class="uk-input uk-form-small" type="number" />
         </div>
       </div>
     </div>

From 3aa6f75f6191a39a3ec94ea88d53215a82338d30 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Tue, 11 Nov 2025 10:12:08 +0000
Subject: [PATCH 17/19] Apply suggestions from code review of branch
 fewer-ui-assumptions

Co-authored-by: Richard Bowman <richard.bowman@cantab.net>
---
 .../settingsComponents/stageControlSettings.vue             | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue
index c3915f02..5548408f 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue
@@ -2,8 +2,8 @@
   <div class="uk-width-large">
     <p><b>Single Move Step Size</b></p>
     <p>
-      This sets the size (and direction) of movements within the web app. Including keyboard arrow
-      keys (and PageUp/PageDown). It also includes the navigation buttons in the control tab.
+      This sets the size (and direction) of movements made using the navigation buttons in the
+      control tab or using the keyboard (arrow keys, page up/down).
     </p>
     <p>These settings do not affect the operation of other actions your microscope performs.</p>
     <div class="uk-grid-small uk-child-width-1-3" uk-grid>
@@ -41,7 +41,7 @@
 
 <script>
 export default {
-  name: "SatgeControlSettings",
+  name: "StageControlSettings",
 
   computed: {
     // Note that as stepSize and invert are set based on internals we can use

From 616e93ef976cac68164df919ec05c15091e6c267 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Tue, 11 Nov 2025 10:24:19 +0000
Subject: [PATCH 18/19] Dpad button ids, add warning in positionControl.vue
 about gloabl listeners, deduplicate listener for capture.

---
 .../controlComponents/paneControl.vue         |  1 -
 .../controlComponents/positionControl.vue     |  7 ++++
 .../controlComponents/stageControlButtons.vue | 32 ++++++++++++-------
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
index aa0cd426..c3252679 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
@@ -10,7 +10,6 @@
         action="capture_jpeg"
         :submit-data="{ stream_name: 'main' }"
         :submit-label="'Low Resolution'"
-        :submit-on-event="'globalCaptureEvent'"
         @response="handleCaptureResponse"
         @error="modalError"
       />
diff --git a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
index 11ad1d1b..705cf920 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
@@ -1,3 +1,10 @@
+<!-- This is the main position component for the control tab.
+
+Do not reuse this component until we remove global listeners for move.
+
+This component shows themotor positions in a closed accordion along with the move
+and zero position buttons. It also includes the d-pad.
+-->
 <template>
   <div>
     <ul uk-accordion="multiple: true">
diff --git a/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue b/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue
index 64364b11..76b2f983 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue
@@ -1,27 +1,35 @@
 <template>
   <div class="uk-flex uk-flex-center uk-flex-middle uk-margin">
     <div class="dpad-grid">
-      <button class="uk-button uk-button-primary dpad-btn" @click="move(0, 1, 0)">
+      <button id="up-button" class="uk-button uk-button-primary dpad-btn" @click="move(0, 1, 0)">
         <span class="material-symbols-outlined sync-icon"> arrow_upward </span>
       </button>
 
-      <button class="uk-button uk-button-primary dpad-btn" @click="move(-1, 0, 0)">
+      <button id="left-button" class="uk-button uk-button-primary dpad-btn" @click="move(-1, 0, 0)">
         <span class="material-symbols-outlined sync-icon"> arrow_back </span>
       </button>
 
-      <button class="uk-button uk-button-primary dpad-btn" @click="move(1, 0, 0)">
+      <button id="right-button" class="uk-button uk-button-primary dpad-btn" @click="move(1, 0, 0)">
         <span class="material-symbols-outlined sync-icon"> arrow_forward </span>
       </button>
 
-      <button class="uk-button uk-button-primary dpad-btn" @click="move(0, -1, 0)">
+      <button id="down-button" class="uk-button uk-button-primary dpad-btn" @click="move(0, -1, 0)">
         <span class="material-symbols-outlined sync-icon"> arrow_downward </span>
       </button>
 
-      <button class="uk-button uk-button-primary dpad-btn" @click="move(0, 0, -1)">
+      <button
+        id="focus-out-button"
+        class="uk-button uk-button-primary dpad-btn"
+        @click="move(0, 0, -1)"
+      >
         <span class="material-symbols-outlined sync-icon"> remove </span>
       </button>
 
-      <button class="uk-button uk-button-primary dpad-btn" @click="move(0, 0, 1)">
+      <button
+        id="focus-in-button"
+        class="uk-button uk-button-primary dpad-btn"
+        @click="move(0, 0, 1)"
+      >
         <span class="material-symbols-outlined sync-icon"> add </span>
       </button>
     </div>
@@ -50,27 +58,27 @@ export default {
 }
 
 /* Place buttons within grid */
-.dpad-grid button:nth-child(1) {
+.dpad-grid #up-button {
   grid-column: 2;
   grid-row: 1;
 }
-.dpad-grid button:nth-child(2) {
+.dpad-grid #left-button {
   grid-column: 1;
   grid-row: 2;
 }
-.dpad-grid button:nth-child(3) {
+.dpad-grid #right-button {
   grid-column: 3;
   grid-row: 2;
 }
-.dpad-grid button:nth-child(4) {
+.dpad-grid #down-button {
   grid-column: 2;
   grid-row: 3;
 }
-.dpad-grid button:nth-child(5) {
+.dpad-grid #focus-out-button {
   grid-column: 1;
   grid-row: 5;
 }
-.dpad-grid button:nth-child(6) {
+.dpad-grid #focus-in-button {
   grid-column: 3;
   grid-row: 5;
 }

From 71c98a7fbf02a9d200ec730df53495e3499874a5 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Tue, 11 Nov 2025 10:56:49 +0000
Subject: [PATCH 19/19] Tidy up comments and id names

---
 .../settingsComponents/stageControlSettings.vue      |  5 +++--
 .../tabContentComponents/settingsContent.vue         | 12 ++++++------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue
index 5548408f..5cfcec98 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue
@@ -44,8 +44,9 @@ export default {
   name: "StageControlSettings",
 
   computed: {
-    // Note that as stepSize and invert are set based on internals we can use
-    // get() and set() to interact with the store. Instead use a deep watcher to
+    // Note that as stepSize and invert are mutated (i.e. we change stepSize.x not stepSize)
+    // rather than directly set we cannot use get() and set() computed to interact with the
+    // store as changed won't be detected by set(). Instead use a deep watcher to
     // update the store (see ``watch:`` below)
     stepSize() {
       return this.$store.state.navigationStepSize;
diff --git a/webapp/src/components/tabContentComponents/settingsContent.vue b/webapp/src/components/tabContentComponents/settingsContent.vue
index 97ca3fbc..681fadce 100644
--- a/webapp/src/components/tabContentComponents/settingsContent.vue
+++ b/webapp/src/components/tabContentComponents/settingsContent.vue
@@ -5,9 +5,9 @@
     <div class="settings-nav">
       <ul class="uk-nav uk-nav-default">
         <li class="uk-nav-header">Application Settings</li>
-        <li v-for="item in appTabs" :key="'setting' + item.id + '-tab-content'">
+        <li v-for="item in appTabs" :key="'setting-' + item.id + '-tab-content'">
           <tabIcon
-            :id="'setting' + item.id + '-tab-content'"
+            :id="'setting-' + item.id + '-tab-content'"
             :tab-i-d="item.id"
             :show-title="false"
             :show-tooltip="false"
@@ -27,9 +27,9 @@
         >
           Launch Calibration Wizard
         </button>
-        <li v-for="item in calibrationTabs" :key="'setting' + item.id + '-tab-content'">
+        <li v-for="item in calibrationTabs" :key="'setting-' + item.id + '-tab-icon'">
           <tabIcon
-            :id="'setting' + item.id + '-tab-content'"
+            :id="'setting-' + item.id + '-tab-icon'"
             :tab-i-d="item.id"
             :show-title="false"
             :show-tooltip="false"
@@ -45,8 +45,8 @@
     <div class="view-component uk-width-expand uk-padding-small">
       <tabContent
         v-for="item in allTabs"
-        :id="'setting' + item.id + '-tab-content'"
-        :key="'setting' + item.id + '-tab-content'"
+        :id="'setting-' + item.id + '-tab-content'"
+        :key="'setting-' + item.id + '-tab-content'"
         :tab-i-d="item.id"
         :require-connection="item.requireConnection"
         :current-tab="currentTab"