From 13229d9b995bc02d63e50713cf23f46677ead912 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Thu, 2 Nov 2023 10:39:37 +0000
Subject: [PATCH 01/46] Command to run the server interactively

It's sometimes helpful to run the server as openflexure-ws,
there's now a command in the readme that matches (for
now) the service definition.
---
 README.md | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 78777586..15734630 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 The "server" is the main component of the OpenFlexure Microscope's software.  It is responsible for controlling microscope hardware, data management, and allowing it to be controlled locally and over a network.
 This repository now includes the web client, which is served from the root of the Python web server.
-This software runs on [Python-LabThings](https://github.com/labthings/python-labthings/), and so most non-microscope functionality is handled by that library.
+This software runs on [LabThings-FastAPI](https://github.com/rwb27/labthings-fastapi/), and so most non-microscope functionality is handled by that library.
 
 ## Getting started
 
@@ -62,18 +62,19 @@ To set up a development version of the software (most likely using emulated came
 * `cd openflexure-microscope-server`
 
 ### Set up the Python environment and run a test server
-* (Optional) Set local Python version to match what is available on the Pi
-  * `pyenv init` (this may or may not be required, depending on how you installed `pyenv`)
-  * `pyenv install 3.7.3`
-  * `pyenv local 3.7.3`
+* (Optional) Set local Python version to 3.11
 * Create a virtual environment and activate it:
   * `python -m venv .venv`
   * `source .venv/bin/activate` (on Linux) or `.venv/Scripts/activate` (on Windows)
-  * `pip install --upgrade pip wheel pipenv`
-  * `pipenv install --dev` (This will install development dependencies.  If you don't need these, `pipenv install` will get you just the dependencies needed to run the server, which takes about half the time.)
-* Finally, run the server:
-  * You can use `ofm serve` or `ofm restart` on the Raspberry Pi to manage the server.
-  * To run the server locally, with dummy hardware, you can use `python -m openflexure_microscope.api.app` to start a development-mode Flask server on `localhost:5000`
+  * `pip install -e .[dev]` (This will install development dependencies.  If you don't need these, there is probably a simpler way to run the server than cloning this repo.)
+* Finally, run the server: currently you can do this with `sudo systemctl start openflexure-microscope-server` if it's pre-installed on a Raspberry Pi, or `uvicorn --port 5000 openflexure_microscope_server.server:app` to run locally.
+
+### Run the server manually on a Raspberry Pi
+```
+cd /var/openflexure
+sudo -u openflexure-ws PATH="/var/openflexure/application/openflexure-microscope-server/.venv/bin/:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin" /var/openflexure/application/openflexure-microscope-server/.venv/bin/uvicorn --reload --reload-dir=./application --host 0.0.0.0 --port 5000 openflexure_microscope_server.server:app
+```
+
 
 ### Set up the Javascript environment and build
 * The Flask web application, written in Python, serves a web application written in `Vue.js`.  This is distributed as part of the built version of the server, hosted on our [build server](https://build.openflexure.org/openflexure-microscope-server/).

From 79752a2a4cf09ce48c6ff693bdeb247d9402d3c6 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Thu, 2 Nov 2023 16:54:22 +0000
Subject: [PATCH 02/46] Camera settings for labthings-picamera2

I've updated URLs and tidied things a bit, so that we can
now adjust the key camera settings with the new camera
drivers.
---
 .../multiNumericSettingLine.vue               | 121 +++++++++
 .../numericArraySettingLine.vue               | 127 +++++++++
 .../genericComponents/numericSettingLine.vue  | 125 +++++++++
 .../settingsComponents/cameraSettings.vue     | 248 +++---------------
 .../cameraCalibrationSettings.vue             | 116 ++++----
 5 files changed, 460 insertions(+), 277 deletions(-)
 create mode 100644 webapp/src/components/genericComponents/multiNumericSettingLine.vue
 create mode 100644 webapp/src/components/genericComponents/numericArraySettingLine.vue
 create mode 100644 webapp/src/components/genericComponents/numericSettingLine.vue

diff --git a/webapp/src/components/genericComponents/multiNumericSettingLine.vue b/webapp/src/components/genericComponents/multiNumericSettingLine.vue
new file mode 100644
index 00000000..4039b334
--- /dev/null
+++ b/webapp/src/components/genericComponents/multiNumericSettingLine.vue
@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <label class="uk-form-label">{{ label }}</label>
+    <div class="input-and-buttons-container">
+      <input
+        v-for="(_v, key) in value"
+        class="uk-form-small numeric-setting-line-input"
+        type="number"
+        v-model="value[key]"
+        :key="key"
+        @focusin="focusIn"
+        @focusout="focusOut"
+        @keydown="keyDown"
+      />
+      <a class="button-next-to-input" @click="readProperty">
+        <i class="material-icons">refresh</i>
+      </a>
+    </div>
+  </div>
+</template>
+  
+<script>
+import axios from "axios";
+
+export default {
+name: "MultiNumericSettingLine",
+
+props: {
+    label: {
+        type: String,
+        required: true
+    },
+    propertyUrl: {
+        type: String,
+        required: true
+    },
+    readBackDelay: {
+        type: Number,
+        default: undefined,
+        required: false
+    },
+},
+
+data: () => {
+    return {
+        value: {},
+        valueOnEnter: undefined
+    }
+},
+
+computed: {
+    readBack: function() {
+        return this.readBackDelay !== undefined;
+    }
+},
+
+mounted() {
+    this.readProperty();
+},
+
+methods: {
+    readProperty: async function() {
+        let response = await axios.get(this.propertyUrl)
+        this.value = response.data
+        console.log("Read property", this.propertyUrl, response.data)
+        return response.data
+    },
+    writeProperty: async function() {
+        try {
+            let requestedValue = Number(this.value)
+            await axios.post(this.propertyUrl, requestedValue)
+            if(this.readBack) {
+                await new Promise(r => setTimeout(r, this.readBackDelay))
+                let newVal = await this.readProperty()
+                if(newVal == requestedValue) {
+                    await this.modalNotify(`Set ${this.label} to ${newVal}.`)
+                } else {
+                    await this.modalNotify(`Set ${this.label} to ${newVal} (requested ${requestedValue}).`)
+                }
+            } else {
+                await this.modalNotify(`Set ${this.label} to ${this.value}.`);
+            }
+        } catch(error) {
+            this.modalError(error); // Let mixin handle error
+        }
+    },
+    focusIn: function(event) {
+        this.valueOnEnter = event.target.value;
+    },
+    focusOut: function(event) {
+        if (this.valueOnEnter != event.target.value) {
+            this.writeProperty(event.target.value);
+        }
+    },
+    keyDown: function(event) {
+        // Pressing enter should set the property, whether or not we think it's changed.
+        if (event.keyCode == 13) {
+            this.writeProperty();
+        }
+    }
+}
+};
+</script>
+
+<style scoped>
+.input-and-buttons-container {
+  display: table;
+  width: 100%;
+}
+.numeric-setting-line-input {
+  display: table-cell;
+  width:100%;
+}
+.button-next-to-input {
+  display: table-cell;
+  padding-left: 20px;
+  padding-right: 5px;
+  vertical-align: middle;
+  cursor: pointer;
+}
+</style>
diff --git a/webapp/src/components/genericComponents/numericArraySettingLine.vue b/webapp/src/components/genericComponents/numericArraySettingLine.vue
new file mode 100644
index 00000000..348693d4
--- /dev/null
+++ b/webapp/src/components/genericComponents/numericArraySettingLine.vue
@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <label class="uk-form-label">{{ label }}</label>
+    <div class="input-and-buttons-container">
+      <input
+        v-for="i in value.length"
+        class="uk-form-small numeric-setting-line-input"
+        type="number"
+        v-model="value[i - 1]"
+        :key="i"
+        @focusin="focusIn"
+        @focusout="focusOut"
+        @keydown="keyDown"
+      />
+      <a class="button-next-to-input" @click="readProperty">
+        <i class="material-icons">refresh</i>
+      </a>
+    </div>
+  </div>
+</template>
+  
+<script>
+import axios from "axios";
+
+export default {
+name: "NumericArraySettingLine",
+
+props: {
+    label: {
+        type: String,
+        required: true
+    },
+    propertyUrl: {
+        type: String,
+        required: true
+    },
+    readBackDelay: {
+        type: Number,
+        default: undefined,
+        required: false
+    },
+},
+
+data: () => {
+    return {
+        value: {},
+        valueOnEnter: undefined
+    }
+},
+
+computed: {
+    readBack: function() {
+        return this.readBackDelay !== undefined;
+    }
+},
+
+mounted() {
+    this.readProperty();
+},
+
+methods: {
+    readProperty: async function() {
+        let response = await axios.get(this.propertyUrl)
+        this.value = response.data
+        console.log("Read property", this.propertyUrl, response.data)
+        return response.data
+    },
+    writeProperty: async function() {
+        try {
+            let requestedValue = this.value
+            await axios.post(this.propertyUrl, requestedValue)
+            if(this.readBack) {
+                await new Promise(r => setTimeout(r, this.readBackDelay))
+                let newVal = await this.readProperty()
+                if(newVal == requestedValue) {
+                    await this.modalNotify(`Set ${this.label} to ${newVal}.`)
+                } else {
+                    await this.modalNotify(`Set ${this.label} to ${newVal} (requested ${requestedValue}).`)
+                }
+            } else {
+                await this.modalNotify(`Set ${this.label} to ${this.value}.`);
+            }
+        } catch(error) {
+            this.modalError(error); // Let mixin handle error
+        }
+    },
+    focusIn: function(event) {
+        this.valueOnEnter = event.target.value;
+    },
+    focusOut: function(event) {
+        if (this.valueOnEnter != event.target.value) {
+            this.writeProperty(event.target.value);
+        }
+    },
+    keyDown: function(event) {
+        // Pressing enter should set the property, whether or not we think it's changed.
+        if (event.keyCode == 13) {
+            this.writeProperty();
+        }
+    }
+}
+};
+</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: 6em;
+}
+.button-next-to-input {
+  flex-grow: 0;
+  padding-left: 5px;
+  padding-right: 5px;
+  vertical-align: middle;
+  cursor: pointer;
+}
+</style>
diff --git a/webapp/src/components/genericComponents/numericSettingLine.vue b/webapp/src/components/genericComponents/numericSettingLine.vue
new file mode 100644
index 00000000..d06c55e6
--- /dev/null
+++ b/webapp/src/components/genericComponents/numericSettingLine.vue
@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <label class="uk-form-label">{{ label }}</label>
+    <div class="input-and-buttons-container">
+      <input
+        class="uk-form-small numeric-setting-line-input"
+        type="number"
+        v-model="value"
+        @focusin="focusIn"
+        @focusout="focusOut"
+        @keydown="keyDown"
+      />
+      <a class="button-next-to-input" @click="readProperty">
+        <i class="material-icons">refresh</i>
+      </a>
+    </div>
+  </div>
+</template>
+  
+<script>
+import axios from "axios";
+
+export default {
+name: "NumericSettingLine",
+
+props: {
+    label: {
+        type: String,
+        required: true
+    },
+    propertyUrl: {
+        type: String,
+        required: true
+    },
+    readBackDelay: {
+        type: Number,
+        default: undefined,
+        required: false
+    }
+},
+
+data: () => {
+    return {
+        value: undefined,
+        valueOnEnter: undefined
+    }
+},
+
+computed: {
+    readBack: function() {
+        return this.readBackDelay !== undefined;
+    }
+},
+
+mounted() {
+    this.readProperty();
+},
+
+methods: {
+    readProperty: async function() {
+        let response = await axios.get(this.propertyUrl)
+        this.value = response.data
+        console.log("Read property", this.propertyUrl, response.data)
+        return response.data
+    },
+    writeProperty: async function() {
+        try {
+            let requestedValue = Number(this.value)
+            await axios.post(this.propertyUrl, requestedValue)
+            if(this.readBack) {
+                await new Promise(r => setTimeout(r, this.readBackDelay))
+                let newVal = await this.readProperty()
+                if(newVal == requestedValue) {
+                    await this.modalNotify(`Set ${this.label} to ${newVal}.`)
+                } else {
+                    await this.modalNotify(`Set ${this.label} to ${newVal} (requested ${requestedValue}).`)
+                }
+            } else {
+                await this.modalNotify(`Set ${this.label} to ${this.value}.`);
+            }
+        } catch(error) {
+            this.modalError(error); // Let mixin handle error
+        }
+    },
+    focusIn: function(event) {
+        this.valueOnEnter = event.target.value;
+    },
+    focusOut: function(event) {
+        if (this.valueOnEnter != event.target.value) {
+            this.writeProperty(event.target.value);
+        }
+    },
+    keyDown: function(event) {
+        // Pressing enter should set the property, whether or not we think it's changed.
+        if (event.keyCode == 13) {
+            this.writeProperty();
+        }
+    }
+}
+};
+</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: 6em;
+}
+.button-next-to-input {
+  flex-grow: 0;
+  padding-left: 5px;
+  padding-right: 5px;
+  vertical-align: middle;
+  cursor: pointer;
+}
+</style>
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
index d161049a..277e0ae0 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
@@ -2,6 +2,9 @@
   <div id="cameraSettings">
     <div class="uk-grid uk-grid-divider uk-child-width-expand" uk-grid>
       <div class="uk-width-large">
+        <h3>Automatic calibration</h3>
+        <cameraCalibrationSettings :camera-uri="cameraUri"/>
+
         <h3>Manual camera settings</h3>
         <form @submit.prevent="applySettingsRequest">
           <div class="uk-margin-small-bottom">
@@ -9,139 +12,42 @@
               <li class="uk-open">
                 <a class="uk-accordion-title" href="#">Pi Camera Settings</a>
                 <div class="uk-accordion-content">
-                  <div v-if="picamera.shutter_speed !== undefined">
-                    <label class="uk-form-label" for="form-stacked-text"
-                      >Exposure time</label
-                    >
-                    <div class="uk-form-controls">
-                      <input
-                        v-model="picamera.shutter_speed"
-                        class="uk-input uk-form-small"
-                        type="number"
-                      />
-                    </div>
-                  </div>
-
-                  <div v-if="picamera.analog_gain !== undefined">
-                    <label class="uk-form-label" for="form-stacked-text"
-                      >Analogue gain</label
-                    >
-                    <div class="uk-form-controls">
-                      <input
-                        v-model="picamera.analog_gain"
-                        class="uk-input uk-form-small"
-                        type="number"
-                        step="0.0000000000000001"
-                      />
-                    </div>
-                  </div>
-
-                  <div v-if="picamera.digital_gain !== undefined">
-                    <label class="uk-form-label" for="form-stacked-text"
-                      >Digital gain</label
-                    >
-                    <div class="uk-form-controls">
-                      <input
-                        v-model="picamera.digital_gain"
-                        class="uk-input uk-form-small"
-                        type="number"
-                        step="0.0000000000000001"
-                      />
-                    </div>
-                  </div>
-
-                  <div v-if="picamera.awb_gains !== undefined">
-                    <label class="uk-form-label" for="form-stacked-text">
-                      White Balance gains
-                    </label>
-                    <div class="uk-form-controls">
-                      <label class="uk-form-label">R:</label>
-                      <input
-                        v-model="picamera.awb_gains[0]"
-                        class="uk-input uk-form-small"
-                        type="number"
-                        step="0.0000000000000001"
-                      />
-                      <label class="uk-form-label">B:</label>
-                      <input
-                        v-model="picamera.awb_gains[1]"
-                        class="uk-input uk-form-small"
-                        type="number"
-                        step="0.0000000000000001"
-                      />
-                    </div>
-                  </div>
+                  <NumericSettingLine
+                    label="Exposure time"
+                    :property-url="cameraUri + 'exposure_time'"
+                    :read-back-delay="1000"
+                  />
+                  <NumericSettingLine
+                    label="Analogue gain"
+                    :property-url="cameraUri + 'analogue_gain'"
+                    :read-back-delay="1000"
+                  />
+                  <NumericArraySettingLine
+                    label="Colour gains"
+                    :property-url="cameraUri + 'colour_gains'"
+                    :read-back-delay="1000"
+                  />
                 </div>
               </li>
-
               <li class="uk-open">
                 <a class="uk-accordion-title" href="#">Image Quality</a>
                 <div class="uk-accordion-content">
-                  <div class="uk-child-width-1-2" uk-grid>
-                    <div v-if="jpeg_quality !== undefined">
-                      <label class="uk-form-label" for="form-stacked-text"
-                        >JPEG capture quality (%)</label
-                      >
-                      <div class="uk-form-controls">
-                        <input
-                          v-model="jpeg_quality"
-                          class="uk-input uk-form-small"
-                          type="number"
-                          step="1"
-                        />
-                      </div>
-                    </div>
-
-                    <div v-if="stream_resolution !== undefined">
-                      <label class="uk-form-label" for="form-stacked-text"
-                        >Stream resolution</label
-                      >
-                      <select
-                        v-model="stream_resolution"
-                        class="uk-select uk-form-small"
-                      >
-                        <option
-                          v-for="option in resolutionOptions"
-                          :key="option.value[0]"
-                          :value="option.value"
-                        >
-                          {{ option.text }}
-                        </option>
-                      </select>
-                    </div>
-                  </div>
+                  <NumericSettingLine
+                    label="MJPEG stream bit rate"
+                    :property-url="cameraUri + 'mjpeg_bitrate'"
+                    :read-back-delay="100"
+                  />
+                  <NumericArraySettingLine
+                    label="MJPEG stream resolution"
+                    :property-url="cameraUri +'stream_resolution'"
+                    :read-back-delay="100"
+                  />
                 </div>
               </li>
+              <!--
               <li>
                 <a class="uk-accordion-title" href="#">Advanced</a>
                 <div class="uk-accordion-content">
-                  <div v-if="mjpeg_bitrate !== undefined">
-                    <label class="uk-form-label" for="form-stacked-text"
-                      >Camera bitrate</label
-                    >
-                    <select
-                      v-model="mjpeg_bitrate"
-                      class="uk-select uk-form-small"
-                    >
-                      <option
-                        v-for="option in bitrateOptions"
-                        :key="option.value"
-                        :value="option.value"
-                      >
-                        {{ option.text }}
-                      </option>
-                    </select>
-                    <p class="uk-margin-remove">
-                      This option sets the target bitrate for camera
-                      recordings.<br />
-                      <b
-                        >Limiting bitrate may impact fast-autofocus
-                        reliability.</b
-                      >
-                      However is guaranteed to fix the live stream disappearing
-                      for some highly detailed samples.
-                    </p>
-                  </div>
 
                   <div
                     v-if="picamera.framerate !== undefined"
@@ -166,27 +72,14 @@
                       This option sets the framerate of the Pi Camera video
                       encoder. The actual stream framerate is determined by
                       network speed, and is limited by the encoder framerate.<br />
-                      <b
-                        >Lowering framerate may impact fast-autofocus
-                        accuracy.</b
-                      >
+                      <b>Lowering framerate may impact fast-autofocus accuracy.</b>
                     </p>
                   </div>
                 </div>
-              </li>
+              </li>-->
             </ul>
           </div>
-
-          <button
-            type="submit"
-            class="uk-button uk-button-primary uk-margin-small uk-width-1-1"
-          >
-            Apply Settings
-          </button>
         </form>
-
-        <h3>Automatic calibration</h3>
-        <cameraCalibrationSettings></cameraCalibrationSettings>
       </div>
 
       <div id="mini-stream">
@@ -197,9 +90,10 @@
 </template>
 
 <script>
-import axios from "axios";
 import cameraCalibrationSettings from "./cameraSettingsComponents/cameraCalibrationSettings.vue";
 import miniStreamDisplay from "../../genericComponents/miniStreamDisplay.vue";
+import NumericSettingLine from "../../genericComponents/numericSettingLine.vue";
+import NumericArraySettingLine from "../../genericComponents/numericArraySettingLine.vue";
 
 // Export main app
 export default {
@@ -207,8 +101,10 @@ export default {
 
   components: {
     cameraCalibrationSettings,
-    miniStreamDisplay
-  },
+    miniStreamDisplay,
+    NumericSettingLine,
+    NumericArraySettingLine
+},
 
   data: function() {
     return {
@@ -242,74 +138,8 @@ export default {
   },
 
   computed: {
-    settingsUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2/instrument/settings`;
-    }
-  },
-
-  mounted() {
-    this.updateSettings();
-  },
-
-  methods: {
-    updateSettings: function() {
-      axios
-        .get(this.settingsUri)
-        .then(response => {
-          const cameraSettings = response.data.camera;
-          // Get base camera settings
-          this.mjpeg_bitrate = cameraSettings.mjpeg_bitrate;
-          this.jpeg_quality = cameraSettings.jpeg_quality;
-          this.stream_resolution = cameraSettings.stream_resolution;
-          // Get Pi Camera settings if they exist
-          if (cameraSettings.picamera) {
-            this.picamera.analog_gain = cameraSettings.picamera.analog_gain;
-            this.picamera.digital_gain = cameraSettings.picamera.digital_gain;
-            this.picamera.shutter_speed = cameraSettings.picamera.shutter_speed;
-            this.picamera.framerate = cameraSettings.picamera.framerate;
-            this.picamera.awb_gains = cameraSettings.picamera.awb_gains;
-          }
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
-    },
-
-    applySettingsRequest: function() {
-      // We have to use parseInt/parseFloat because JS sometimes seems to
-      // make the numbers be strings... TypeScript would solve this...
-      var payload = {
-        camera: {
-          mjpeg_bitrate: parseInt(this.mjpeg_bitrate),
-          jpeg_quality: parseInt(this.jpeg_quality),
-          stream_resolution: this.stream_resolution,
-          picamera: {
-            shutter_speed: parseFloat(this.picamera.shutter_speed),
-            analog_gain: parseFloat(this.picamera.analog_gain),
-            digital_gain: parseFloat(this.picamera.digital_gain),
-            framerate: parseInt(this.picamera.framerate),
-            awb_gains: [
-              parseFloat(this.picamera.awb_gains[0]),
-              parseFloat(this.picamera.awb_gains[1])
-            ]
-          }
-        }
-      };
-      console.log(payload);
-      // Send request
-      axios
-        .put(this.settingsUri, payload)
-        .then(() => {
-          return new Promise(r => setTimeout(r, 500));
-        }) // why is there no built-in for this??!
-        .then(() => {
-          // Update local settings
-          this.updateSettings();
-          this.modalNotify("Camera settings applied.");
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
+    cameraUri: function() {
+      return `${this.$store.getters.baseUri}/camera/`;
     }
   }
 };
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
index 86a57208..b968e969 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
     <!--Show auto calibrate if default plugin is enabled-->
-    <div v-if="'recalibrate' in recalibrationLinks" class="uk-margin-small">
+    <div v-if="'full_auto_calibrate' in actions" class="uk-margin-small">
       <taskSubmitter
         :can-terminate="false"
         :requires-confirmation="true"
         :confirmation-message="
           'Start recalibration? This may take a while, and the microscope will be locked during this time.'
         "
-        :submit-url="recalibrationLinks.recalibrate.href"
+        :submit-url="cameraUri + 'full_auto_calibrate'"
         :submit-label="'Full Auto-Calibrate'"
         @response="onRecalibrateResponse"
         @error="modalError"
@@ -16,13 +16,13 @@
       </taskSubmitter>
     </div>
     <div
-      v-if="'auto_exposure_from_raw' in recalibrationLinks"
+      v-if="'auto_expose_from_minimum' in actions"
       class="uk-margin-small"
     >
       <taskSubmitter
         :can-terminate="false"
         :requires-confirmation="false"
-        :submit-url="recalibrationLinks.auto_exposure_from_raw.href"
+        :submit-url="cameraUri + 'auto_expose_from_minimum'"
         :submit-label="'Auto gain &amp; shutter speed'"
         @response="onRecalibrateResponse"
         @error="modalError"
@@ -30,13 +30,13 @@
       </taskSubmitter>
     </div>
     <div
-      v-if="'auto_white_balance_from_raw' in recalibrationLinks"
+      v-if="'calibrate_white_balance' in actions"
       class="uk-margin-small"
     >
       <taskSubmitter
         :can-terminate="false"
         :requires-confirmation="false"
-        :submit-url="recalibrationLinks.auto_white_balance_from_raw.href"
+        :submit-url="cameraUri + 'calibrate_white_balance'"
         :submit-label="'Auto white balance'"
         @response="onRecalibrateResponse"
         @error="modalError"
@@ -44,7 +44,7 @@
       </taskSubmitter>
     </div>
     <div
-      v-if="'auto_lens_shading_table' in recalibrationLinks"
+      v-if="'calibrate_lens_shading' in actions"
       class="uk-margin-small"
     >
       <taskSubmitter
@@ -54,7 +54,7 @@
           'Is the microscope looking at an evenly illuminated, empty field of view? ' +
             'If not, the current image will show through in any images captured afterwards.'
         "
-        :submit-url="recalibrationLinks.auto_lens_shading_table.href"
+        :submit-url="cameraUri + 'calibrate_lens_shading'"
         :submit-label="'Auto flat field correction'"
         @response="onRecalibrateResponse"
         @error="modalError"
@@ -62,23 +62,34 @@
       </taskSubmitter>
     </div>
 
-    <div v-show="showExtraSettings" class="uk-child-width-expand">
-      <button
-        v-if="'flatten_lens_shading_table' in recalibrationLinks"
-        class="uk-button uk-button-danger uk-width-1-1"
-        @click="flattenLensShadingTableRequest"
+    <div 
+      v-show="showExtraSettings"
+      v-if="'flatten_lens_shading_table' in actions"
+      class="uk-child-width-expand"
+    >
+      <taskSubmitter
+        :can-terminate="false"
+        :requires-confirmation="false"
+        :submit-url="cameraUri + 'flat_lens_shading'"
+        :submit-label="'Disable flat field correction'"
+        @response="onRecalibrateResponse"
+        @error="modalError"
       >
-        Disable flat field correction
-      </button>
+      </taskSubmitter>
     </div>
-
-    <div v-if="LstDownloadEnabled">
-      <a
-        class="uk-button uk-button-default uk-width-large uk-margin-small-top uk-align-center"
-        :href="LstDownloadUri"
-        download
-        >Download Lens-Shading Table</a
+    <div 
+      v-show="showExtraSettings"
+      v-if="'reset_lens_shading' in actions"
+      class="uk-child-width-expand"
+    >      <taskSubmitter
+        :can-terminate="false"
+        :requires-confirmation="false"
+        :submit-url="cameraUri + 'reset_lens_shading'"
+        :submit-label="'Reset flat field correction'"
+        @response="onRecalibrateResponse"
+        @error="modalError"
       >
+      </taskSubmitter>
     </div>
   </div>
 </template>
@@ -100,66 +111,35 @@ export default {
       type: Boolean,
       required: false,
       default: true
+    },
+    cameraUri: {
+      type: String,
+      required: true
     }
   },
 
   data: function() {
     return {
-      recalibrationLinks: {},
+      actions: {},
       isCalibrating: false,
       LstDownloadEnabled: false
     };
   },
 
-  computed: {
-    pluginsUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2/extensions`;
-    },
-    LstDownloadUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2/instrument/camera/lst`;
-    }
-  },
-
   mounted() {
-    this.updateRecalibrationLinks();
-    this.checkLstDownload();
+    this.updateActions();
   },
 
   methods: {
-    updateRecalibrationLinks: function() {
-      axios
-        .get(this.pluginsUri) // Get a list of plugins
-        .then(response => {
-          var plugins = response.data;
-          var foundExtension = plugins.find(
-            e => e.title === "org.openflexure.calibration.picamera"
-          );
-          // if AutocalibrationPlugin is enabled
-          if (foundExtension) {
-            // Get plugin action link
-            this.recalibrationLinks = foundExtension.links;
-          } else {
-            this.recalibrationLinks = {};
-          }
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
-    },
-
-    checkLstDownload: function() {
-      axios
-        .get(this.LstDownloadUri) // Get a list of plugins
-        .then(response => {
-          if (response.status === 200) {
-            this.LstDownloadEnabled = true;
-          } else {
-            this.LstDownloadEnabled = false;
-          }
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
+    updateActions: async function() {
+      try{
+          let response = await axios.get(this.cameraUri) // Get the thing description
+          let td = response.data
+          this.actions = td.actions
+          console.log("full auto calibrate in actions", 'full_auto_calibrate' in this.actions)
+      } catch(error) {
+        this.modalError(error) // Let mixin handle error
+      }
     },
 
     onRecalibrateResponse: function() {

From c5c02eb029773d57f9489c9ba85854e59b3a466f Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Thu, 2 Nov 2023 20:30:54 +0000
Subject: [PATCH 03/46] Linted

---
 webapp/src/components/appContent.vue          |   6 +-
 .../multiNumericSettingLine.vue               | 112 +++++++++--------
 .../numericArraySettingLine.vue               | 118 +++++++++---------
 .../genericComponents/numericSettingLine.vue  | 114 ++++++++---------
 .../genericComponents/taskSubmitter.vue       |  54 ++++----
 .../captureComponents/paneCapture.vue         |  11 +-
 .../settingsComponents/cameraSettings.vue     |   6 +-
 .../cameraCalibrationSettings.vue             |  39 +++---
 webapp/vue.config.js                          |   2 +-
 9 files changed, 235 insertions(+), 227 deletions(-)

diff --git a/webapp/src/components/appContent.vue b/webapp/src/components/appContent.vue
index 20def127..a220dcb9 100644
--- a/webapp/src/components/appContent.vue
+++ b/webapp/src/components/appContent.vue
@@ -351,9 +351,9 @@ export default {
         .catch(error => {
           this.modalError(error); // Let mixin handle error
         });*/
-        return new Promise((resolve) => {
-          resolve({});
-        });
+      return new Promise(resolve => {
+        resolve({});
+      });
     },
     setTab: function(event, tab) {
       if (!(this.currentTab == tab)) {
diff --git a/webapp/src/components/genericComponents/multiNumericSettingLine.vue b/webapp/src/components/genericComponents/multiNumericSettingLine.vue
index 4039b334..45a07b9e 100644
--- a/webapp/src/components/genericComponents/multiNumericSettingLine.vue
+++ b/webapp/src/components/genericComponents/multiNumericSettingLine.vue
@@ -4,10 +4,10 @@
     <div class="input-and-buttons-container">
       <input
         v-for="(_v, key) in value"
+        :key="key"
+        v-model="value[key]"
         class="uk-form-small numeric-setting-line-input"
         type="number"
-        v-model="value[key]"
-        :key="key"
         @focusin="focusIn"
         @focusout="focusOut"
         @keydown="keyDown"
@@ -18,87 +18,89 @@
     </div>
   </div>
 </template>
-  
+
 <script>
 import axios from "axios";
 
 export default {
-name: "MultiNumericSettingLine",
+  name: "MultiNumericSettingLine",
 
-props: {
+  props: {
     label: {
-        type: String,
-        required: true
+      type: String,
+      required: true
     },
     propertyUrl: {
-        type: String,
-        required: true
+      type: String,
+      required: true
     },
     readBackDelay: {
-        type: Number,
-        default: undefined,
-        required: false
-    },
-},
+      type: Number,
+      default: undefined,
+      required: false
+    }
+  },
 
-data: () => {
+  data: () => {
     return {
-        value: {},
-        valueOnEnter: undefined
-    }
-},
+      value: {},
+      valueOnEnter: undefined
+    };
+  },
 
-computed: {
+  computed: {
     readBack: function() {
-        return this.readBackDelay !== undefined;
+      return this.readBackDelay !== undefined;
     }
-},
+  },
 
-mounted() {
+  mounted() {
     this.readProperty();
-},
+  },
 
-methods: {
+  methods: {
     readProperty: async function() {
-        let response = await axios.get(this.propertyUrl)
-        this.value = response.data
-        console.log("Read property", this.propertyUrl, response.data)
-        return response.data
+      let response = await axios.get(this.propertyUrl);
+      this.value = response.data;
+      console.log("Read property", this.propertyUrl, response.data);
+      return response.data;
     },
     writeProperty: async function() {
-        try {
-            let requestedValue = Number(this.value)
-            await axios.post(this.propertyUrl, requestedValue)
-            if(this.readBack) {
-                await new Promise(r => setTimeout(r, this.readBackDelay))
-                let newVal = await this.readProperty()
-                if(newVal == requestedValue) {
-                    await this.modalNotify(`Set ${this.label} to ${newVal}.`)
-                } else {
-                    await this.modalNotify(`Set ${this.label} to ${newVal} (requested ${requestedValue}).`)
-                }
-            } else {
-                await this.modalNotify(`Set ${this.label} to ${this.value}.`);
-            }
-        } catch(error) {
-            this.modalError(error); // Let mixin handle error
+      try {
+        let requestedValue = Number(this.value);
+        await axios.post(this.propertyUrl, requestedValue);
+        if (this.readBack) {
+          await new Promise(r => setTimeout(r, this.readBackDelay));
+          let newVal = await this.readProperty();
+          if (newVal == requestedValue) {
+            await this.modalNotify(`Set ${this.label} to ${newVal}.`);
+          } else {
+            await this.modalNotify(
+              `Set ${this.label} to ${newVal} (requested ${requestedValue}).`
+            );
+          }
+        } else {
+          await this.modalNotify(`Set ${this.label} to ${this.value}.`);
         }
+      } catch (error) {
+        this.modalError(error); // Let mixin handle error
+      }
     },
     focusIn: function(event) {
-        this.valueOnEnter = event.target.value;
+      this.valueOnEnter = event.target.value;
     },
     focusOut: function(event) {
-        if (this.valueOnEnter != event.target.value) {
-            this.writeProperty(event.target.value);
-        }
+      if (this.valueOnEnter != event.target.value) {
+        this.writeProperty(event.target.value);
+      }
     },
     keyDown: function(event) {
-        // Pressing enter should set the property, whether or not we think it's changed.
-        if (event.keyCode == 13) {
-            this.writeProperty();
-        }
+      // Pressing enter should set the property, whether or not we think it's changed.
+      if (event.keyCode == 13) {
+        this.writeProperty();
+      }
     }
-}
+  }
 };
 </script>
 
@@ -109,7 +111,7 @@ methods: {
 }
 .numeric-setting-line-input {
   display: table-cell;
-  width:100%;
+  width: 100%;
 }
 .button-next-to-input {
   display: table-cell;
diff --git a/webapp/src/components/genericComponents/numericArraySettingLine.vue b/webapp/src/components/genericComponents/numericArraySettingLine.vue
index 348693d4..54ea22ae 100644
--- a/webapp/src/components/genericComponents/numericArraySettingLine.vue
+++ b/webapp/src/components/genericComponents/numericArraySettingLine.vue
@@ -4,10 +4,10 @@
     <div class="input-and-buttons-container">
       <input
         v-for="i in value.length"
+        :key="i"
+        v-model="value[i - 1]"
         class="uk-form-small numeric-setting-line-input"
         type="number"
-        v-model="value[i - 1]"
-        :key="i"
         @focusin="focusIn"
         @focusout="focusOut"
         @keydown="keyDown"
@@ -18,87 +18,89 @@
     </div>
   </div>
 </template>
-  
+
 <script>
 import axios from "axios";
 
 export default {
-name: "NumericArraySettingLine",
+  name: "NumericArraySettingLine",
 
-props: {
+  props: {
     label: {
-        type: String,
-        required: true
+      type: String,
+      required: true
     },
     propertyUrl: {
-        type: String,
-        required: true
+      type: String,
+      required: true
     },
     readBackDelay: {
-        type: Number,
-        default: undefined,
-        required: false
-    },
-},
+      type: Number,
+      default: undefined,
+      required: false
+    }
+  },
 
-data: () => {
+  data: () => {
     return {
-        value: {},
-        valueOnEnter: undefined
-    }
-},
+      value: {},
+      valueOnEnter: undefined
+    };
+  },
 
-computed: {
+  computed: {
     readBack: function() {
-        return this.readBackDelay !== undefined;
+      return this.readBackDelay !== undefined;
     }
-},
+  },
 
-mounted() {
+  mounted() {
     this.readProperty();
-},
+  },
 
-methods: {
+  methods: {
     readProperty: async function() {
-        let response = await axios.get(this.propertyUrl)
-        this.value = response.data
-        console.log("Read property", this.propertyUrl, response.data)
-        return response.data
+      let response = await axios.get(this.propertyUrl);
+      this.value = response.data;
+      console.log("Read property", this.propertyUrl, response.data);
+      return response.data;
     },
     writeProperty: async function() {
-        try {
-            let requestedValue = this.value
-            await axios.post(this.propertyUrl, requestedValue)
-            if(this.readBack) {
-                await new Promise(r => setTimeout(r, this.readBackDelay))
-                let newVal = await this.readProperty()
-                if(newVal == requestedValue) {
-                    await this.modalNotify(`Set ${this.label} to ${newVal}.`)
-                } else {
-                    await this.modalNotify(`Set ${this.label} to ${newVal} (requested ${requestedValue}).`)
-                }
-            } else {
-                await this.modalNotify(`Set ${this.label} to ${this.value}.`);
-            }
-        } catch(error) {
-            this.modalError(error); // Let mixin handle error
+      try {
+        let requestedValue = this.value;
+        await axios.post(this.propertyUrl, requestedValue);
+        if (this.readBack) {
+          await new Promise(r => setTimeout(r, this.readBackDelay));
+          let newVal = await this.readProperty();
+          if (newVal == requestedValue) {
+            await this.modalNotify(`Set ${this.label} to ${newVal}.`);
+          } else {
+            await this.modalNotify(
+              `Set ${this.label} to ${newVal} (requested ${requestedValue}).`
+            );
+          }
+        } else {
+          await this.modalNotify(`Set ${this.label} to ${this.value}.`);
         }
+      } catch (error) {
+        this.modalError(error); // Let mixin handle error
+      }
     },
     focusIn: function(event) {
-        this.valueOnEnter = event.target.value;
+      this.valueOnEnter = event.target.value;
     },
     focusOut: function(event) {
-        if (this.valueOnEnter != event.target.value) {
-            this.writeProperty(event.target.value);
-        }
+      if (this.valueOnEnter != event.target.value) {
+        this.writeProperty(event.target.value);
+      }
     },
     keyDown: function(event) {
-        // Pressing enter should set the property, whether or not we think it's changed.
-        if (event.keyCode == 13) {
-            this.writeProperty();
-        }
+      // Pressing enter should set the property, whether or not we think it's changed.
+      if (event.keyCode == 13) {
+        this.writeProperty();
+      }
     }
-}
+  }
 };
 </script>
 
@@ -112,10 +114,10 @@ methods: {
   width: 100%;
 }
 .numeric-setting-line-input {
-    flex-grow: 1;
-    margin-left: 5px;
-    margin-right: 5px;
-    width: 6em;
+  flex-grow: 1;
+  margin-left: 5px;
+  margin-right: 5px;
+  width: 6em;
 }
 .button-next-to-input {
   flex-grow: 0;
diff --git a/webapp/src/components/genericComponents/numericSettingLine.vue b/webapp/src/components/genericComponents/numericSettingLine.vue
index d06c55e6..a4c8d553 100644
--- a/webapp/src/components/genericComponents/numericSettingLine.vue
+++ b/webapp/src/components/genericComponents/numericSettingLine.vue
@@ -3,9 +3,9 @@
     <label class="uk-form-label">{{ label }}</label>
     <div class="input-and-buttons-container">
       <input
+        v-model="value"
         class="uk-form-small numeric-setting-line-input"
         type="number"
-        v-model="value"
         @focusin="focusIn"
         @focusout="focusOut"
         @keydown="keyDown"
@@ -16,87 +16,89 @@
     </div>
   </div>
 </template>
-  
+
 <script>
 import axios from "axios";
 
 export default {
-name: "NumericSettingLine",
+  name: "NumericSettingLine",
 
-props: {
+  props: {
     label: {
-        type: String,
-        required: true
+      type: String,
+      required: true
     },
     propertyUrl: {
-        type: String,
-        required: true
+      type: String,
+      required: true
     },
     readBackDelay: {
-        type: Number,
-        default: undefined,
-        required: false
+      type: Number,
+      default: undefined,
+      required: false
     }
-},
+  },
 
-data: () => {
+  data: () => {
     return {
-        value: undefined,
-        valueOnEnter: undefined
-    }
-},
+      value: undefined,
+      valueOnEnter: undefined
+    };
+  },
 
-computed: {
+  computed: {
     readBack: function() {
-        return this.readBackDelay !== undefined;
+      return this.readBackDelay !== undefined;
     }
-},
+  },
 
-mounted() {
+  mounted() {
     this.readProperty();
-},
+  },
 
-methods: {
+  methods: {
     readProperty: async function() {
-        let response = await axios.get(this.propertyUrl)
-        this.value = response.data
-        console.log("Read property", this.propertyUrl, response.data)
-        return response.data
+      let response = await axios.get(this.propertyUrl);
+      this.value = response.data;
+      console.log("Read property", this.propertyUrl, response.data);
+      return response.data;
     },
     writeProperty: async function() {
-        try {
-            let requestedValue = Number(this.value)
-            await axios.post(this.propertyUrl, requestedValue)
-            if(this.readBack) {
-                await new Promise(r => setTimeout(r, this.readBackDelay))
-                let newVal = await this.readProperty()
-                if(newVal == requestedValue) {
-                    await this.modalNotify(`Set ${this.label} to ${newVal}.`)
-                } else {
-                    await this.modalNotify(`Set ${this.label} to ${newVal} (requested ${requestedValue}).`)
-                }
-            } else {
-                await this.modalNotify(`Set ${this.label} to ${this.value}.`);
-            }
-        } catch(error) {
-            this.modalError(error); // Let mixin handle error
+      try {
+        let requestedValue = Number(this.value);
+        await axios.post(this.propertyUrl, requestedValue);
+        if (this.readBack) {
+          await new Promise(r => setTimeout(r, this.readBackDelay));
+          let newVal = await this.readProperty();
+          if (newVal == requestedValue) {
+            await this.modalNotify(`Set ${this.label} to ${newVal}.`);
+          } else {
+            await this.modalNotify(
+              `Set ${this.label} to ${newVal} (requested ${requestedValue}).`
+            );
+          }
+        } else {
+          await this.modalNotify(`Set ${this.label} to ${this.value}.`);
         }
+      } catch (error) {
+        this.modalError(error); // Let mixin handle error
+      }
     },
     focusIn: function(event) {
-        this.valueOnEnter = event.target.value;
+      this.valueOnEnter = event.target.value;
     },
     focusOut: function(event) {
-        if (this.valueOnEnter != event.target.value) {
-            this.writeProperty(event.target.value);
-        }
+      if (this.valueOnEnter != event.target.value) {
+        this.writeProperty(event.target.value);
+      }
     },
     keyDown: function(event) {
-        // Pressing enter should set the property, whether or not we think it's changed.
-        if (event.keyCode == 13) {
-            this.writeProperty();
-        }
+      // Pressing enter should set the property, whether or not we think it's changed.
+      if (event.keyCode == 13) {
+        this.writeProperty();
+      }
     }
-}
+  }
 };
 </script>
 
@@ -110,10 +112,10 @@ methods: {
   width: 100%;
 }
 .numeric-setting-line-input {
-    flex-grow: 1;
-    margin-left: 5px;
-    margin-right: 5px;
-    width: 6em;
+  flex-grow: 1;
+  margin-left: 5px;
+  margin-right: 5px;
+  width: 6em;
 }
 .button-next-to-input {
   flex-grow: 0;
diff --git a/webapp/src/components/genericComponents/taskSubmitter.vue b/webapp/src/components/genericComponents/taskSubmitter.vue
index 0c7ae4d2..ca316568 100644
--- a/webapp/src/components/genericComponents/taskSubmitter.vue
+++ b/webapp/src/components/genericComponents/taskSubmitter.vue
@@ -142,7 +142,10 @@ export default {
           if (task.status == "pending" || task.status == "running") {
             this.taskStarted = true;
             this.$emit("taskStarted", this.taskId);
-            this.startPolling(task.id, task.links.find(t => t.rel==self).href);
+            this.startPolling(
+              task.id,
+              task.links.find(t => t.rel == self).href
+            );
           }
         }
       });
@@ -219,33 +222,32 @@ export default {
 
       var checkCondition = (resolve, reject) => {
         // If the condition is met, we're done!
-        axios.get(
-          this.taskUrl,
-          {baseURL: this.$store.getters.baseUri}
-        ).then(response => {
-          var result = response.data.status;
-          // If the task ends with success
-          if (result == "completed") {
-            resolve(response.data);
-          }
-          // If task ends with an error
-          else if (result == "error") {
-            // Pass the error string back with reject
+        axios
+          .get(this.taskUrl, { baseURL: this.$store.getters.baseUri })
+          .then(response => {
+            var result = response.data.status;
+            // If the task ends with success
+            if (result == "completed") {
+              resolve(response.data);
+            }
+            // If task ends with an error
+            else if (result == "error") {
+              // Pass the error string back with reject
 
-            reject(new Error(response.data.output));
-          }
-          // If task ends with termination
-          else if (result == "cancelled") {
-            // Pass a generic termination error back with reject
+              reject(new Error(response.data.output));
+            }
+            // If task ends with termination
+            else if (result == "cancelled") {
+              // Pass a generic termination error back with reject
 
-            reject(new Error("Task cancelled"));
-          } else {
-            // Since the task is still running, we can update the progress bar
-            this.progress = response.data.progress;
-            // Check again after timeout
-            setTimeout(checkCondition, interval, resolve, reject);
-          }
-        });
+              reject(new Error("Task cancelled"));
+            } else {
+              // Since the task is still running, we can update the progress bar
+              this.progress = response.data.progress;
+              // Check again after timeout
+              setTimeout(checkCondition, interval, resolve, reject);
+            }
+          });
       };
 
       return new Promise(checkCondition);
diff --git a/webapp/src/components/tabContentComponents/captureComponents/paneCapture.vue b/webapp/src/components/tabContentComponents/captureComponents/paneCapture.vue
index e1881c1c..7636ac00 100644
--- a/webapp/src/components/tabContentComponents/captureComponents/paneCapture.vue
+++ b/webapp/src/components/tabContentComponents/captureComponents/paneCapture.vue
@@ -221,7 +221,10 @@
               </select>
             </div>
 
-            <div class="uk-margin-small uk-margin-remove-bottom" v-if="backgroundDetectUri">
+            <div
+              v-if="backgroundDetectUri"
+              class="uk-margin-small uk-margin-remove-bottom"
+            >
               <label class="uk-form-label" for="form-stacked-text">
                 <input
                   v-model="detectEmptyFieldsAndSkipAutofocus"
@@ -475,7 +478,8 @@ export default {
         namemode: this.namingStyle.toLowerCase(),
         autofocus_dz: afDeltas[this.scanDeltaZ],
         fast_autofocus: this.scanDeltaZ == "Fast",
-        detect_empty_fields_and_skip_autofocus: this.detectEmptyFieldsAndSkipAutofocus
+        detect_empty_fields_and_skip_autofocus: this
+          .detectEmptyFieldsAndSkipAutofocus
       };
     },
     smartScanPayload: function() {
@@ -568,7 +572,8 @@ export default {
           );
           if (foundExtension) {
             // Get plugin action link
-            this.backgroundDetectUri = foundExtension.links.grab_and_classify_image.href;
+            this.backgroundDetectUri =
+              foundExtension.links.grab_and_classify_image.href;
           }
         })
         .catch(error => {
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
index 277e0ae0..9c768c46 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
@@ -3,7 +3,7 @@
     <div class="uk-grid uk-grid-divider uk-child-width-expand" uk-grid>
       <div class="uk-width-large">
         <h3>Automatic calibration</h3>
-        <cameraCalibrationSettings :camera-uri="cameraUri"/>
+        <cameraCalibrationSettings :camera-uri="cameraUri" />
 
         <h3>Manual camera settings</h3>
         <form @submit.prevent="applySettingsRequest">
@@ -39,7 +39,7 @@
                   />
                   <NumericArraySettingLine
                     label="MJPEG stream resolution"
-                    :property-url="cameraUri +'stream_resolution'"
+                    :property-url="cameraUri + 'stream_resolution'"
                     :read-back-delay="100"
                   />
                 </div>
@@ -104,7 +104,7 @@ export default {
     miniStreamDisplay,
     NumericSettingLine,
     NumericArraySettingLine
-},
+  },
 
   data: function() {
     return {
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
index b968e969..79b0c304 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
@@ -15,10 +15,7 @@
       >
       </taskSubmitter>
     </div>
-    <div
-      v-if="'auto_expose_from_minimum' in actions"
-      class="uk-margin-small"
-    >
+    <div v-if="'auto_expose_from_minimum' in actions" class="uk-margin-small">
       <taskSubmitter
         :can-terminate="false"
         :requires-confirmation="false"
@@ -29,10 +26,7 @@
       >
       </taskSubmitter>
     </div>
-    <div
-      v-if="'calibrate_white_balance' in actions"
-      class="uk-margin-small"
-    >
+    <div v-if="'calibrate_white_balance' in actions" class="uk-margin-small">
       <taskSubmitter
         :can-terminate="false"
         :requires-confirmation="false"
@@ -43,10 +37,7 @@
       >
       </taskSubmitter>
     </div>
-    <div
-      v-if="'calibrate_lens_shading' in actions"
-      class="uk-margin-small"
-    >
+    <div v-if="'calibrate_lens_shading' in actions" class="uk-margin-small">
       <taskSubmitter
         :can-terminate="false"
         :requires-confirmation="true"
@@ -62,7 +53,7 @@
       </taskSubmitter>
     </div>
 
-    <div 
+    <div
       v-show="showExtraSettings"
       v-if="'flatten_lens_shading_table' in actions"
       class="uk-child-width-expand"
@@ -77,11 +68,12 @@
       >
       </taskSubmitter>
     </div>
-    <div 
+    <div
       v-show="showExtraSettings"
       v-if="'reset_lens_shading' in actions"
       class="uk-child-width-expand"
-    >      <taskSubmitter
+    >
+      <taskSubmitter
         :can-terminate="false"
         :requires-confirmation="false"
         :submit-url="cameraUri + 'reset_lens_shading'"
@@ -132,13 +124,16 @@ export default {
 
   methods: {
     updateActions: async function() {
-      try{
-          let response = await axios.get(this.cameraUri) // Get the thing description
-          let td = response.data
-          this.actions = td.actions
-          console.log("full auto calibrate in actions", 'full_auto_calibrate' in this.actions)
-      } catch(error) {
-        this.modalError(error) // Let mixin handle error
+      try {
+        let response = await axios.get(this.cameraUri); // Get the thing description
+        let td = response.data;
+        this.actions = td.actions;
+        console.log(
+          "full auto calibrate in actions",
+          "full_auto_calibrate" in this.actions
+        );
+      } catch (error) {
+        this.modalError(error); // Let mixin handle error
       }
     },
 
diff --git a/webapp/vue.config.js b/webapp/vue.config.js
index 87a775fa..867d77ba 100644
--- a/webapp/vue.config.js
+++ b/webapp/vue.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  outputDir: '../openflexure_microscope/api/static/dist',
+  outputDir: "../openflexure_microscope/api/static/dist"
 };

From 27b1f42935289f30ee5bafd1319e80ad26bd5c89 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Thu, 2 Nov 2023 20:32:15 +0000
Subject: [PATCH 04/46] Updated camera stage mapping settings

---
 .../CSMCalibrationSettings.vue                | 120 +++++-------------
 1 file changed, 34 insertions(+), 86 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
index a7280c1f..dfc5e25b 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="CSMCalibrationSettings">
     <!--Show auto calibrate if default plugin is enabled-->
-    <div v-if="'calibrate_xy' in recalibrationLinks" class="uk-margin-small">
+    <div v-if="'calibrate_xy' in actions" class="uk-margin-small">
       <taskSubmitter
         :button-primary="true"
         :can-terminate="false"
@@ -9,16 +9,15 @@
         :confirmation-message="
           'Start recalibration of the stage to the camera? This may take a while, and the microscope will be locked during this time.'
         "
-        :submit-url="recalibrationLinks.calibrate_xy.href"
+        :submit-url="thingUri + 'calibrate_xy'"
         :submit-label="'Auto-Calibrate using camera'"
         @response="onRecalibrateResponse"
         @error="modalError"
-      >
-      </taskSubmitter>
+      />
     </div>
     <button
-      v-if="'get_calibration' in recalibrationLinks"
-      v-show="dataAvailable && showExtraSettings"
+      v-if="'last_calibration' in properties"
+      v-show="showExtraSettings"
       type="button"
       class="uk-button uk-button-default uk-width-1-1"
       @click="getCalibrationData()"
@@ -51,104 +50,53 @@ export default {
   data: function() {
     return {
       settings: null,
-      recalibrationLinks: {},
-      isCalibrating: false,
-      dataAvailable: false
+      actions: {},
+      properties: {},
     };
   },
 
   computed: {
-    settingsUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2/instrument/settings`;
-    },
-    pluginsUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2/extensions`;
+    thingUri: function() {
+      return `${this.$store.getters.baseUri}/camera_stage_mapping/`;
     }
   },
 
   mounted() {
-    this.updateSettings();
-    this.updateRecalibrationLinks();
+    this.updateActions();
   },
 
   methods: {
-    updateSettings: function() {
-      // Update links
-      axios
-        .get(this.settingsUri)
-        .then(response => {
-          this.settings =
-            response.data.extensions["org.openflexure.camera_stage_mapping"];
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-          this.settings = {};
-        });
-    },
-
-    updateCalibrationDataAvailability: function() {
-      if ("get_calibration" in this.recalibrationLinks) {
-        axios
-          .get(this.recalibrationLinks.get_calibration.href)
-          .then(response => {
-            if (Object.keys(response.data).length === 0) {
-              this.dataAvailable = false;
-            } else {
-              this.dataAvailable = true;
-            }
-          })
-          .catch(error => {
-            this.modalError(error); // Let mixin handle error
-          });
+    getCalibrationData: async function() {
+      try {
+        let response = await axios.get(this.thingUri + "last_calibration");
+        if (response.data == {}) {
+          throw "No calibration data available.";
+        }
+        const data = JSON.stringify(response.data);
+        const url = window.URL.createObjectURL(new Blob([data]));
+        const link = document.createElement("a");
+        link.href = url;
+        link.setAttribute("download", "csm_calibration.json");
+        document.body.appendChild(link);
+        link.click();
+      } catch (error) {
+        this.modalError(error); // Let mixin handle error
       }
     },
 
-    getCalibrationData: function() {
-      axios
-        .get(this.recalibrationLinks.get_calibration.href)
-        .then(response => {
-          if (response.data != {}) {
-            const data = JSON.stringify(response.data);
-            const url = window.URL.createObjectURL(new Blob([data]));
-            const link = document.createElement("a");
-            link.href = url;
-            link.setAttribute("download", "csm_calibration.json");
-            document.body.appendChild(link);
-            link.click();
-          }
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
-    },
-
-    updateRecalibrationLinks: function() {
-      axios
-        .get(this.pluginsUri) // Get a list of plugins
-        .then(response => {
-          var plugins = response.data;
-          var foundExtension = plugins.find(
-            e => e.title === "org.openflexure.camera_stage_mapping"
-          );
-          // if camera-stage mapping extension is enabled
-          if (foundExtension) {
-            // Get plugin action link
-            this.recalibrationLinks = foundExtension.links;
-            // Update whether calibration data is available
-            this.updateCalibrationDataAvailability();
-          } else {
-            this.recalibrationLinks = {};
-          }
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
+    updateActions: async function() {
+      try {
+        let response = await axios.get(this.thingUri); // Get Thing Description
+        console.log("CSM TD", response.data);
+        this.actions = response.data.actions;
+        this.properties = response.data.properties;
+      } catch (error) {
+        this.modalError(error); // Let mixin handle error
+      }
     },
 
     onRecalibrateResponse: function() {
       this.modalNotify("Finished stage-to-camera calibration.");
-      // Update local settings
-      this.updateSettings();
     }
   }
 };

From 4e7fa44a73b174f802a742b1e861ca66a11e3d5e Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Thu, 2 Nov 2023 20:34:42 +0000
Subject: [PATCH 05/46] Remove microscope settings

microscope name should be defined in config, by a
separate program/service
---
 .../settingsComponents/microscopeSettings.vue | 89 -------------------
 .../tabContentComponents/settingsContent.vue  | 26 ------
 2 files changed, 115 deletions(-)
 delete mode 100644 webapp/src/components/tabContentComponents/settingsComponents/microscopeSettings.vue

diff --git a/webapp/src/components/tabContentComponents/settingsComponents/microscopeSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/microscopeSettings.vue
deleted file mode 100644
index 84a48fa5..00000000
--- a/webapp/src/components/tabContentComponents/settingsComponents/microscopeSettings.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <div v-if="settings" id="microscopeSettings" class="uk-width-large">
-    <form @submit.prevent="applySettingsRequest">
-      <div>
-        <label class="uk-form-label" for="form-stacked-text"
-          >Microscope name</label
-        >
-        <input
-          v-model="settings.name"
-          class="uk-input uk-width-1-1 uk-form-small"
-          name="inputFilename"
-          placeholder="Leave blank for default"
-        />
-      </div>
-
-      <br />
-
-      <button
-        type="submit"
-        class="uk-button uk-button-primary uk-margin-small uk-width-1-1"
-      >
-        Apply Settings
-      </button>
-    </form>
-  </div>
-</template>
-
-<script>
-import axios from "axios";
-
-// Export main app
-export default {
-  name: "MicroscopeSettings",
-
-  data: function() {
-    return {
-      settings: null
-    };
-  },
-
-  computed: {
-    settingsUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2/instrument/settings`;
-    }
-  },
-
-  mounted() {
-    this.updateSettings();
-  },
-
-  methods: {
-    updateSettings: function() {
-      axios
-        .get(this.settingsUri)
-        .then(response => {
-          this.settings = response.data;
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
-    },
-
-    applySettingsRequest: function() {
-      var payload = {
-        name: this.settings.name
-      };
-
-      // Send request to update config
-      axios
-        .put(this.settingsUri, payload)
-        .then(() => {
-          // Update local settings
-          this.updateSettings();
-          this.modalNotify("Microscope settings applied.");
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
-    }
-  }
-};
-</script>
-
-<style lang="less">
-.center-spinner {
-  margin-left: auto;
-  margin-right: auto;
-}
-</style>
diff --git a/webapp/src/components/tabContentComponents/settingsContent.vue b/webapp/src/components/tabContentComponents/settingsContent.vue
index 3bcd0039..d8ea2e05 100644
--- a/webapp/src/components/tabContentComponents/settingsContent.vue
+++ b/webapp/src/components/tabContentComponents/settingsContent.vue
@@ -70,19 +70,6 @@
             Camera/stage mapping
           </tabIcon>
         </li>
-        <li>
-          <tabIcon
-            id="settings-microscope-icon"
-            tab-i-d="microscope"
-            :show-title="false"
-            :show-tooltip="false"
-            :require-connection="true"
-            :current-tab="currentTab"
-            @set-tab="setTab"
-          >
-            General
-          </tabIcon>
-        </li>
       </ul>
     </div>
     <div class="view-component uk-width-expand uk-padding-small">
@@ -136,24 +123,12 @@
           <CSMSettings />
         </div>
       </tabContent>
-
-      <tabContent
-        tab-i-d="microscope"
-        :require-connection="true"
-        :current-tab="currentTab"
-      >
-        <div class="settings-pane uk-padding-small">
-          <h3>Microscope settings</h3>
-          <microscopeSettings />
-        </div>
-      </tabContent>
     </div>
   </div>
 </template>
 
 <script>
 import streamSettings from "./settingsComponents/streamSettings.vue";
-import microscopeSettings from "./settingsComponents/microscopeSettings.vue";
 import cameraSettings from "./settingsComponents/cameraSettings.vue";
 import appSettings from "./settingsComponents/appSettings.vue";
 import featuresSettings from "./settingsComponents/featuresSettings.vue";
@@ -171,7 +146,6 @@ export default {
     streamSettings,
     cameraSettings,
     stageSettings,
-    microscopeSettings,
     CSMSettings,
     appSettings,
     featuresSettings,

From 65f467af64d7b8dce3c44612557b26e5ecec38b0 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Thu, 2 Nov 2023 21:17:31 +0000
Subject: [PATCH 06/46] Fix "About" page

---
 .../aboutComponents/statusPane.vue            | 123 ++++++------------
 .../tabContentComponents/aboutContent.vue     |   3 +-
 .../CSMCalibrationSettings.vue                |   1 -
 3 files changed, 43 insertions(+), 84 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
index 4eda1d06..269c5d21 100644
--- a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
+++ b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="host-input">
-    <div v-if="configuration">
+    <div v-if="$store.state.available">
       <div>
         <div class="uk-margin-small-bottom">
           <b>API origin:</b>
@@ -11,13 +11,9 @@
 
       <hr />
 
-      <div v-if="settings">
-        <b>Device name:</b> <br />
-        {{ settings.name }}
-      </div>
       <div>
         <b>Server version:</b> <br />
-        {{ configuration.application.version }}
+        TODO
       </div>
 
       <hr />
@@ -25,18 +21,18 @@
       <div class="uk-margin-small-bottom">
         <b>Camera:</b>
         <br />
-        <div v-if="configuration.camera.type != 'MissingCamera'">
-          {{ configuration.camera.type }}
+        <div v-if="'camera' in things">
+          {{ things.camera.title }}
         </div>
-        <div v-else class="uk-text-danger"><b>No camera connected</b></div>
+        <div v-else class="uk-text-danger"><b>No camera configured</b></div>
       </div>
       <div>
         <b>Stage:</b>
         <br />
-        <div v-if="configuration.stage.type != 'MissingStage'">
-          {{ configuration.stage.type }}
+        <div v-if="'stage' in things">
+          {{ things.stage.title }}
         </div>
-        <div v-else class="uk-text-danger"><b>No stage connected</b></div>
+        <div v-else class="uk-text-danger"><b>No stage configured</b></div>
       </div>
 
       <hr />
@@ -44,7 +40,7 @@
       <div class="uk-grid-small uk-child-width-1-2" uk-grid>
         <div>
           <button
-            v-show="'shutdown' in systemActionLinks"
+            v-show="'shutdown' in systemControlActions"
             class="uk-button uk-button-danger uk-float-right uk-margin uk-margin-remove-top uk-width-1-1"
             @click="shutdownRequest"
           >
@@ -54,7 +50,7 @@
 
         <div>
           <button
-            v-show="'reboot' in systemActionLinks"
+            v-show="'reboot' in systemControlActions"
             class="uk-button uk-button-danger uk-float-right uk-margin uk-margin-remove-top uk-width-1-1"
             @click="rebootRequest"
           >
@@ -83,87 +79,52 @@ export default {
 
   data: function() {
     return {
-      configuration: null,
-      settings: null,
-      systemActionLinks: {}
+      things: {},
+      systemControlActions: {}
     };
   },
 
   computed: {
-    settingsUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2/instrument/settings`;
+    baseUri: function() {
+      return `${this.$store.getters.baseUri}/`;
     },
-    configurationUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2/instrument/configuration`;
-    },
-    rootUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2`;
-    }
   },
 
   mounted: function() {
     // Watch for host 'ready', then update configuration
     this.updateConfiguration();
-    this.updateSettings();
-    this.updateSystemActions();
+    this.updateActions();
   },
 
   methods: {
-    updateConfiguration: function() {
-      axios
-        .get(this.configurationUri)
-        .then(response => {
-          this.configuration = response.data;
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
+    updateConfiguration: async function() {
+      console.log("Showing the configuration is not yet fully implemented")
+      // Retrieve TDs for camera and stage
+      let things = {};
+      for (let thing of ["camera", "stage"]) {
+        try {
+          let response = await axios.get(this.baseUri + thing); // Get Thing Description
+          things[thing] = response.data;
+        } catch (error) {
+          console.log(thing + " was missing", error)
+        }
+      }
+      this.things = things;  // We must set this.things in order to trigger the UI update
     },
-    updateSettings: function() {
-      axios
-        .get(this.settingsUri)
-        .then(response => {
-          this.settings = response.data;
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
-    },
-    updateSystemActions: function() {
-      axios
-        .get(this.rootUri)
-        .then(response => {
-          if ("RebootAPI" in response.data.actions) {
-            this.$set(
-              this.systemActionLinks,
-              "reboot",
-              `${this.$store.getters.baseUri}/api/v2/actions/system/reboot/`
-            );
-          } else {
-            delete this.systemActionLinks.reboot;
-          }
-          if ("ShutdownAPI" in response.data.actions) {
-            this.$set(
-              this.systemActionLinks,
-              "shutdown",
-              `${this.$store.getters.baseUri}/api/v2/actions/system/shutdown/`
-            );
-          } else {
-            delete this.systemActionLinks.shutdown;
-          }
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
+    updateActions: async function() {
+      try {
+        let response = await axios.get(this.baseUri + "system_control"); // Get Thing Description
+        this.systemControlActions = response.data.actions;
+      } catch (error) {
+        console.log("system control was missing - shutdown/restart buttons will not appear", error)
+      }
     },
     shutdownRequest: function() {
       this.modalConfirm("Shut down microscope?").then(
         () => {
-          if ("shutdown" in this.systemActionLinks) {
-            this.$store.commit("resetState");
-            // Post and silence errors
-            axios.post(this.systemActionLinks.shutdown).catch(() => {});
-          }
+          this.$store.commit("resetState");
+          // Post and silence errors
+          axios.post(this.baseUri + 'shutdown').catch(() => {});
         },
         () => {}
       );
@@ -171,11 +132,9 @@ export default {
     rebootRequest: function() {
       this.modalConfirm("Restart microscope?").then(
         () => {
-          if ("reboot" in this.systemActionLinks) {
-            this.$store.commit("resetState");
-            // Post and silence errors
-            axios.post(this.systemActionLinks.reboot).catch(() => {});
-          }
+          this.$store.commit("resetState");
+          // Post and silence errors
+          axios.post(this.baseUri + 'restart').catch(() => {});
         },
         () => {}
       );
diff --git a/webapp/src/components/tabContentComponents/aboutContent.vue b/webapp/src/components/tabContentComponents/aboutContent.vue
index f507d44d..b0513b91 100644
--- a/webapp/src/components/tabContentComponents/aboutContent.vue
+++ b/webapp/src/components/tabContentComponents/aboutContent.vue
@@ -10,8 +10,9 @@
         class="uk-link"
         target="_blank"
         href="https://gitlab.com/openflexure/openflexure-microscope-server/-/issues"
-        >Report an issue</a
       >
+        Report an issue
+      </a>
     </div>
     <div class="uk-padding-small">
       <h2>Developer tools</h2>
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
index dfc5e25b..f96b9675 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
@@ -87,7 +87,6 @@ export default {
     updateActions: async function() {
       try {
         let response = await axios.get(this.thingUri); // Get Thing Description
-        console.log("CSM TD", response.data);
         this.actions = response.data.actions;
         this.properties = response.data.properties;
       } catch (error) {

From 1d24701dfd167fd224c473b8f3510d7f4e324955 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Thu, 2 Nov 2023 21:33:42 +0000
Subject: [PATCH 07/46] Fix shutdown/restart buttons

---
 .../tabContentComponents/aboutComponents/statusPane.vue       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
index 269c5d21..1ec9103b 100644
--- a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
+++ b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
@@ -124,7 +124,7 @@ export default {
         () => {
           this.$store.commit("resetState");
           // Post and silence errors
-          axios.post(this.baseUri + 'shutdown').catch(() => {});
+          axios.post(this.baseUri + 'system_control/shutdown').catch(() => {});
         },
         () => {}
       );
@@ -134,7 +134,7 @@ export default {
         () => {
           this.$store.commit("resetState");
           // Post and silence errors
-          axios.post(this.baseUri + 'restart').catch(() => {});
+          axios.post(this.baseUri + 'system_control/restart').catch(() => {});
         },
         () => {}
       );

From 595101248e533ed37a740b4b1465ec4b5994d360 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Wed, 29 Nov 2023 22:43:55 +0000
Subject: [PATCH 08/46] Removed node-wot but kept centralised TD store

I had intended to store a ConsumedThing for each Thing, in
a module in the store. Until that is possible (will require some
more attention to dependency management) I will just store
the TDs instead.

This commit includes a lot of the code I wrote for node-wot use,
but without any dependence on node-wot.
---
 webapp/src/App.vue                            |  28 +--
 .../labThingsComponents/propertyControl.vue   | 200 ++++++++++++++++++
 .../CSMCalibrationSettings.vue                |   2 +-
 webapp/src/main.js                            |  10 +
 webapp/src/store.js                           |   4 +-
 webapp/src/wot-client.js                      |  37 ++++
 6 files changed, 265 insertions(+), 16 deletions(-)
 create mode 100644 webapp/src/components/labThingsComponents/propertyControl.vue
 create mode 100644 webapp/src/wot-client.js

diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index 6e63fcd6..c06e4ce9 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -305,22 +305,22 @@ export default {
   },
 
   methods: {
-    checkConnection: function() {
+    async checkConnection() {
       var baseUri = this.$store.getters.baseUri;
       this.$store.commit("changeWaiting", true);
-      axios
-        // TODO: more robust check - e.g. use a microscope Thing
-        .get(`${baseUri}/stage/`)
-        .then(() => {
-          this.$store.commit("setConnected");
-          this.$store.commit("setErrorMessage", null);
-        })
-        .catch(error => {
-          this.$store.commit("setErrorMessage", error);
-        })
-        .finally(() => {
-          this.$store.commit("changeWaiting", false);
-        });
+      // TODO: more robust check - e.g. use a microscope Thing
+      // TODO: should we purge existing consumedThings?
+      try {
+        await axios.get(`${baseUri}/things/`);
+        await this.getThingDescription("stage");
+        await this.getThingDescription("camera");
+        this.$store.commit("setConnected");
+        this.$store.commit("setErrorMessage", null);
+      } catch (error) {
+        this.$store.commit("setErrorMessage", error);
+      } finally {
+        this.$store.commit("changeWaiting", false);
+      }
     },
 
     handleExit: function() {
diff --git a/webapp/src/components/labThingsComponents/propertyControl.vue b/webapp/src/components/labThingsComponents/propertyControl.vue
new file mode 100644
index 00000000..b4ec48a6
--- /dev/null
+++ b/webapp/src/components/labThingsComponents/propertyControl.vue
@@ -0,0 +1,200 @@
+<template>
+  <div>
+    <label class="uk-form-label">{{ label }}</label>
+    <div v-if="dataType == 'number'" class="input-and-buttons-container">
+      <input
+        v-model="value"
+        class="uk-form-small numeric-setting-line-input"
+        type="number"
+        @focusin="focusIn"
+        @focusout="focusOut"
+        @keydown="keyDown"
+      />
+      <a class="button-next-to-input" @click="readProperty">
+        <i class="material-icons">refresh</i>
+      </a>
+    </div>
+    <div v-if="dataType == 'number_array'" class="input-and-buttons-container">
+      <input
+        v-for="i in value.length"
+        :key="i"
+        v-model="value[i - 1]"
+        class="uk-form-small numeric-setting-line-input"
+        type="number"
+        @focusin="focusIn"
+        @focusout="focusOut"
+        @keydown="keyDown"
+      />
+      <a class="button-next-to-input" @click="readProperty">
+        <i class="material-icons">refresh</i>
+      </a>
+    </div>
+    <div v-if="dataType == 'number_object'" class="input-and-buttons-container">
+      <input
+        v-for="(_v, key) in value"
+        :key="key"
+        v-model="value[key]"
+        class="uk-form-small numeric-setting-line-input"
+        type="number"
+        @focusin="focusIn"
+        @focusout="focusOut"
+        @keydown="keyDown"
+      />
+      <a class="button-next-to-input" @click="readProperty">
+        <i class="material-icons">refresh</i>
+      </a>
+    </div>
+    <div v-else class="input-and-buttons-container">
+      <input
+        :value="value"
+        class="uk-form-small numeric-setting-line-input"
+        type="text"
+        disabled="true"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  name: "PropertyControl",
+
+  props: {
+    propertyName: {
+      type: String,
+      required: true
+    },
+    thingDescription: {
+      type: Object,
+      required: true
+    },
+    readBackDelay: {
+      type: Number,
+      default: undefined,
+      required: false
+    }
+  },
+
+  data: () => {
+    return {
+      value: {},
+      valueOnEnter: undefined,
+      focused: false
+    };
+  },
+
+  computed: {
+    readBack: function() {
+      return this.readBackDelay !== undefined;
+    },
+    propertyDescription: function() {
+      return this.thingDescription.properties[this.propertyName];
+    },
+    dataType: function() {
+      let prop = this.propertyDescription;
+      const num_types = ["integer", "float", "number"];
+      if (num_types.includes(prop.type)) {
+        return "number";
+      }
+      console.log("Prop type", prop.type, "is not in", num_types);
+      if (prop.type == "array") {
+        if (num_types.includes(prop.items)) {
+          return "number_array";
+        }
+        if (Array.isArray(prop.items)) {
+          if (prop.items.every(t => num_types.includes(t))) {
+            return "number_array";
+          }
+        }
+      }
+      if (prop.type == "object") {
+        let numeric = true;
+        for (let key in prop.properties) {
+          if (!num_types.includes(prop.properties[key].type)) {
+            numeric = false;
+            break;
+          }
+        }
+        if (numeric) {
+          return "number_object";
+        }
+      }
+      return "other";
+    }
+  },
+
+  mounted: function() {
+    this.readProperty();
+  },
+
+  methods: {
+    readProperty: async function() {
+      let response = await axios.get(this.propertyUrl);
+      this.value = response.data;
+      console.log("Read property", this.propertyUrl, response.data);
+      return response.data;
+    },
+    writeProperty: async function() {
+      try {
+        let requestedValue = this.value;
+        await axios.post(this.propertyUrl, requestedValue);
+        if (this.readBack) {
+          await new Promise(r => setTimeout(r, this.readBackDelay));
+          let newVal = await this.readProperty();
+          if (newVal == requestedValue) {
+            await this.modalNotify(`Set ${this.label} to ${newVal}.`);
+          } else {
+            await this.modalNotify(
+              `Set ${this.label} to ${newVal} (requested ${requestedValue}).`
+            );
+          }
+        } else {
+          await this.modalNotify(`Set ${this.label} to ${this.value}.`);
+        }
+      } catch (error) {
+        this.modalError(error); // Let mixin handle error
+      }
+    },
+    focusIn: function(event) {
+      this.valueOnEnter = event.target.value;
+    },
+    focusOut: function(event) {
+      if (this.valueOnEnter != event.target.value) {
+        this.writeProperty(event.target.value);
+      }
+    },
+    keyDown: function(event) {
+      // Pressing enter should set the property, whether or not we think it's changed.
+      if (event.keyCode == 13) {
+        this.writeProperty();
+      }
+    }
+  }
+};
+</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: 6em;
+}
+.button-next-to-input {
+  flex-grow: 0;
+  padding-left: 5px;
+  padding-right: 5px;
+  vertical-align: middle;
+  cursor: pointer;
+}
+</style>
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
index f96b9675..3fc6d965 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
@@ -51,7 +51,7 @@ export default {
     return {
       settings: null,
       actions: {},
-      properties: {},
+      properties: {}
     };
   },
 
diff --git a/webapp/src/main.js b/webapp/src/main.js
index a9441a66..acde7f1d 100644
--- a/webapp/src/main.js
+++ b/webapp/src/main.js
@@ -34,6 +34,16 @@ Vue.config.productionTip = false;
 
 Vue.mixin({
   methods: {
+    async getThingDescription(thing) {
+      // Get the thing description for the given thing
+      let origin = this.$store.state.origin;
+      let uri = `${origin}/${thing}/`;
+      // We cache TDs in the store, and fetch only if needed.
+      if (!(uri in store.state.wot.thingDescriptions)) {
+        await store.dispatch("wot/fetchThingDescription", uri);
+      }
+      return store.state.wot.thingDescriptions[uri];
+    },
     modalConfirm: function(modalText) {
       var context = this;
 
diff --git a/webapp/src/store.js b/webapp/src/store.js
index 76029af2..231d6886 100644
--- a/webapp/src/store.js
+++ b/webapp/src/store.js
@@ -1,5 +1,6 @@
 import Vue from "vue";
 import Vuex from "vuex";
+import wotStoreModule from "./wot-client";
 
 Vue.use(Vuex);
 
@@ -76,7 +77,8 @@ function getOriginFromLocation() {
 
 export default new Vuex.Store({
   modules: {
-    imjoy: moduleImjoy
+    imjoy: moduleImjoy,
+    wot: wotStoreModule
   },
   state: {
     origin: getOriginFromLocation(),
diff --git a/webapp/src/wot-client.js b/webapp/src/wot-client.js
new file mode 100644
index 00000000..036180ad
--- /dev/null
+++ b/webapp/src/wot-client.js
@@ -0,0 +1,37 @@
+import axios from "axios";
+
+export const wotStoreModule = {
+  namespaced: true,
+  state: () => ({
+    thingDescriptions: {},
+    servient: null,
+    helpers: null
+  }),
+  mutations: {
+    addThingDescription(state, { thingUri, thingDescription }) {
+      state.thingDescriptions[thingUri] = thingDescription;
+    },
+    removeThingDescription(state, thingUri) {
+      delete state.thingDescriptions[thingUri];
+    },
+    removeAllThingDescriptions(state) {
+      state.thingDescriptions = {};
+    }
+  },
+  actions: {
+    async start() {
+      // Set up thing client - not currently used.
+    },
+    async fetchThingDescription({ commit }, uri) {
+      // Fetch the thing description from the given URI and consume it
+      // NB this should only be called once, or we'll duplicate effort.
+      // Deduplication should be done elsewhere.
+      let response = await axios.get(uri);
+      let td = response.data;
+      commit("addThingDescription", { thingUri: uri, thingDescription: td });
+    }
+  },
+  getters: {}
+};
+
+export default wotStoreModule;

From 488493385f313c15cf95f6b2a3e4bbed323e2ab0 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Wed, 29 Nov 2023 23:54:00 +0000
Subject: [PATCH 09/46] Combine the various property controls into one
 component

propertyControl now handles several different property types,
based on the thing description. This reduces duplication and
should keep the code cleaner.

In the future this will become a part of a labthings-vue package,
I hope!
---
 .../labThingsComponents/propertyControl.vue   | 77 ++++++++++++++++---
 .../aboutComponents/statusPane.vue            | 17 ++--
 .../settingsComponents/cameraSettings.vue     | 38 +++++----
 3 files changed, 100 insertions(+), 32 deletions(-)

diff --git a/webapp/src/components/labThingsComponents/propertyControl.vue b/webapp/src/components/labThingsComponents/propertyControl.vue
index b4ec48a6..940ce95f 100644
--- a/webapp/src/components/labThingsComponents/propertyControl.vue
+++ b/webapp/src/components/labThingsComponents/propertyControl.vue
@@ -44,7 +44,7 @@
         <i class="material-icons">refresh</i>
       </a>
     </div>
-    <div v-else class="input-and-buttons-container">
+    <div v-if="dataType == 'other'" class="input-and-buttons-container">
       <input
         :value="value"
         class="uk-form-small numeric-setting-line-input"
@@ -62,6 +62,10 @@ export default {
   name: "PropertyControl",
 
   props: {
+    label: {
+      type: String,
+      default: ""
+    },
     propertyName: {
       type: String,
       required: true
@@ -79,7 +83,7 @@ export default {
 
   data: () => {
     return {
-      value: {},
+      value: undefined,
       valueOnEnter: undefined,
       focused: false
     };
@@ -90,21 +94,35 @@ export default {
       return this.readBackDelay !== undefined;
     },
     propertyDescription: function() {
-      return this.thingDescription.properties[this.propertyName];
+      try {
+        return this.thingDescription.properties[this.propertyName];
+      } catch (error) {
+        return undefined;
+      }
+    },
+    readPropertyUrl: function() {
+      let href = this.formHref("readproperty");
+      return this.prependTdBaseUri(href);
+    },
+    writePropertyUrl: function() {
+      let href = this.formHref("writeproperty");
+      return this.prependTdBaseUri(href);
     },
     dataType: function() {
       let prop = this.propertyDescription;
+      if (prop == undefined) {
+        return "undefined";
+      }
       const num_types = ["integer", "float", "number"];
       if (num_types.includes(prop.type)) {
         return "number";
       }
-      console.log("Prop type", prop.type, "is not in", num_types);
       if (prop.type == "array") {
-        if (num_types.includes(prop.items)) {
+        if (num_types.includes(prop.items.type)) {
           return "number_array";
         }
         if (Array.isArray(prop.items)) {
-          if (prop.items.every(t => num_types.includes(t))) {
+          if (prop.items.every(t => num_types.includes(t.type))) {
             return "number_array";
           }
         }
@@ -125,21 +143,60 @@ export default {
     }
   },
 
+  watch: {
+    readPropertyUrl: function() {
+      // Ensure we read the property once the URL is known
+      this.readProperty();
+    }
+  },
+
   mounted: function() {
-    this.readProperty();
+    // Read the property when we're mounted - usually this won't
+    // work because the URL isn't set yet. However, it's helpful if
+    // the app is reloaded (e.g. from a dev server).
+    if (this.value == undefined) {
+      this.readProperty();
+    }
   },
 
   methods: {
+    formHref: function(op = "readproperty") {
+      if (this.thingDescription == undefined) return undefined;
+      try {
+        let forms = this.propertyDescription.forms;
+        let readForm = forms.find(f => f.op == op || f.op.includes(op));
+        return readForm.href;
+      } catch (error) {
+        console.log(
+          `Failed to find form for ${op} on ${this.propertyName}`,
+          error
+        );
+        return undefined;
+      }
+    },
+    prependTdBaseUri: function(href) {
+      if (href == undefined) return undefined;
+      if (href.startsWith("http")) return href;
+      if ("base" in this.thingDescription) {
+        if (href.startsWith("/")) href = href.slice(1);
+        if (!this.thingDescription.base.endsWith("/"))
+          this.thingDescription.base += "/";
+        return this.thingDescription.base + href;
+      }
+      return href;
+    },
     readProperty: async function() {
-      let response = await axios.get(this.propertyUrl);
+      console.log(`Reading property ${this.propertyName}`);
+      let response = await axios.get(this.readPropertyUrl);
+      console.log(`Read property ${this.propertyName}`);
       this.value = response.data;
-      console.log("Read property", this.propertyUrl, response.data);
+      console.log("Read property", this.readPropertyUrl, response.data);
       return response.data;
     },
     writeProperty: async function() {
       try {
         let requestedValue = this.value;
-        await axios.post(this.propertyUrl, requestedValue);
+        await axios.post(this.writePropertyUrl, requestedValue);
         if (this.readBack) {
           await new Promise(r => setTimeout(r, this.readBackDelay));
           let newVal = await this.readProperty();
diff --git a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
index 1ec9103b..e23999b6 100644
--- a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
+++ b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
@@ -87,7 +87,7 @@ export default {
   computed: {
     baseUri: function() {
       return `${this.$store.getters.baseUri}/`;
-    },
+    }
   },
 
   mounted: function() {
@@ -98,7 +98,7 @@ export default {
 
   methods: {
     updateConfiguration: async function() {
-      console.log("Showing the configuration is not yet fully implemented")
+      console.log("Showing the configuration is not yet fully implemented");
       // Retrieve TDs for camera and stage
       let things = {};
       for (let thing of ["camera", "stage"]) {
@@ -106,17 +106,20 @@ export default {
           let response = await axios.get(this.baseUri + thing); // Get Thing Description
           things[thing] = response.data;
         } catch (error) {
-          console.log(thing + " was missing", error)
+          console.log(thing + " was missing", error);
         }
       }
-      this.things = things;  // We must set this.things in order to trigger the UI update
+      this.things = things; // We must set this.things in order to trigger the UI update
     },
     updateActions: async function() {
       try {
         let response = await axios.get(this.baseUri + "system_control"); // Get Thing Description
         this.systemControlActions = response.data.actions;
       } catch (error) {
-        console.log("system control was missing - shutdown/restart buttons will not appear", error)
+        console.log(
+          "system control was missing - shutdown/restart buttons will not appear",
+          error
+        );
       }
     },
     shutdownRequest: function() {
@@ -124,7 +127,7 @@ export default {
         () => {
           this.$store.commit("resetState");
           // Post and silence errors
-          axios.post(this.baseUri + 'system_control/shutdown').catch(() => {});
+          axios.post(this.baseUri + "system_control/shutdown").catch(() => {});
         },
         () => {}
       );
@@ -134,7 +137,7 @@ export default {
         () => {
           this.$store.commit("resetState");
           // Post and silence errors
-          axios.post(this.baseUri + 'system_control/restart').catch(() => {});
+          axios.post(this.baseUri + "system_control/restart").catch(() => {});
         },
         () => {}
       );
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
index 9c768c46..f9e70ebb 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
@@ -12,19 +12,22 @@
               <li class="uk-open">
                 <a class="uk-accordion-title" href="#">Pi Camera Settings</a>
                 <div class="uk-accordion-content">
-                  <NumericSettingLine
+                  <PropertyControl
                     label="Exposure time"
-                    :property-url="cameraUri + 'exposure_time'"
+                    property-name="exposure_time"
+                    :thing-description="thingDescription"
                     :read-back-delay="1000"
                   />
-                  <NumericSettingLine
+                  <PropertyControl
                     label="Analogue gain"
-                    :property-url="cameraUri + 'analogue_gain'"
+                    property-name="analogue_gain"
+                    :thing-description="thingDescription"
                     :read-back-delay="1000"
                   />
-                  <NumericArraySettingLine
+                  <PropertyControl
                     label="Colour gains"
-                    :property-url="cameraUri + 'colour_gains'"
+                    property-name="colour_gains"
+                    :thing-description="thingDescription"
                     :read-back-delay="1000"
                   />
                 </div>
@@ -32,14 +35,16 @@
               <li class="uk-open">
                 <a class="uk-accordion-title" href="#">Image Quality</a>
                 <div class="uk-accordion-content">
-                  <NumericSettingLine
+                  <PropertyControl
                     label="MJPEG stream bit rate"
-                    :property-url="cameraUri + 'mjpeg_bitrate'"
+                    property-name="mjpeg_bitrate"
+                    :thing-description="thingDescription"
                     :read-back-delay="100"
                   />
-                  <NumericArraySettingLine
+                  <PropertyControl
                     label="MJPEG stream resolution"
-                    :property-url="cameraUri + 'stream_resolution'"
+                    property-name="stream_resolution"
+                    :thing-description="thingDescription"
                     :read-back-delay="100"
                   />
                 </div>
@@ -92,8 +97,7 @@
 <script>
 import cameraCalibrationSettings from "./cameraSettingsComponents/cameraCalibrationSettings.vue";
 import miniStreamDisplay from "../../genericComponents/miniStreamDisplay.vue";
-import NumericSettingLine from "../../genericComponents/numericSettingLine.vue";
-import NumericArraySettingLine from "../../genericComponents/numericArraySettingLine.vue";
+import PropertyControl from "../../labThingsComponents/propertyControl.vue";
 
 // Export main app
 export default {
@@ -102,8 +106,7 @@ export default {
   components: {
     cameraCalibrationSettings,
     miniStreamDisplay,
-    NumericSettingLine,
-    NumericArraySettingLine
+    PropertyControl
   },
 
   data: function() {
@@ -133,7 +136,8 @@ export default {
         { text: "Normal (30fps)", value: 30 },
         { text: "Low (15fps)", value: 15 },
         { text: "Very low (10fps)", value: 10 }
-      ]
+      ],
+      thingDescription: undefined
     };
   },
 
@@ -141,6 +145,10 @@ export default {
     cameraUri: function() {
       return `${this.$store.getters.baseUri}/camera/`;
     }
+  },
+
+  mounted: async function() {
+    this.thingDescription = await this.getThingDescription("camera");
   }
 };
 </script>

From 24bfb4c2536ce0ec54d917400023d5c1fa650f2b Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Thu, 30 Nov 2023 00:02:53 +0000
Subject: [PATCH 10/46] Remove vestigial stage settings

---
 .../settingsComponents/stageSettings.vue      | 179 +-----------------
 1 file changed, 9 insertions(+), 170 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue
index 16cd8fda..cda328a4 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue
@@ -1,103 +1,13 @@
 <template>
   <div id="stageSettings" class="uk-width-large">
-    <div v-if="stageType === 'MissingStage'" class="uk-text-danger">
-      <b>No stage connected</b>
-    </div>
-    <div v-else>
-      <h3>Stage settings</h3>
-      <form @submit.prevent="setStageType">
-        <div class="uk-margin-small-bottom">
-          <h4>Stage geometry</h4>
-          <select v-model="stageType" class="uk-select uk-margin-small-top">
-            <option value="SangaStage">SangaStage (Standard)</option>
-            <option value="SangaDeltaStage"> SangaStage (Delta)</option>
-          </select>
-
-          <button
-            type="submit"
-            class="uk-button uk-button-primary uk-margin-small uk-width-1-1"
-          >
-            Change stage geometry
-          </button>
-        </div>
-      </form>
-
-      <form @submit.prevent="applySettingsRequest">
-        <div class="uk-margin-small-bottom">
-          <h4>Backlash compensation</h4>
-          <p class="uk-margin-remove">
-            Backlash compentation causes movements to overshoot by that number
-            of motor steps, reducing the effect of mechanical backlash.
-          </p>
-          <div
-            class="uk-grid-small uk-child-width-1-3 uk-margin-small-bottom"
-            uk-grid
-          >
-            <div>
-              <label class="uk-form-label" for="form-stacked-text">x</label>
-              <div class="uk-form-controls">
-                <input
-                  v-model="backlash.x"
-                  class="uk-input uk-form-small"
-                  type="number"
-                />
-              </div>
-            </div>
-
-            <div>
-              <label class="uk-form-label" for="form-stacked-text">y</label>
-              <div class="uk-form-controls">
-                <input
-                  v-model="backlash.y"
-                  class="uk-input uk-form-small"
-                  type="number"
-                />
-              </div>
-            </div>
-
-            <div>
-              <label class="uk-form-label" for="form-stacked-text">z</label>
-              <div class="uk-form-controls">
-                <input
-                  v-model="backlash.z"
-                  class="uk-input uk-form-small"
-                  type="number"
-                />
-              </div>
-            </div>
-          </div>
-
-          <h4>Settle time</h4>
-          <div v-if="settle_time !== undefined">
-            <p class="uk-margin-small-bottom">
-              When moving or scanning, captures will be delayed by the settle
-              time (in seconds) to reduce motion blur.
-            </p>
-            <div class="uk-form-controls">
-              <input
-                v-model="settle_time"
-                class="uk-input uk-form-small"
-                type="number"
-                step="0.1"
-              />
-            </div>
-          </div>
-
-          <button
-            type="submit"
-            class="uk-button uk-button-primary uk-margin-small uk-width-1-1"
-          >
-            Apply Settings
-          </button>
-        </div>
-      </form>
-    </div>
+    The microscope stage is a <b>{{ stageType }}</b
+    >. There are no settings to adjust here: to set the geometry of your stage
+    (i.e. switch between delta and cartesian), you will need to adjust the
+    configuration of your microscope, which cannot be done while it is running.
   </div>
 </template>
 
 <script>
-import axios from "axios";
-
 export default {
   name: "StageSettings",
 
@@ -105,89 +15,18 @@ export default {
 
   data: function() {
     return {
-      stageType: "MissingStage",
-      backlash: {
-        x: undefined,
-        y: undefined,
-        z: undefined
-      },
-      settle_time: undefined
+      thingDescription: {}
     };
   },
 
   computed: {
-    settingsUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2/instrument/settings`;
-    },
-    stageTypeUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2/instrument/stage/type`;
+    stageType: function() {
+      return this.thingDescription.title;
     }
   },
 
-  mounted() {
-    this.getStageType();
-    this.updateSettings();
-  },
-
-  methods: {
-    updateSettings: function() {
-      axios
-        .get(this.settingsUri)
-        .then(response => {
-          const stageSettings = response.data.stage;
-          this.backlash.x = stageSettings.backlash.x;
-          this.backlash.y = stageSettings.backlash.y;
-          this.backlash.z = stageSettings.backlash.z;
-          this.settle_time = stageSettings.settle_time;
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
-    },
-    applySettingsRequest: function() {
-      var payload = {
-        stage: {
-          backlash: this.backlash
-        }
-      };
-      // Send request to update settings
-      axios
-        .put(this.settingsUri, payload)
-        .then(() => {
-          // Update local settings
-          this.updateSettings();
-          this.modalNotify("Stage settings applied.");
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
-    },
-    getStageType: function() {
-      axios
-        .get(this.stageTypeUri)
-        .then(response => {
-          this.stageType = response.data;
-        })
-        .catch(error => {
-          this.modalError(error);
-        });
-    },
-    setStageType: function() {
-      axios
-        .put(this.stageTypeUri, this.stageType, {
-          headers: {
-            "Content-Type": "application/json"
-          }
-        })
-        .then(response => {
-          this.stageType = response.data;
-
-          this.modalNotify("Stage geometry changed.");
-        })
-        .catch(error => {
-          this.modalError(error);
-        });
-    }
+  mounted: async function() {
+    this.thingDescription = await this.getThingDescription("stage");
   }
 };
 </script>

From 8de79ad7e8832a550a2bdfa2a5fe4df7d8c39839 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Thu, 30 Nov 2023 00:20:10 +0000
Subject: [PATCH 11/46] Delete unused print statements

---
 webapp/src/components/labThingsComponents/propertyControl.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/webapp/src/components/labThingsComponents/propertyControl.vue b/webapp/src/components/labThingsComponents/propertyControl.vue
index 940ce95f..f1d3c9bc 100644
--- a/webapp/src/components/labThingsComponents/propertyControl.vue
+++ b/webapp/src/components/labThingsComponents/propertyControl.vue
@@ -186,11 +186,8 @@ export default {
       return href;
     },
     readProperty: async function() {
-      console.log(`Reading property ${this.propertyName}`);
       let response = await axios.get(this.readPropertyUrl);
-      console.log(`Read property ${this.propertyName}`);
       this.value = response.data;
-      console.log("Read property", this.readPropertyUrl, response.data);
       return response.data;
     },
     writeProperty: async function() {

From b47ac8b828535daf68214202b527e882766e4f8c Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Thu, 30 Nov 2023 00:20:26 +0000
Subject: [PATCH 12/46] Remove unused URL computed props

---
 .../tabContentComponents/navigateComponents/paneNavigate.vue | 5 +----
 webapp/src/components/tabContentComponents/streamContent.vue | 3 ---
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue b/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
index a86d10a5..3f718352 100644
--- a/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
+++ b/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
@@ -235,14 +235,11 @@ export default {
       return `${this.$store.getters.baseUri}/stage/move_relative`;
     },
     zeroActionUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2/actions/stage/zero`;
+      return `${this.$store.getters.baseUri}/stage/zero`;
     },
     positionStatusUri: function() {
       return `${this.baseUri}/stage/position`;
     },
-    pluginsUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2/extensions`;
-    }
   },
 
   watch: {
diff --git a/webapp/src/components/tabContentComponents/streamContent.vue b/webapp/src/components/tabContentComponents/streamContent.vue
index cf188146..48c3b33a 100644
--- a/webapp/src/components/tabContentComponents/streamContent.vue
+++ b/webapp/src/components/tabContentComponents/streamContent.vue
@@ -59,9 +59,6 @@ export default {
     streamImgUri: function() {
       return `${this.$store.getters.baseUri}/camera/mjpeg_stream`;
     },
-    settingsUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2/instrument/settings`;
-    }
   },
 
   mounted() {

From 6c48444126e3ae3c044ba1255b261a88258da14b Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Thu, 30 Nov 2023 09:14:04 +0000
Subject: [PATCH 13/46] Removed vestigial code from CSMSettings

---
 .../settingsComponents/CSMSettings.vue        | 28 +++----------------
 1 file changed, 4 insertions(+), 24 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
index d8c4be79..2be31e21 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
@@ -43,7 +43,7 @@ export default {
 
   data: function() {
     return {
-      settings: null,
+      thingDescription: undefined,
       recalibrationLinks: {},
       isCalibrating: false,
       dataAvailable: false
@@ -51,34 +51,13 @@ export default {
   },
 
   computed: {
-    settingsUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2/instrument/settings`;
-    },
-    pluginsUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2/extensions`;
-    }
   },
 
   mounted() {
-    this.updateSettings();
-    this.updateRecalibrationLinks();
+    this.updateThingDescription();
   },
 
   methods: {
-    updateSettings: function() {
-      // Update links
-      axios
-        .get(this.settingsUri)
-        .then(response => {
-          this.settings =
-            response.data.extensions["org.openflexure.camera_stage_mapping"];
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-          this.settings = {};
-        });
-    },
-
     updateCalibrationDataAvailability: function() {
       if ("get_calibration" in this.recalibrationLinks) {
         axios
@@ -115,7 +94,8 @@ export default {
         });
     },
 
-    updateRecalibrationLinks: function() {
+    updateThingDescription: function() {
+      this.thingDescription = 
       axios
         .get(this.pluginsUri) // Get a list of plugins
         .then(response => {

From f1f6ed5f80a176bd2a70b6d1b409207706d4f68c Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Thu, 30 Nov 2023 22:51:10 +0000
Subject: [PATCH 14/46] Provide centralised readproperty, writeproperty, and
 action URLs

---
 webapp/src/main.js       | 32 +++++++++++++++++------
 webapp/src/wot-client.js | 55 ++++++++++++++++++++++++++++++++++------
 2 files changed, 71 insertions(+), 16 deletions(-)

diff --git a/webapp/src/main.js b/webapp/src/main.js
index acde7f1d..c1aaaf5a 100644
--- a/webapp/src/main.js
+++ b/webapp/src/main.js
@@ -34,15 +34,31 @@ Vue.config.productionTip = false;
 
 Vue.mixin({
   methods: {
-    async getThingDescription(thing) {
-      // Get the thing description for the given thing
-      let origin = this.$store.state.origin;
-      let uri = `${origin}/${thing}/`;
-      // We cache TDs in the store, and fetch only if needed.
-      if (!(uri in store.state.wot.thingDescriptions)) {
-        await store.dispatch("wot/fetchThingDescription", uri);
+    thingDescription(thing) {
+      return this.$store.getters["wot/thingDescription"](thing);
+    },
+    thingAvailable(thing) {
+      return this.$store.getters["wot/thingAvailable"](thing);
+    },
+    async readThingProperty(thing, property) {
+      let url = this.$store.getters["wot/thingPropertyUrl"](thing, property, "readproperty");
+      try {
+        let response = await axios.get(url);
+        return response.data;
+      } catch (error) {
+        this.modalError(error);
       }
-      return store.state.wot.thingDescriptions[uri];
+    },
+    async writeThingProperty(thing, property, value) {
+      let url = this.$store.getters["wot/thingPropertyUrl"](thing, property, "writeproperty");
+      try {
+        let response = await axios.put(url, value);
+      } catch (error) {
+        this.modalError(error);
+      }
+    },
+    thingActionUrl(thing, action) {
+      return this.$store.getters["wot/thingActionUrl"](thing, action);
     },
     modalConfirm: function(modalText) {
       var context = this;
diff --git a/webapp/src/wot-client.js b/webapp/src/wot-client.js
index 036180ad..2a2a69a1 100644
--- a/webapp/src/wot-client.js
+++ b/webapp/src/wot-client.js
@@ -8,11 +8,11 @@ export const wotStoreModule = {
     helpers: null
   }),
   mutations: {
-    addThingDescription(state, { thingUri, thingDescription }) {
-      state.thingDescriptions[thingUri] = thingDescription;
+    addThingDescription(state, { thingName, thingDescription }) {
+      state.thingDescriptions[thingName] = thingDescription;
     },
-    removeThingDescription(state, thingUri) {
-      delete state.thingDescriptions[thingUri];
+    removeThingDescription(state, thingName) {
+      delete state.thingDescriptions[thingName];
     },
     removeAllThingDescriptions(state) {
       state.thingDescriptions = {};
@@ -22,16 +22,55 @@ export const wotStoreModule = {
     async start() {
       // Set up thing client - not currently used.
     },
-    async fetchThingDescription({ commit }, uri) {
+    async fetchThingDescription({ commit }, {uri, name=null}) {
       // Fetch the thing description from the given URI and consume it
       // NB this should only be called once, or we'll duplicate effort.
       // Deduplication should be done elsewhere.
       let response = await axios.get(uri);
       let td = response.data;
-      commit("addThingDescription", { thingUri: uri, thingDescription: td });
-    }
+      let thing_name = name | uri.replace(/\/$/, "").split("/").pop();
+      commit("addThingDescription", { thingName: thing_name, thingDescription: td });
+    },
+    async fetchThingDescriptions({ commit }, uri) {
+      // Fetch thing descriptions from the given URI
+      let response = await axios.get(uri);
+      if (response.status != 200) throw "Could not retrieve thing descriptions";
+      for (const k in response.data){
+        let thing_name = k.replace(/\/$/, "").replace(/^\//, "");
+        commit("addThingDescription", {thing_name: thing_name, thing_description: response.data[k]});
+      }
+    },
   },
-  getters: {}
+  getters: {
+    thingDescription: state => thingName => {
+      return state.thingDescriptions[thingName];
+    },
+    thingAvailable: state => thingName => {
+      return thingName in state.thingDescriptions;
+    },
+    thingFormUrl: state => (thing, affordanceType, affordance, op) => {
+      // Find the URL for a particular operation
+      let td = state.thingDescriptions[thing];
+      if (!td) return null;
+      let affordances = td[affordanceType];
+      return findForm(affordances[affordance], op);
+    },
+    thingPropertyUrl: (_state, getters) => (thing, property, op) => {
+      // Find the URL for a particular property
+      return getters.thingFormUrl(thing, "properties", property, op);
+    },
+    thingActionUrl: (_state, getters) => (thing, action, op) => {
+      // Find the URL for a particular action
+      return getters.thingFormUrl(thing, "actions", action, op);
+    },
+  }
 };
 
+export function findForm(affordance, op){
+  // Find the form in the affordance that matches the given operation type
+  let forms = affordance.forms;
+  let matchingForm = forms.find(f => f.op == op || f.op.includes(op));
+  return matchingForm.href;
+}
+
 export default wotStoreModule;

From 54df1faeeb18158c7746fa8bb709f69ca544e66b Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Thu, 30 Nov 2023 23:21:45 +0000
Subject: [PATCH 15/46] Linter fixes

---
 .../navigateComponents/paneNavigate.vue       |  2 +-
 .../settingsComponents/cameraSettings.vue     | 10 +++----
 webapp/src/main.js                            | 15 ++++++++--
 webapp/src/wot-client.js                      | 28 +++++++++++++------
 4 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue b/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
index 3f718352..e6021f41 100644
--- a/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
+++ b/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
@@ -239,7 +239,7 @@ export default {
     },
     positionStatusUri: function() {
       return `${this.baseUri}/stage/position`;
-    },
+    }
   },
 
   watch: {
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
index f9e70ebb..ea08f866 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
@@ -136,19 +136,17 @@ export default {
         { text: "Normal (30fps)", value: 30 },
         { text: "Low (15fps)", value: 15 },
         { text: "Very low (10fps)", value: 10 }
-      ],
-      thingDescription: undefined
+      ]
     };
   },
 
   computed: {
     cameraUri: function() {
       return `${this.$store.getters.baseUri}/camera/`;
+    },
+    thingDescription: function() {
+      return this.$store.getters["wot/thingDescription"]("camera");
     }
-  },
-
-  mounted: async function() {
-    this.thingDescription = await this.getThingDescription("camera");
   }
 };
 </script>
diff --git a/webapp/src/main.js b/webapp/src/main.js
index c1aaaf5a..9cbc414a 100644
--- a/webapp/src/main.js
+++ b/webapp/src/main.js
@@ -1,6 +1,7 @@
 import Vue from "vue";
 import App from "./App.vue";
 import store from "./store";
+import axios from "axios";
 import UIkit from "uikit";
 import VueTour from "vue-tour";
 import VueFriendlyIframe from "vue-friendly-iframe";
@@ -41,7 +42,11 @@ Vue.mixin({
       return this.$store.getters["wot/thingAvailable"](thing);
     },
     async readThingProperty(thing, property) {
-      let url = this.$store.getters["wot/thingPropertyUrl"](thing, property, "readproperty");
+      let url = this.$store.getters["wot/thingPropertyUrl"](
+        thing,
+        property,
+        "readproperty"
+      );
       try {
         let response = await axios.get(url);
         return response.data;
@@ -50,9 +55,13 @@ Vue.mixin({
       }
     },
     async writeThingProperty(thing, property, value) {
-      let url = this.$store.getters["wot/thingPropertyUrl"](thing, property, "writeproperty");
+      let url = this.$store.getters["wot/thingPropertyUrl"](
+        thing,
+        property,
+        "writeproperty"
+      );
       try {
-        let response = await axios.put(url, value);
+        await axios.put(url, value);
       } catch (error) {
         this.modalError(error);
       }
diff --git a/webapp/src/wot-client.js b/webapp/src/wot-client.js
index 2a2a69a1..d5aa375d 100644
--- a/webapp/src/wot-client.js
+++ b/webapp/src/wot-client.js
@@ -22,30 +22,42 @@ export const wotStoreModule = {
     async start() {
       // Set up thing client - not currently used.
     },
-    async fetchThingDescription({ commit }, {uri, name=null}) {
+    async fetchThingDescription({ commit }, { uri, name = null }) {
       // Fetch the thing description from the given URI and consume it
       // NB this should only be called once, or we'll duplicate effort.
       // Deduplication should be done elsewhere.
       let response = await axios.get(uri);
       let td = response.data;
-      let thing_name = name | uri.replace(/\/$/, "").split("/").pop();
-      commit("addThingDescription", { thingName: thing_name, thingDescription: td });
+      let thing_name =
+        name |
+        uri
+          .replace(/\/$/, "")
+          .split("/")
+          .pop();
+      commit("addThingDescription", {
+        thingName: thing_name,
+        thingDescription: td
+      });
     },
     async fetchThingDescriptions({ commit }, uri) {
       // Fetch thing descriptions from the given URI
       let response = await axios.get(uri);
       if (response.status != 200) throw "Could not retrieve thing descriptions";
-      for (const k in response.data){
+      for (const k in response.data) {
         let thing_name = k.replace(/\/$/, "").replace(/^\//, "");
-        commit("addThingDescription", {thing_name: thing_name, thing_description: response.data[k]});
+        commit("addThingDescription", {
+          thingName: thing_name,
+          thingDescription: response.data[k]
+        });
       }
-    },
+    }
   },
   getters: {
     thingDescription: state => thingName => {
       return state.thingDescriptions[thingName];
     },
     thingAvailable: state => thingName => {
+      console.log("thingAvailable", thingName, state.thingDescriptions)
       return thingName in state.thingDescriptions;
     },
     thingFormUrl: state => (thing, affordanceType, affordance, op) => {
@@ -62,11 +74,11 @@ export const wotStoreModule = {
     thingActionUrl: (_state, getters) => (thing, action, op) => {
       // Find the URL for a particular action
       return getters.thingFormUrl(thing, "actions", action, op);
-    },
+    }
   }
 };
 
-export function findForm(affordance, op){
+export function findForm(affordance, op) {
   // Find the form in the affordance that matches the given operation type
   let forms = affordance.forms;
   let matchingForm = forms.find(f => f.op == op || f.op.includes(op));

From 8865d88e2021f668cfabae7a3a390fa0642f1025 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Thu, 30 Nov 2023 23:22:00 +0000
Subject: [PATCH 16/46] Remove unnecessary components

---
 .../multiNumericSettingLine.vue               | 123 -----------------
 .../numericArraySettingLine.vue               | 129 ------------------
 .../genericComponents/numericSettingLine.vue  | 127 -----------------
 3 files changed, 379 deletions(-)
 delete mode 100644 webapp/src/components/genericComponents/multiNumericSettingLine.vue
 delete mode 100644 webapp/src/components/genericComponents/numericArraySettingLine.vue
 delete mode 100644 webapp/src/components/genericComponents/numericSettingLine.vue

diff --git a/webapp/src/components/genericComponents/multiNumericSettingLine.vue b/webapp/src/components/genericComponents/multiNumericSettingLine.vue
deleted file mode 100644
index 45a07b9e..00000000
--- a/webapp/src/components/genericComponents/multiNumericSettingLine.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<template>
-  <div>
-    <label class="uk-form-label">{{ label }}</label>
-    <div class="input-and-buttons-container">
-      <input
-        v-for="(_v, key) in value"
-        :key="key"
-        v-model="value[key]"
-        class="uk-form-small numeric-setting-line-input"
-        type="number"
-        @focusin="focusIn"
-        @focusout="focusOut"
-        @keydown="keyDown"
-      />
-      <a class="button-next-to-input" @click="readProperty">
-        <i class="material-icons">refresh</i>
-      </a>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from "axios";
-
-export default {
-  name: "MultiNumericSettingLine",
-
-  props: {
-    label: {
-      type: String,
-      required: true
-    },
-    propertyUrl: {
-      type: String,
-      required: true
-    },
-    readBackDelay: {
-      type: Number,
-      default: undefined,
-      required: false
-    }
-  },
-
-  data: () => {
-    return {
-      value: {},
-      valueOnEnter: undefined
-    };
-  },
-
-  computed: {
-    readBack: function() {
-      return this.readBackDelay !== undefined;
-    }
-  },
-
-  mounted() {
-    this.readProperty();
-  },
-
-  methods: {
-    readProperty: async function() {
-      let response = await axios.get(this.propertyUrl);
-      this.value = response.data;
-      console.log("Read property", this.propertyUrl, response.data);
-      return response.data;
-    },
-    writeProperty: async function() {
-      try {
-        let requestedValue = Number(this.value);
-        await axios.post(this.propertyUrl, requestedValue);
-        if (this.readBack) {
-          await new Promise(r => setTimeout(r, this.readBackDelay));
-          let newVal = await this.readProperty();
-          if (newVal == requestedValue) {
-            await this.modalNotify(`Set ${this.label} to ${newVal}.`);
-          } else {
-            await this.modalNotify(
-              `Set ${this.label} to ${newVal} (requested ${requestedValue}).`
-            );
-          }
-        } else {
-          await this.modalNotify(`Set ${this.label} to ${this.value}.`);
-        }
-      } catch (error) {
-        this.modalError(error); // Let mixin handle error
-      }
-    },
-    focusIn: function(event) {
-      this.valueOnEnter = event.target.value;
-    },
-    focusOut: function(event) {
-      if (this.valueOnEnter != event.target.value) {
-        this.writeProperty(event.target.value);
-      }
-    },
-    keyDown: function(event) {
-      // Pressing enter should set the property, whether or not we think it's changed.
-      if (event.keyCode == 13) {
-        this.writeProperty();
-      }
-    }
-  }
-};
-</script>
-
-<style scoped>
-.input-and-buttons-container {
-  display: table;
-  width: 100%;
-}
-.numeric-setting-line-input {
-  display: table-cell;
-  width: 100%;
-}
-.button-next-to-input {
-  display: table-cell;
-  padding-left: 20px;
-  padding-right: 5px;
-  vertical-align: middle;
-  cursor: pointer;
-}
-</style>
diff --git a/webapp/src/components/genericComponents/numericArraySettingLine.vue b/webapp/src/components/genericComponents/numericArraySettingLine.vue
deleted file mode 100644
index 54ea22ae..00000000
--- a/webapp/src/components/genericComponents/numericArraySettingLine.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-  <div>
-    <label class="uk-form-label">{{ label }}</label>
-    <div class="input-and-buttons-container">
-      <input
-        v-for="i in value.length"
-        :key="i"
-        v-model="value[i - 1]"
-        class="uk-form-small numeric-setting-line-input"
-        type="number"
-        @focusin="focusIn"
-        @focusout="focusOut"
-        @keydown="keyDown"
-      />
-      <a class="button-next-to-input" @click="readProperty">
-        <i class="material-icons">refresh</i>
-      </a>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from "axios";
-
-export default {
-  name: "NumericArraySettingLine",
-
-  props: {
-    label: {
-      type: String,
-      required: true
-    },
-    propertyUrl: {
-      type: String,
-      required: true
-    },
-    readBackDelay: {
-      type: Number,
-      default: undefined,
-      required: false
-    }
-  },
-
-  data: () => {
-    return {
-      value: {},
-      valueOnEnter: undefined
-    };
-  },
-
-  computed: {
-    readBack: function() {
-      return this.readBackDelay !== undefined;
-    }
-  },
-
-  mounted() {
-    this.readProperty();
-  },
-
-  methods: {
-    readProperty: async function() {
-      let response = await axios.get(this.propertyUrl);
-      this.value = response.data;
-      console.log("Read property", this.propertyUrl, response.data);
-      return response.data;
-    },
-    writeProperty: async function() {
-      try {
-        let requestedValue = this.value;
-        await axios.post(this.propertyUrl, requestedValue);
-        if (this.readBack) {
-          await new Promise(r => setTimeout(r, this.readBackDelay));
-          let newVal = await this.readProperty();
-          if (newVal == requestedValue) {
-            await this.modalNotify(`Set ${this.label} to ${newVal}.`);
-          } else {
-            await this.modalNotify(
-              `Set ${this.label} to ${newVal} (requested ${requestedValue}).`
-            );
-          }
-        } else {
-          await this.modalNotify(`Set ${this.label} to ${this.value}.`);
-        }
-      } catch (error) {
-        this.modalError(error); // Let mixin handle error
-      }
-    },
-    focusIn: function(event) {
-      this.valueOnEnter = event.target.value;
-    },
-    focusOut: function(event) {
-      if (this.valueOnEnter != event.target.value) {
-        this.writeProperty(event.target.value);
-      }
-    },
-    keyDown: function(event) {
-      // Pressing enter should set the property, whether or not we think it's changed.
-      if (event.keyCode == 13) {
-        this.writeProperty();
-      }
-    }
-  }
-};
-</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: 6em;
-}
-.button-next-to-input {
-  flex-grow: 0;
-  padding-left: 5px;
-  padding-right: 5px;
-  vertical-align: middle;
-  cursor: pointer;
-}
-</style>
diff --git a/webapp/src/components/genericComponents/numericSettingLine.vue b/webapp/src/components/genericComponents/numericSettingLine.vue
deleted file mode 100644
index a4c8d553..00000000
--- a/webapp/src/components/genericComponents/numericSettingLine.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-  <div>
-    <label class="uk-form-label">{{ label }}</label>
-    <div class="input-and-buttons-container">
-      <input
-        v-model="value"
-        class="uk-form-small numeric-setting-line-input"
-        type="number"
-        @focusin="focusIn"
-        @focusout="focusOut"
-        @keydown="keyDown"
-      />
-      <a class="button-next-to-input" @click="readProperty">
-        <i class="material-icons">refresh</i>
-      </a>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from "axios";
-
-export default {
-  name: "NumericSettingLine",
-
-  props: {
-    label: {
-      type: String,
-      required: true
-    },
-    propertyUrl: {
-      type: String,
-      required: true
-    },
-    readBackDelay: {
-      type: Number,
-      default: undefined,
-      required: false
-    }
-  },
-
-  data: () => {
-    return {
-      value: undefined,
-      valueOnEnter: undefined
-    };
-  },
-
-  computed: {
-    readBack: function() {
-      return this.readBackDelay !== undefined;
-    }
-  },
-
-  mounted() {
-    this.readProperty();
-  },
-
-  methods: {
-    readProperty: async function() {
-      let response = await axios.get(this.propertyUrl);
-      this.value = response.data;
-      console.log("Read property", this.propertyUrl, response.data);
-      return response.data;
-    },
-    writeProperty: async function() {
-      try {
-        let requestedValue = Number(this.value);
-        await axios.post(this.propertyUrl, requestedValue);
-        if (this.readBack) {
-          await new Promise(r => setTimeout(r, this.readBackDelay));
-          let newVal = await this.readProperty();
-          if (newVal == requestedValue) {
-            await this.modalNotify(`Set ${this.label} to ${newVal}.`);
-          } else {
-            await this.modalNotify(
-              `Set ${this.label} to ${newVal} (requested ${requestedValue}).`
-            );
-          }
-        } else {
-          await this.modalNotify(`Set ${this.label} to ${this.value}.`);
-        }
-      } catch (error) {
-        this.modalError(error); // Let mixin handle error
-      }
-    },
-    focusIn: function(event) {
-      this.valueOnEnter = event.target.value;
-    },
-    focusOut: function(event) {
-      if (this.valueOnEnter != event.target.value) {
-        this.writeProperty(event.target.value);
-      }
-    },
-    keyDown: function(event) {
-      // Pressing enter should set the property, whether or not we think it's changed.
-      if (event.keyCode == 13) {
-        this.writeProperty();
-      }
-    }
-  }
-};
-</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: 6em;
-}
-.button-next-to-input {
-  flex-grow: 0;
-  padding-left: 5px;
-  padding-right: 5px;
-  vertical-align: middle;
-  cursor: pointer;
-}
-</style>

From c2ec060df9ebb0064cd7e5b41f9ccbc66ce6387a Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Thu, 30 Nov 2023 23:22:10 +0000
Subject: [PATCH 17/46] Switch to using TDs in the store

---
 webapp/src/App.vue                            | 16 ++++++----
 .../settingsComponents/CSMSettings.vue        | 29 ++++---------------
 .../settingsComponents/stageSettings.vue      | 11 +++----
 .../tabContentComponents/streamContent.vue    |  2 +-
 4 files changed, 21 insertions(+), 37 deletions(-)

diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index c06e4ce9..e1234a92 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -42,7 +42,6 @@
 import appContent from "./components/appContent.vue";
 import loadingContent from "./components/loadingContent.vue";
 
-import axios from "axios";
 var Mousetrap = require("mousetrap");
 
 Mousetrap.prototype.stopCallback = function(e, element) {
@@ -311,9 +310,17 @@ export default {
       // TODO: more robust check - e.g. use a microscope Thing
       // TODO: should we purge existing consumedThings?
       try {
-        await axios.get(`${baseUri}/things/`);
-        await this.getThingDescription("stage");
-        await this.getThingDescription("camera");
+        await this.$store.dispatch(
+          "wot/fetchThingDescriptions",
+          `${baseUri}/thing_descriptions/`
+        );
+        for (let requiredThing of ["camera", "stage"]) {
+          if (!this.$store.getters["wot/thingAvailable"](requiredThing)) {
+            throw new Error(
+              `No ${requiredThing} found, the GUI won't work without one.`
+            );
+          }
+        }
         this.$store.commit("setConnected");
         this.$store.commit("setErrorMessage", null);
       } catch (error) {
@@ -322,7 +329,6 @@ export default {
         this.$store.commit("changeWaiting", false);
       }
     },
-
     handleExit: function() {
       this.$root.$emit("globalTogglePreview", false);
     },
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
index 2be31e21..91038230 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
@@ -51,6 +51,11 @@ export default {
   },
 
   computed: {
+    thingDescriptionUri: function() {
+      return this.$store.getters["wot/thingDescription"](
+        "camera_stage_mapping"
+      );
+    }
   },
 
   mounted() {
@@ -94,30 +99,6 @@ export default {
         });
     },
 
-    updateThingDescription: function() {
-      this.thingDescription = 
-      axios
-        .get(this.pluginsUri) // Get a list of plugins
-        .then(response => {
-          var plugins = response.data;
-          var foundExtension = plugins.find(
-            e => e.title === "org.openflexure.camera_stage_mapping"
-          );
-          // if camera-stage mapping extension is enabled
-          if (foundExtension) {
-            // Get plugin action link
-            this.recalibrationLinks = foundExtension.links;
-            // Update whether calibration data is available
-            this.updateCalibrationDataAvailability();
-          } else {
-            this.recalibrationLinks = {};
-          }
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
-    },
-
     onRecalibrateResponse: function() {
       this.modalNotify("Finished stage-to-camera calibration.");
       // Update local settings
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue
index cda328a4..aab40c7c 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue
@@ -14,19 +14,16 @@ export default {
   components: {},
 
   data: function() {
-    return {
-      thingDescription: {}
-    };
+    return {};
   },
 
   computed: {
     stageType: function() {
       return this.thingDescription.title;
+    },
+    thingDescription: function() {
+      return this.$store.getters["wot/thingDescription"]("stage");
     }
-  },
-
-  mounted: async function() {
-    this.thingDescription = await this.getThingDescription("stage");
   }
 };
 </script>
diff --git a/webapp/src/components/tabContentComponents/streamContent.vue b/webapp/src/components/tabContentComponents/streamContent.vue
index 48c3b33a..78fbfaa7 100644
--- a/webapp/src/components/tabContentComponents/streamContent.vue
+++ b/webapp/src/components/tabContentComponents/streamContent.vue
@@ -58,7 +58,7 @@ export default {
     },
     streamImgUri: function() {
       return `${this.$store.getters.baseUri}/camera/mjpeg_stream`;
-    },
+    }
   },
 
   mounted() {

From ba76561065f87dab808becec2ac5d1699c21e1eb Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Fri, 1 Dec 2023 00:54:54 +0000
Subject: [PATCH 18/46] Update calibration modal to use cached TDs and new URLs

---
 .../modalComponents/calibrationModal.vue      | 115 +++++-------------
 1 file changed, 31 insertions(+), 84 deletions(-)

diff --git a/webapp/src/components/modalComponents/calibrationModal.vue b/webapp/src/components/modalComponents/calibrationModal.vue
index fab205bf..054ecf85 100644
--- a/webapp/src/components/modalComponents/calibrationModal.vue
+++ b/webapp/src/components/modalComponents/calibrationModal.vue
@@ -146,8 +146,6 @@
 </template>
 
 <script>
-import axios from "axios";
-
 import cameraCalibrationSettings from "../tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue";
 import CSMCalibrationSettings from "../tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue";
 import miniStreamDisplay from "../genericComponents/miniStreamDisplay.vue";
@@ -172,57 +170,21 @@ export default {
     return {
       ready: false,
       stepValue: 0,
-      settings: {},
-      config: {}
+      isCSMCalibrated: undefined,
+      isLSTCalibrated: undefined
     };
   },
 
   computed: {
-    settingsUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2/instrument/settings`;
-    },
-    configUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2/instrument/configuration`;
-    },
-    availablePluginTitles: function() {
-      return this.availablePlugins.map(a => a.title);
-    },
-    isCSMCalibrated: function() {
-      if (this.settings.extensions["org.openflexure.camera_stage_mapping"]) {
-        return true;
-      } else {
-        return false;
-      }
-    },
-    isLSTCalibrated: function() {
-      if (
-        this.settings.camera.picamera &&
-        this.settings.camera.picamera.lens_shading_table
-      ) {
-        return true;
-      } else {
-        return false;
-      }
-    },
     canCSMCalibrated: function() {
       // Assert CSM extension is enabled
-      var extensionEnabled = this.availablePluginTitles.includes(
-        "org.openflexure.camera_stage_mapping"
-      );
-      // Assert real stage is connected
-      var stageConnected = this.config.stage.type !== "MissingStage";
-      // Combine
-      return stageConnected && extensionEnabled;
+      return this.thingAvailable("camera_stage_mapping");
     },
     canLSTCalibrated: function() {
       // Assert LST extension is enabled
-      var extensionEnabled = this.availablePluginTitles.includes(
-        "org.openflexure.calibration.picamera"
+      return (
+        "calibrate_lens_shading" in this.thingDescription("camera").actions
       );
-      // Assert real camera is connected
-      var cameraConnected = this.config.camera.type !== "MissingCamera";
-      // Combine
-      return cameraConnected && extensionEnabled;
     },
     isUseful: function() {
       var CSMUseful = this.canCSMCalibrated && !this.isCSMCalibrated;
@@ -236,25 +198,32 @@ export default {
   },
 
   methods: {
-    show: function() {
-      // Get current settings
-      this.getSettings()
-        .then(() => {
-          return this.getConfig();
-        })
-        .then(() => {
-          // Check if this calibration wizard can actually do anything useful
-          if (this.isUseful) {
-            this.ready = true;
-            this.stepValue = 0;
-            // Show the modal
-            var el = this.$refs["calibrationModalEl"];
-            this.showModalElement(el); // Calls the mixin
-          } else {
-            // If not useful, we just return the onClose event immediately
-            this.onHide();
-          }
-        });
+    show: async function() {
+      // Check if the camera and stage are calibrated, if they can be
+      if (this.canCSMCalibrated) {
+        let csm = this.readThingProperty(
+          "camera_stage_mapping",
+          "image_to_stage_displacement_matrix"
+        );
+        this.isCSMCalibrated = Boolean(csm);
+      }
+      if (this.canLSTCalibrated) {
+        this.isLSTCalibrated = this.readThingProperty(
+          "picamera",
+          "lens_shading_is_static"
+        );
+      }
+      // Check if this calibration wizard can actually do anything useful
+      if (this.isUseful) {
+        this.ready = true;
+        this.stepValue = 0;
+        // Show the modal
+        var el = this.$refs["calibrationModalEl"];
+        this.showModalElement(el); // Calls the mixin
+      } else {
+        // If not useful, we just return the onClose event immediately
+        this.onHide();
+      }
     },
 
     hide: function() {
@@ -268,28 +237,6 @@ export default {
       this.$emit("onClose");
     },
 
-    getSettings: function() {
-      return axios
-        .get(this.settingsUri)
-        .then(response => {
-          this.settings = response.data;
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
-    },
-
-    getConfig: function() {
-      return axios
-        .get(this.configUri)
-        .then(response => {
-          this.config = response.data;
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
-    },
-
     decrement: function() {
       if (this.stepValue > 0) {
         this.stepValue = this.stepValue - 1;

From 9c3c2bb0432d866f0d0fe841b3cc6425467e8e58 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Fri, 1 Dec 2023 00:55:25 +0000
Subject: [PATCH 19/46] Update CSMSettings to use new-style access

Also deleted a lot of old code (which wasn't running)
---
 .../settingsComponents/CSMSettings.vue        | 78 -------------------
 .../CSMCalibrationSettings.vue                | 31 ++------
 2 files changed, 7 insertions(+), 102 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
index 91038230..adf0c863 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
@@ -20,7 +20,6 @@
 </template>
 
 <script>
-import axios from "axios";
 import CSMCalibrationSettings from "./CSMSettingsComponents/CSMCalibrationSettings.vue";
 import miniStreamDisplay from "../../genericComponents/miniStreamDisplay.vue";
 
@@ -31,83 +30,6 @@ export default {
   components: {
     CSMCalibrationSettings,
     miniStreamDisplay
-  },
-
-  props: {
-    showExtraSettings: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
-
-  data: function() {
-    return {
-      thingDescription: undefined,
-      recalibrationLinks: {},
-      isCalibrating: false,
-      dataAvailable: false
-    };
-  },
-
-  computed: {
-    thingDescriptionUri: function() {
-      return this.$store.getters["wot/thingDescription"](
-        "camera_stage_mapping"
-      );
-    }
-  },
-
-  mounted() {
-    this.updateThingDescription();
-  },
-
-  methods: {
-    updateCalibrationDataAvailability: function() {
-      if ("get_calibration" in this.recalibrationLinks) {
-        axios
-          .get(this.recalibrationLinks.get_calibration.href)
-          .then(response => {
-            if (Object.keys(response.data).length === 0) {
-              this.dataAvailable = false;
-            } else {
-              this.dataAvailable = true;
-            }
-          })
-          .catch(error => {
-            this.modalError(error); // Let mixin handle error
-          });
-      }
-    },
-
-    getCalibrationData: function() {
-      axios
-        .get(this.recalibrationLinks.get_calibration.href)
-        .then(response => {
-          if (response.data != {}) {
-            const data = JSON.stringify(response.data);
-            const url = window.URL.createObjectURL(new Blob([data]));
-            const link = document.createElement("a");
-            link.href = url;
-            link.setAttribute("download", "csm_calibration.json");
-            document.body.appendChild(link);
-            link.click();
-          }
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
-    },
-
-    onRecalibrateResponse: function() {
-      this.modalNotify("Finished stage-to-camera calibration.");
-      // Update local settings
-      this.updateSettings();
-    },
-
-    onRecalibrateError: function(error) {
-      this.modalError(error); // Let mixin handle error
-    }
   }
 };
 </script>
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
index 3fc6d965..bffb62ed 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
@@ -47,24 +47,17 @@ export default {
     }
   },
 
-  data: function() {
-    return {
-      settings: null,
-      actions: {},
-      properties: {}
-    };
-  },
-
   computed: {
-    thingUri: function() {
-      return `${this.$store.getters.baseUri}/camera_stage_mapping/`;
+    actions() {
+      return this.$store.getters["wot/thingDescription"]("camera_stage_mapping")
+        .actions;
+    },
+    properties() {
+      return this.$store.getters["wot/thingDescription"]("camera_stage_mapping")
+        .properties;
     }
   },
 
-  mounted() {
-    this.updateActions();
-  },
-
   methods: {
     getCalibrationData: async function() {
       try {
@@ -84,16 +77,6 @@ export default {
       }
     },
 
-    updateActions: async function() {
-      try {
-        let response = await axios.get(this.thingUri); // Get Thing Description
-        this.actions = response.data.actions;
-        this.properties = response.data.properties;
-      } catch (error) {
-        this.modalError(error); // Let mixin handle error
-      }
-    },
-
     onRecalibrateResponse: function() {
       this.modalNotify("Finished stage-to-camera calibration.");
     }

From ca6988ca99e89017bbc49b365f6a76066911a193 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Fri, 1 Dec 2023 00:55:56 +0000
Subject: [PATCH 20/46] Update statusPane with new-style thing access

---
 .../aboutComponents/statusPane.vue            | 73 ++++---------------
 1 file changed, 13 insertions(+), 60 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
index e23999b6..c098eee1 100644
--- a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
+++ b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
@@ -21,7 +21,7 @@
       <div class="uk-margin-small-bottom">
         <b>Camera:</b>
         <br />
-        <div v-if="'camera' in things">
+        <div v-if="thingAvailable('camera')">
           {{ things.camera.title }}
         </div>
         <div v-else class="uk-text-danger"><b>No camera configured</b></div>
@@ -29,7 +29,7 @@
       <div>
         <b>Stage:</b>
         <br />
-        <div v-if="'stage' in things">
+        <div v-if="thingAvailable('stage')">
           {{ things.stage.title }}
         </div>
         <div v-else class="uk-text-danger"><b>No stage configured</b></div>
@@ -40,9 +40,9 @@
       <div class="uk-grid-small uk-child-width-1-2" uk-grid>
         <div>
           <button
-            v-show="'shutdown' in systemControlActions"
+            v-show="'shutdown' in things.system_control.actions"
             class="uk-button uk-button-danger uk-float-right uk-margin uk-margin-remove-top uk-width-1-1"
-            @click="shutdownRequest"
+            @click="systemRequest('shutdown')"
           >
             Shutdown
           </button>
@@ -50,9 +50,9 @@
 
         <div>
           <button
-            v-show="'reboot' in systemControlActions"
+            v-show="'reboot' in things.system_control.actions"
             class="uk-button uk-button-danger uk-float-right uk-margin uk-margin-remove-top uk-width-1-1"
-            @click="rebootRequest"
+            @click="systemRequest('reboot')"
           >
             Restart
           </button>
@@ -75,69 +75,22 @@ import axios from "axios";
 export default {
   name: "StatusPane",
 
-  components: {},
-
-  data: function() {
-    return {
-      things: {},
-      systemControlActions: {}
-    };
-  },
-
   computed: {
-    baseUri: function() {
-      return `${this.$store.getters.baseUri}/`;
+    things: function() {
+      return this.$store.state["wot/thingDescriptions"];
     }
   },
 
-  mounted: function() {
-    // Watch for host 'ready', then update configuration
-    this.updateConfiguration();
-    this.updateActions();
-  },
-
   methods: {
-    updateConfiguration: async function() {
-      console.log("Showing the configuration is not yet fully implemented");
-      // Retrieve TDs for camera and stage
-      let things = {};
-      for (let thing of ["camera", "stage"]) {
-        try {
-          let response = await axios.get(this.baseUri + thing); // Get Thing Description
-          things[thing] = response.data;
-        } catch (error) {
-          console.log(thing + " was missing", error);
-        }
-      }
-      this.things = things; // We must set this.things in order to trigger the UI update
-    },
-    updateActions: async function() {
-      try {
-        let response = await axios.get(this.baseUri + "system_control"); // Get Thing Description
-        this.systemControlActions = response.data.actions;
-      } catch (error) {
-        console.log(
-          "system control was missing - shutdown/restart buttons will not appear",
-          error
-        );
-      }
-    },
-    shutdownRequest: function() {
-      this.modalConfirm("Shut down microscope?").then(
-        () => {
-          this.$store.commit("resetState");
-          // Post and silence errors
-          axios.post(this.baseUri + "system_control/shutdown").catch(() => {});
-        },
-        () => {}
-      );
-    },
-    rebootRequest: function() {
+    systemRequest: function(action) {
       this.modalConfirm("Restart microscope?").then(
         () => {
           this.$store.commit("resetState");
+          this.$store.commit("wot/deleteAllThingDescriptions");
           // Post and silence errors
-          axios.post(this.baseUri + "system_control/restart").catch(() => {});
+          axios
+            .post(this.thingActionUrl("system_control", action))
+            .catch(() => {});
         },
         () => {}
       );

From 471a89cc72c968bf84555574ac5a65db9772d2fa Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Fri, 1 Dec 2023 00:56:13 +0000
Subject: [PATCH 21/46] Update paneCapture with new-style thing access

---
 .../captureComponents/paneCapture.vue         | 80 +++----------------
 1 file changed, 13 insertions(+), 67 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/captureComponents/paneCapture.vue b/webapp/src/components/tabContentComponents/captureComponents/paneCapture.vue
index 7636ac00..4f794774 100644
--- a/webapp/src/components/tabContentComponents/captureComponents/paneCapture.vue
+++ b/webapp/src/components/tabContentComponents/captureComponents/paneCapture.vue
@@ -102,7 +102,7 @@
 
     <ul uk-accordion="multiple: true">
       <!--Show stack and scan if scan plugin is enabled-->
-      <li v-if="scanUri" :class="{ 'uk-open': scanCapture }">
+      <li v-if="thingAvailable('scan')" :class="{ 'uk-open': scanCapture }">
         <a class="uk-accordion-title" href="#">Stack and Scan</a>
         <div class="uk-accordion-content">
           <div class="uk-margin">
@@ -222,7 +222,7 @@
             </div>
 
             <div
-              v-if="backgroundDetectUri"
+              v-if="thingAvailable('background_detect')"
               class="uk-margin-small uk-margin-remove-bottom"
             >
               <label class="uk-form-label" for="form-stacked-text">
@@ -259,7 +259,10 @@
         </div>
       </li>
       <!--Show stack and scan if scan plugin is enabled-->
-      <li v-if="smartScanUri" :class="{ 'uk-open': smartStack && scanCapture }">
+      <li
+        v-if="thingAvailable('smart_scan')"
+        :class="{ 'uk-open': smartStack && scanCapture }"
+      >
         <a class="uk-accordion-title" href="#">Smart Stack</a>
         <div
           class="uk-accordion-content"
@@ -404,10 +407,7 @@ export default {
   data: function() {
     return {
       ...defaultCaptureSettings(),
-      scanCapture: false, // Don't remember the "scan" tickbox in local storage.
-      scanUri: null,
-      smartScanUri: null,
-      backgroundDetectUri: null
+      scanCapture: false // Don't remember the "scan" tickbox in local storage.
     };
   },
 
@@ -418,10 +418,13 @@ export default {
       };
     },
     captureActionUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2/actions/camera/capture`;
+      return this.thingActionUrl("camera", "capture");
     },
-    pluginsUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2/extensions`;
+    scanUri: function() {
+      return this.thingActionUrl("scan", "scan");
+    },
+    smartScanUri: function() {
+      return this.thingActionUrl("scan", "scan");
     },
     basePayload: function() {
       var payload = {};
@@ -497,7 +500,6 @@ export default {
   },
 
   mounted() {
-    this.updateScanUri();
     // Load settings if they have been saved, and set up watchers to sync with local storage
     syncDataWithLocalStorage("captureSettings", this, defaultCaptureSettings());
 
@@ -525,62 +527,6 @@ export default {
         });
     },
 
-    updateScanUri: function() {
-      // Update URIs for the various functions in plugins.
-      // This will only work if the plugins are present, so
-      // checking if the URIs is null will determine which
-      // extensions are available.
-      axios
-        .get(this.pluginsUri) // Get a list of plugins
-        .then(response => {
-          var plugins = response.data;
-          var foundExtension = plugins.find(
-            e => e.title === "org.openflexure.scan"
-          );
-          // if ScanPlugin is enabled
-          if (foundExtension) {
-            // Get plugin action link
-            this.scanUri = foundExtension.links.tile.href;
-          }
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
-
-      axios
-        .get(this.pluginsUri) // Get a list of plugins
-        .then(response => {
-          var plugins = response.data;
-          var foundExtension = plugins.find(
-            e => e.title === "org.openflexure.smart-stack"
-          );
-          if (foundExtension) {
-            // Get plugin action link
-            this.smartScanUri = foundExtension.links.tile.href;
-          }
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
-
-      axios
-        .get(this.pluginsUri) // Get a list of plugins
-        .then(response => {
-          var plugins = response.data;
-          var foundExtension = plugins.find(
-            e => e.title === "org.openflexure.background-detect"
-          );
-          if (foundExtension) {
-            // Get plugin action link
-            this.backgroundDetectUri =
-              foundExtension.links.grab_and_classify_image.href;
-          }
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
-    },
-
     onScanResponse: function() {
       this.modalNotify("Finished scan.");
       // Emit signal to update capture list

From 55305a67f434cc1963741048a8f420c1b02d9307 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Fri, 1 Dec 2023 00:58:29 +0000
Subject: [PATCH 22/46] Remove old print statement

---
 .../cameraSettingsComponents/cameraCalibrationSettings.vue    | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
index 79b0c304..b4d2c192 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
@@ -128,10 +128,6 @@ export default {
         let response = await axios.get(this.cameraUri); // Get the thing description
         let td = response.data;
         this.actions = td.actions;
-        console.log(
-          "full auto calibrate in actions",
-          "full_auto_calibrate" in this.actions
-        );
       } catch (error) {
         this.modalError(error); // Let mixin handle error
       }

From ccf9b38c34292d7b7bbbcc84167707c6e85c5fe2 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Fri, 1 Dec 2023 01:28:08 +0000
Subject: [PATCH 23/46] Use thingAvailable via computed prop

Computed properties are needed to make things reactive.
---
 .../tabContentComponents/aboutComponents/statusPane.vue     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
index c098eee1..63d12f02 100644
--- a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
+++ b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
@@ -21,7 +21,7 @@
       <div class="uk-margin-small-bottom">
         <b>Camera:</b>
         <br />
-        <div v-if="thingAvailable('camera')">
+        <div v-if="'camera' in things">
           {{ things.camera.title }}
         </div>
         <div v-else class="uk-text-danger"><b>No camera configured</b></div>
@@ -29,7 +29,7 @@
       <div>
         <b>Stage:</b>
         <br />
-        <div v-if="thingAvailable('stage')">
+        <div v-if="'stage' in things">
           {{ things.stage.title }}
         </div>
         <div v-else class="uk-text-danger"><b>No stage configured</b></div>
@@ -77,7 +77,7 @@ export default {
 
   computed: {
     things: function() {
-      return this.$store.state["wot/thingDescriptions"];
+      return this.$store.getters["wot/thingDescriptions"];
     }
   },
 

From 623cb5e8cb6ad704d73e637a6d223acd039df302 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Fri, 1 Dec 2023 01:44:22 +0000
Subject: [PATCH 24/46] Use central read/write property, fix length issue

.length was failing if value was undefined - now worked around.
---
 .../labThingsComponents/propertyControl.vue   | 72 ++++++++-----------
 1 file changed, 28 insertions(+), 44 deletions(-)

diff --git a/webapp/src/components/labThingsComponents/propertyControl.vue b/webapp/src/components/labThingsComponents/propertyControl.vue
index f1d3c9bc..d809f791 100644
--- a/webapp/src/components/labThingsComponents/propertyControl.vue
+++ b/webapp/src/components/labThingsComponents/propertyControl.vue
@@ -16,7 +16,7 @@
     </div>
     <div v-if="dataType == 'number_array'" class="input-and-buttons-container">
       <input
-        v-for="i in value.length"
+        v-for="i in valueLength"
         :key="i"
         v-model="value[i - 1]"
         class="uk-form-small numeric-setting-line-input"
@@ -56,8 +56,6 @@
 </template>
 
 <script>
-import axios from "axios";
-
 export default {
   name: "PropertyControl",
 
@@ -70,8 +68,8 @@ export default {
       type: String,
       required: true
     },
-    thingDescription: {
-      type: Object,
+    thingName: {
+      type: String,
       required: true
     },
     readBackDelay: {
@@ -90,24 +88,28 @@ export default {
   },
 
   computed: {
+    valueLength: function() {
+      if (this.dataType == "number_array") {
+        if (this.value == undefined) {
+          return 0;
+        }
+        return this.value.length;
+      } else {
+        return 1;
+      }
+    },
     readBack: function() {
       return this.readBackDelay !== undefined;
     },
     propertyDescription: function() {
       try {
-        return this.thingDescription.properties[this.propertyName];
+        return this.thingDescription(this.thingName).properties[
+          this.propertyName
+        ];
       } catch (error) {
         return undefined;
       }
     },
-    readPropertyUrl: function() {
-      let href = this.formHref("readproperty");
-      return this.prependTdBaseUri(href);
-    },
-    writePropertyUrl: function() {
-      let href = this.formHref("writeproperty");
-      return this.prependTdBaseUri(href);
-    },
     dataType: function() {
       let prop = this.propertyDescription;
       if (prop == undefined) {
@@ -144,7 +146,7 @@ export default {
   },
 
   watch: {
-    readPropertyUrl: function() {
+    propertyDescription: function() {
       // Ensure we read the property once the URL is known
       this.readProperty();
     }
@@ -160,40 +162,22 @@ export default {
   },
 
   methods: {
-    formHref: function(op = "readproperty") {
-      if (this.thingDescription == undefined) return undefined;
-      try {
-        let forms = this.propertyDescription.forms;
-        let readForm = forms.find(f => f.op == op || f.op.includes(op));
-        return readForm.href;
-      } catch (error) {
-        console.log(
-          `Failed to find form for ${op} on ${this.propertyName}`,
-          error
-        );
-        return undefined;
-      }
-    },
-    prependTdBaseUri: function(href) {
-      if (href == undefined) return undefined;
-      if (href.startsWith("http")) return href;
-      if ("base" in this.thingDescription) {
-        if (href.startsWith("/")) href = href.slice(1);
-        if (!this.thingDescription.base.endsWith("/"))
-          this.thingDescription.base += "/";
-        return this.thingDescription.base + href;
-      }
-      return href;
-    },
     readProperty: async function() {
-      let response = await axios.get(this.readPropertyUrl);
-      this.value = response.data;
-      return response.data;
+      let data = await this.readThingProperty(
+        this.thingName,
+        this.propertyName
+      );
+      this.value = data;
+      return data;
     },
     writeProperty: async function() {
       try {
         let requestedValue = this.value;
-        await axios.post(this.writePropertyUrl, requestedValue);
+        await this.writeThingProperty(
+          this.thingName,
+          this.propertyName,
+          requestedValue
+        );
         if (this.readBack) {
           await new Promise(r => setTimeout(r, this.readBackDelay));
           let newVal = await this.readProperty();

From 89cf58e8c7b3dba7aa370926999910008e0ddf8c Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Fri, 1 Dec 2023 01:45:22 +0000
Subject: [PATCH 25/46] Prepend thing description base URL

---
 webapp/src/wot-client.js | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/webapp/src/wot-client.js b/webapp/src/wot-client.js
index d5aa375d..3f3ff923 100644
--- a/webapp/src/wot-client.js
+++ b/webapp/src/wot-client.js
@@ -53,11 +53,13 @@ export const wotStoreModule = {
     }
   },
   getters: {
+    thingDescriptions: state => {
+      return state.thingDescriptions;
+    },
     thingDescription: state => thingName => {
       return state.thingDescriptions[thingName];
     },
     thingAvailable: state => thingName => {
-      console.log("thingAvailable", thingName, state.thingDescriptions)
       return thingName in state.thingDescriptions;
     },
     thingFormUrl: state => (thing, affordanceType, affordance, op) => {
@@ -65,7 +67,19 @@ export const wotStoreModule = {
       let td = state.thingDescriptions[thing];
       if (!td) return null;
       let affordances = td[affordanceType];
-      return findForm(affordances[affordance], op);
+      let href = findFormHref(affordances[affordance], op);
+      if (href == undefined) return undefined;
+
+      // If we've found an href, prepend the `base` URL if appropriate
+      if (href.startsWith("http")) return href;
+      if ("base" in td) {
+        let base = td.base;
+        if (href.startsWith("/")) href = href.slice(1);
+        if (!base.endsWith("/"))
+          base += "/";
+        return base + href;
+      }
+      return href;
     },
     thingPropertyUrl: (_state, getters) => (thing, property, op) => {
       // Find the URL for a particular property
@@ -78,7 +92,7 @@ export const wotStoreModule = {
   }
 };
 
-export function findForm(affordance, op) {
+export function findFormHref(affordance, op) {
   // Find the form in the affordance that matches the given operation type
   let forms = affordance.forms;
   let matchingForm = forms.find(f => f.op == op || f.op.includes(op));

From f97dcb6abc4b8ded8db86ec8bd1ce04254f12057 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Fri, 1 Dec 2023 01:45:45 +0000
Subject: [PATCH 26/46] More tidying up to use new thing property functions

---
 .../settingsComponents/cameraSettings.vue           | 13 +++++--------
 .../settingsComponents/stageSettings.vue            |  5 +----
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
index ea08f866..fbca1af1 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
@@ -15,19 +15,19 @@
                   <PropertyControl
                     label="Exposure time"
                     property-name="exposure_time"
-                    :thing-description="thingDescription"
+                    thing-name="camera"
                     :read-back-delay="1000"
                   />
                   <PropertyControl
                     label="Analogue gain"
                     property-name="analogue_gain"
-                    :thing-description="thingDescription"
+                    thing-name="camera"
                     :read-back-delay="1000"
                   />
                   <PropertyControl
                     label="Colour gains"
                     property-name="colour_gains"
-                    :thing-description="thingDescription"
+                    thing-name="camera"
                     :read-back-delay="1000"
                   />
                 </div>
@@ -38,13 +38,13 @@
                   <PropertyControl
                     label="MJPEG stream bit rate"
                     property-name="mjpeg_bitrate"
-                    :thing-description="thingDescription"
+                    thing-name="camera"
                     :read-back-delay="100"
                   />
                   <PropertyControl
                     label="MJPEG stream resolution"
                     property-name="stream_resolution"
-                    :thing-description="thingDescription"
+                    thing-name="camera"
                     :read-back-delay="100"
                   />
                 </div>
@@ -144,9 +144,6 @@ export default {
     cameraUri: function() {
       return `${this.$store.getters.baseUri}/camera/`;
     },
-    thingDescription: function() {
-      return this.$store.getters["wot/thingDescription"]("camera");
-    }
   }
 };
 </script>
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue
index aab40c7c..483f7478 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue
@@ -19,10 +19,7 @@ export default {
 
   computed: {
     stageType: function() {
-      return this.thingDescription.title;
-    },
-    thingDescription: function() {
-      return this.$store.getters["wot/thingDescription"]("stage");
+      return this.thingDescription("stage").title;
     }
   }
 };

From 65c881fea18764de35c0e77e7d95e633a2faa95b Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Fri, 1 Dec 2023 01:46:11 +0000
Subject: [PATCH 27/46] Make calibrateXYUri a computed property

This makes it properly reactive again.
---
 .../CSMCalibrationSettings.vue                  | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
index bffb62ed..f1bbace1 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
@@ -9,7 +9,7 @@
         :confirmation-message="
           'Start recalibration of the stage to the camera? This may take a while, and the microscope will be locked during this time.'
         "
-        :submit-url="thingUri + 'calibrate_xy'"
+        :submit-url="calibrateXYUri"
         :submit-label="'Auto-Calibrate using camera'"
         @response="onRecalibrateResponse"
         @error="modalError"
@@ -28,7 +28,6 @@
 </template>
 
 <script>
-import axios from "axios";
 import taskSubmitter from "../../../genericComponents/taskSubmitter";
 
 // Export main app
@@ -55,18 +54,24 @@ export default {
     properties() {
       return this.$store.getters["wot/thingDescription"]("camera_stage_mapping")
         .properties;
+    },
+    calibrateXYUri() {
+      return this.thingActionUrl("camera_stage_mapping", "calibrate_xy");
     }
   },
 
   methods: {
     getCalibrationData: async function() {
       try {
-        let response = await axios.get(this.thingUri + "last_calibration");
-        if (response.data == {}) {
+        let data = this.readThingProperty(
+          "camera_stage_mapping",
+          "last_calibration"
+        );
+        if (data == {}) {
           throw "No calibration data available.";
         }
-        const data = JSON.stringify(response.data);
-        const url = window.URL.createObjectURL(new Blob([data]));
+        const dataStr = JSON.stringify(data);
+        const url = window.URL.createObjectURL(new Blob([dataStr]));
         const link = document.createElement("a");
         link.href = url;
         link.setAttribute("download", "csm_calibration.json");

From 59e0cf5905f63f9ccffdc9dd6bd7dec69c7979c7 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Fri, 1 Dec 2023 02:22:49 +0000
Subject: [PATCH 28/46] Fix action URLs

---
 webapp/src/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/main.js b/webapp/src/main.js
index 9cbc414a..934de84c 100644
--- a/webapp/src/main.js
+++ b/webapp/src/main.js
@@ -67,7 +67,7 @@ Vue.mixin({
       }
     },
     thingActionUrl(thing, action) {
-      return this.$store.getters["wot/thingActionUrl"](thing, action);
+      return this.$store.getters["wot/thingActionUrl"](thing, action, "invokeaction");
     },
     modalConfirm: function(modalText) {
       var context = this;

From 5d87a7582e12eddc164b6e953de215e25938e7a8 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Fri, 1 Dec 2023 02:23:58 +0000
Subject: [PATCH 29/46] Format fixes

---
 .../settingsComponents/cameraSettings.vue                   | 2 +-
 webapp/src/main.js                                          | 6 +++++-
 webapp/src/wot-client.js                                    | 4 ++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
index fbca1af1..e04c781e 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
@@ -143,7 +143,7 @@ export default {
   computed: {
     cameraUri: function() {
       return `${this.$store.getters.baseUri}/camera/`;
-    },
+    }
   }
 };
 </script>
diff --git a/webapp/src/main.js b/webapp/src/main.js
index 934de84c..4dd2b266 100644
--- a/webapp/src/main.js
+++ b/webapp/src/main.js
@@ -67,7 +67,11 @@ Vue.mixin({
       }
     },
     thingActionUrl(thing, action) {
-      return this.$store.getters["wot/thingActionUrl"](thing, action, "invokeaction");
+      return this.$store.getters["wot/thingActionUrl"](
+        thing,
+        action,
+        "invokeaction"
+      );
     },
     modalConfirm: function(modalText) {
       var context = this;
diff --git a/webapp/src/wot-client.js b/webapp/src/wot-client.js
index 3f3ff923..688dfa87 100644
--- a/webapp/src/wot-client.js
+++ b/webapp/src/wot-client.js
@@ -75,8 +75,7 @@ export const wotStoreModule = {
       if ("base" in td) {
         let base = td.base;
         if (href.startsWith("/")) href = href.slice(1);
-        if (!base.endsWith("/"))
-          base += "/";
+        if (!base.endsWith("/")) base += "/";
         return base + href;
       }
       return href;
@@ -96,6 +95,7 @@ export function findFormHref(affordance, op) {
   // Find the form in the affordance that matches the given operation type
   let forms = affordance.forms;
   let matchingForm = forms.find(f => f.op == op || f.op.includes(op));
+  if (matchingForm == undefined) return undefined;
   return matchingForm.href;
 }
 

From a31c0aa8356bc8bc23190ff351236f1637a1c73d Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Fri, 1 Dec 2023 02:24:14 +0000
Subject: [PATCH 30/46] Error handling for CSM calibration check

---
 .../modalComponents/calibrationModal.vue           | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/webapp/src/components/modalComponents/calibrationModal.vue b/webapp/src/components/modalComponents/calibrationModal.vue
index 054ecf85..71380f36 100644
--- a/webapp/src/components/modalComponents/calibrationModal.vue
+++ b/webapp/src/components/modalComponents/calibrationModal.vue
@@ -201,11 +201,15 @@ export default {
     show: async function() {
       // Check if the camera and stage are calibrated, if they can be
       if (this.canCSMCalibrated) {
-        let csm = this.readThingProperty(
-          "camera_stage_mapping",
-          "image_to_stage_displacement_matrix"
-        );
-        this.isCSMCalibrated = Boolean(csm);
+        try {
+          let csm = this.readThingProperty(
+            "camera_stage_mapping",
+            "image_to_stage_displacement_matrix"
+          );
+          this.isCSMCalibrated = Boolean(csm);
+        } catch {
+          this.isCSMCalibrated = false;
+        }
       }
       if (this.canLSTCalibrated) {
         this.isLSTCalibrated = this.readThingProperty(

From f87594e7af3bfd5cab7fa6c357280502d87ad112 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Fri, 1 Dec 2023 02:31:49 +0000
Subject: [PATCH 31/46] Hide error from CSM if it's uncalibrated

The error still appears in the console - should be fixed
eventually.
---
 .../modalComponents/calibrationModal.vue          | 15 ++++++---------
 webapp/src/main.js                                |  5 +++--
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/webapp/src/components/modalComponents/calibrationModal.vue b/webapp/src/components/modalComponents/calibrationModal.vue
index 71380f36..7529b6b5 100644
--- a/webapp/src/components/modalComponents/calibrationModal.vue
+++ b/webapp/src/components/modalComponents/calibrationModal.vue
@@ -201,15 +201,12 @@ export default {
     show: async function() {
       // Check if the camera and stage are calibrated, if they can be
       if (this.canCSMCalibrated) {
-        try {
-          let csm = this.readThingProperty(
-            "camera_stage_mapping",
-            "image_to_stage_displacement_matrix"
-          );
-          this.isCSMCalibrated = Boolean(csm);
-        } catch {
-          this.isCSMCalibrated = false;
-        }
+        let csm = this.readThingProperty(
+          "camera_stage_mapping",
+          "image_to_stage_displacement_matrix",
+          true
+        );
+        this.isCSMCalibrated = Boolean(csm);
       }
       if (this.canLSTCalibrated) {
         this.isLSTCalibrated = this.readThingProperty(
diff --git a/webapp/src/main.js b/webapp/src/main.js
index 4dd2b266..8f71eba9 100644
--- a/webapp/src/main.js
+++ b/webapp/src/main.js
@@ -41,7 +41,7 @@ Vue.mixin({
     thingAvailable(thing) {
       return this.$store.getters["wot/thingAvailable"](thing);
     },
-    async readThingProperty(thing, property) {
+    async readThingProperty(thing, property, silence_errors = false) {
       let url = this.$store.getters["wot/thingPropertyUrl"](
         thing,
         property,
@@ -51,7 +51,8 @@ Vue.mixin({
         let response = await axios.get(url);
         return response.data;
       } catch (error) {
-        this.modalError(error);
+        if (!silence_errors) this.modalError(error);
+        return undefined;
       }
     },
     async writeThingProperty(thing, property, value) {

From ee641f5cd2d4fb842a91fdfefabfb201555e5178 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Fri, 1 Dec 2023 02:31:59 +0000
Subject: [PATCH 32/46] Comment out 2 problematic tabs

---
 webapp/src/components/appContent.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/webapp/src/components/appContent.vue b/webapp/src/components/appContent.vue
index a220dcb9..6810d55a 100644
--- a/webapp/src/components/appContent.vue
+++ b/webapp/src/components/appContent.vue
@@ -216,11 +216,11 @@ export default {
           component: settingsContent,
           class: "uk-margin-auto-top"
         },
-        {
+        /*{
           id: "logging",
           icon: "assignment_late",
           component: loggingContent
-        },
+        },*/
         {
           id: "about",
           icon: "info",
@@ -267,12 +267,12 @@ export default {
           icon: "visibility",
           component: viewContent
         },
-        {
+        /*{
           id: "gallery",
           icon: "photo_library",
           component: galleryContent,
           divide: true // Add a divider after this tab icon
-        },
+        },*/
         {
           id: "navigate",
           icon: "gamepad",

From 0cd8ecd2d55424763c95ce72845f9b46d2a29ba6 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Fri, 1 Dec 2023 02:43:17 +0000
Subject: [PATCH 33/46] Add error checking to mixin thing functions

Now we'll get an error if undefined URLs are about to be fetched.
The error will contain thing and affordance, for debugging.
---
 webapp/src/main.js       | 12 ++++++++----
 webapp/src/wot-client.js | 38 +++++++++++++++++++++++++++++++-------
 2 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/webapp/src/main.js b/webapp/src/main.js
index 8f71eba9..f8d5f113 100644
--- a/webapp/src/main.js
+++ b/webapp/src/main.js
@@ -45,7 +45,8 @@ Vue.mixin({
       let url = this.$store.getters["wot/thingPropertyUrl"](
         thing,
         property,
-        "readproperty"
+        "readproperty",
+        false
       );
       try {
         let response = await axios.get(url);
@@ -59,7 +60,8 @@ Vue.mixin({
       let url = this.$store.getters["wot/thingPropertyUrl"](
         thing,
         property,
-        "writeproperty"
+        "writeproperty",
+        false
       );
       try {
         await axios.put(url, value);
@@ -68,11 +70,13 @@ Vue.mixin({
       }
     },
     thingActionUrl(thing, action) {
-      return this.$store.getters["wot/thingActionUrl"](
+      let url = this.$store.getters["wot/thingActionUrl"](
         thing,
         action,
-        "invokeaction"
+        "invokeaction",
+        false
       );
+      return url;
     },
     modalConfirm: function(modalText) {
       var context = this;
diff --git a/webapp/src/wot-client.js b/webapp/src/wot-client.js
index 688dfa87..edfb5709 100644
--- a/webapp/src/wot-client.js
+++ b/webapp/src/wot-client.js
@@ -62,14 +62,22 @@ export const wotStoreModule = {
     thingAvailable: state => thingName => {
       return thingName in state.thingDescriptions;
     },
-    thingFormUrl: state => (thing, affordanceType, affordance, op) => {
+    thingFormUrl: state => (
+      thing,
+      affordanceType,
+      affordance,
+      op,
+      allowUndefined = true
+    ) => {
       // Find the URL for a particular operation
       let td = state.thingDescriptions[thing];
       if (!td) return null;
       let affordances = td[affordanceType];
       let href = findFormHref(affordances[affordance], op);
-      if (href == undefined) return undefined;
-
+      if (href == undefined) {
+        if (allowUndefined) return undefined;
+        throw `Could not find form for ${affordanceType} ${thing}/${affordance} with op ${op}`;
+      }
       // If we've found an href, prepend the `base` URL if appropriate
       if (href.startsWith("http")) return href;
       if ("base" in td) {
@@ -80,13 +88,29 @@ export const wotStoreModule = {
       }
       return href;
     },
-    thingPropertyUrl: (_state, getters) => (thing, property, op) => {
+    thingPropertyUrl: (_state, getters) => (
+      thing,
+      property,
+      op,
+      allowUndefined
+    ) => {
       // Find the URL for a particular property
-      return getters.thingFormUrl(thing, "properties", property, op);
+      return getters.thingFormUrl(
+        thing,
+        "properties",
+        property,
+        op,
+        allowUndefined
+      );
     },
-    thingActionUrl: (_state, getters) => (thing, action, op) => {
+    thingActionUrl: (_state, getters) => (
+      thing,
+      action,
+      op,
+      allowUndefined
+    ) => {
       // Find the URL for a particular action
-      return getters.thingFormUrl(thing, "actions", action, op);
+      return getters.thingFormUrl(thing, "actions", action, op, allowUndefined);
     }
   }
 };

From 146fccfa8025ba89253a4920b25c37f0fa668978 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Fri, 1 Dec 2023 02:43:31 +0000
Subject: [PATCH 34/46] comment out problematic fetch

---
 webapp/src/components/modalComponents/calibrationModal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/src/components/modalComponents/calibrationModal.vue b/webapp/src/components/modalComponents/calibrationModal.vue
index 7529b6b5..7f6d40db 100644
--- a/webapp/src/components/modalComponents/calibrationModal.vue
+++ b/webapp/src/components/modalComponents/calibrationModal.vue
@@ -201,12 +201,12 @@ export default {
     show: async function() {
       // Check if the camera and stage are calibrated, if they can be
       if (this.canCSMCalibrated) {
-        let csm = this.readThingProperty(
+        /*let csm = this.readThingProperty(
           "camera_stage_mapping",
           "image_to_stage_displacement_matrix",
           true
         );
-        this.isCSMCalibrated = Boolean(csm);
+        this.isCSMCalibrated = Boolean(csm);*/
       }
       if (this.canLSTCalibrated) {
         this.isLSTCalibrated = this.readThingProperty(

From 9817b4963af035a0eb4951f70d566821e3e1cc48 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Fri, 1 Dec 2023 21:14:24 +0000
Subject: [PATCH 35/46] Handle missing Thing better in thingFormUrl

We now give a helpful error message if the Thing is not found,
rather than returning null. There's an argument to return
`undefined` instead of raising an error, returning undefined
is the default behaviour.
---
 webapp/src/wot-client.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/webapp/src/wot-client.js b/webapp/src/wot-client.js
index edfb5709..b1aa58d6 100644
--- a/webapp/src/wot-client.js
+++ b/webapp/src/wot-client.js
@@ -71,7 +71,10 @@ export const wotStoreModule = {
     ) => {
       // Find the URL for a particular operation
       let td = state.thingDescriptions[thing];
-      if (!td) return null;
+      if (!td) {
+        if (allowUndefined) return undefined;
+        throw `Could not find form for ${affordanceType} ${thing}/${affordance} with op ${op}`;
+      }
       let affordances = td[affordanceType];
       let href = findFormHref(affordances[affordance], op);
       if (href == undefined) {

From e3265b1dffa1769980860633d5e9a64979cdf2c4 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Fri, 1 Dec 2023 21:27:38 +0000
Subject: [PATCH 36/46] await readThingProperty correctly

---
 .../src/components/modalComponents/calibrationModal.vue   | 8 ++++----
 .../CSMSettingsComponents/CSMCalibrationSettings.vue      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/webapp/src/components/modalComponents/calibrationModal.vue b/webapp/src/components/modalComponents/calibrationModal.vue
index 7f6d40db..a612a021 100644
--- a/webapp/src/components/modalComponents/calibrationModal.vue
+++ b/webapp/src/components/modalComponents/calibrationModal.vue
@@ -201,16 +201,16 @@ export default {
     show: async function() {
       // Check if the camera and stage are calibrated, if they can be
       if (this.canCSMCalibrated) {
-        /*let csm = this.readThingProperty(
+        let csm = await this.readThingProperty(
           "camera_stage_mapping",
           "image_to_stage_displacement_matrix",
           true
         );
-        this.isCSMCalibrated = Boolean(csm);*/
+        this.isCSMCalibrated = Boolean(csm);
       }
       if (this.canLSTCalibrated) {
-        this.isLSTCalibrated = this.readThingProperty(
-          "picamera",
+        this.isLSTCalibrated = await this.readThingProperty(
+          "camera",
           "lens_shading_is_static"
         );
       }
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
index f1bbace1..db5fc10b 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
@@ -63,7 +63,7 @@ export default {
   methods: {
     getCalibrationData: async function() {
       try {
-        let data = this.readThingProperty(
+        let data = await this.readThingProperty(
           "camera_stage_mapping",
           "last_calibration"
         );

From 7c662b2787078af908c307a5b3ec4986e4282b6f Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Mon, 11 Dec 2023 22:23:32 +0000
Subject: [PATCH 37/46] Added capture buttons to navigate pane

---
 .../navigateComponents/paneNavigate.vue       | 95 +++++++++++--------
 1 file changed, 57 insertions(+), 38 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue b/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
index e6021f41..d2d8b403 100644
--- a/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
+++ b/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
@@ -143,7 +143,7 @@
                   v-if="fastAutofocusUri"
                   :submit-url="fastAutofocusUri"
                   :submit-data="{ dz: 2000 }"
-                  :submit-label="'Fast'"
+                  :submit-label="'Autofocus'"
                   :button-primary="false"
                   :submit-on-event="'globalFastAutofocusEvent'"
                   @taskStarted="isAutofocusing = 1"
@@ -151,32 +151,34 @@
                   @error="modalError"
                 ></taskSubmitter>
               </div>
+            </div>
+          </div>
+        </li>
+        <li v-show="captureUri" class="uk-open">
+          <a class="uk-accordion-title" href="#">Image Capture</a>
+          <div class="uk-accordion-content">
+            <div class="uk-grid-small uk-child-width-expand" uk-grid>
+              <taskSubmitter
+                v-if="captureUri"
+                :submit-url="captureUri"
+                :submit-data="{ resolution: 'main' }"
+                :submit-label="'Low Resolution'"
+                :submit-on-event="'globalCaptureEvent'"
+                @response="handleCaptureResponse"
+                @error="modalError"
+              ></taskSubmitter>
+            </div>
 
-              <div v-show="!isAutofocusing || isAutofocusing == 2">
-                <taskSubmitter
-                  v-if="normalAutofocusUri"
-                  :submit-url="normalAutofocusUri"
-                  :submit-data="{ dz: [-90, -60, -30, 0, 30, 60, 90] }"
-                  :submit-label="'Medium'"
-                  :button-primary="false"
-                  @taskStarted="isAutofocusing = 2"
-                  @finished="isAutofocusing = 0"
-                  @error="modalError"
-                ></taskSubmitter>
-              </div>
-
-              <div v-show="!isAutofocusing || isAutofocusing == 3">
-                <taskSubmitter
-                  v-if="normalAutofocusUri"
-                  :submit-url="normalAutofocusUri"
-                  :submit-data="{ dz: [-30, -20, -10, 0, 10, 20, 30] }"
-                  :submit-label="'Fine'"
-                  :button-primary="false"
-                  @taskStarted="isAutofocusing = 3"
-                  @finished="isAutofocusing = 0"
-                  @error="modalError"
-                ></taskSubmitter>
-              </div>
+            <div class="uk-grid-small uk-child-width-expand" uk-grid>
+              <taskSubmitter
+                v-if="captureUri"
+                :submit-url="captureUri"
+                :submit-data="{ resolution: 'full' }"
+                submit-label="Full Resolution"
+                submit-on-event="globalCaptureEvent"
+                @response="handleCaptureResponse"
+                @error="modalError"
+              ></taskSubmitter>
             </div>
           </div>
         </li>
@@ -220,10 +222,7 @@ export default {
       },
       setPosition: null,
       isAutofocusing: 0,
-      moveLock: false,
-      fastAutofocusUri: null,
-      normalAutofocusUri: null,
-      moveInImageCoordinatesUri: null
+      moveLock: false
     };
   },
 
@@ -239,6 +238,18 @@ export default {
     },
     positionStatusUri: function() {
       return `${this.baseUri}/stage/position`;
+    },
+    fastAutofocusUri: function() {
+      return this.thingActionUrl("autofocus", "fast_autofocus");
+    },
+    captureUri: function() {
+      return this.thingActionUrl("camera", "capture_jpeg");
+    },
+    moveInImageCoordinatesUri: function() {
+      return this.thingActionUrl(
+        "camera_stage_mapping",
+        "move_in_image_coordinates"
+      );
     }
   },
 
@@ -282,8 +293,6 @@ export default {
     // Update the current position in text boxes
     this.updatePosition();
     // Look for autofocus plugin
-    this.updateAutofocusUri();
-    this.updateMoveInImageCoordinatesUri();
   },
 
   beforeDestroy() {
@@ -381,12 +390,22 @@ export default {
         });
     },
 
-    updateAutofocusUri: function() {
-      this.fastAutofocusUri = `${this.baseUri}/autofocus/fast_autofocus`;
-    },
-
-    updateMoveInImageCoordinatesUri: function() {
-      this.moveInImageCoordinatesUri = `${this.baseUri}/camera_stage_mapping/move_in_image_coordinates`;
+    handleCaptureResponse: async function(response) {
+      // Retrieve the captured image and save it
+      let imageUri = response.output.href;
+      if (!imageUri) {
+        this.modalError("No image URI returned from capture task.");
+        console.log(`Capture resulted in response ${response}`);
+        return;
+      }
+      // To save the returned data, we make a virtual link and click it
+      let imageResponse = await axios.get(imageUri, { responseType: "blob" });
+      const url = window.URL.createObjectURL(new Blob([imageResponse.data]));
+      const link = document.createElement("a");
+      link.href = url;
+      link.setAttribute("download", `OFM_${new Date().toISOString()}.jpeg`);
+      document.body.appendChild(link);
+      link.click();
     }
   }
 };

From 77c43c824deae95f92149f8be3b4b60ffed18c3d Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Wed, 13 Dec 2023 01:53:55 +0000
Subject: [PATCH 38/46] Restore log viewer

---
 webapp/src/components/appContent.vue          |  4 +-
 .../tabContentComponents/loggingContent.vue   | 48 +++++++++----------
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/webapp/src/components/appContent.vue b/webapp/src/components/appContent.vue
index 6810d55a..a2dd1bbc 100644
--- a/webapp/src/components/appContent.vue
+++ b/webapp/src/components/appContent.vue
@@ -216,11 +216,11 @@ export default {
           component: settingsContent,
           class: "uk-margin-auto-top"
         },
-        /*{
+        {
           id: "logging",
           icon: "assignment_late",
           component: loggingContent
-        },*/
+        },
         {
           id: "about",
           icon: "info",
diff --git a/webapp/src/components/tabContentComponents/loggingContent.vue b/webapp/src/components/tabContentComponents/loggingContent.vue
index 8bbf45c6..56a51686 100644
--- a/webapp/src/components/tabContentComponents/loggingContent.vue
+++ b/webapp/src/components/tabContentComponents/loggingContent.vue
@@ -42,15 +42,15 @@
     <div class="uk-width-xlarge uk-align-center">
       <div
         v-for="item in pagedItems"
-        :key="item.timestamp"
+        :key="item.sequence"
         uk-alert
         class="logging-entry"
         :class="{
-          'uk-alert-warning uk-alert': item.data.levelname == 'WARNING',
-          'uk-alert-danger uk-alert': item.data.levelname == 'ERROR'
+          'uk-alert-warning uk-alert': item.level == 'WARNING',
+          'uk-alert-danger uk-alert': item.level == 'ERROR'
         }"
       >
-        <b>{{ formatDateTime(item.data.created) }}</b>
+        <b>{{ formatDateTime(item.timestamp) }}</b>
         <div class="logging-message">{{ formatMessage(item) }}</div>
       </div>
 
@@ -102,18 +102,15 @@ export default {
       var items = [];
       for (var item of this.logs) {
         // Add to capture list if matched
-        if (this.filteredLevels.includes(item.data.levelname)) {
+        if (this.filteredLevels.includes(item.level)) {
           items.push(item);
         }
       }
 
       return items;
     },
-    loggingUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2/events/logging`;
-    },
     logFileURI: function() {
-      return `${this.$store.getters.baseUri}/api/v2/log`;
+      return `${this.$store.getters.baseUri}/log/`;
     },
     pagedItems: function() {
       let startIndex = (this.page - 1) * this.maxitems;
@@ -124,11 +121,6 @@ export default {
     }
   },
 
-  mounted() {
-    // Update on mount (does nothing if not connected)
-    this.updateLogs();
-  },
-
   methods: {
     scrollToTop() {
       const el = document.querySelector("#container-left");
@@ -141,22 +133,30 @@ export default {
         this.updateLogs();
       }
     },
-    updateLogs: function() {
-      axios
-        .get(this.loggingUri)
-        .then(response => {
-          this.logs = response.data.reverse();
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
+    async updateLogs() {
+      let response = await axios.get(this.logFileURI);
+      let lines = response.data.split("\n").reverse();
+      this.logs = [];
+      let regexp = /\[(.+)\] \[(.+)\] (.*)$/;
+      for (let line of lines) {
+        if (line.length > 0) {
+          let m = line.match(regexp);
+          this.logs.push({
+            timestamp: m[1],
+            level: m[2],
+            message: m[3],
+            sequence: this.logs.length
+          });
+        }
+      }
     },
     formatDateTime: function(isoDateTimeString) {
+      isoDateTimeString = isoDateTimeString.replace(",", ".");
       let date = new Date(isoDateTimeString);
       return date.toLocaleDateString() + " " + date.toLocaleTimeString();
     },
     formatMessage: function(item) {
-      return item.data.levelname + ": " + item.data.message;
+      return item.level + ": " + item.message;
     }
   }
 };

From 30deedde9e0159bcd1db736fb6a2f39c586cc208 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Thu, 14 Dec 2023 23:38:16 +0000
Subject: [PATCH 39/46] Route all moves through the Move taskSubmitter

I've consolidated move code (except moveinimagecoordinates)
so that it now all simulates clicking "submit" on the taskSubmitter.
---
 .../navigateComponents/paneNavigate.vue       | 87 +++++++++----------
 1 file changed, 42 insertions(+), 45 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue b/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
index d2d8b403..5160f0f6 100644
--- a/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
+++ b/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
@@ -92,6 +92,7 @@
                       class="uk-input uk-form-small"
                       type="number"
                       name="inputPositionX"
+                      @keyup.enter="startMoveTask"
                     />
                   </div>
                 </div>
@@ -104,6 +105,7 @@
                       class="uk-input uk-form-small"
                       type="number"
                       name="inputPositionY"
+                      @keyup.enter="startMoveTask"
                     />
                   </div>
                 </div>
@@ -116,18 +118,23 @@
                       class="uk-input uk-form-small"
                       type="number"
                       name="inputPositionZx"
+                      @keyup.enter="startMoveTask"
                     />
                   </div>
                 </div>
               </div>
 
               <p>
-                <button
-                  type="submit"
-                  class="uk-button uk-button-default uk-float-right uk-width-1-1"
-                >
-                  Move
-                </button>
+                <taskSubmitter
+                  ref="moveTaskSubmitter"
+                  :submit-url="absoluteMoveUri"
+                  :submit-data="setPosition"
+                  :submit-label="'Move'"
+                  :canTerminate="false"
+                  @taskStarted="moveLock = true"
+                  @finished="moveLock = false"
+                  @error="modalError"
+                ></taskSubmitter>
               </p>
             </form>
           </div>
@@ -230,11 +237,11 @@ export default {
     baseUri: function() {
       return this.$store.getters.baseUri;
     },
-    moveActionUri: function() {
-      return `${this.$store.getters.baseUri}/stage/move_relative`;
+    absoluteMoveUri: function() {
+      return this.thingActionUrl("stage", "move_absolute");
     },
     zeroActionUri: function() {
-      return `${this.$store.getters.baseUri}/stage/zero`;
+      return this.thingActionUrl("stage", "zero");
     },
     positionStatusUri: function() {
       return `${this.baseUri}/stage/position`;
@@ -273,17 +280,17 @@ export default {
     this.stepSize =
       this.getLocalStorageObj("navigation_stepSize") || this.stepSize;
     this.invert = this.getLocalStorageObj("navigation_invert") || this.invert;
+    let self = this;
     // A global signal listener to perform a move action
-    this.$root.$on("globalMoveEvent", (x, y, z, absolute) => {
-      this.moveRequest(x, y, z, absolute);
-    });
+    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) => {
-      this.moveRequest(
+      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),
@@ -292,7 +299,6 @@ export default {
     });
     // Update the current position in text boxes
     this.updatePosition();
-    // Look for autofocus plugin
   },
 
   beforeDestroy() {
@@ -303,40 +309,31 @@ export default {
   },
 
   methods: {
-    handleSubmit: function() {
-      this.moveRequest(
-        this.setPosition.x,
-        this.setPosition.y,
-        this.setPosition.z,
-        true
-      );
+    timeout(ms) {
+      return new Promise(resolve => setTimeout(resolve, ms));
     },
-
-    moveRequest: function(x, y, z, absolute) {
-      // If not movement-locked
-      if (!this.moveLock) {
-        // Lock move requests
-        this.moveLock = true;
-        let move_type = absolute ? "absolute" : "relative";
-        // Send move request
-        axios
-          .post(`${this.baseUri}/stage/move_${move_type}`, {
-            x: x,
-            y: y,
-            z: z
-          })
-          .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 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{
+        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
+      this.startMoveTask();
+    },
+    startMoveTask() {
+      this.$refs.moveTaskSubmitter.startTask();
     },
-
     moveInImageCoordinatesRequest: function(x, y) {
       // If not movement-locked
       if (!this.moveLock) {

From a9fdb6fd5229ff0d8ab1926ffed9a1d824842afe Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Fri, 15 Dec 2023 00:00:02 +0000
Subject: [PATCH 40/46] Update position controls to resemble propertyControl

I've simplified the HTML template and added a refresh button.
---
 .../navigateComponents/paneNavigate.vue       | 86 ++++++++++---------
 1 file changed, 44 insertions(+), 42 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue b/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
index 5160f0f6..7a2975d6 100644
--- a/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
+++ b/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
@@ -80,50 +80,21 @@
         <li class="uk-open">
           <a class="uk-accordion-title" href="#">Move-to</a>
           <div class="uk-accordion-content">
-            <form @submit.prevent="handleSubmit">
+            <form>
               <!-- Text boxes to set and view position -->
-
-              <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="setPosition.x"
-                      class="uk-input uk-form-small"
-                      type="number"
-                      name="inputPositionX"
-                      @keyup.enter="startMoveTask"
-                    />
-                  </div>
-                </div>
-
-                <div>
-                  <label class="uk-form-label" for="form-stacked-text">y</label>
-                  <div class="uk-form-controls">
-                    <input
-                      v-model="setPosition.y"
-                      class="uk-input uk-form-small"
-                      type="number"
-                      name="inputPositionY"
-                      @keyup.enter="startMoveTask"
-                    />
-                  </div>
-                </div>
-
-                <div>
-                  <label class="uk-form-label" for="form-stacked-text">z</label>
-                  <div class="uk-form-controls">
-                    <input
-                      v-model="setPosition.z"
-                      class="uk-input uk-form-small"
-                      type="number"
-                      name="inputPositionZx"
-                      @keyup.enter="startMoveTask"
-                    />
-                  </div>
-                </div>
+              <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"
+                />
+                <a class="button-next-to-input" @click="updatePosition">
+                  <i class="material-icons">refresh</i>
+                </a>
               </div>
-
               <p>
                 <taskSubmitter
                   ref="moveTaskSubmitter"
@@ -407,3 +378,34 @@ 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;
+}
+/* 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;
+}
+.button-next-to-input {
+  flex-grow: 0;
+  padding-left: 5px;
+  padding-right: 5px;
+  vertical-align: middle;
+  cursor: pointer;
+}
+</style>

From 93757c2103219dd4b5940daea51b01755946150c Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Fri, 15 Dec 2023 00:15:23 +0000
Subject: [PATCH 41/46] Improve responsiveness and reliability of moves

Fixed a bug where incorrect values in the position control
caused incorrect relative moves.

Decreased the polling interval to make moves more responsive.
---
 .../navigateComponents/paneNavigate.vue       | 21 +++++++------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue b/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
index 7a2975d6..70e4b15b 100644
--- a/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
+++ b/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
@@ -78,7 +78,7 @@
         </li>
 
         <li class="uk-open">
-          <a class="uk-accordion-title" href="#">Move-to</a>
+          <a class="uk-accordion-title" href="#">Position</a>
           <div class="uk-accordion-content">
             <form>
               <!-- Text boxes to set and view position -->
@@ -102,6 +102,7 @@
                   :submit-data="setPosition"
                   :submit-label="'Move'"
                   :canTerminate="false"
+                  :pollInterval="0.05"
                   @taskStarted="moveLock = true"
                   @finished="moveLock = false"
                   @error="modalError"
@@ -293,6 +294,7 @@ export default {
       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,
@@ -300,10 +302,10 @@ export default {
         }
       }
       await this.timeout(1);  // Wait for Vue to update the position
-      this.startMoveTask();
+      await this.startMoveTask();
     },
-    startMoveTask() {
-      this.$refs.moveTaskSubmitter.startTask();
+    async startMoveTask() {
+      await this.$refs.moveTaskSubmitter.startTask();
     },
     moveInImageCoordinatesRequest: function(x, y) {
       // If not movement-locked
@@ -347,15 +349,8 @@ export default {
         });
     },
 
-    updatePosition: function() {
-      axios
-        .get(this.positionStatusUri)
-        .then(response => {
-          this.setPosition = response.data;
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
+    async updatePosition() {
+      this.setPosition = await this.readThingProperty("stage", "position")
     },
 
     handleCaptureResponse: async function(response) {

From c8906008eddfa608b7c5a481eae5e63972e2a56c Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Fri, 15 Dec 2023 00:32:37 +0000
Subject: [PATCH 42/46] Update zero coordinates button

This now uses a taskSubmitter and the new URL
---
 .../navigateComponents/paneNavigate.vue           | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue b/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
index 70e4b15b..75a9be8d 100644
--- a/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
+++ b/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
@@ -68,12 +68,13 @@
               </div>
             </div>
 
-            <button
-              class="uk-button uk-button-default uk-margin uk-width-1-1"
-              @click="zeroRequest()"
-            >
-              Zero coordinates
-            </button>
+            <taskSubmitter
+              :submit-url="zeroActionUri"
+              :submit-label="'Zero Coordinates'"
+              :canTerminate="false"
+              @finished="updatePosition"
+              @error="modalError"
+            ></taskSubmitter>
           </div>
         </li>
 
@@ -213,7 +214,7 @@ export default {
       return this.thingActionUrl("stage", "move_absolute");
     },
     zeroActionUri: function() {
-      return this.thingActionUrl("stage", "zero");
+      return this.thingActionUrl("stage", "set_zero_position");
     },
     positionStatusUri: function() {
       return `${this.baseUri}/stage/position`;

From b23d6043c57bb543b74f3be0d205463757d91e15 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Fri, 15 Dec 2023 01:22:21 +0000
Subject: [PATCH 43/46] Remove IHI slidescan from features settings

---
 webapp/src/components/appContent.vue          | 16 +++---------
 .../settingsComponents/featuresSettings.vue   | 25 -------------------
 webapp/src/store.js                           |  4 ---
 3 files changed, 4 insertions(+), 41 deletions(-)

diff --git a/webapp/src/components/appContent.vue b/webapp/src/components/appContent.vue
index a2dd1bbc..6177267d 100644
--- a/webapp/src/components/appContent.vue
+++ b/webapp/src/components/appContent.vue
@@ -279,22 +279,14 @@ export default {
           component: navigateContent
         },
         {
-          id: "capture",
-          icon: "camera_alt",
-          component: captureContent,
-          divide: true // Add a divider after this tab icon
-        }
-      ];
-      if (!this.$store.state.galleryEnabled) {
-        tabs = tabs.filter(tab => tab.id != "gallery");
-      }
-      if (this.$store.state.IHIEnabled) {
-        tabs.push({
           id: "slidescan",
           icon: "settings_overscan",
           component: slideScanContent,
           divide: true
-        });
+        }
+      ];
+      if (!this.$store.state.galleryEnabled) {
+        tabs = tabs.filter(tab => tab.id != "gallery");
       }
       if (this.$store.state.imjoyEnabled) {
         tabs.push({
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/featuresSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/featuresSettings.vue
index 4fc9b74e..a413d401 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/featuresSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/featuresSettings.vue
@@ -1,19 +1,6 @@
 <template>
   <div id="appSettings" class="uk-width-large">
     <h3>Additional features</h3>
-    <p class="uk-margin-small">
-      <label
-        ><input v-model="IHIEnabled" class="uk-checkbox" type="checkbox" />
-        Enable IHI Slide Scan</label
-      >
-    </p>
-    <p class="uk-margin-small">
-      Enabling IHI Slide Scan will add a new tab designed to simplify acquiring
-      blood smear tile scans. <br />
-      While this may be useful for other applications, it is primarily designed
-      for use in clinics acquiring blood smear samples using a 100x
-      oil-immersion objective, with a Raspberry Pi Camera v2.
-    </p>
     <p class="uk-margin-small" :class="{ 'uk-text-muted': !imjoyPermitted }">
       <label :disabled="!imjoyPermitted">
         <input
@@ -57,14 +44,6 @@ export default {
   },
 
   computed: {
-    IHIEnabled: {
-      get() {
-        return this.$store.state.IHIEnabled;
-      },
-      set(value) {
-        this.$store.commit("changeIHIEnabled", value);
-      }
-    },
     imjoyEnabled: {
       get() {
         return this.$store.state.imjoyEnabled;
@@ -90,9 +69,6 @@ export default {
   },
 
   watch: {
-    IHIEnabled: function() {
-      this.setLocalStorageObj("IHIEnabled", this.IHIEnabled);
-    },
     imjoyEnabled: function() {
       this.setLocalStorageObj("imjoyEnabled", this.imjoyEnabled);
     },
@@ -103,7 +79,6 @@ export default {
 
   mounted() {
     // Try loading settings from localStorage. If null, don't change.
-    this.IHIEnabled = this.getLocalStorageObj("IHIEnabled") || this.IHIEnabled;
     this.imjoyEnabled =
       this.getLocalStorageObj("imjoyEnabled") || this.imjoyEnabled;
     this.galleryEnabled =
diff --git a/webapp/src/store.js b/webapp/src/store.js
index 231d6886..f2b2bf68 100644
--- a/webapp/src/store.js
+++ b/webapp/src/store.js
@@ -88,7 +88,6 @@ export default new Vuex.Store({
     disableStream: false,
     autoGpuPreview: false,
     trackWindow: true,
-    IHIEnabled: false,
     imjoyEnabled: false,
     galleryEnabled: true,
     appTheme: "system",
@@ -114,9 +113,6 @@ export default new Vuex.Store({
     changeAppTheme(state, theme) {
       state.appTheme = theme;
     },
-    changeIHIEnabled(state, enabled) {
-      state.IHIEnabled = enabled;
-    },
     changeImjoyEnabled(state, enabled) {
       if (process.env.VUE_APP_ENABLE_IMJOY === "true") {
         state.imjoyEnabled = enabled;

From c1ed5d0c87c1bba11ef3631fcd187eec1dc144eb Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Fri, 15 Dec 2023 02:39:03 +0000
Subject: [PATCH 44/46] Also log modal errors to the console

---
 webapp/src/main.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webapp/src/main.js b/webapp/src/main.js
index f8d5f113..d6f0c62c 100644
--- a/webapp/src/main.js
+++ b/webapp/src/main.js
@@ -130,6 +130,7 @@ Vue.mixin({
     modalError: function(error) {
       var errormsg = this.getErrorMessage(error);
       this.$store.commit("setErrorMessage", errormsg);
+      console.log("Modal error:", error);
       UIkit.notification({
         message: `${errormsg}`,
         status: "danger"

From fc49ca765606ee1353adc5084a492fcbc0a99d28 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Wed, 3 Jan 2024 14:22:49 +0000
Subject: [PATCH 45/46] Restore cameraURI in calibration modal

---
 webapp/src/components/modalComponents/calibrationModal.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/webapp/src/components/modalComponents/calibrationModal.vue b/webapp/src/components/modalComponents/calibrationModal.vue
index a612a021..6ecc9d55 100644
--- a/webapp/src/components/modalComponents/calibrationModal.vue
+++ b/webapp/src/components/modalComponents/calibrationModal.vue
@@ -48,6 +48,7 @@
 
           <cameraCalibrationSettings
             :show-extra-settings="false"
+            :camera-uri="cameraUri"
           ></cameraCalibrationSettings>
         </div>
       </div>
@@ -190,6 +191,9 @@ export default {
       var CSMUseful = this.canCSMCalibrated && !this.isCSMCalibrated;
       var LSTUseful = this.canLSTCalibrated && !this.isLSTCalibrated;
       return CSMUseful || LSTUseful;
+    },
+    cameraUri: function() {
+      return `${this.$store.getters.baseUri}/camera/`;
     }
   },
 

From 37f6251d411881ef2a074d7c2618531fc729dfe9 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Wed, 3 Jan 2024 14:28:31 +0000
Subject: [PATCH 46/46] Eliminate references to old extensions API

Some of these will, in the future, be replaced by the new
API but, for now, the features in question are disabled anyway.
---
 webapp/src/components/appContent.vue          |  4 ---
 .../galleryComponents/zipDownloader.vue       | 10 ++-----
 .../slideScanComponents/paneSlideScan.vue     | 27 -------------------
 3 files changed, 2 insertions(+), 39 deletions(-)

diff --git a/webapp/src/components/appContent.vue b/webapp/src/components/appContent.vue
index 6177267d..63cebb0a 100644
--- a/webapp/src/components/appContent.vue
+++ b/webapp/src/components/appContent.vue
@@ -231,10 +231,6 @@ export default {
   },
 
   computed: {
-    pluginsUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2/extensions`;
-    },
-
     pluginsGuiList: function() {
       // List of plugin GUIs, obtained from this.plugins values
       var pluginGuis = [];
diff --git a/webapp/src/components/tabContentComponents/galleryComponents/zipDownloader.vue b/webapp/src/components/tabContentComponents/galleryComponents/zipDownloader.vue
index 12e01041..005a18f6 100644
--- a/webapp/src/components/tabContentComponents/galleryComponents/zipDownloader.vue
+++ b/webapp/src/components/tabContentComponents/galleryComponents/zipDownloader.vue
@@ -56,12 +56,6 @@ export default {
     };
   },
 
-  computed: {
-    pluginsUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2/extensions`;
-    }
-  },
-
   mounted: function() {
     this.updateZipperUri();
   },
@@ -84,7 +78,7 @@ export default {
   methods: {
     updateZipperUri: function() {
       if (this.$store.state.available) {
-        axios
+        /*axios
           .get(this.pluginsUri) // Get a list of plugins
           .then(response => {
             var plugins = response.data;
@@ -100,7 +94,7 @@ export default {
           })
           .catch(error => {
             this.modalError(error); // Let mixin handle error
-          });
+          });*/
       } else {
         this.zipBuilderUri = null;
         this.zipGetterUri = null;
diff --git a/webapp/src/components/tabContentComponents/slideScanComponents/paneSlideScan.vue b/webapp/src/components/tabContentComponents/slideScanComponents/paneSlideScan.vue
index c18cc3f1..e7916220 100644
--- a/webapp/src/components/tabContentComponents/slideScanComponents/paneSlideScan.vue
+++ b/webapp/src/components/tabContentComponents/slideScanComponents/paneSlideScan.vue
@@ -134,7 +134,6 @@
 </template>
 
 <script>
-import axios from "axios";
 import taskSubmitter from "../../genericComponents/taskSubmitter";
 
 export default {
@@ -166,9 +165,6 @@ export default {
   },
 
   computed: {
-    pluginsUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2/extensions`;
-    },
     currentTimeForm: {
       get() {
         // Chop the timezone information from the end
@@ -210,30 +206,7 @@ export default {
     }
   },
 
-  mounted: function() {
-    this.updateScanUri();
-  },
-
   methods: {
-    updateScanUri: function() {
-      axios
-        .get(this.pluginsUri) // Get a list of plugins
-        .then(response => {
-          var plugins = response.data;
-          var foundExtension = plugins.find(
-            e => e.title === "org.openflexure.scan"
-          );
-          // if ScanPlugin is enabled
-          if (foundExtension) {
-            // Get plugin action link
-            this.scanUri = foundExtension.links.tile.href;
-          }
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
-    },
-
     onScanError: function(error) {
       this.scanRunning = false;
       this.modalError(error);