abstract dbm and light composable and components and upgrade light user gui for fine graining with + and -
This commit is contained in:
Adrian Zürcher
@@ -1,197 +0,0 @@
|
||||
<template>
|
||||
<q-card>
|
||||
<div class="row">
|
||||
<q-card-section class="col-4">
|
||||
<q-tree
|
||||
class="text-blue text-bold"
|
||||
dense
|
||||
:nodes="dbmData"
|
||||
node-key="key"
|
||||
:default-expand-all="false"
|
||||
v-model:expanded="expanded"
|
||||
>
|
||||
<template v-slot:[`default-header`]="props">
|
||||
<div class="row items-center text-blue" @click="ClickNode(props.node)">
|
||||
<div
|
||||
class="row items-center text-blue"
|
||||
@contextmenu.prevent="openContextMenu($event, props.node)"
|
||||
></div>
|
||||
<div>{{ props.node.path }}</div>
|
||||
<q-input
|
||||
v-if="props.node.value !== undefined"
|
||||
v-model="props.node.value"
|
||||
dense
|
||||
borderless
|
||||
class="q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
<q-popup-edit
|
||||
v-if="props.node.value !== undefined && props.node.value !== ''"
|
||||
v-model="props.node.value"
|
||||
class="q-ml-xl bg-grey text-white"
|
||||
@save="(val) => onValueEdit(val, props.node)"
|
||||
>
|
||||
<template v-slot="scope">
|
||||
<q-input
|
||||
dark
|
||||
color="white"
|
||||
v-model="scope.value"
|
||||
dense
|
||||
autofocus
|
||||
counter
|
||||
@keyup.enter="scope.set"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="edit" />
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</q-popup-edit>
|
||||
</template>
|
||||
</q-tree>
|
||||
<sub-menu></sub-menu>
|
||||
</q-card-section>
|
||||
<q-card-section class="col-8 text-center"> Test </q-card-section>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import type { TreeNode } 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: 1,
|
||||
},
|
||||
],
|
||||
})
|
||||
.then((response) => {
|
||||
if (response?.subscribe) {
|
||||
dbmData.value = buildTree(response.subscribe ?? []);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Error fetching data:', err);
|
||||
});
|
||||
});
|
||||
|
||||
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();
|
||||
});
|
||||
|
||||
const expanded = ref<string[]>([]);
|
||||
|
||||
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({
|
||||
unsubscribe: [
|
||||
{
|
||||
uuid: nodeKey,
|
||||
path: '.*',
|
||||
depth: 0,
|
||||
},
|
||||
],
|
||||
})
|
||||
.then((response) => {
|
||||
if (response?.unsubscribe) {
|
||||
removeSubtreeByParentKey(nodeKey);
|
||||
}
|
||||
requestAnimationFrame(() => {
|
||||
expanded.value = expanded.value.filter((k) => k !== nodeKey && !k.startsWith(nodeKey));
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Error during unsubscribe:', err);
|
||||
});
|
||||
|
||||
// 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>
|
||||
@@ -1,133 +0,0 @@
|
||||
<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>
|
||||
@@ -1,241 +0,0 @@
|
||||
// channel description // 1 Red // 2 Red fine // 3 Green // 4 Green fine // 5 Blue // 6 Blue fine //
|
||||
7 White // 8 White fine // 9 Linear CTO ??? // 10 Macro Color ??? // 11 Strobe // 12 Dimmer // 13
|
||||
Dimer fine // 14 Pan // 15 Pan fine // 16 Tilt // 17 Tilt fine // 18 Function // 19 Reset // 20 Zoom
|
||||
// 21 Zoom rotation // 22 Shape selection // 23 Shape speed // 24 Shape fade // 25 Shape Red // 26
|
||||
Shape Green // 27 Shape Blue // 28 Shape White // 29 Shape Dimmer // 30 Background dimmer // 31
|
||||
Shape transition // 32 Shape Offset // 33 Foreground strobe // 34 Background strobe // 35 Background
|
||||
select
|
||||
|
||||
<template>
|
||||
<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-ma-lg" style="height: 200px">
|
||||
<q-btn
|
||||
@click="changeState"
|
||||
round
|
||||
:color="brightness > 0 ? 'yellow' : 'blue'"
|
||||
icon="lightbulb"
|
||||
style="position: relative"
|
||||
/>
|
||||
</div>
|
||||
<q-item-label class="text-bold">Dimmer</q-item-label>
|
||||
<q-slider
|
||||
label
|
||||
class="q-ma-lg"
|
||||
vertical
|
||||
reverse
|
||||
v-model="brightness"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="1"
|
||||
color="black"
|
||||
style="opacity: 0.5"
|
||||
/>
|
||||
<q-item-label class="text-bold">Red</q-item-label>
|
||||
<q-slider
|
||||
class="q-ma-lg"
|
||||
vertical
|
||||
reverse
|
||||
v-model="red"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="1"
|
||||
label
|
||||
color="red"
|
||||
style="opacity: 0.8"
|
||||
/>
|
||||
<q-item-label class="text-bold">Green</q-item-label>
|
||||
<q-slider
|
||||
class="q-ma-lg"
|
||||
vertical
|
||||
reverse
|
||||
v-model="green"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="1"
|
||||
label
|
||||
color="green"
|
||||
style="opacity: 0.8"
|
||||
/>
|
||||
<q-item-label class="text-bold">Blue</q-item-label>
|
||||
<q-slider
|
||||
class="q-ma-lg"
|
||||
vertical
|
||||
reverse
|
||||
v-model="blue"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="1"
|
||||
label
|
||||
color="blue"
|
||||
style="opacity: 0.8"
|
||||
/>
|
||||
<q-item-label class="text-bold items-center">White</q-item-label>
|
||||
<q-slider
|
||||
class="q-ma-lg"
|
||||
vertical
|
||||
reverse
|
||||
v-model="white"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="1"
|
||||
label
|
||||
color="grey"
|
||||
style="opacity: 0.3"
|
||||
/>
|
||||
<q-item-label class="text-bold">Zoom</q-item-label>
|
||||
<q-slider
|
||||
class="q-ma-lg"
|
||||
vertical
|
||||
reverse
|
||||
v-model="zoom"
|
||||
: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>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
import { send } from 'src/services/websocket';
|
||||
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);
|
||||
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(() => {
|
||||
reversePan.value = LocalStorage.getItem('reversePan') ?? false;
|
||||
reverseTilt.value = LocalStorage.getItem('reverseTilt') ?? false;
|
||||
|
||||
send({
|
||||
subscribe: [
|
||||
{
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
||||
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>
|
||||
@@ -1,50 +0,0 @@
|
||||
<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>
|
||||
@@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<q-menu v-model="contextMenu.show" :offset="[contextMenu.x, contextMenu.y]" context-menu>
|
||||
<q-list>
|
||||
<q-item clickable v-close-popup @click="handleAction('Add')">
|
||||
<q-item-section>Add Datapoint</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-close-popup @click="handleAction('Delete')">
|
||||
<q-item-section>Delete Datapoint</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { contextMenu } from 'src/composables/useContextMenu';
|
||||
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':
|
||||
console.log(2);
|
||||
send({
|
||||
get: [
|
||||
{
|
||||
path: '.*',
|
||||
query: {
|
||||
depth: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
.then((response) => {
|
||||
if (response?.get) {
|
||||
console.log(response);
|
||||
} else {
|
||||
console.log('Response from server:', response);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Error fetching data:', err);
|
||||
});
|
||||
console.log(4);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
0
src/components/dbm/AddDatapoint.vue
Normal file
0
src/components/dbm/AddDatapoint.vue
Normal file
246
src/components/dbm/DBMTree.vue
Normal file
246
src/components/dbm/DBMTree.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<q-card>
|
||||
<div class="row">
|
||||
<q-card-section class="col-4 scroll tree-container">
|
||||
<q-tree
|
||||
class="text-blue text-bold"
|
||||
dense
|
||||
:nodes="dbmData"
|
||||
node-key="key"
|
||||
no-transition
|
||||
:default-expand-all="false"
|
||||
v-model:expanded="expanded"
|
||||
@lazy-load="onLazyLoad"
|
||||
>
|
||||
<template v-slot:[`default-header`]="props">
|
||||
<div
|
||||
class="row items-center text-blue"
|
||||
@contextmenu.prevent.stop="openContextMenu($event, props.node)"
|
||||
>
|
||||
<div class="row items-center text-blue"></div>
|
||||
<div>{{ props.node.path }}</div>
|
||||
</div>
|
||||
<q-popup-edit
|
||||
v-if="props.node.value !== undefined && props.node.value !== ''"
|
||||
v-model="props.node.value"
|
||||
class="q-ml-xl bg-grey text-white"
|
||||
@save="(val) => onValueEdit(val, props.node)"
|
||||
>
|
||||
<template v-slot="scope">
|
||||
<q-input
|
||||
dark
|
||||
color="white"
|
||||
v-model="scope.value"
|
||||
dense
|
||||
autofocus
|
||||
counter
|
||||
@keyup.enter="scope.set"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="edit" />
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</q-popup-edit>
|
||||
</template>
|
||||
</q-tree>
|
||||
<sub-menu :node="selectedNode"></sub-menu>
|
||||
</q-card-section>
|
||||
<DataTable :rows="Subscriptions" class="col-8" />
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { watch, onMounted, ref } from 'vue';
|
||||
import DataTable from './dataTable.vue';
|
||||
import type { TreeNode } from 'src/composables/dbm/dbmTree';
|
||||
import {
|
||||
dbmData,
|
||||
buildTree,
|
||||
getSubscriptionsByUuid,
|
||||
addChildrentoTree,
|
||||
removeSubtreeByParentKey,
|
||||
getAllSubscriptions,
|
||||
} from 'src/composables/dbm/dbmTree';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { openContextMenu } from 'src/composables/dbm/useContextMenu';
|
||||
import { NotifyResponse } from 'src/composables/notify';
|
||||
import SubMenu from 'src/components/dbm/SubMenu.vue';
|
||||
import { QCard } from 'quasar';
|
||||
import { subscribe, unsubscribe, setValues } from 'src/services/websocket';
|
||||
import { onBeforeRouteLeave } from 'vue-router';
|
||||
import { api } from 'boot/axios';
|
||||
import type { Subs } from 'src/models/Subscribe';
|
||||
|
||||
const $q = useQuasar();
|
||||
const expanded = ref<string[]>([]);
|
||||
const selectedNode = ref<TreeNode | null>(null);
|
||||
const ZERO_UUID = '00000000-0000-0000-0000-000000000000';
|
||||
const Subscriptions = ref<Subs>([]);
|
||||
|
||||
onMounted(() => {
|
||||
const payload = {
|
||||
get: [
|
||||
{
|
||||
path: '.*',
|
||||
query: { depth: 1 },
|
||||
},
|
||||
],
|
||||
};
|
||||
api
|
||||
.post('/json_data', payload)
|
||||
.then((res) => {
|
||||
if (res.data.get) {
|
||||
dbmData.value = buildTree(res.data.get);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
NotifyResponse($q, err, 'error');
|
||||
});
|
||||
});
|
||||
|
||||
onBeforeRouteLeave(() => {
|
||||
unsubscribe([
|
||||
{
|
||||
path: '.*',
|
||||
depth: 0,
|
||||
},
|
||||
]).catch((err) => {
|
||||
NotifyResponse($q, err, 'error');
|
||||
});
|
||||
});
|
||||
|
||||
function onLazyLoad({
|
||||
node,
|
||||
done,
|
||||
fail,
|
||||
}: {
|
||||
node: TreeNode;
|
||||
done: (children: TreeNode[]) => void;
|
||||
fail: () => void;
|
||||
}): void {
|
||||
//first unsubsrice nodes
|
||||
|
||||
unsubscribe([
|
||||
{
|
||||
path: '.*',
|
||||
depth: 0,
|
||||
},
|
||||
])
|
||||
.then(() => {
|
||||
Subscriptions.value = [];
|
||||
})
|
||||
.catch((err) => {
|
||||
NotifyResponse($q, err, 'error');
|
||||
});
|
||||
|
||||
// now subscribe nodes
|
||||
subscribe([
|
||||
{
|
||||
uuid: node.key ?? ZERO_UUID,
|
||||
path: '',
|
||||
depth: 2,
|
||||
},
|
||||
])
|
||||
.then((resp) => {
|
||||
if (resp?.subscribe) {
|
||||
// Optional: update your internal store too
|
||||
addChildrentoTree(resp?.subscribe);
|
||||
|
||||
const toRemove = new Set(
|
||||
resp.subscribe.filter((sub) => sub.uuid !== ZERO_UUID).map((sub) => sub.uuid),
|
||||
);
|
||||
|
||||
Subscriptions.value = getAllSubscriptions().filter((sub) => toRemove.has(sub.uuid));
|
||||
|
||||
done(dbmData.value);
|
||||
} else {
|
||||
done([]); // no children returned
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
NotifyResponse($q, err, 'error');
|
||||
fail(); // trigger the fail handler
|
||||
});
|
||||
}
|
||||
|
||||
function onValueEdit(newValue: undefined, node: TreeNode) {
|
||||
console.log(node.value, node.value === undefined);
|
||||
const sub = getSubscriptionsByUuid(node.key);
|
||||
if (sub) {
|
||||
setValues([
|
||||
{
|
||||
path: sub.path ?? '',
|
||||
value: newValue,
|
||||
},
|
||||
]).catch((err) => {
|
||||
NotifyResponse($q, err, 'error');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
expanded,
|
||||
(newVal, oldVal) => {
|
||||
const collapsedKeys = oldVal.filter((key) => !newVal.includes(key));
|
||||
collapsedKeys.forEach((key: string) => {
|
||||
// WebSocket unsubscribe
|
||||
unsubscribe([
|
||||
{
|
||||
uuid: key,
|
||||
path: '.*',
|
||||
depth: 0,
|
||||
},
|
||||
])
|
||||
.then((resp) => {
|
||||
// Remove children of this node from the tree
|
||||
removeSubtreeByParentKey(key);
|
||||
if (resp?.unsubscribe) {
|
||||
const toRemove = new Set(
|
||||
resp.unsubscribe.filter((sub) => sub.uuid !== ZERO_UUID).map((sub) => sub.uuid),
|
||||
);
|
||||
|
||||
Subscriptions.value = Subscriptions.value.filter((sub) => !toRemove.has(sub.uuid));
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
NotifyResponse($q, err, 'error');
|
||||
});
|
||||
});
|
||||
},
|
||||
{ deep: false },
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tree-container {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
.tree-container {
|
||||
max-height: 50vh;
|
||||
}
|
||||
}
|
||||
@media (min-width: 600px) and (max-width: 1023px) {
|
||||
.tree-container {
|
||||
max-height: 60vh;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) and (max-width: 1439px) {
|
||||
.tree-container {
|
||||
max-height: 70vh;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
.tree-container {
|
||||
max-height: 80vh;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1920px) {
|
||||
.tree-container {
|
||||
max-height: 90vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
53
src/components/dbm/SubMenu.vue
Normal file
53
src/components/dbm/SubMenu.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<q-menu ref="contextMenuRef" context-menu>
|
||||
<q-list>
|
||||
<q-item clickable v-close-popup @click="handleAction('Add')">
|
||||
<q-item-section>Add Datapoint</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-close-popup @click="handleAction('Delete')">
|
||||
<q-item-section>Delete Datapoint</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
//import { useQuasar } from 'quasar';
|
||||
//import { NotifyResponse, NotifyError } from 'src/composables/notify';
|
||||
import { contextMenuState, contextMenuRef } from 'src/composables/dbm/useContextMenu';
|
||||
//import AddDatapoint from 'src/components/dbm/AddDatapoint.vue';
|
||||
//import { send } from 'src/services/websocket';
|
||||
|
||||
//const $q = useQuasar();
|
||||
|
||||
function handleAction(action: string) {
|
||||
console.log(`Action '${action}' on node:`, contextMenuState.value);
|
||||
|
||||
// Add your actual logic here
|
||||
switch (action) {
|
||||
case 'Add':
|
||||
// send({
|
||||
// set: [
|
||||
// {
|
||||
// uuid: contextMenuState.value?.key,
|
||||
// path: 'New',
|
||||
// type: 'BIT',
|
||||
// value: true,
|
||||
// create: true,
|
||||
// },
|
||||
// ],
|
||||
// })
|
||||
// .then((response) => {
|
||||
// if (response?.set) {
|
||||
// console.log(response);
|
||||
// } else {
|
||||
// NotifyResponse($q, response);
|
||||
// }
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// NotifyError($q, err);
|
||||
// });
|
||||
console.log(4);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
36
src/components/dbm/dataTable.vue
Normal file
36
src/components/dbm/dataTable.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="q-pa-md">
|
||||
<q-table
|
||||
v-if="props.rows.length > 0"
|
||||
style="height: 600px"
|
||||
flat
|
||||
bordered
|
||||
:title="props.rows[0]?.path"
|
||||
:rows="props.rows ?? []"
|
||||
:columns="columns"
|
||||
row-key="path"
|
||||
virtual-scroll
|
||||
:rows-per-page-options="[0]"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { QTableProps } from 'quasar';
|
||||
import type { Subscribe } from 'src/models/Subscribe';
|
||||
|
||||
// we generate lots of rows here
|
||||
const props = defineProps<{
|
||||
rows: Subscribe[];
|
||||
}>();
|
||||
|
||||
const columns = [
|
||||
{ name: 'path', label: 'Path', field: 'path', align: 'left' },
|
||||
{
|
||||
name: 'value',
|
||||
label: 'Value',
|
||||
field: 'value',
|
||||
align: 'left',
|
||||
},
|
||||
] as QTableProps['columns'];
|
||||
</script>
|
||||
@@ -105,11 +105,14 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useQuasar } from 'quasar';
|
||||
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';
|
||||
import { setValues } from 'src/services/websocket';
|
||||
import SettingDialog from 'src/components/lights/SettingDomeLight.vue';
|
||||
import { NotifyResponse } from 'src/composables/notify';
|
||||
|
||||
const $q = useQuasar();
|
||||
const settings = ref(false);
|
||||
|
||||
const light = reactive<Light>({
|
||||
@@ -124,8 +127,7 @@ const light = reactive<Light>({
|
||||
});
|
||||
|
||||
watch(light, (newVal: Light) => {
|
||||
send({
|
||||
set: [
|
||||
setValues([
|
||||
{
|
||||
path: 'Light:001:001',
|
||||
value: Math.round((255 / 10000) * newVal.Red * newVal.Brightness * Number(newVal.State)),
|
||||
@@ -150,13 +152,12 @@ watch(light, (newVal: Light) => {
|
||||
path: 'Light:001:006',
|
||||
value: Math.round((255 / 10000) * newVal.Purple * newVal.Brightness * Number(newVal.State)),
|
||||
},
|
||||
],
|
||||
})
|
||||
])
|
||||
.then((response) => {
|
||||
console.log('Response from server:', response);
|
||||
NotifyResponse($q, response);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Error fetching data:', err);
|
||||
NotifyResponse($q, err, 'error');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
238
src/components/lights/DragPad.vue
Normal file
238
src/components/lights/DragPad.vue
Normal file
@@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<div class="row items-start" style="height: auto; align-items: flex-start">
|
||||
<div class="row q-ma-xs">
|
||||
<div class="column items-center q-mr-md" :style="{ height: containerSize + 'px' }">
|
||||
<div class="column justify-between items-center" :style="{ height: containerSize + 'px' }">
|
||||
<q-item-label class="text-black text-bold q-mb-none">Tilt</q-item-label>
|
||||
<q-btn
|
||||
:size="buttonSize"
|
||||
round
|
||||
color="positive"
|
||||
icon="add_circle_outline"
|
||||
class="q-mb-md"
|
||||
@click="reverseTilt ? substractTiltOne : addTiltOne"
|
||||
v-touch-repeat:300:300:300:300:50.mouse="reverseTilt ? substractTiltOne : addTiltOne"
|
||||
/>
|
||||
<q-slider
|
||||
vertical
|
||||
:reverse="!props.reverseTilt"
|
||||
v-model="tilt"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="1"
|
||||
label
|
||||
class="col"
|
||||
color="black"
|
||||
style="opacity: 1"
|
||||
/>
|
||||
<q-btn
|
||||
:size="buttonSize"
|
||||
class="q-mt-sm"
|
||||
round
|
||||
color="negative"
|
||||
icon="remove_circle_outline"
|
||||
@click="reverseTilt ? addTiltOne : substractTiltOne"
|
||||
v-touch-repeat:300:300:300:300:50:50:50:50:20.mouse="
|
||||
reverseTilt ? addTiltOne : substractTiltOne
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column items-center q-ml-sm">
|
||||
<div
|
||||
class="bg-grey-3 responsive-box"
|
||||
style="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="q-ma-sm text-black text-bold">Pan</q-item-label>
|
||||
|
||||
<div class="q-gutter-sm row items-center full-width">
|
||||
<q-btn
|
||||
:size="buttonSize"
|
||||
class="q-mr-sm"
|
||||
round
|
||||
color="negative"
|
||||
icon="remove_circle_outline"
|
||||
@click="reversePan ? addPanOne : substractPanOne"
|
||||
v-touch-repeat:300:300:300:300:50:50:50:50:20.mouse="
|
||||
reversePan ? addPanOne : substractPanOne
|
||||
"
|
||||
/>
|
||||
<q-slider
|
||||
class="col"
|
||||
:reverse="props.reversePan"
|
||||
v-model="pan"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="1"
|
||||
label
|
||||
color="black"
|
||||
style="opacity: 1"
|
||||
/>
|
||||
<q-btn
|
||||
:size="buttonSize"
|
||||
class="q-ml-sm"
|
||||
round
|
||||
color="positive"
|
||||
icon="add_circle_outline"
|
||||
@click="reversePan ? substractPanOne : addPanOne"
|
||||
v-touch-repeat:300:300:300:300:50.mouse="reversePan ? substractPanOne : addPanOne"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||||
|
||||
const pad = ref<HTMLElement | null>(null);
|
||||
const dragging = ref(false);
|
||||
const containerSize = ref(0);
|
||||
|
||||
const pan = defineModel<number>('pan', { default: 0 });
|
||||
const tilt = defineModel<number>('tilt', { default: 0 });
|
||||
const props = defineProps<{
|
||||
reversePan: boolean;
|
||||
reverseTilt: boolean;
|
||||
}>();
|
||||
const buttonSize = computed(() => (containerSize.value <= 200 ? 'sm' : 'md'));
|
||||
|
||||
onMounted(() => {
|
||||
const updateSize = () => {
|
||||
const el = pad.value;
|
||||
if (el) {
|
||||
containerSize.value = el.offsetWidth;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('resize', updateSize);
|
||||
updateSize();
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', updateSize);
|
||||
});
|
||||
});
|
||||
|
||||
const scaleFactor = computed(() => containerSize.value / 100);
|
||||
// 200px → 2, 400px → 4, etc.
|
||||
|
||||
const markerStyle = computed(() => {
|
||||
const scale = scaleFactor.value;
|
||||
|
||||
return {
|
||||
position: 'absolute' as const,
|
||||
top: `${scale * (props.reverseTilt ? tilt.value : 100 - tilt.value)}px`,
|
||||
left: `${scale * (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);
|
||||
}
|
||||
|
||||
function addTiltOne() {
|
||||
if (tilt.value <= 255) {
|
||||
tilt.value++;
|
||||
}
|
||||
}
|
||||
|
||||
function substractTiltOne() {
|
||||
if (tilt.value >= 0) {
|
||||
tilt.value--;
|
||||
}
|
||||
}
|
||||
|
||||
function addPanOne() {
|
||||
if (pan.value <= 255) {
|
||||
pan.value++;
|
||||
}
|
||||
}
|
||||
|
||||
function substractPanOne() {
|
||||
if (pan.value >= 0) {
|
||||
pan.value--;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.responsive-box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.responsive-box {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
123
src/components/lights/LightBarCBL.vue
Normal file
123
src/components/lights/LightBarCBL.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<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">
|
||||
<q-btn
|
||||
@click="changeState"
|
||||
round
|
||||
:color="brightness > 0 ? 'yellow' : 'blue'"
|
||||
icon="lightbulb"
|
||||
style="position: relative"
|
||||
/>
|
||||
</div>
|
||||
<LightSlider
|
||||
title="Dimmer"
|
||||
:dbm-path="'LightBar:Brightness'"
|
||||
:opacity="0.5"
|
||||
class="q-ma-sm"
|
||||
></LightSlider>
|
||||
<LightSlider
|
||||
title="Strobe"
|
||||
:dbm-path="'LightBar:Strobe'"
|
||||
:opacity="0.5"
|
||||
class="q-ma-sm"
|
||||
></LightSlider>
|
||||
<LightSlider
|
||||
title="Program"
|
||||
:dbm-path="'LightBar:Program'"
|
||||
:opacity="0.5"
|
||||
class="q-ma-sm"
|
||||
></LightSlider>
|
||||
<LightSlider
|
||||
title="Program Speed"
|
||||
:dbm-path="'LightBar:Program:Speed'"
|
||||
:opacity="0.8"
|
||||
class="q-ma-sm"
|
||||
></LightSlider>
|
||||
<LightSlider
|
||||
title="Red"
|
||||
:dbm-path="'LightBar:Red'"
|
||||
color="red"
|
||||
:opacity="0.8"
|
||||
class="q-ma-sm"
|
||||
></LightSlider>
|
||||
<LightSlider
|
||||
title="Green"
|
||||
:dbm-path="'LightBar:Green'"
|
||||
:opacity="0.8"
|
||||
color="green"
|
||||
class="q-ma-sm"
|
||||
></LightSlider>
|
||||
<LightSlider
|
||||
title="Blue"
|
||||
:dbm-path="'LightBar:Blue'"
|
||||
:opacity="0.8"
|
||||
color="blue"
|
||||
class="q-ma-sm"
|
||||
></LightSlider>
|
||||
<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 { useQuasar } from 'quasar';
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { subscribe, unsubscribe } from 'src/services/websocket';
|
||||
import SettingDialog from 'src/components/lights/SettingDomeLight.vue';
|
||||
import { NotifyResponse } from 'src/composables/notify';
|
||||
import { updateValue, buildTree, dbmData } from 'src/composables/dbm/dbmTree';
|
||||
import LightSlider from './LightSlider.vue';
|
||||
|
||||
const $q = useQuasar();
|
||||
const settings = ref(false);
|
||||
const brightness = updateValue('LightBar:Brightness', $q);
|
||||
const state = updateValue('LightBar:State', $q);
|
||||
onMounted(() => {
|
||||
subscribe([
|
||||
{
|
||||
path: 'LightBar:.*',
|
||||
depth: 0,
|
||||
},
|
||||
])
|
||||
.then((response) => {
|
||||
if (response?.subscribe) {
|
||||
dbmData.value = buildTree(response.subscribe ?? []);
|
||||
} else {
|
||||
NotifyResponse($q, response);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
NotifyResponse($q, err, 'error');
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
unsubscribe([
|
||||
{
|
||||
path: '.*',
|
||||
depth: 0,
|
||||
},
|
||||
]).catch((err) => {
|
||||
NotifyResponse($q, err, 'error');
|
||||
});
|
||||
});
|
||||
|
||||
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;
|
||||
}
|
||||
</script>
|
||||
121
src/components/lights/LightSlider.vue
Normal file
121
src/components/lights/LightSlider.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div :class="'column items-center ' + props.class">
|
||||
<q-item-label :class="['text-bold', `text-${textColor}`]"><p v-html="title"></p></q-item-label>
|
||||
<q-btn
|
||||
size="sm"
|
||||
class="q-mb-sm"
|
||||
round
|
||||
color="positive"
|
||||
icon="add_circle_outline"
|
||||
@click="addOne"
|
||||
v-touch-repeat:300:300:300:300:50:50:50:50:20.mouse="addOne"
|
||||
/>
|
||||
<div>
|
||||
<q-slider
|
||||
:vertical="vertical"
|
||||
:reverse="reverse"
|
||||
v-model="localValue"
|
||||
:min="props.min"
|
||||
:max="props.max"
|
||||
:step="props.step"
|
||||
:label="props.label"
|
||||
:color="props.color"
|
||||
:style="{ opacity: props.opacity }"
|
||||
/>
|
||||
</div>
|
||||
<q-btn
|
||||
size="sm"
|
||||
class="q-my-md"
|
||||
round
|
||||
color="negative"
|
||||
icon="remove_circle_outline"
|
||||
@click="substractOne"
|
||||
v-touch-repeat:300:300:300:300:50:50:50:50:20.mouse="substractOne"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useQuasar } from 'quasar';
|
||||
import { updateValue } from 'src/composables/dbm/dbmTree';
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
dbmPath: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true,
|
||||
},
|
||||
dbmPath2: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
dbmPath3: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
dbmValue3: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: 'black',
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'black',
|
||||
},
|
||||
min: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
default: 100,
|
||||
},
|
||||
vertical: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
step: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
label: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
class: {
|
||||
type: String,
|
||||
default: 'q-mr-sm',
|
||||
},
|
||||
opacity: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const localValue = updateValue(props.dbmPath, $q, props.dbmPath2, props.dbmPath3, props.dbmValue3);
|
||||
|
||||
function addOne() {
|
||||
if (localValue.value <= 255) {
|
||||
localValue.value++;
|
||||
}
|
||||
}
|
||||
|
||||
function substractOne() {
|
||||
if (localValue.value >= 0) {
|
||||
localValue.value--;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
203
src/components/lights/MovingHead.vue
Normal file
203
src/components/lights/MovingHead.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
// channel description // 1 Red // 2 Red fine // 3 Green // 4 Green fine // 5 Blue // 6 Blue fine //
|
||||
7 White // 8 White fine // 9 Linear CTO ??? // 10 Macro Color ??? // 11 Strobe // 12 Dimmer // 13
|
||||
Dimer fine // 14 Pan // 15 Pan fine // 16 Tilt // 17 Tilt fine // 18 Function // 19 Reset // 20 Zoom
|
||||
// 21 Zoom rotation // 22 Shape selection // 23 Shape speed // 24 Shape fade // 25 Shape Red // 26
|
||||
Shape Green // 27 Shape Blue // 28 Shape White // 29 Shape Dimmer // 30 Background dimmer // 31
|
||||
Shape transition // 32 Shape Offset // 33 Foreground strobe // 34 Background strobe // 35 Background
|
||||
select
|
||||
|
||||
<template>
|
||||
<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-ma-lg" style="height: 200px">
|
||||
<q-btn
|
||||
@click="changeState"
|
||||
round
|
||||
:color="brightness > 0 ? 'yellow' : 'blue'"
|
||||
icon="lightbulb"
|
||||
style="position: relative"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<LightSlider
|
||||
title="Dimmer"
|
||||
:dbm-path="'MovingHead:Brightness'"
|
||||
:dbm-path2="'MovingHead:BrightnessFine'"
|
||||
:dbm-path3="'MovingHead:Strobe'"
|
||||
:dbm-value3="255"
|
||||
:opacity="0.5"
|
||||
class="q-ma-md"
|
||||
/>
|
||||
<LightSlider
|
||||
title="Red"
|
||||
:dbm-path="'MovingHead:Red'"
|
||||
:dbm-path2="'MovingHead:RedFine'"
|
||||
:opacity="0.8"
|
||||
color="red"
|
||||
class="q-ma-md"
|
||||
/>
|
||||
<LightSlider
|
||||
title="Green"
|
||||
:dbm-path="'MovingHead:Green'"
|
||||
:dbm-path2="'MovingHead:GreenFine'"
|
||||
:opacity="0.8"
|
||||
color="green"
|
||||
class="q-ma-md"
|
||||
/>
|
||||
<LightSlider
|
||||
title="Blue"
|
||||
:dbm-path="'MovingHead:Blue'"
|
||||
:dbm-path2="'MovingHead:BlueFine'"
|
||||
:opacity="0.8"
|
||||
color="blue"
|
||||
class="q-ma-md"
|
||||
/>
|
||||
<LightSlider
|
||||
title="White"
|
||||
:dbm-path="'MovingHead:White'"
|
||||
:dbm-path2="'MovingHead:WhiteFine'"
|
||||
:opacity="0.3"
|
||||
color="grey"
|
||||
class="q-ma-md"
|
||||
/>
|
||||
<LightSlider
|
||||
title="Zoom"
|
||||
:dbm-path="'MovingHead:Zoom'"
|
||||
:opacity="1"
|
||||
color="black"
|
||||
class="q-ma-md"
|
||||
/>
|
||||
<div>
|
||||
<DragPad
|
||||
class="q-ma-md"
|
||||
v-model:pan="pan"
|
||||
v-model:reverse-pan="settings.reversePan"
|
||||
v-model:tilt="tilt"
|
||||
v-model:reverse-tilt="settings.reverseTilt"
|
||||
/>
|
||||
</div>
|
||||
<div class="colums q-ma-xl">
|
||||
<q-btn color="secondary" @click="settings.show = !settings.show" icon="settings"
|
||||
>Settings</q-btn
|
||||
>
|
||||
<SettingDialog v-model:settings="settings"></SettingDialog>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useQuasar } from 'quasar';
|
||||
import LightSlider from './LightSlider.vue';
|
||||
import { NotifyResponse } from 'src/composables/notify';
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
import { subscribe, unsubscribe, setValues } from 'src/services/websocket';
|
||||
import { LocalStorage } from 'quasar';
|
||||
import { getSubscriptionsByPath, buildTree, dbmData } from 'src/composables/dbm/dbmTree';
|
||||
import DragPad from 'src/components/lights/DragPad.vue';
|
||||
import SettingDialog from './SettingMovingHead.vue';
|
||||
import type { Settings } from 'src/models/MovingHead';
|
||||
|
||||
const $q = useQuasar();
|
||||
const brightness = updateBrightnessValue('MovingHead:Brightness');
|
||||
const pan = updateValue('MovingHead:Pan', true);
|
||||
const tilt = updateValue('MovingHead:Tilt', true);
|
||||
const state = updateValue('MovingHead:State');
|
||||
const settings = ref<Settings>({
|
||||
show: false,
|
||||
reversePan: false,
|
||||
reverseTilt: false,
|
||||
startAddress: 0,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
settings.value.reversePan = LocalStorage.getItem('reversePan') ?? false;
|
||||
settings.value.reverseTilt = LocalStorage.getItem('reverseTilt') ?? false;
|
||||
|
||||
subscribe([
|
||||
{
|
||||
path: 'MovingHead:.*',
|
||||
depth: 0,
|
||||
},
|
||||
])
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
if (response?.subscribe) {
|
||||
dbmData.value = buildTree(response.subscribe ?? []);
|
||||
} else {
|
||||
NotifyResponse($q, response);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
NotifyResponse($q, err, 'error');
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
unsubscribe([
|
||||
{
|
||||
path: 'MovingHead',
|
||||
depth: 0,
|
||||
},
|
||||
]).catch((err) => {
|
||||
NotifyResponse($q, err, 'error');
|
||||
});
|
||||
});
|
||||
|
||||
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 });
|
||||
}
|
||||
|
||||
setValues(setPaths)
|
||||
.then((response) => NotifyResponse($q, response))
|
||||
.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 });
|
||||
|
||||
setValues(setPaths)
|
||||
.then((response) => NotifyResponse($q, response))
|
||||
.catch((err) => console.error(`Failed to update ${path.split(':')[1]}:`, err));
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
58
src/components/lights/SettingMovingHead.vue
Normal file
58
src/components/lights/SettingMovingHead.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<q-dialog v-model="settings.show">
|
||||
<q-card style="min-width: 300px">
|
||||
<q-card-section>
|
||||
<div class="text-h6">Settings</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section>
|
||||
<q-btn
|
||||
:icon="!settings.reverseTilt ? 'swap_vert' : undefined"
|
||||
:icon-right="settings.reverseTilt ? 'swap_vert' : undefined"
|
||||
@click="settings.reverseTilt = !settings.reverseTilt"
|
||||
>{{ settings.reverseTilt ? 'Reversed Tilt' : 'Normal Tilt' }}</q-btn
|
||||
>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<q-btn
|
||||
:icon="!settings.reversePan ? 'swap_vert' : undefined"
|
||||
:icon-right="settings.reversePan ? 'swap_vert' : undefined"
|
||||
@click="settings.reversePan = !settings.reversePan"
|
||||
>{{ settings.reversePan ? 'Reversed Pan' : 'Normal Pan' }}</q-btn
|
||||
>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<q-input
|
||||
type="number"
|
||||
label="Start Address"
|
||||
v-model:model-value="settings.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';
|
||||
import type { Settings } from 'src/models/MovingHead';
|
||||
|
||||
const settings = defineModel<Settings>('settings', {
|
||||
default: {
|
||||
show: false,
|
||||
reversePan: false,
|
||||
reverseTilt: false,
|
||||
startAddress: 0,
|
||||
},
|
||||
required: true,
|
||||
});
|
||||
|
||||
function saveSettings() {
|
||||
LocalStorage.set('reversePan', settings.value.reversePan);
|
||||
LocalStorage.set('reverseTilt', settings.value.reverseTilt);
|
||||
settings.value.show = false;
|
||||
}
|
||||
</script>
|
||||
158
src/composables/dbm/dbmTree.ts
Normal file
158
src/composables/dbm/dbmTree.ts
Normal file
@@ -0,0 +1,158 @@
|
||||
import type { Subs } from 'src/models/Subscribe';
|
||||
import { ref, nextTick, computed } from 'vue';
|
||||
import { setValues } from 'src/services/websocket';
|
||||
import { NotifyResponse } from 'src/composables/notify';
|
||||
import type { QVueGlobals } from 'quasar';
|
||||
|
||||
const Subscriptions = ref<Subs>([]);
|
||||
|
||||
export const dbmData = ref<TreeNode[]>([]);
|
||||
|
||||
export interface TreeNode {
|
||||
path: string | undefined;
|
||||
key?: string; // optional: useful for QTree's node-key
|
||||
value?: string | number | boolean | undefined;
|
||||
lazy: boolean;
|
||||
children?: TreeNode[];
|
||||
}
|
||||
|
||||
export function buildTree(subs: Subs): TreeNode[] {
|
||||
type TreeMap = {
|
||||
[key: string]: {
|
||||
__children: TreeMap;
|
||||
uuid?: string;
|
||||
value?: string | undefined;
|
||||
lazy: boolean;
|
||||
};
|
||||
};
|
||||
|
||||
const root: TreeMap = {};
|
||||
|
||||
Subscriptions.value = subs;
|
||||
|
||||
for (const item of subs) {
|
||||
const pathParts = item.path?.split(':') ?? [];
|
||||
let current = root;
|
||||
|
||||
for (let i = 0; i < pathParts.length; i++) {
|
||||
const part = pathParts[i];
|
||||
|
||||
if (!part) continue;
|
||||
|
||||
if (!current[part]) {
|
||||
current[part] = { __children: {}, lazy: true };
|
||||
}
|
||||
|
||||
// Optionally attach uuid only at the final part
|
||||
if (i === pathParts.length - 1 && item.uuid) {
|
||||
current[part].uuid = item.uuid;
|
||||
current[part].value = item.value !== undefined ? String(item.value) : '';
|
||||
current[part].lazy = item.hasChild ?? false;
|
||||
}
|
||||
current = current[part].__children;
|
||||
}
|
||||
}
|
||||
|
||||
function convert(map: TreeMap): TreeNode[] {
|
||||
return Object.entries(map).map(([path, node]) => ({
|
||||
path,
|
||||
key: node.uuid ?? path, // `key` is used by QTree
|
||||
value: node.value,
|
||||
lazy: node.lazy,
|
||||
children: convert(node.__children),
|
||||
}));
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
path: 'DBM',
|
||||
key: '00000000-0000-0000-0000-000000000000',
|
||||
lazy: true,
|
||||
children: convert(root),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
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) {
|
||||
const ZERO_UUID = '00000000-0000-0000-0000-000000000000';
|
||||
const existingIds = new Set(Subscriptions.value.map((sub) => sub.uuid));
|
||||
const newSubs = subs
|
||||
.filter((sub) => sub.uuid !== ZERO_UUID) // Skip UUIDs with all zeroes
|
||||
.filter((sub) => !existingIds.has(sub.uuid));
|
||||
|
||||
Subscriptions.value.push(...newSubs);
|
||||
|
||||
void nextTick(() => {
|
||||
dbmData.value = buildTree(Subscriptions.value);
|
||||
});
|
||||
}
|
||||
|
||||
export function removeSubtreeByParentKey(parentKey: string) {
|
||||
function removeChildrenAndMarkLazy(nodes: TreeNode[], targetKey: string): boolean {
|
||||
for (const node of nodes) {
|
||||
if (node.key === targetKey) {
|
||||
delete node.children;
|
||||
node.lazy = true;
|
||||
return true;
|
||||
}
|
||||
if (node.children) {
|
||||
const found = removeChildrenAndMarkLazy(node.children, targetKey);
|
||||
if (found) return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
removeChildrenAndMarkLazy(dbmData.value, parentKey);
|
||||
}
|
||||
|
||||
export function getSubscriptionsByPath(path: string | undefined) {
|
||||
return Subscriptions.value.find((s) => s.path === path);
|
||||
}
|
||||
|
||||
export function getAllSubscriptions() {
|
||||
return Subscriptions.value;
|
||||
}
|
||||
|
||||
export function updateValue(
|
||||
path1: string,
|
||||
$q: QVueGlobals,
|
||||
path2?: string,
|
||||
path3?: string,
|
||||
value3?: number,
|
||||
) {
|
||||
return computed({
|
||||
get() {
|
||||
const sub = getSubscriptionsByPath(path1);
|
||||
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: path1, value: baseValue }];
|
||||
if (path2) {
|
||||
setPaths.push({ path: path2, value: baseValue });
|
||||
}
|
||||
if (path3) {
|
||||
setPaths.push({ path: path3, value: value3 ? value3 : baseValue });
|
||||
}
|
||||
setValues(setPaths)
|
||||
.then((response) => NotifyResponse($q, response))
|
||||
.catch((err) => {
|
||||
NotifyResponse(
|
||||
$q,
|
||||
`Failed to update [${path1 + ' ' + path2 + ' ' + path3}]: ${err}`,
|
||||
'error',
|
||||
);
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
12
src/composables/dbm/useContextMenu.ts
Normal file
12
src/composables/dbm/useContextMenu.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { ref } from 'vue';
|
||||
import type { TreeNode } from './dbmTree';
|
||||
|
||||
export const contextMenuRef = ref();
|
||||
|
||||
export const contextMenuState = ref<TreeNode | undefined>();
|
||||
|
||||
export function openContextMenu(event: MouseEvent, node: undefined) {
|
||||
event.preventDefault();
|
||||
contextMenuState.value = node;
|
||||
contextMenuRef.value?.show(event);
|
||||
}
|
||||
@@ -1,110 +0,0 @@
|
||||
import type { Subs } from 'src/models/Subscribe';
|
||||
import { ref, nextTick } from 'vue';
|
||||
|
||||
const Subscriptions = ref<Subs>([]);
|
||||
|
||||
export const dbmData = ref<TreeNode[]>([]);
|
||||
|
||||
export interface TreeNode {
|
||||
path: string | undefined;
|
||||
key?: string; // optional: useful for QTree's node-key
|
||||
value?: string | number | boolean | undefined;
|
||||
children?: TreeNode[];
|
||||
}
|
||||
|
||||
export function buildTree(subs: Subs): TreeNode[] {
|
||||
type TreeMap = {
|
||||
[key: string]: {
|
||||
__children: TreeMap;
|
||||
uuid?: string;
|
||||
value?: string | undefined;
|
||||
};
|
||||
};
|
||||
|
||||
const root: TreeMap = {};
|
||||
|
||||
Subscriptions.value = subs;
|
||||
|
||||
for (const item of subs) {
|
||||
const pathParts = item.path?.split(':') ?? [];
|
||||
let current = root;
|
||||
|
||||
for (let i = 0; i < pathParts.length; i++) {
|
||||
const part = pathParts[i];
|
||||
|
||||
if (!part) continue;
|
||||
|
||||
if (!current[part]) {
|
||||
current[part] = { __children: {} };
|
||||
}
|
||||
|
||||
// Optionally attach uuid only at the final part
|
||||
if (i === pathParts.length - 1 && item.uuid) {
|
||||
current[part].uuid = item.uuid;
|
||||
current[part].value = item.value !== undefined ? String(item.value) : '';
|
||||
}
|
||||
|
||||
current = current[part].__children;
|
||||
}
|
||||
}
|
||||
|
||||
function convert(map: TreeMap): TreeNode[] {
|
||||
return Object.entries(map).map(([path, node]) => ({
|
||||
path,
|
||||
key: node.uuid ?? path, // `key` is used by QTree
|
||||
value: node.value,
|
||||
children: convert(node.__children),
|
||||
}));
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
path: 'DBM',
|
||||
key: 'DBM',
|
||||
children: convert(root),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
import { ref } from 'vue';
|
||||
|
||||
export const contextMenu = ref({
|
||||
show: false,
|
||||
x: 0,
|
||||
y: 0,
|
||||
anchor: 'top left',
|
||||
self: 'top left',
|
||||
node: null,
|
||||
});
|
||||
|
||||
export function openContextMenu(event: MouseEvent, node: undefined) {
|
||||
contextMenu.value = {
|
||||
show: true,
|
||||
x: event.clientX,
|
||||
y: event.clientY,
|
||||
anchor: 'top left',
|
||||
self: 'top left',
|
||||
node: node ?? null,
|
||||
};
|
||||
}
|
||||
@@ -6,11 +6,11 @@
|
||||
|
||||
<q-toolbar-title> Light Control </q-toolbar-title>
|
||||
|
||||
<div>Version 0.0.1</div>
|
||||
<div>Version {{ version }}</div>
|
||||
</q-toolbar>
|
||||
</q-header>
|
||||
|
||||
<q-drawer v-model="leftDrawerOpen" show-if-above bordered>
|
||||
<q-drawer v-model="leftDrawerOpen" bordered>
|
||||
<q-list>
|
||||
<q-item to="/" clickable v-ripple>
|
||||
<q-item-section>Home</q-item-section>
|
||||
@@ -29,6 +29,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { version } from '../..//package.json';
|
||||
|
||||
const leftDrawerOpen = ref(false);
|
||||
|
||||
|
||||
@@ -9,3 +9,10 @@ export type MovingHead = {
|
||||
Pan: number;
|
||||
Tilt: number;
|
||||
};
|
||||
|
||||
export type Settings = {
|
||||
show: boolean;
|
||||
reversePan: boolean;
|
||||
reverseTilt: boolean;
|
||||
startAddress: number;
|
||||
};
|
||||
|
||||
@@ -1,7 +1,19 @@
|
||||
<template>
|
||||
<q-btn class="q-ma-md" label="Save DBM" color="primary" push @click="saveDBM"></q-btn>
|
||||
<DBMTree></DBMTree>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import DBMTree from 'src/components/DBMTree.vue';
|
||||
import DBMTree from 'src/components/dbm/DBMTree.vue';
|
||||
import { api } from 'src/boot/axios';
|
||||
import { NotifyResponse } from 'src/composables/notify';
|
||||
import { useQuasar } from 'quasar';
|
||||
|
||||
const $q = useQuasar();
|
||||
function saveDBM() {
|
||||
api
|
||||
.get('saveData')
|
||||
.then((resp) => NotifyResponse($q, resp.data))
|
||||
.catch((err) => NotifyResponse($q, err));
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -2,22 +2,36 @@
|
||||
<q-page>
|
||||
<q-tabs v-model="tab">
|
||||
<q-tab name="movingHead" label="Moving Head" />
|
||||
<q-tab name="dome" label="Dome" />
|
||||
<q-tab name="lightBar" label="Light Bar" />
|
||||
</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 name="lightBar">
|
||||
<LightBar />
|
||||
</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';
|
||||
import MovingHead from 'src/components/lights/MovingHead.vue';
|
||||
import LightBar from 'src/components/lights/LightBarCBL.vue';
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
const tab = ref('movingHead');
|
||||
const STORAGE_KEY = 'lastTabUsed';
|
||||
|
||||
// Load last tab on mount
|
||||
onMounted(() => {
|
||||
const savedTab = sessionStorage.getItem(STORAGE_KEY);
|
||||
if (savedTab) {
|
||||
tab.value = savedTab;
|
||||
}
|
||||
});
|
||||
|
||||
// Save tab on change
|
||||
watch(tab, (newVal) => {
|
||||
sessionStorage.setItem(STORAGE_KEY, newVal);
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user