From 3ebc4578d390aad31ea429a8d73945f08e0e35d4 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Mon, 17 Nov 2025 16:25:18 +0000
Subject: [PATCH] Show which background detector is active in GUI

---
 .../paneBackgroundDetect.vue                           | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue b/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
index 4a41c055..9de2ec45 100644
--- a/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
+++ b/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
@@ -5,6 +5,9 @@
         <li>
           <a class="uk-accordion-title" href="#">Configure</a>
           <div class="uk-accordion-content">
+            <h4 v-if="backgroundDetectorName" class="detector-name">
+              {{ backgroundDetectorName }}
+            </h4>
             <input-from-schema
               v-if="backgroundDetectorStatus"
               v-model="backgroundDetectorStatus.settings"
@@ -59,6 +62,7 @@ export default {
   data() {
     return {
       backgroundDetectorStatus: undefined,
+      backgroundDetectorName: undefined,
       animate: false,
     };
   },
@@ -90,6 +94,7 @@ export default {
       this.modalNotify(`Current image is ${label} (${r.output[1]})`);
     },
     readSettings: async function () {
+      this.backgroundDetectorName = await this.readThingProperty("camera", "detector_name");
       this.backgroundDetectorStatus = await this.readThingProperty(
         "camera",
         "background_detector_status",
@@ -106,3 +111,8 @@ export default {
   },
 };
 </script>
+<style scoped lang="less">
+.detector-name {
+  margin-bottom: 0.5rem;
+}
+</style>