From ae81520494a4a778e2f462f53df11c3d796afd6a Mon Sep 17 00:00:00 2001
From: Joe Knapper <jaknapper@hotmail.com>
Date: Thu, 12 Feb 2026 22:35:41 +0000
Subject: [PATCH 1/5] Optional options in UI property control become dropdown

---
 src/openflexure_microscope_server/ui.py       |  7 ++++++
 .../labThingsComponents/inputFromSchema.vue   | 23 +++++++++++++++++++
 .../labThingsComponents/propertyControl.vue   |  6 +++++
 .../serverSpecifiedPropertyControl.vue        |  1 +
 4 files changed, 37 insertions(+)

diff --git a/src/openflexure_microscope_server/ui.py b/src/openflexure_microscope_server/ui.py
index d6c68290..53dd0647 100644
--- a/src/openflexure_microscope_server/ui.py
+++ b/src/openflexure_microscope_server/ui.py
@@ -83,6 +83,13 @@ class PropertyControl(BaseModel):
     read_back_delay: int = 1000
     """The delay in ms before reading back the property."""
 
+    options: list[str] = []
+    """A list of options to pass to the UI for a dropdown.
+
+    These options aren't validated in the UI in any way, and invalid
+    settings will only be rejected when selected.
+    """
+
 
 def property_control_for(
     thing: lt.Thing, property_name: str, **kwargs: Any
diff --git a/webapp/src/components/labThingsComponents/inputFromSchema.vue b/webapp/src/components/labThingsComponents/inputFromSchema.vue
index 70a80026..33adb079 100644
--- a/webapp/src/components/labThingsComponents/inputFromSchema.vue
+++ b/webapp/src/components/labThingsComponents/inputFromSchema.vue
@@ -1,5 +1,20 @@
 <template>
   <div>
+    <label v-if="dataType === 'dropdown'" class="uk-form-label">
+      {{ label }}
+      <div class="input-and-buttons-container">
+        <select
+          v-model="internalValue"
+          class="uk-form-small numeric-setting-line-input"
+          @change="sendValue"
+        >
+          <option v-for="(opt, idx) in options" :key="idx" :value="opt">
+            {{ opt }}
+          </option>
+        </select>
+        <sync-property-button @click="requestUpdate" />
+      </div>
+    </label>
     <label v-if="dataType == 'number'" class="uk-form-label"
       >{{ label }}
       <div class="input-and-buttons-container">
@@ -128,6 +143,11 @@ export default {
       type: Boolean,
       default: null,
     },
+    options: {
+      type: Array,
+      default: () => [],
+      required: false,
+    },
   },
 
   emits: ["requestUpdate", "sendValue", "animationShown"],
@@ -182,6 +202,9 @@ export default {
         return "undefined";
       }
       const num_types = ["integer", "float", "number"];
+      if (this.options && this.options.length > 1) {
+        return "dropdown";
+      }
       if (num_types.includes(prop.type)) {
         return "number";
       }
diff --git a/webapp/src/components/labThingsComponents/propertyControl.vue b/webapp/src/components/labThingsComponents/propertyControl.vue
index 31e98a5e..7b49d7a8 100644
--- a/webapp/src/components/labThingsComponents/propertyControl.vue
+++ b/webapp/src/components/labThingsComponents/propertyControl.vue
@@ -4,6 +4,7 @@
     :data-schema="propertyDescription"
     :label="label"
     :animate="animate"
+    :options="options"
     @request-update="readProperty"
     @send-value="writeProperty"
     @animation-shown="resetAnimate"
@@ -44,6 +45,11 @@ export default {
       default: 1000,
       required: false,
     },
+    options: {
+      type: Array,
+      default: () => [],
+      required: false,
+    },
   },
 
   data() {
diff --git a/webapp/src/components/labThingsComponents/serverSpecifiedPropertyControl.vue b/webapp/src/components/labThingsComponents/serverSpecifiedPropertyControl.vue
index b9d003bb..807ec039 100644
--- a/webapp/src/components/labThingsComponents/serverSpecifiedPropertyControl.vue
+++ b/webapp/src/components/labThingsComponents/serverSpecifiedPropertyControl.vue
@@ -6,6 +6,7 @@
     :label="propertyData.label"
     :read-back="propertyData.read_back"
     :read-back-delay="propertyData.read_back_delay"
+    :options="propertyData.options"
   />
 </template>
 

From 5ae0f903d82a07e4649f07b66dc4044b47aad55c Mon Sep 17 00:00:00 2001
From: Joe Knapper <jaknapper@hotmail.com>
Date: Fri, 13 Feb 2026 12:13:39 +0000
Subject: [PATCH 2/5] Use dropdown separated from dataType in Vue

---
 src/openflexure_microscope_server/ui.py       |  4 ++--
 .../labThingsComponents/inputFromSchema.vue   | 22 +++++++++----------
 .../labThingsComponents/propertyControl.vue   |  2 +-
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/openflexure_microscope_server/ui.py b/src/openflexure_microscope_server/ui.py
index 53dd0647..ff11ea68 100644
--- a/src/openflexure_microscope_server/ui.py
+++ b/src/openflexure_microscope_server/ui.py
@@ -1,6 +1,6 @@
 """Functionality for communicating the required user interface for a thing."""
 
-from typing import Any
+from typing import Any, Optional
 
 from pydantic import BaseModel
 
@@ -83,7 +83,7 @@ class PropertyControl(BaseModel):
     read_back_delay: int = 1000
     """The delay in ms before reading back the property."""
 
-    options: list[str] = []
+    options: Optional[list[str]] = None
     """A list of options to pass to the UI for a dropdown.
 
     These options aren't validated in the UI in any way, and invalid
diff --git a/webapp/src/components/labThingsComponents/inputFromSchema.vue b/webapp/src/components/labThingsComponents/inputFromSchema.vue
index 33adb079..e0b265cc 100644
--- a/webapp/src/components/labThingsComponents/inputFromSchema.vue
+++ b/webapp/src/components/labThingsComponents/inputFromSchema.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <label v-if="dataType === 'dropdown'" class="uk-form-label">
+    <label v-if="useDropdown" class="uk-form-label">
       {{ label }}
       <div class="input-and-buttons-container">
         <select
@@ -15,7 +15,7 @@
         <sync-property-button @click="requestUpdate" />
       </div>
     </label>
-    <label v-if="dataType == 'number'" class="uk-form-label"
+    <label v-if="!useDropdown && dataType == 'number'" class="uk-form-label"
       >{{ label }}
       <div class="input-and-buttons-container">
         <input
@@ -33,7 +33,7 @@
         <sync-property-button @click="requestUpdate" />
       </div>
     </label>
-    <div v-if="dataType == 'boolean'" class="input-and-buttons-container">
+    <div v-if="!useDropdown && dataType == 'boolean'" class="input-and-buttons-container">
       <label class="uk-form-label numeric-setting-line-input">
         <input
           ref="checkbox"
@@ -47,7 +47,7 @@
       </label>
       <sync-property-button @click="requestUpdate" />
     </div>
-    <label v-if="dataType == 'number_array'" class="uk-form-label"
+    <label v-if="!useDropdown && dataType == 'number_array'" class="uk-form-label"
       >{{ label }}
       <div class="input-and-buttons-container">
         <input
@@ -66,7 +66,7 @@
         <sync-property-button @click="requestUpdate" />
       </div>
     </label>
-    <label v-if="dataType == 'number_object'" class="uk-form-label"
+    <label v-if="!useDropdown && dataType == 'number_object'" class="uk-form-label"
       >{{ label }}
       <div v-for="(val, key) in modelValue" :key="key">
         <label>{{ internalLabels[key] }}</label>
@@ -86,7 +86,7 @@
         </div>
       </div>
     </label>
-    <label v-if="dataType == 'string'" class="uk-form-label"
+    <label v-if="!useDropdown && dataType == 'string'" class="uk-form-label"
       >{{ label }}
       <div class="input-and-buttons-container">
         <input
@@ -102,7 +102,7 @@
         <sync-property-button @click="requestUpdate" />
       </div>
     </label>
-    <label v-if="dataType == 'other'" class="uk-form-label"
+    <label v-if="!useDropdown && dataType == 'other'" class="uk-form-label"
       >{{ label }}
       <div class="input-and-buttons-container">
         <input
@@ -145,7 +145,7 @@ export default {
     },
     options: {
       type: Array,
-      default: () => [],
+      default: undefined,
       required: false,
     },
   },
@@ -196,15 +196,15 @@ export default {
         form.op?.includes('writeproperty')
       );
     },
+    useDropdown: function () {
+      return Array.isArray(this.options) && this.options.length > 1;
+    },
     dataType: function () {
       let prop = this.dataSchema;
       if (prop == undefined) {
         return "undefined";
       }
       const num_types = ["integer", "float", "number"];
-      if (this.options && this.options.length > 1) {
-        return "dropdown";
-      }
       if (num_types.includes(prop.type)) {
         return "number";
       }
diff --git a/webapp/src/components/labThingsComponents/propertyControl.vue b/webapp/src/components/labThingsComponents/propertyControl.vue
index 7b49d7a8..fc29f4a1 100644
--- a/webapp/src/components/labThingsComponents/propertyControl.vue
+++ b/webapp/src/components/labThingsComponents/propertyControl.vue
@@ -47,7 +47,7 @@ export default {
     },
     options: {
       type: Array,
-      default: () => [],
+      default: undefined,
       required: false,
     },
   },

From 88c087b8dd9aca2673515404ada3bf93d124887c Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Wed, 18 Feb 2026 00:13:13 +0000
Subject: [PATCH 3/5] Options for server specified property control allow
 different values and display names

---
 src/openflexure_microscope_server/ui.py       |  8 +++----
 .../labThingsComponents/inputFromSchema.vue   | 21 ++++++++++++++-----
 .../labThingsComponents/propertyControl.vue   |  2 +-
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/openflexure_microscope_server/ui.py b/src/openflexure_microscope_server/ui.py
index ff11ea68..4b38a891 100644
--- a/src/openflexure_microscope_server/ui.py
+++ b/src/openflexure_microscope_server/ui.py
@@ -83,11 +83,11 @@ class PropertyControl(BaseModel):
     read_back_delay: int = 1000
     """The delay in ms before reading back the property."""
 
-    options: Optional[list[str]] = None
-    """A list of options to pass to the UI for a dropdown.
+    options: Optional[dict[str, str | int | float | bool]] = None
+    """A mapping of UI display name to value use for creating a dropdown.
 
-    These options aren't validated in the UI in any way, and invalid
-    settings will only be rejected when selected.
+    These options aren't validated here in any way. Any invalid values will be rejected
+    when selected.
     """
 
 
diff --git a/webapp/src/components/labThingsComponents/inputFromSchema.vue b/webapp/src/components/labThingsComponents/inputFromSchema.vue
index e0b265cc..78b0b7c7 100644
--- a/webapp/src/components/labThingsComponents/inputFromSchema.vue
+++ b/webapp/src/components/labThingsComponents/inputFromSchema.vue
@@ -5,11 +5,11 @@
       <div class="input-and-buttons-container">
         <select
           v-model="internalValue"
-          class="uk-form-small numeric-setting-line-input"
+          class="uk-form-small numeric-setting-line-input dropdown"
           @change="sendValue"
         >
-          <option v-for="(opt, idx) in options" :key="idx" :value="opt">
-            {{ opt }}
+          <option v-for="(value, display) in options" :key="value" :value="value">
+            {{ display }}
           </option>
         </select>
         <sync-property-button @click="requestUpdate" />
@@ -145,7 +145,8 @@ export default {
     },
     options: {
       type: Array,
-      default: undefined,
+      // Default is Null as None is passed from the server.
+      default: null,
       required: false,
     },
   },
@@ -197,7 +198,12 @@ export default {
       );
     },
     useDropdown: function () {
-      return Array.isArray(this.options) && this.options.length > 1;
+      if (this.options === null) return false;
+      if (["number", "string", "boolean"].includes(this.dataType)) {
+        return true;
+      }
+      console.warn(`Cannot support dropdown for datatype of ${this.dataType}`);
+      return false;
     },
     dataType: function () {
       let prop = this.dataSchema;
@@ -351,6 +357,11 @@ export default {
   margin-right: 5px;
   width: 6em;
 }
+.dropdown {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  opacity: 1;
+}
 .edited {
   background-color: #fff3cd;
 }
diff --git a/webapp/src/components/labThingsComponents/propertyControl.vue b/webapp/src/components/labThingsComponents/propertyControl.vue
index fc29f4a1..7270495f 100644
--- a/webapp/src/components/labThingsComponents/propertyControl.vue
+++ b/webapp/src/components/labThingsComponents/propertyControl.vue
@@ -46,7 +46,7 @@ export default {
       required: false,
     },
     options: {
-      type: Array,
+      type: Object,
       default: undefined,
       required: false,
     },

From 752d97314e9e399cecf6bfb2de6218ea2e74fec3 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Wed, 18 Feb 2026 12:48:27 +0000
Subject: [PATCH 4/5] Fixing some prop types and defaults for dropdowns

---
 webapp/src/components/labThingsComponents/inputFromSchema.vue | 2 +-
 webapp/src/components/labThingsComponents/propertyControl.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/src/components/labThingsComponents/inputFromSchema.vue b/webapp/src/components/labThingsComponents/inputFromSchema.vue
index 78b0b7c7..0c53c8ba 100644
--- a/webapp/src/components/labThingsComponents/inputFromSchema.vue
+++ b/webapp/src/components/labThingsComponents/inputFromSchema.vue
@@ -144,7 +144,7 @@ export default {
       default: null,
     },
     options: {
-      type: Array,
+      type: Object,
       // Default is Null as None is passed from the server.
       default: null,
       required: false,
diff --git a/webapp/src/components/labThingsComponents/propertyControl.vue b/webapp/src/components/labThingsComponents/propertyControl.vue
index 7270495f..cbf4dd28 100644
--- a/webapp/src/components/labThingsComponents/propertyControl.vue
+++ b/webapp/src/components/labThingsComponents/propertyControl.vue
@@ -47,7 +47,7 @@ export default {
     },
     options: {
       type: Object,
-      default: undefined,
+      default: null,
       required: false,
     },
   },

From decbbfd14bd4e55809105625ea13d9873868e6f5 Mon Sep 17 00:00:00 2001
From: Joe Knapper <joe.knapper@glasgow.ac.uk>
Date: Wed, 18 Feb 2026 14:46:17 +0000
Subject: [PATCH 5/5] Apply suggestions from code review of branch dropdown-gui

---
 src/openflexure_microscope_server/ui.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/openflexure_microscope_server/ui.py b/src/openflexure_microscope_server/ui.py
index 4b38a891..9300e36e 100644
--- a/src/openflexure_microscope_server/ui.py
+++ b/src/openflexure_microscope_server/ui.py
@@ -84,7 +84,7 @@ class PropertyControl(BaseModel):
     """The delay in ms before reading back the property."""
 
     options: Optional[dict[str, str | int | float | bool]] = None
-    """A mapping of UI display name to value use for creating a dropdown.
+    """A mapping of UI display name to value, used for creating a dropdown.
 
     These options aren't validated here in any way. Any invalid values will be rejected
     when selected.