Web app controls for background detection

There are now buttons to set, and check, the background
detect plugin.

webapp/src/components/appContent.vue

@@ -168,6 +168,7 @@ import tabContent from "./genericComponents/tabContent";
 import navigateContent from "./tabContentComponents/navigateContent.vue";
 import captureContent from "./tabContentComponents/captureContent.vue";
 import slideScanContent from "./tabContentComponents/slideScanContent.vue";
+import backgroundDetectContent from "./tabContentComponents/backgroundDetectContent.vue";
 import viewContent from "./tabContentComponents/viewContent.vue";
 import settingsContent from "./tabContentComponents/settingsContent.vue";
 import extensionContent from "./tabContentComponents/extensionContent.vue";
@@ -279,8 +280,12 @@ export default {
         {
           id: "slidescan",
           icon: "settings_overscan",
-          component: slideScanContent,
-          divide: true
+          component: slideScanContent
+        },
+        {
+          id: "background_detect",
+          icon: "background_replace",
+          component: backgroundDetectContent
         }
       ];
       if (!this.$store.state.galleryEnabled) {

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

@@ -0,0 +1,81 @@
+<template>
+  <div class="uk-padding-small">
+    <div v-show="!thingAvailable" class="ui-alert-error" uk-alert>
+      The background detect Thing seems to be missing or incompatible.
+    </div>
+    <div v-show="thingAvailable">
+      <div class="uk-margin">
+        <taskSubmitter
+          :submit-url="setBackgroundUri"
+          submit-label="Set background"
+          :can-terminate="false"
+          :poll-interval="0.1"
+        />
+      </div>
+      <div class="uk-margin">
+        <propertyControl
+          thing-name="background_detect"
+          property-name="tolerance"
+          label="Tolerance"
+        />
+      </div>
+      <div class="uk-margin">
+        <taskSubmitter
+          :submit-url="backgroundFractionUri"
+          submit-label="Check current image"
+          :can-terminate="false"
+          :poll-interval="0.1"
+          @response="alertBackgroundFraction"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import taskSubmitter from "../../genericComponents/taskSubmitter";
+import propertyControl from "../../labThingsComponents/propertyControl.vue";
+
+export default {
+  components: {
+    taskSubmitter,
+    propertyControl
+  },
+
+  data: function() {
+    return {
+    };
+  },
+
+  computed: {
+    backgroundFractionUri() {
+      return this.thingActionUrl("background_detect", "background_fraction");
+    },
+    setBackgroundUri() {
+      return this.thingActionUrl("background_detect", "set_background");
+    }
+  },
+
+  methods: {
+    alertBackgroundFraction(r) {
+      let fraction = r.output
+      let percentage = (fraction * 100).toFixed(1)
+      this.modalNotify(`Current image is ${percentage}% background.`)
+    }
+  }
+};
+</script>
+
+<style>
+.grid-container {
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-column-gap: 10px;
+}
+
+.warning {
+  color: #c11;
+  font-weight: bold;
+  text-align: center;
+}
+</style>

webapp/src/components/tabContentComponents/backgroundDetectContent.vue

@@ -0,0 +1,25 @@
+<template>
+  <!-- Grid managing tab content -->
+  <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
+    <div class="control-component">
+      <paneBackgroundDetect />
+    </div>
+    <div class="view-component uk-width-expand">
+      <streamDisplay />
+    </div>
+  </div>
+</template>
+
+<script>
+import paneBackgroundDetect from "./backgroundDetectComponents/paneBackgroundDetect";
+import streamDisplay from "./streamContent.vue";
+
+export default {
+  name: "BackgroundDetectContent",
+
+  components: {
+    paneBackgroundDetect,
+    streamDisplay
+  }
+};
+</script>