Optional options in UI property control become dropdown

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

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";
       }

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() {

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>