fix minor bugs and abstract more

quasar.config.ts

@@ -11,7 +11,7 @@ export default defineConfig((/* ctx */) => {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli-vite/boot-files
-    boot: [],
+    boot: ['websocket'],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#css
     css: ['app.scss'],

src/boot/websocket.ts

@@ -0,0 +1,25 @@
+import { boot } from 'quasar/wrappers';
+import type { QVueGlobals } from 'quasar';
+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);
+
+  app.config.globalProperties.$socket = ws;
+  ws.connect();
+});
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $socket: {
+      connect: () => void;
+      close: () => void;
+      socket: WebSocket | null;
+    };
+  }
+}

src/components/DBMTree.vue

@@ -28,7 +28,7 @@
               v-if="props.node.value !== undefined"
               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">
                 <q-input
@@ -57,17 +57,14 @@
 
 <script setup lang="ts">
 import { onMounted } from 'vue';
-import { useWebSocket } from 'src/composables/useWebSocket';
 import type { TreeNode } from 'src/composables/dbmTree';
 import { subs, dbmData, buildTree } from 'src/composables/dbmTree';
 import { openContextMenu } from 'src/composables/useContextMenu';
 import SubMenu from 'src/components/SubMenu.vue';
 import { QCard } from 'quasar';
-
-const { connect, send } = useWebSocket('ws://127.0.0.1:8100/ws?id=quasar');
+import { send } from 'src/services/websocket';
 
 onMounted(() => {
-  connect();
   send({
     subscribe: [
       {
@@ -97,32 +94,19 @@ onMounted(() => {
 //   }
 // }
 
-function onValueEdit(node: TreeNode) {
-  console.log(88, node.value);
-
-  const sub = subs.value.find((s) => s.path === node.key);
+function onValueEdit(newValue: undefined, node: TreeNode) {
+  const sub = subs.value.find((s) => s.uuid === node.key);
   if (sub) {
-    sub.value = node.value;
     send({
       set: [
         {
           path: sub.path ?? '',
-          value: Number(node.value),
+          value: newValue,
         },
       ],
-    })
-      .then((response) => {
-        if (response?.subscribe) {
-          subs.value = response.subscribe;
-          dbmData.value = buildTree(subs.value);
-        } else {
-          console.log('Response from server:', response);
-        }
-      })
-      .catch((err) => {
-        console.error('Error fetching data:', err);
-      });
-    // Optionally: push to server or log
+    }).catch((err) => {
+      console.error('Error fetching data:', err);
+    });
   }
 }
 </script>

src/components/DragPad.vue

@@ -0,0 +1,119 @@
+<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
+      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;
+        "
+        @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
+        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, defineModel } 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 markerStyle = computed(() => ({
+  position: 'absolute' as const,
+  top: `${2 * (100 - tilt.value)}px`,
+  left: `${2 * 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 onDrag(e: MouseEvent) {
+  if (!dragging.value) return;
+  updatePosition(e);
+}
+
+function stopDrag() {
+  dragging.value = false;
+  window.removeEventListener('mousemove', onDrag);
+  window.removeEventListener('mouseup', stopDrag);
+}
+
+function startTouch(e: TouchEvent) {
+  const touch = e.touches[0];
+  if (!touch) return;
+  dragging.value = true;
+  updatePosition(touch);
+  window.addEventListener('touchmove', onTouch);
+  window.addEventListener('touchend', stopTouch);
+}
+
+function onTouch(e: TouchEvent) {
+  if (!dragging.value) return;
+  const touch = e.touches[0];
+  if (!touch) return;
+  updatePosition(touch);
+}
+
+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 = Math.round((newX / rect.width) * 100);
+  tilt.value = Math.round(100 - (newY / rect.height) * 100);
+}
+</script>

src/components/LightComponent.vue

@@ -101,11 +101,9 @@
 </template>
 
 <script setup lang="ts">
-import { watch, onMounted, reactive } from 'vue';
-import { useWebSocket } from 'src/composables/useWebSocket';
+import { watch, reactive } from 'vue';
 import type { Light } from 'src/models/Light';
-
-const { connect, send } = useWebSocket('ws://127.0.0.1:8100/ws?id=quasar');
+import { send } from 'src/services/websocket';
 
 const light = reactive<Light>({
   State: false,
@@ -118,10 +116,6 @@ const light = reactive<Light>({
   Purple: 0,
 });
 
-onMounted(() => {
-  connect();
-});
-
 watch(light, (newVal: Light) => {
   send({
     set: [

src/components/MovingHead.vue

@@ -10,11 +10,11 @@ select
   <div class="q-pa-md">
     <q-card>
       <q-card-section class="q-mt-md q-mr-sm row items-start">
-        <div class="column justify-center q-mr-lg" style="height: 200px">
+        <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"
           />
@@ -22,10 +22,10 @@ select
         <q-item-label class="text-bold">Dimmer</q-item-label>
         <q-slider
           label
-          class="q-mr-lg"
+          class="q-ma-lg"
           vertical
           reverse
-          v-model="light.Brightness"
+          v-model="brightness"
           :min="0"
           :max="100"
           :step="1"
@@ -34,10 +34,10 @@ select
         />
         <q-item-label class="text-bold">Red</q-item-label>
         <q-slider
-          class="q-mr-lg"
+          class="q-ma-lg"
           vertical
           reverse
-          v-model="light.Red"
+          v-model="red"
           :min="0"
           :max="100"
           :step="1"
@@ -47,10 +47,10 @@ select
         />
         <q-item-label class="text-bold">Green</q-item-label>
         <q-slider
-          class="q-mr-lg"
+          class="q-ma-lg"
           vertical
           reverse
-          v-model="light.Green"
+          v-model="green"
           :min="0"
           :max="100"
           :step="1"
@@ -60,10 +60,10 @@ select
         />
         <q-item-label class="text-bold">Blue</q-item-label>
         <q-slider
-          class="q-mr-lg"
+          class="q-ma-lg"
           vertical
           reverse
-          v-model="light.Blue"
+          v-model="blue"
           :min="0"
           :max="100"
           :step="1"
@@ -71,12 +71,12 @@ select
           color="blue"
           style="opacity: 0.8"
         />
-        <q-item-label class="text-bold">White</q-item-label>
+        <q-item-label class="text-bold items-center">White</q-item-label>
         <q-slider
-          class="q-mr-lg"
+          class="q-ma-lg"
           vertical
           reverse
-          v-model="light.White"
+          v-model="white"
           :min="0"
           :max="100"
           :step="1"
@@ -86,23 +86,10 @@ select
         />
         <q-item-label class="text-bold">Zoom</q-item-label>
         <q-slider
-          class="q-mr-lg"
+          class="q-ma-lg"
           vertical
           reverse
-          v-model="light.Zoom"
-          :min="0"
-          :max="100"
-          :step="1"
-          label
-          color="black"
-          style="opacity: 1"
-        />
-        <q-item-label class="text-bold">Tilt</q-item-label>
-        <q-slider
-          class="q-mr-sm"
-          vertical
-          reverse
-          v-model="light.Tilt"
+          v-model="zoom"
           :min="0"
           :max="100"
           :step="1"
@@ -110,38 +97,10 @@ select
           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;
-            "
-            @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"
-          />
+          <DragPad v-model:pan="pan" v-model:tilt="tilt" />
+          {{ pan }} {{ tilt }}
         </div>
       </q-card-section>
     </q-card>
@@ -149,167 +108,95 @@ select
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, reactive, computed } from 'vue';
-import { useWebSocket } from 'src/composables/useWebSocket';
-import type { MovingHead } from 'src/models/MovingHead';
+import { computed, onMounted } from 'vue';
+import { send } from 'src/services/websocket';
+import { subs, buildTree, dbmData } from 'src/composables/dbmTree';
+import DragPad from './DragPad.vue';
 
-const { connect, send } = useWebSocket('ws://127.0.0.1:8100/ws?id=quasar');
-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 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');
 
 onMounted(() => {
-  connect();
-});
-
-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%)',
-}));
-
-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);
-  console.log(light.Pan, light.Tilt);
-}
-
-watch(light, (newVal: MovingHead) => {
   send({
-    set: [
+    subscribe: [
       {
-        // Red
-        path: 'MovingHead:001:Red',
-        value: Math.round((255 / 100) * newVal.Red * Number(newVal.State)),
-      },
-      {
-        //Red fine
-        path: 'MovingHead:001:RedFine',
-        value: Math.round((255 / 100) * newVal.Red * Number(newVal.State)),
-      },
-      {
-        // Green
-        path: 'MovingHead:001:Green',
-        value: Math.round((255 / 100) * newVal.Green * Number(newVal.State)),
-      },
-      {
-        // Green fine
-        path: 'MovingHead:001:GreenFine',
-        value: Math.round((255 / 100) * newVal.Green * Number(newVal.State)),
-      },
-      {
-        // Blue
-        path: 'MovingHead:001:Blue',
-        value: Math.round((255 / 100) * newVal.Blue * Number(newVal.State)),
-      },
-      {
-        // Blue fine
-        path: 'MovingHead:001:BlueFine',
-        value: Math.round((255 / 100) * newVal.Blue * Number(newVal.State)),
-      },
-      {
-        // White
-        path: 'MovingHead:001:White',
-        value: Math.round((255 / 100) * newVal.White * Number(newVal.State)),
-      },
-      {
-        // White fine
-        path: 'MovingHead:001:WhiteFine',
-        value: Math.round((255 / 100) * newVal.White * newVal.Brightness * Number(newVal.State)),
-      },
-      {
-        // Dimmer
-        path: 'MovingHead:001:Dimmer',
-        value: Math.round((255 / 100) * newVal.Brightness * Number(newVal.State)),
-      },
-      {
-        // Dimmer fine
-        path: 'MovingHead:001:DimmerFine',
-        value: Math.round((255 / 100) * newVal.Brightness * Number(newVal.State)),
-      },
-      {
-        // Zoom
-        path: 'MovingHead:001:Zoom',
-        value: Math.round((255 / 100) * newVal.Zoom),
-      },
-      {
-        // Pan
-        path: 'MovingHead:001:Pan',
-        value: Math.round((255 / 100) * newVal.Pan),
-      },
-      {
-        // Pan fine
-        path: 'MovingHead:001:PanFine',
-        value: Math.round((255 / 100) * newVal.Pan),
-      },
-      {
-        // Tilt
-        path: 'MovingHead:001:Tilt',
-        value: Math.round((255 / 100) * newVal.Tilt),
-      },
-      {
-        // Tilt fine
-        path: 'MovingHead:001:TiltFine',
-        value: Math.round((255 / 100) * newVal.Tilt),
+        path: '.*',
+        depth: 2,
       },
     ],
   })
     .then((response) => {
-      console.log('Response from server:', response);
+      if (response?.subscribe) {
+        subs.value = response.subscribe;
+        dbmData.value = buildTree(subs.value);
+      } 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 = subs.value.find((s) => s.path === 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 = subs.value.find((s) => s.path === 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/SubMenu.vue

@@ -13,8 +13,7 @@
 
 <script setup lang="ts">
 import { contextMenu } from 'src/composables/useContextMenu';
-import { useWebSocket } from 'src/composables/useWebSocket';
-const { send } = useWebSocket('ws://127.0.0.1:8100/ws?id=quasar');
+import { send } from 'src/services/websocket';
 
 function handleAction(action: string) {
   console.log(`Action '${action}' on node:`, contextMenu.value.node);

src/models/Set.ts

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

src/models/Subscribe.ts

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

src/pages/IndexPage.vue

@@ -1,11 +1,9 @@
 <template>
   <q-page>
-    <light-component />
     <moving-head></moving-head>
   </q-page>
 </template>
 
 <script setup lang="ts">
-import LightComponent from 'src/components/LightComponent.vue';
 import MovingHead from 'src/components/MovingHead.vue';
 </script>

src/services/websocket.ts

@@ -1,18 +1,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 { onBeforeUnmount, ref } from 'vue';
-import { useQuasar } from 'quasar';
+import { ref } from 'vue';
 
 const pendingResponses = new Map<string, (data: Response | undefined) => void>();
 
-let socket: WebSocket | null = null;
+export let socket: WebSocket | null = null;
 const isConnected = ref(false);
 
-export function useWebSocket(url: string) {
-  const $q = useQuasar();
-
+export function initWebSocket(url: string, $q?: QVueGlobals) {
   const connect = () => {
     socket = new WebSocket(url);
 
@@ -22,22 +20,24 @@ export function useWebSocket(url: string) {
     };
     socket.onclose = () => {
       isConnected.value = false;
-      $q.notify({
+      console.log('WebSocket disconnected');
+      $q?.notify({
         message: 'WebSocket disconnected',
         color: 'orange',
         position: 'bottom-right',
         icon: 'warning',
-        timeout: 5000,
+        timeout: 10000,
       });
     };
     socket.onerror = (err) => {
+      console.log(`WebSocket error: ${err.type}`);
       isConnected.value = false;
-      $q.notify({
+      $q?.notify({
         message: `WebSocket error: ${err.type}`,
         color: 'red',
         position: 'bottom-right',
         icon: 'error',
-        timeout: 5000,
+        timeout: 10000,
       });
     };
     socket.onmessage = (event) => {
@@ -52,9 +52,9 @@ export function useWebSocket(url: string) {
           const target = subs.value.find((s) => s.path === pub.path);
           if (target) {
             target.value = pub.value ?? '';
-            dbmData.value = buildTree(subs.value);
           }
         });
+        dbmData.value = buildTree(subs.value);
       } else {
         console.warn('Unmatched message:', message);
       }
@@ -67,13 +67,12 @@ export function useWebSocket(url: string) {
     }
   };
 
-  onBeforeUnmount(() => {
-    close();
-  });
+  // onBeforeUnmount(() => {
+  //   close();
+  // });
 
   return {
     connect,
-    send,
     close,
     socket,
   };
@@ -102,7 +101,7 @@ function waitForSocketConnection(): Promise<void> {
   });
 }
 
-function send(data: Request): Promise<Response | undefined> {
+export function send(data: Request): Promise<Response | undefined> {
   const id = generateId();
   const payload = { ...data, id };