Display background detector settings built automatically from schema

src/openflexure_microscope_server/background_detect.py

@@ -32,8 +32,9 @@ class BackgroundDetectorStatus(BaseModel):
     ``ready`` is used in case more complex methods are added in the future, which
     need different initialisation.
     """
-    settings: BaseModel
-    """The settings for this this background detect Algorithm"""
+    settings: dict[str, Any]
+    """The settings for this this background detect Algorithm. These are a dictionary
+    dumped from the base model."""
 
     # Setting schema is a dict until LabThings FastAPI issue #154 is fixed and
     # DataSchema can be used directly. For now `model_dump()` must be used to dump schema
@@ -63,7 +64,7 @@ class BackgroundDetectAlgorithm:
         """The status information needed for the GUI. Read only."""
         return BackgroundDetectorStatus(
             ready=self.background_data is not None,
-            settings=self.settings,
+            settings=self.settings.model_dump(),
             # Dump model with `model_dump()` for reason explained when defining
             # BackgroundDetectorStatus
             settings_schema=type_to_dataschema(self.settings_data_model).model_dump(),

webapp/src/components/labThingsComponents/propertyControl.vue

@@ -88,7 +88,6 @@ export default {
     },
     writeProperty: async function(requestedValue) {
       try {
-        console.log(requestedValue);
         this.value=requestedValue;
         await this.writeThingProperty(
           this.thingName,

webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue

@@ -5,7 +5,12 @@
         <li>
           <a class="uk-accordion-title" href="#">Settings</a>
           <div class="uk-accordion-content">
-            <p> TODO!</p>
+            <input-from-schema
+              v-if="backgroundDetectorStatus"
+              v-model="backgroundDetectorStatus.settings"
+              :data-schema="backgroundDetectorStatus.settings_schema"
+              label=""
+            />
           </div>
         </li>
       </ul>
@@ -26,7 +31,7 @@
           thing="camera"
           action="image_is_sample"
           submit-label="Check Current Image"
-          :isDisabled="!backgroundDetectorStatus.ready"
+          :isDisabled="!ready"
           :can-terminate="false"
           :poll-interval="0.1"
           @response="alertImageLabel"
@@ -39,10 +44,12 @@
 
 <script>
 import ActionButton from "../../labThingsComponents/actionButton.vue";
+import InputFromSchema from "../../labThingsComponents/inputFromSchema.vue";
 
 export default {
   components: {
     ActionButton,
+    InputFromSchema
   },
 
   data() {
@@ -51,6 +58,13 @@ export default {
     };
   },
 
+  computed: {
+    ready() {
+      const status = this.backgroundDetectorStatus;
+      return status && status.ready === true;
+    }
+  },
+
   methods: {
     alertBackgroundSet() {
       this.modalNotify(`Background image has been updated`);