Complete UI for arbitrary dectector settings. Required better method for invoking actions.

Error handling was fixed in the process of getting the above correct.

webapp/src/components/labThingsComponents/inputFromSchema.vue

@@ -51,20 +51,21 @@
     </label>
     <label v-if="dataType == 'number_object'" class="uk-form-label"
       >{{ label }}
-      <div class="input-and-buttons-container">
-        <input
-          v-for="(_v, key) in value"
-          :key="key"
-          v-model="internalValue[key]"
-          class="uk-form-small numeric-setting-line-input"
-          type="number"
-          @focusin="focusIn"
-          @focusout="focusOut"
-          @keydown="keyDown"
-        />
-        <a class="button-next-to-input" @click="requestUpdate">
-          <span class="material-symbols-outlined">refresh</span>
-        </a>
+      <div v-for="(val, key) in value" :key="key">
+        <label>{{internalLabels[key]}}</label>
+        <div class="input-and-buttons-container" >
+          <input
+            v-model="internalValue[key]"
+            class="uk-form-small numeric-setting-line-input"
+            type="number"
+            @focusin="focusIn"
+            @focusout="focusOut"
+            @keydown="keyDown"
+          />
+          <a class="button-next-to-input" @click="requestUpdate">
+            <span class="material-symbols-outlined">refresh</span>
+          </a>
+        </div>
       </div>
     </label>
     <label v-if="dataType == 'other'" class="uk-form-label"
@@ -112,6 +113,16 @@ export default {
     }
   },
   computed: {
+    internalLabels: function() {
+      if (this.dataType == "number_object") {
+        let labels = {};
+        for (const key in this.internalValue){
+          labels[key] = this.dataSchema.properties[key].title
+        }
+        return labels;
+      }
+      return [];
+    },
     valueLength: function() {
       if (this.dataType == "number_array") {
         if (this.internalValue == undefined) {

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

@@ -10,6 +10,8 @@
               v-model="backgroundDetectorStatus.settings"
               :data-schema="backgroundDetectorStatus.settings_schema"
               label=""
+              @requestUpdate="readSettings"
+              @sendValue="writeSettings"
             />
           </div>
         </li>
@@ -72,6 +74,19 @@ export default {
     alertImageLabel(r) {
       let label = r.output[0] ? "sample" : "background";
       this.modalNotify(`Current image is ${label} (${r.output[1]})`);
+    },
+    readSettings: async function() {
+      this.backgroundDetectorStatus = await this.readThingProperty(
+        "camera",
+        "background_detector_status"
+      );
+    },
+    writeSettings: async function(requestedValue) {
+      await this.invokeAction(
+        "camera",
+        "update_detector_settings",
+        {"data": requestedValue}
+      );
     }
   },
   async created() {