modify component moving head

src/components/MovingHead.vue

@@ -97,10 +97,21 @@ select
           color="black"
           style="opacity: 1"
         />
-
         <div class="column items-center q-ml-sm">
-          <DragPad v-model:pan="pan" v-model:tilt="tilt" />
+          <DragPad
-          {{ pan }} {{ tilt }}
+            v-model:pan="pan"
+            v-model:reverse-pan="reversePan"
+            v-model:tilt="tilt"
+            v-model:reverse-tilt="reverseTilt"
+          />
+        </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>
@@ -108,10 +119,12 @@ select
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { send } from 'src/services/websocket';
-import { subs, buildTree, dbmData } 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 red = updateValue('MovingHead:Red', true);
 const green = updateValue('MovingHead:Green', true);
@@ -122,20 +135,46 @@ 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(() => {
+  reversePan.value = LocalStorage.getItem('reversePan') ?? false;
+  reverseTilt.value = LocalStorage.getItem('reverseTilt') ?? false;
+
   send({
     subscribe: [
       {
-        path: '.*',
+        path: 'MovingHead:.*',
-        depth: 2,
+        depth: 0,
       },
     ],
   })
     .then((response) => {
       if (response?.subscribe) {
-        subs.value = response.subscribe;
+        dbmData.value = buildTree(response.subscribe ?? []);
-        dbmData.value = buildTree(subs.value);
+      } else {
+        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);
       }
@@ -161,7 +200,7 @@ function changeState() {
 function updateValue(path: string, isDouble = false) {
   return computed({
     get() {
-      const sub = subs.value.find((s) => s.path === path);
+      const sub = getSubscriptionsByPath(path);
       const value = sub ? Number(sub.value ?? 0) : 0;
       return isDouble ? Math.round((100 / 255) * value) : Math.round((100 / 255) * value);
     },
@@ -183,7 +222,7 @@ function updateValue(path: string, isDouble = false) {
 function updateBrightnessValue(path: string) {
   return computed({
     get() {
-      const sub = subs.value.find((s) => s.path === path);
+      const sub = getSubscriptionsByPath(path);
       const value = sub ? Number(sub.value ?? 0) : 0;
       return Math.round((100 / 255) * value);
     },

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':