Move background detect settings into SlideScan

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

@@ -1,129 +0,0 @@
-<template>
-  <div ref="backgroundDetectContent" class="uk-padding-small">
-    <div>
-      <ul uk-accordion="multiple: true">
-        <li>
-          <a class="uk-accordion-title" href="#">Configure</a>
-          <div class="uk-accordion-content">
-            <h4 v-if="backgroundDetectorDisplayName" class="detector-name">
-              {{ backgroundDetectorDisplayName }}
-            </h4>
-            <server-specified-property-control
-              v-for="(setting, index) in backgroundDetectorSettings"
-              :key="'detector_setting' + index"
-              :property-data="setting"
-            />
-          </div>
-        </li>
-      </ul>
-      <div class="uk-margin">
-        <action-button
-          thing="camera"
-          action="set_background"
-          submit-label="Set Background"
-          :can-terminate="false"
-          :poll-interval="0.1"
-          @response="alertBackgroundSet"
-          @error="modalError"
-        />
-      </div>
-      <div class="uk-margin">
-        <!--Once status is read this should be disabled if not ready..-->
-        <action-button
-          thing="camera"
-          action="image_is_sample"
-          submit-label="Check Current Image"
-          :is-disabled="!ready"
-          :can-terminate="false"
-          :poll-interval="0.1"
-          @response="alertImageLabel"
-          @error="modalError"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import ActionButton from "../../labThingsComponents/actionButton.vue";
-import ServerSpecifiedPropertyControl from "../../labThingsComponents/serverSpecifiedPropertyControl.vue";
-import { useIntersectionObserver } from "@vueuse/core";
-
-export default {
-  components: {
-    ActionButton,
-    ServerSpecifiedPropertyControl,
-  },
-
-  data() {
-    return {
-      ready: false,
-      backgroundDetectorName: undefined,
-      backgroundDetectorDisplayName: undefined,
-      backgroundDetectorSettings: [],
-      animate: false,
-    };
-  },
-
-  async created() {
-    await this.readSettings();
-  },
-
-  mounted() {
-    useIntersectionObserver(
-      this.$refs.backgroundDetectContent,
-      ([{ isIntersecting }]) => {
-        this.visibilityChanged(isIntersecting);
-      },
-      {
-        threshold: 0.0,
-      },
-    );
-  },
-
-  methods: {
-    async safeReadSettings() {
-      if (!this.$store.state.connected) return;
-
-      try {
-        await this.readSettings();
-      } catch (error) {
-        console.error("Error reading background detector settings:", error);
-      }
-    },
-
-    visibilityChanged(isVisible) {
-      if (isVisible) {
-        this.safeReadSettings();
-      }
-    },
-    alertBackgroundSet() {
-      this.modalNotify(`Background image has been updated`);
-    },
-    alertImageLabel(r) {
-      let label = r.output[0] ? "sample" : "background";
-      this.modalNotify(`Current image is ${label} (${r.output[1]})`);
-    },
-    readSettings: async function () {
-      this.backgroundDetectorName = await this.readThingProperty(
-        "camera",
-        "background_detector_name",
-      );
-      if (this.backgroundDetectorName) {
-        this.ready = await this.readThingProperty(this.backgroundDetectorName, "ready");
-        this.backgroundDetectorSettings =
-          (await this.getThingEndpoint(this.backgroundDetectorName, "settings_ui")) || [];
-        this.backgroundDetectorDisplayName = await this.readThingProperty(
-          this.backgroundDetectorName,
-          "display_name",
-        );
-      }
-    },
-  },
-};
-</script>
-<style scoped lang="less">
-.detector-name {
-  margin-bottom: 0.5rem;
-}
-</style>

webapp/src/components/tabContentComponents/backgroundDetectContent.vue

@@ -1,25 +0,0 @@
-<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>