fix datatree sub and unsubscribe at tree

src/boot/websocket.ts

@@ -4,8 +4,12 @@ import { initWebSocket } from 'src/services/websocket';
 
 export default boot(({ app }) => {
   const $q = app.config.globalProperties.$q as QVueGlobals;
+  const host = window.location.hostname; // gets current domain or IP
+  const port = 8100; // your WebSocket port
+
+  const randomId = Math.floor(Math.random() * 10001); // random number from 0 to 10000
+  const ws = initWebSocket(`ws://${host}:${port}/ws?id=q${randomId}`, $q);
 
-  const ws = initWebSocket('ws://127.0.0.1:8100/ws?id=quasar', $q);
   app.config.globalProperties.$socket = ws;
   ws.connect();
 });

src/components/DBMTree.vue

@@ -7,10 +7,11 @@
           dense
           :nodes="dbmData"
           node-key="key"
-          :default-expand-all="true"
+          :default-expand-all="false"
+          v-model:expanded="expanded"
         >
           <template v-slot:[`default-header`]="props">
-            <div class="row items-center text-blue">
+            <div class="row items-center text-blue" @click="ClickNode(props.node)">
               <div
                 class="row items-center text-blue"
                 @contextmenu.prevent="openContextMenu($event, props.node)"
@@ -25,12 +26,12 @@
               />
             </div>
             <q-popup-edit
-              v-if="props.node.value !== undefined"
+              v-if="props.node.value !== undefined && props.node.value !== ''"
               v-model="props.node.value"
               class="q-ml-xl bg-grey text-white"
-              @save="onValueEdit(props.node)"
+              @save="(val) => onValueEdit(val, props.node)"
             >
-              <template v-if="props.node.value !== undefined" v-slot="scope">
+              <template v-slot="scope">
                 <q-input
                   dark
                   color="white"
@@ -56,29 +57,34 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import type { TreeNode } from 'src/composables/dbmTree';
-import { subs, dbmData, buildTree } from 'src/composables/dbmTree';
+import {
+  dbmData,
+  buildTree,
+  // addChildrentoTree,
+  getSubscriptionsByUuid,
+  addChildrentoTree,
+  removeSubtreeByParentKey,
+} from 'src/composables/dbmTree';
 import { openContextMenu } from 'src/composables/useContextMenu';
 import SubMenu from 'src/components/SubMenu.vue';
 import { QCard } from 'quasar';
 import { send } from 'src/services/websocket';
+import { onBeforeRouteLeave } from 'vue-router';
 
 onMounted(() => {
   send({
     subscribe: [
       {
         path: '.*',
-        depth: 2,
+        depth: 1,
       },
     ],
   })
     .then((response) => {
       if (response?.subscribe) {
-        subs.value = response.subscribe;
-        dbmData.value = buildTree(subs.value);
-      } else {
-        console.log('Response from server:', response);
+        dbmData.value = buildTree(response.subscribe ?? []);
       }
     })
     .catch((err) => {
@@ -86,40 +92,106 @@ onMounted(() => {
     });
 });
 
-// function updateValue(uuid: string, newValue: string) {
-//   const target = subs.value.find((s) => s.uuid === uuid);
-//   if (target) {
-//     target.value = newValue;
-//     treeData.value = buildTree(subs.value);
-//   }
-// }
+onBeforeRouteLeave((to, from, next) => {
+  send({
+    unsubscribe: [
+      {
+        path: '.*',
+        depth: 0,
+      },
+    ],
+  })
+    .then((response) => {
+      if (response?.subscribe) {
+        dbmData.value = buildTree(response.subscribe ?? []);
+      }
+    })
+    .catch((err) => {
+      console.error('Error fetching data:', err);
+    });
+  next();
+});
 
-function onValueEdit(node: TreeNode) {
-  console.log(88, node.value);
+const expanded = ref<string[]>([]);
 
-  const sub = subs.value.find((s) => s.path === node.key);
-  if (sub) {
-    sub.value = node.value;
+function ClickNode(node: TreeNode) {
+  if (node.key === 'DBM') return;
+
+  const nodeKey = node.key as string;
+
+  const isExpanded = expanded.value.includes(nodeKey);
+
+  if (isExpanded) {
+    // Collapse the parent node and its children
+    //expanded.value = expanded.value.filter((k) => k !== nodeKey && !k.startsWith(nodeKey));
+
+    // 2. Send unsubscribe request
     send({
-      set: [
+      unsubscribe: [
         {
-          path: sub.path ?? '',
-          value: Number(node.value),
+          uuid: nodeKey,
+          path: '.*',
+          depth: 0,
         },
       ],
     })
       .then((response) => {
-        if (response?.subscribe) {
-          subs.value = response.subscribe;
-          dbmData.value = buildTree(subs.value);
-        } else {
-          console.log('Response from server:', response);
+        if (response?.unsubscribe) {
+          removeSubtreeByParentKey(nodeKey);
         }
+        requestAnimationFrame(() => {
+          expanded.value = expanded.value.filter((k) => k !== nodeKey && !k.startsWith(nodeKey));
+        });
       })
       .catch((err) => {
-        console.error('Error fetching data:', err);
+        console.error('Error during unsubscribe:', err);
       });
-    // Optionally: push to server or log
+
+    // 3. Do not continue further — important!
+    return;
+  }
+
+  // 4. If not expanded, send subscribe and expand
+  send({
+    subscribe: [
+      {
+        uuid: nodeKey,
+        path: '.*',
+        depth: 1,
+      },
+    ],
+  })
+    .then((response) => {
+      if (response?.subscribe) {
+        addChildrentoTree(response.subscribe);
+
+        // Delay to ensure reactive updates apply cleanly
+        requestAnimationFrame(() => {
+          if (!expanded.value.includes(nodeKey)) {
+            expanded.value.push(nodeKey);
+          }
+        });
+      }
+    })
+    .catch((err) => {
+      console.error('Error during subscribe:', err);
+    });
+}
+
+function onValueEdit(newValue: undefined, node: TreeNode) {
+  console.log(node.value, node.value === undefined);
+  const sub = getSubscriptionsByUuid(node.key);
+  if (sub) {
+    send({
+      set: [
+        {
+          path: sub.path ?? '',
+          value: newValue,
+        },
+      ],
+    }).catch((err) => {
+      console.error('Error fetching data:', err);
+    });
   }
 }
 </script>

src/components/DomeLight.vue

@@ -95,15 +95,22 @@
           color="purple"
           style="opacity: 0.8"
         />
+        <div class="colums q-ma-xl">
+          <q-btn color="secondary" @click="settings = !settings" icon="settings">Settings</q-btn>
+          <SettingDialog :settings-dialog="settings"></SettingDialog>
+        </div>
       </q-card-section>
     </q-card>
   </div>
 </template>
 
 <script setup lang="ts">
-import { watch, reactive } from 'vue';
+import { watch, reactive, ref } from 'vue';
 import type { Light } from 'src/models/Light';
 import { send } from 'src/services/websocket';
+import SettingDialog from 'src/components/SettingDomeLight.vue';
+
+const settings = ref(false);
 
 const light = reactive<Light>({
   State: false,

src/components/DragPad.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="row q-ma-xs">
+    <q-item-label class="text-bold">Tilt</q-item-label>
+    <q-slider
+      class="q-mr-sm"
+      vertical
+      :reverse="!props.reverseTilt"
+      v-model="tilt"
+      :min="0"
+      :max="100"
+      :step="1"
+      label
+      color="black"
+      style="opacity: 1"
+    />
+    <div class="column items-center q-ml-sm">
+      <div
+        class="bg-grey-3"
+        style="
+          width: 200px;
+          height: 200px;
+          position: relative;
+          border: 1px solid #ccc;
+          border-radius: 8px;
+          touch-action: none;
+        "
+        @mousedown="startDrag"
+        @touchstart="startTouch"
+        @touchend="stopTouch"
+        ref="pad"
+      >
+        <div class="marker" :style="markerStyle" :class="{ crosshair: dragging }"></div>
+      </div>
+      <q-item-label class="text-bold">Pan</q-item-label>
+      <q-slider
+        :reverse="props.reversePan"
+        class="q-ml-sm"
+        v-model="pan"
+        :min="0"
+        :max="100"
+        :step="1"
+        label
+        color="black"
+        style="opacity: 1"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+
+const pad = ref<HTMLElement | null>(null);
+const dragging = ref(false);
+
+const pan = defineModel<number>('pan', { default: 0 });
+const tilt = defineModel<number>('tilt', { default: 0 });
+const props = defineProps<{
+  reversePan: boolean;
+  reverseTilt: boolean;
+}>();
+
+const markerStyle = computed(() => ({
+  position: 'absolute' as const,
+  top: `${2 * (props.reverseTilt ? tilt.value : 100 - tilt.value)}px`,
+  left: `${2 * (props.reversePan ? 100 - pan.value : pan.value)}px`,
+  width: '12px',
+  height: '12px',
+  borderRadius: '50%',
+  background: 'red',
+  border: '2px solid white',
+  cursor: 'pointer',
+  transform: 'translate(-50%, -50%)',
+}));
+
+function startDrag(e: MouseEvent) {
+  dragging.value = true;
+  updatePosition(e);
+  window.addEventListener('mousemove', onDrag);
+  window.addEventListener('mouseup', stopDrag);
+}
+
+function stopDrag() {
+  dragging.value = false;
+  window.removeEventListener('mousemove', onDrag);
+  window.removeEventListener('mouseup', stopDrag);
+}
+
+function startTouch(e: TouchEvent) {
+  e.preventDefault(); // ✅ block scroll
+  const touch = e.touches[0];
+  if (!touch) return;
+  dragging.value = true;
+  updatePosition(touch);
+  window.addEventListener('touchmove', onTouch, { passive: false });
+  window.addEventListener('touchend', stopTouch);
+}
+
+function onTouch(e: TouchEvent) {
+  e.preventDefault(); // ✅ block scroll
+  if (!dragging.value) return;
+  const touch = e.touches[0];
+  if (!touch) return;
+  updatePosition(touch);
+}
+
+function onDrag(e: MouseEvent) {
+  e.preventDefault(); // optional, for extra safety
+  if (!dragging.value) return;
+  updatePosition(e);
+}
+
+function stopTouch() {
+  dragging.value = false;
+  window.removeEventListener('touchmove', onTouch);
+  window.removeEventListener('touchend', stopTouch);
+}
+
+function updatePosition(e: MouseEvent | Touch) {
+  if (!pad.value) return;
+
+  const rect = pad.value.getBoundingClientRect();
+  const newX = Math.min(Math.max(0, e.clientX - rect.left), rect.width);
+  const newY = Math.min(Math.max(0, e.clientY - rect.top), rect.height);
+
+  pan.value = props.reversePan
+    ? Math.round((1 - newX / rect.width) * 100)
+    : Math.round((newX / rect.width) * 100);
+  tilt.value = props.reverseTilt
+    ? Math.round((newY / rect.height) * 100)
+    : Math.round(100 - (newY / rect.height) * 100);
+}
+</script>

src/components/MovingHead.vue

@@ -12,9 +12,9 @@ select
       <q-card-section class="q-mt-md q-mr-sm row items-start">
         <div class="column justify-center q-ma-lg" style="height: 200px">
           <q-btn
-            @click="light.State = !light.State"
+            @click="changeState"
             round
-            :color="light.State ? 'yellow' : 'blue'"
+            :color="brightness > 0 ? 'yellow' : 'blue'"
             icon="lightbulb"
             style="position: relative"
           />
@@ -25,7 +25,7 @@ select
           class="q-ma-lg"
           vertical
           reverse
-          v-model="light.Brightness"
+          v-model="brightness"
           :min="0"
           :max="100"
           :step="1"
@@ -37,7 +37,7 @@ select
           class="q-ma-lg"
           vertical
           reverse
-          v-model="light.Red"
+          v-model="red"
           :min="0"
           :max="100"
           :step="1"
@@ -50,7 +50,7 @@ select
           class="q-ma-lg"
           vertical
           reverse
-          v-model="light.Green"
+          v-model="green"
           :min="0"
           :max="100"
           :step="1"
@@ -63,7 +63,7 @@ select
           class="q-ma-lg"
           vertical
           reverse
-          v-model="light.Blue"
+          v-model="blue"
           :min="0"
           :max="100"
           :step="1"
@@ -76,7 +76,7 @@ select
           class="q-ma-lg"
           vertical
           reverse
-          v-model="light.White"
+          v-model="white"
           :min="0"
           :max="100"
           :step="1"
@@ -89,7 +89,7 @@ select
           class="q-ma-lg"
           vertical
           reverse
-          v-model="light.Zoom"
+          v-model="zoom"
           :min="0"
           :max="100"
           :step="1"
@@ -97,53 +97,21 @@ select
           color="black"
           style="opacity: 1"
         />
-        <div class="row q-ma-sm">
-          <q-item-label class="text-bold">Tilt</q-item-label>
-          <q-slider
-            class="q-mr-sm"
-            vertical
-            reverse
-            v-model="light.Tilt"
-            :min="0"
-            :max="100"
-            :step="1"
-            label
-            color="black"
-            style="opacity: 1"
+        <div class="column items-center q-ml-sm">
+          <DragPad
+            v-model:pan="pan"
+            v-model:reverse-pan="reversePan"
+            v-model:tilt="tilt"
+            v-model:reverse-tilt="reverseTilt"
           />
-          <div class="column items-center q-ml-sm">
-            <div
-              class="bg-grey-3"
-              style="
-                width: 200px;
-                height: 200px;
-                position: relative;
-                border: 1px solid #ccc;
-                border-radius: 8px;
-              "
-              @mousedown="startDrag"
-              @mousemove="onDrag"
-              @mouseup="stopDrag"
-              @mouseleave="stopDrag"
-              @touchstart="startTouch"
-              @touchmove="onTouch"
-              @touchend="stopDrag"
-              ref="pad"
-            >
-              <div class="marker" :style="markerStyle" :class="{ crosshair: dragging }"></div>
-            </div>
-            <q-item-label class="text-bold">Pan</q-item-label>
-            <q-slider
-              class="q-ml-sm"
-              v-model="light.Pan"
-              :min="0"
-              :max="100"
-              :step="1"
-              label
-              color="black"
-              style="opacity: 1"
-            />
-          </div>
+        </div>
+        <div class="colums q-ma-xl">
+          <q-btn color="secondary" @click="settings = !settings" icon="settings">Settings</q-btn>
+          <SettingDialog
+            :settings-dialog="settings"
+            v-model:reverse-pan="reversePan"
+            v-model:reverse-tilt="reverseTilt"
+          ></SettingDialog>
         </div>
       </q-card-section>
     </q-card>
@@ -151,56 +119,41 @@ select
 </template>
 
 <script setup lang="ts">
-import { ref, watch, reactive, computed, onMounted } from 'vue';
-import type { MovingHead } from 'src/models/MovingHead';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { send } from 'src/services/websocket';
-import { subs, dbmData, buildTree } from 'src/composables/dbmTree';
+import { LocalStorage } from 'quasar';
+import { getSubscriptionsByPath, buildTree, dbmData } from 'src/composables/dbmTree';
+import DragPad from './DragPad.vue';
+import SettingDialog from './SettingMovingHead.vue';
 
-const pad = ref<HTMLElement | null>(null);
-const dragging = ref(false);
-
-const light = reactive<MovingHead>({
-  State: false,
-  Brightness: 0,
-  Red: 0,
-  Green: 0,
-  Blue: 0,
-  White: 0,
-  Zoom: 0,
-  Pan: 50,
-  Tilt: 50,
-});
-
-const markerStyle = computed(() => ({
-  position: 'absolute' as const,
-  top: `${2 * (100 - light.Tilt)}px`,
-  left: `${2 * light.Pan}px`,
-  width: '12px',
-  height: '12px',
-  borderRadius: '50%',
-  background: 'red',
-  border: '2px solid white',
-  cursor: 'pointer',
-  transform: 'translate(-50%, -50%)',
-}));
+const red = updateValue('MovingHead:Red', true);
+const green = updateValue('MovingHead:Green', true);
+const blue = updateValue('MovingHead:Blue', true);
+const white = updateValue('MovingHead:White', true);
+const brightness = updateBrightnessValue('MovingHead:Brightness');
+const pan = updateValue('MovingHead:Pan', true);
+const tilt = updateValue('MovingHead:Tilt', true);
+const zoom = updateValue('MovingHead:Zoom');
+const state = updateValue('MovingHead:State');
+const settings = ref(false);
+const reversePan = ref(false);
+const reverseTilt = ref(false);
 
 onMounted(() => {
-  LoadData();
-});
+  reversePan.value = LocalStorage.getItem('reversePan') ?? false;
+  reverseTilt.value = LocalStorage.getItem('reverseTilt') ?? false;
 
-function LoadData() {
   send({
     subscribe: [
       {
-        path: 'MovingHead',
-        depth: 2,
+        path: 'MovingHead:.*',
+        depth: 0,
       },
     ],
   })
     .then((response) => {
       if (response?.subscribe) {
-        subs.value = response.subscribe;
-        dbmData.value = buildTree(subs.value);
+        dbmData.value = buildTree(response.subscribe ?? []);
       } else {
         console.log('Response from server:', response);
       }
@@ -208,175 +161,81 @@ function LoadData() {
     .catch((err) => {
       console.error('Error fetching data:', err);
     });
-  send({
-    get: [
-      {
-        path: 'MovingHead',
-        query: { depth: 2 },
-      },
-    ],
-  })
-    .then((response) => {
-      if (response?.get) {
-        const pathToLightKey: Record<string, keyof typeof light> = {
-          'MovingHead:Dimmer': 'Brightness',
-          'MovingHead:State': 'State',
-          'MovingHead:Red': 'Red',
-          'MovingHead:Green': 'Green',
-          'MovingHead:Blue': 'Blue',
-          'MovingHead:White': 'White',
-          'MovingHead:Zoom': 'Zoom',
-          'MovingHead:Pan': 'Pan',
-          'MovingHead:Tilt': 'Tilt',
-        };
-
-        Object.entries(pathToLightKey).forEach(([path, key]) => {
-          const sub = subs.value.find((s) => s.path === path);
-          if (sub) {
-            if (key === 'State') {
-              light[key] = Boolean(sub.value);
-            } else {
-              light[key] = Math.round((100 / 255) * Number(sub.value));
-            }
-          }
-        });
-      } else {
-        console.log('Response from server:', response);
-      }
-    })
-    .catch((err) => {
-      console.error('Error fetching data:', err);
-    });
-}
-
-function startDrag(e: MouseEvent) {
-  dragging.value = true;
-  updatePosition(e);
-}
-
-function onDrag(e: MouseEvent) {
-  if (!dragging.value) return;
-  updatePosition(e);
-}
-
-function stopDrag() {
-  dragging.value = false;
-}
-
-function startTouch(e: TouchEvent) {
-  const touch = e.touches[0];
-  if (!touch) return;
-  dragging.value = true;
-  updatePosition(touch);
-}
-
-function onTouch(e: TouchEvent) {
-  if (!dragging.value) return;
-  const touch = e.touches[0];
-  if (!touch) return;
-  updatePosition(touch);
-}
-
-function updatePosition(e: MouseEvent | Touch) {
-  if (!pad.value) return;
-  const rect = pad.value.getBoundingClientRect();
-  const newX = Math.min(Math.max(0, e.clientX - rect.left), rect.width);
-  const newY = Math.min(Math.max(0, e.clientY - rect.top), rect.height);
-
-  light.Pan = Math.round((newX / rect.width) * 100);
-  light.Tilt = Math.round(100 - (newY / rect.height) * 100);
-}
-
-watch(light, (newVal: MovingHead) => {
-  send({
-    set: [
-      {
-        // State
-        path: 'MovingHead:State',
-        value: Number(newVal.State),
-      },
-      {
-        // Red
-        path: 'MovingHead:Red',
-        value: Math.round((255 / 100) * newVal.Red * Number(newVal.State)),
-      },
-      {
-        //Red fine
-        path: 'MovingHead:RedFine',
-        value: Math.round((255 / 100) * newVal.Red * Number(newVal.State)),
-      },
-      {
-        // Green
-        path: 'MovingHead:Green',
-        value: Math.round((255 / 100) * newVal.Green * Number(newVal.State)),
-      },
-      {
-        // Green fine
-        path: 'MovingHead:GreenFine',
-        value: Math.round((255 / 100) * newVal.Green * Number(newVal.State)),
-      },
-      {
-        // Blue
-        path: 'MovingHead:Blue',
-        value: Math.round((255 / 100) * newVal.Blue * Number(newVal.State)),
-      },
-      {
-        // Blue fine
-        path: 'MovingHead:BlueFine',
-        value: Math.round((255 / 100) * newVal.Blue * Number(newVal.State)),
-      },
-      {
-        // White
-        path: 'MovingHead:White',
-        value: Math.round((255 / 100) * newVal.White * Number(newVal.State)),
-      },
-      {
-        // White fine
-        path: 'MovingHead:WhiteFine',
-        value: Math.round((255 / 100) * newVal.White * newVal.Brightness * Number(newVal.State)),
-      },
-      {
-        // Dimmer
-        path: 'MovingHead:Brightness',
-        value: Math.round((255 / 100) * newVal.Brightness * Number(newVal.State)),
-      },
-      {
-        // Dimmer fine
-        path: 'MovingHead:BrightnessFine',
-        value: Math.round((255 / 100) * newVal.Brightness * Number(newVal.State)),
-      },
-      {
-        // Zoom
-        path: 'MovingHead:Zoom',
-        value: Math.round((255 / 100) * newVal.Zoom),
-      },
-      {
-        // Pan
-        path: 'MovingHead:Pan',
-        value: Math.round((255 / 100) * newVal.Pan),
-      },
-      {
-        // Pan fine
-        path: 'MovingHead:PanFine',
-        value: Math.round((255 / 100) * newVal.Pan),
-      },
-      {
-        // Tilt
-        path: 'MovingHead:Tilt',
-        value: Math.round((255 / 100) * newVal.Tilt),
-      },
-      {
-        // Tilt fine
-        path: 'MovingHead:TiltFine',
-        value: Math.round((255 / 100) * newVal.Tilt),
-      },
-    ],
-  })
-    .then((response) => {
-      console.log('Response from server:', response);
-    })
-    .catch((err) => {
-      console.error('Error fetching data:', err);
-    });
 });
+
+onUnmounted(() => {
+  send({
+    unsubscribe: [
+      {
+        path: 'MovingHead:.*',
+        depth: 0,
+      },
+    ],
+  })
+    .then((response) => {
+      if (response?.subscribe) {
+        dbmData.value = buildTree(response.subscribe ?? []);
+      } else {
+        console.log('Response from server:', response);
+      }
+    })
+    .catch((err) => {
+      console.error('Error fetching data:', err);
+    });
+});
+
+function changeState() {
+  if (brightness.value === 0) {
+    if (state.value === 0) {
+      brightness.value = 100;
+      return;
+    }
+    brightness.value = state.value;
+    return;
+  }
+  state.value = brightness.value;
+  brightness.value = 0;
+}
+
+function updateValue(path: string, isDouble = false) {
+  return computed({
+    get() {
+      const sub = getSubscriptionsByPath(path);
+      const value = sub ? Number(sub.value ?? 0) : 0;
+      return isDouble ? Math.round((100 / 255) * value) : Math.round((100 / 255) * value);
+    },
+    set(val) {
+      const baseValue = Math.round((255 / 100) * val);
+      const setPaths = [{ path, value: baseValue }];
+
+      if (isDouble) {
+        setPaths.push({ path: `${path}Fine`, value: baseValue });
+      }
+
+      send({
+        set: setPaths,
+      }).catch((err) => console.error(`Failed to update ${path.split(':')[1]}:`, err));
+    },
+  });
+}
+
+function updateBrightnessValue(path: string) {
+  return computed({
+    get() {
+      const sub = getSubscriptionsByPath(path);
+      const value = sub ? Number(sub.value ?? 0) : 0;
+      return Math.round((100 / 255) * value);
+    },
+    set(val) {
+      const baseValue = Math.round((255 / 100) * val);
+      const setPaths = [{ path, value: baseValue }];
+      setPaths.push({ path: `${path}Fine`, value: baseValue });
+      setPaths.push({ path: `MovingHead:Strobe`, value: 255 });
+
+      send({
+        set: setPaths,
+      }).catch((err) => console.error(`Failed to update ${path.split(':')[1]}:`, err));
+    },
+  });
+}
 </script>

src/components/SettingDomeLight.vue

@@ -0,0 +1,27 @@
+<template>
+  <q-dialog v-model="settingsDialog">
+    <q-card style="min-width: 300px">
+      <q-card-section>
+        <div class="text-h6">Settings</div>
+      </q-card-section>
+
+      <q-card-section>
+        <q-btn>Normal</q-btn>
+      </q-card-section>
+      <q-card-section> </q-card-section>
+      <q-card-actions align="right">
+        <q-btn flat label="Cancel" v-close-popup />
+        <q-btn flat label="Save" @click="saveSettings" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+const settingsDialog = defineModel<boolean>('settingsDialog', { default: false, required: true });
+
+function saveSettings() {
+  // Save logic here
+  settingsDialog.value = false;
+}
+</script>

src/components/SettingMovingHead.vue

@@ -0,0 +1,50 @@
+<template>
+  <q-dialog v-model="settingsDialog">
+    <q-card style="min-width: 300px">
+      <q-card-section>
+        <div class="text-h6">Settings</div>
+      </q-card-section>
+
+      <q-card-section>
+        <q-btn
+          :icon="!reverseTilt ? 'swap_vert' : undefined"
+          :icon-right="reverseTilt ? 'swap_vert' : undefined"
+          @click="reverseTilt = !reverseTilt"
+          >{{ reverseTilt ? 'Reversed Tilt' : 'Normal Tilt' }}</q-btn
+        >
+      </q-card-section>
+      <q-card-section>
+        <q-btn
+          :icon="!reversePan ? 'swap_vert' : undefined"
+          :icon-right="reversePan ? 'swap_vert' : undefined"
+          @click="reversePan = !reversePan"
+          >{{ reversePan ? 'Reversed Pan' : 'Normal Pan' }}</q-btn
+        >
+      </q-card-section>
+      <q-card-section>
+        <q-input type="number" label="Start Address" v-model:model-value="startAddress"></q-input>
+      </q-card-section>
+      <q-card-actions align="right">
+        <q-btn flat label="Cancel" v-close-popup />
+        <q-btn flat label="Save" @click="saveSettings" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { LocalStorage } from 'quasar';
+const settingsDialog = defineModel<boolean>('settingsDialog', { default: false, required: true });
+const reversePan = defineModel<boolean>('reversePan', { default: false, required: true });
+const reverseTilt = defineModel<boolean>('reverseTilt', { default: false, required: true });
+const startAddress = defineModel<number>('startAddress', { default: 0 });
+
+function saveSettings() {
+  LocalStorage.set('reversePan', reversePan.value);
+  LocalStorage.set('reverseTilt', reverseTilt.value);
+
+  console.log(88, startAddress.value);
+
+  settingsDialog.value = false;
+}
+</script>

src/components/SubMenu.vue

@@ -17,6 +17,7 @@ import { send } from 'src/services/websocket';
 
 function handleAction(action: string) {
   console.log(`Action '${action}' on node:`, contextMenu.value.node);
+
   // Add your actual logic here
   switch (action) {
     case 'Add':

src/composables/dbmTree.ts

@@ -1,14 +1,14 @@
 import type { Subs } from 'src/models/Subscribe';
-import { ref } from 'vue';
+import { ref, nextTick } from 'vue';
 
-export const dbmData = ref<TreeNode[]>(buildTree([]));
+const Subscriptions = ref<Subs>([]);
 
-export const subs = ref<Subs>([]);
+export const dbmData = ref<TreeNode[]>([]);
 
 export interface TreeNode {
-  path: string;
+  path: string | undefined;
   key?: string; // optional: useful for QTree's node-key
-  value?: string | undefined;
+  value?: string | number | boolean | undefined;
   children?: TreeNode[];
 }
 
@@ -23,6 +23,8 @@ export function buildTree(subs: Subs): TreeNode[] {
 
   const root: TreeMap = {};
 
+  Subscriptions.value = subs;
+
   for (const item of subs) {
     const pathParts = item.path?.split(':') ?? [];
     let current = root;
@@ -63,3 +65,46 @@ export function buildTree(subs: Subs): TreeNode[] {
     },
   ];
 }
+
+export function getTreeElementByPath(path: string) {
+  return dbmData.value.find((s) => s.path === path);
+}
+
+export function getSubscriptionsByUuid(uid: string | undefined) {
+  return Subscriptions.value.find((s) => s.uuid === uid);
+}
+
+export function addChildrentoTree(subs: Subs) {
+  Subscriptions.value.push(...subs);
+  void nextTick(() => {
+    dbmData.value = buildTree(Subscriptions.value);
+  });
+}
+
+export function removeSubtreeByParentKey(parentKey: string) {
+  // Find the parent node using its uuid
+  const parent = Subscriptions.value.find((s) => s.uuid === parentKey);
+  if (!parent || !parent.path) return;
+
+  const parentPath = parent.path;
+
+  // Now filter out the children, but NOT the parent itself
+  Subscriptions.value = Subscriptions.value.filter((s) => {
+    // Keep the parent itself (don't remove it)
+    if (s.uuid === parentKey) return true;
+
+    // Remove any child whose path starts with parentPath + '/' (descendants)
+    return !s.path?.startsWith(parentPath + ':');
+  });
+
+  // Rebuild the tree after removing children, but keeping the parent
+  dbmData.value = buildTree(Subscriptions.value);
+}
+
+export function getSubscriptionsByPath(path: string) {
+  return Subscriptions.value.find((s) => s.path === path);
+}
+
+export function getAllSubscriptions() {
+  return Subscriptions.value;
+}

src/models/Response.ts

@@ -7,5 +7,6 @@ export type Response = {
   get?: Gets;
   set?: Sets;
   subscribe?: Subs;
+  unsubscribe?: Subs;
   publish?: Pubs;
 };

src/models/Set.ts

@@ -1,6 +1,6 @@
 export type Set = {
   path: string;
-  value: number | undefined;
+  value: number | boolean | undefined;
 };
 
 export type Sets = Set[];

src/models/Subscribe.ts

@@ -1,8 +1,8 @@
 export type Subscribe = {
-  uuid?: string;
-  path?: string;
+  uuid?: string | undefined;
+  path?: string | undefined;
   depth?: number;
-  value?: string | undefined;
+  value?: string | number | boolean | undefined;
 };
 
 export type Subs = Subscribe[];

src/pages/DataPage.vue

@@ -1,5 +1,4 @@
 <template>
-  <h1>Test Page</h1>
   <DBMTree></DBMTree>
 </template>
 

src/pages/IndexPage.vue

@@ -1,9 +1,23 @@
 <template>
   <q-page>
-    <moving-head></moving-head>
+    <q-tabs v-model="tab">
+      <q-tab name="movingHead" label="Moving Head" />
+      <q-tab name="dome" label="Dome" />
+    </q-tabs>
+    <q-tab-panels v-model="tab" animated class="text-white">
+      <q-tab-panel name="movingHead">
+        <moving-head />
+      </q-tab-panel>
+      <q-tab-panel name="dome">
+        <Dome />
+      </q-tab-panel>
+    </q-tab-panels>
   </q-page>
 </template>
 
 <script setup lang="ts">
 import MovingHead from 'src/components/MovingHead.vue';
+import Dome from 'src/components/DomeLight.vue';
+import { ref } from 'vue';
+const tab = ref('movingHead');
 </script>

src/services/websocket.ts

@@ -2,10 +2,16 @@ import type { Response } from 'src/models/Response';
 import type { Publish } from 'src/models/Publish';
 import type { Request } from 'src/models/Request';
 import type { QVueGlobals } from 'quasar';
-import { subs, buildTree, dbmData } from 'src/composables/dbmTree';
-import { ref } from 'vue';
+import {
+  getAllSubscriptions,
+  getSubscriptionsByPath,
+  buildTree,
+  dbmData,
+} from 'src/composables/dbmTree';
+import { ref, reactive } from 'vue';
 
 const pendingResponses = new Map<string, (data: Response | undefined) => void>();
+export const lastKnownValues = reactive(new Map<string, string>());
 
 export let socket: WebSocket | null = null;
 const isConnected = ref(false);
@@ -47,16 +53,38 @@ export function initWebSocket(url: string, $q?: QVueGlobals) {
       if (id && pendingResponses.has(id)) {
         pendingResponses.get(id)?.(message); // resolve the promise
         pendingResponses.delete(id);
-      } else if (message.publish) {
-        message.publish.forEach((pub: Publish) => {
-          const target = subs.value.find((s) => s.path === pub.path);
-          if (target) {
-            target.value = pub.value ?? '';
-            dbmData.value = buildTree(subs.value);
+        return;
+      }
+
+      if (message.publish) {
+        let changed = false;
+
+        (message.publish as Publish[]).forEach((pub) => {
+          const path = pub.path;
+          const value = pub.value ?? '';
+
+          if (path === undefined) {
+            return;
+          }
+
+          const oldValue = lastKnownValues.get(path);
+          if (oldValue !== value) {
+            lastKnownValues.set(path, value); // this is now reactive
+
+            const existing = getSubscriptionsByPath(path);
+            if (existing) {
+              existing.value = value;
+            } else {
+              getAllSubscriptions().push({ path, value, uuid: pub.uuid });
+            }
+
+            changed = true;
           }
         });
-      } else {
-        console.warn('Unmatched message:', message);
+
+        if (changed) {
+          dbmData.value = buildTree(getAllSubscriptions()); // rebuild reactive tree
+        }
       }
     };
   };
@@ -67,10 +95,6 @@ export function initWebSocket(url: string, $q?: QVueGlobals) {
     }
   };
 
-  // onBeforeUnmount(() => {
-  //   close();
-  // });
-
   return {
     connect,
     close,
@@ -107,7 +131,6 @@ export function send(data: Request): Promise<Response | undefined> {
 
   return new Promise((resolve) => {
     pendingResponses.set(id, resolve);
-
     waitForSocketConnection()
       .then(() => {
         socket?.send(JSON.stringify(payload));
@@ -121,5 +144,5 @@ export function send(data: Request): Promise<Response | undefined> {
 }
 
 function generateId(): string {
-  return Math.random().toString(36).substr(2, 9); // simple unique ID
+  return Math.random().toString(36).substring(2, 9); // simple unique ID
 }