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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { useQuasar } from 'quasar';
|
||||||
import { watch, reactive, ref } from 'vue';
|
import { watch, reactive, ref } from 'vue';
|
||||||
import type { Light } from 'src/models/Light';
|
import type { Light } from 'src/models/Light';
|
||||||
import { send } from 'src/services/websocket';
|
import { setValues } from 'src/services/websocket';
|
||||||
import SettingDialog from 'src/components/SettingDomeLight.vue';
|
import SettingDialog from 'src/components/lights/SettingDomeLight.vue';
|
||||||
|
import { NotifyResponse } from 'src/composables/notify';
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
const settings = ref(false);
|
const settings = ref(false);
|
||||||
|
|
||||||
const light = reactive<Light>({
|
const light = reactive<Light>({
|
||||||
@@ -124,39 +127,37 @@ const light = reactive<Light>({
|
|||||||
});
|
});
|
||||||
|
|
||||||
watch(light, (newVal: Light) => {
|
watch(light, (newVal: Light) => {
|
||||||
send({
|
setValues([
|
||||||
set: [
|
{
|
||||||
{
|
path: 'Light:001:001',
|
||||||
path: 'Light:001:001',
|
value: Math.round((255 / 10000) * newVal.Red * newVal.Brightness * Number(newVal.State)),
|
||||||
value: Math.round((255 / 10000) * newVal.Red * newVal.Brightness * Number(newVal.State)),
|
},
|
||||||
},
|
{
|
||||||
{
|
path: 'Light:001:002',
|
||||||
path: 'Light:001:002',
|
value: Math.round((255 / 10000) * newVal.Green * newVal.Brightness * Number(newVal.State)),
|
||||||
value: Math.round((255 / 10000) * newVal.Green * newVal.Brightness * Number(newVal.State)),
|
},
|
||||||
},
|
{
|
||||||
{
|
path: 'Light:001:003',
|
||||||
path: 'Light:001:003',
|
value: Math.round((255 / 10000) * newVal.Blue * newVal.Brightness * Number(newVal.State)),
|
||||||
value: Math.round((255 / 10000) * newVal.Blue * newVal.Brightness * Number(newVal.State)),
|
},
|
||||||
},
|
{
|
||||||
{
|
path: 'Light:001:004',
|
||||||
path: 'Light:001:004',
|
value: Math.round((255 / 10000) * newVal.White * newVal.Brightness * Number(newVal.State)),
|
||||||
value: Math.round((255 / 10000) * newVal.White * newVal.Brightness * Number(newVal.State)),
|
},
|
||||||
},
|
{
|
||||||
{
|
path: 'Light:001:005',
|
||||||
path: 'Light:001:005',
|
value: Math.round((255 / 10000) * newVal.Amber * newVal.Brightness * Number(newVal.State)),
|
||||||
value: Math.round((255 / 10000) * newVal.Amber * newVal.Brightness * Number(newVal.State)),
|
},
|
||||||
},
|
{
|
||||||
{
|
path: 'Light:001:006',
|
||||||
path: 'Light:001:006',
|
value: Math.round((255 / 10000) * newVal.Purple * newVal.Brightness * Number(newVal.State)),
|
||||||
value: Math.round((255 / 10000) * newVal.Purple * newVal.Brightness * Number(newVal.State)),
|
},
|
||||||
},
|
])
|
||||||
],
|
|
||||||
})
|
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
console.log('Response from server:', response);
|
NotifyResponse($q, response);
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.error('Error fetching data:', err);
|
NotifyResponse($q, err, 'error');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</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>
|
<q-toolbar-title> Light Control </q-toolbar-title>
|
||||||
|
|
||||||
<div>Version 0.0.1</div>
|
<div>Version {{ version }}</div>
|
||||||
</q-toolbar>
|
</q-toolbar>
|
||||||
</q-header>
|
</q-header>
|
||||||
|
|
||||||
<q-drawer v-model="leftDrawerOpen" show-if-above bordered>
|
<q-drawer v-model="leftDrawerOpen" bordered>
|
||||||
<q-list>
|
<q-list>
|
||||||
<q-item to="/" clickable v-ripple>
|
<q-item to="/" clickable v-ripple>
|
||||||
<q-item-section>Home</q-item-section>
|
<q-item-section>Home</q-item-section>
|
||||||
@@ -29,6 +29,7 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
import { version } from '../..//package.json';
|
||||||
|
|
||||||
const leftDrawerOpen = ref(false);
|
const leftDrawerOpen = ref(false);
|
||||||
|
|
||||||
|
|||||||
@@ -9,3 +9,10 @@ export type MovingHead = {
|
|||||||
Pan: number;
|
Pan: number;
|
||||||
Tilt: number;
|
Tilt: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type Settings = {
|
||||||
|
show: boolean;
|
||||||
|
reversePan: boolean;
|
||||||
|
reverseTilt: boolean;
|
||||||
|
startAddress: number;
|
||||||
|
};
|
||||||
|
|||||||
@@ -1,7 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<q-btn class="q-ma-md" label="Save DBM" color="primary" push @click="saveDBM"></q-btn>
|
||||||
<DBMTree></DBMTree>
|
<DBMTree></DBMTree>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<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>
|
</script>
|
||||||
|
|||||||
@@ -2,22 +2,36 @@
|
|||||||
<q-page>
|
<q-page>
|
||||||
<q-tabs v-model="tab">
|
<q-tabs v-model="tab">
|
||||||
<q-tab name="movingHead" label="Moving Head" />
|
<q-tab name="movingHead" label="Moving Head" />
|
||||||
<q-tab name="dome" label="Dome" />
|
<q-tab name="lightBar" label="Light Bar" />
|
||||||
</q-tabs>
|
</q-tabs>
|
||||||
<q-tab-panels v-model="tab" animated class="text-white">
|
<q-tab-panels v-model="tab" animated class="text-white">
|
||||||
<q-tab-panel name="movingHead">
|
<q-tab-panel name="movingHead">
|
||||||
<moving-head />
|
<moving-head />
|
||||||
</q-tab-panel>
|
</q-tab-panel>
|
||||||
<q-tab-panel name="dome">
|
<q-tab-panel name="lightBar">
|
||||||
<Dome />
|
<LightBar />
|
||||||
</q-tab-panel>
|
</q-tab-panel>
|
||||||
</q-tab-panels>
|
</q-tab-panels>
|
||||||
</q-page>
|
</q-page>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import MovingHead from 'src/components/MovingHead.vue';
|
import MovingHead from 'src/components/lights/MovingHead.vue';
|
||||||
import Dome from 'src/components/DomeLight.vue';
|
import LightBar from 'src/components/lights/LightBarCBL.vue';
|
||||||
import { ref } from 'vue';
|
import { ref, onMounted, watch } from 'vue';
|
||||||
const tab = ref('movingHead');
|
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>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user