paadi/lightController
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update dbmData and Subscription so it is reactive

Browse Source 
new save load scenes
This commit is contained in:
Adrian Zürcher
2025-06-19 19:30:28 +02:00
parent fd970b6d1f
commit 3e2b95c1c3
19 changed files with 761 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -1,7 +1,7 @@
{
"name": "lightcontrol",
"version": "0.0.4",
"description": "A Quasar Project",
"version": "0.0.14",
"description": "A Tecamino App",
"productName": "Light Control",
"author": "A. Zuercher",
"type": "module",

93
src/components/dbm/DBMTree.vue
View File

@@ -10,6 +10,7 @@
no-transition
:default-expand-all="false"
v-model:expanded="expanded"
@update:expanded="onExpandedChange"
@lazy-load="onLazyLoad"
>
<template v-slot:[`default-header`]="props">
@@ -52,7 +53,7 @@
</template>
<script setup lang="ts">
import { watch, onMounted, ref } from 'vue';
import { onMounted, ref } from 'vue';
import DataTable from './dataTable.vue';
import type { TreeNode } from 'src/composables/dbm/dbmTree';
import {
@@ -60,7 +61,6 @@ import {
buildTree,
getSubscriptionsByUuid,
addChildrentoTree,
removeSubtreeByParentKey,
getAllSubscriptions,
} from 'src/composables/dbm/dbmTree';
import { useQuasar } from 'quasar';
@@ -72,12 +72,14 @@ 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';
import { reactive } from 'vue';
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>([]);
const Subscriptions = reactive<Subs>([]);
let lastExpanded: string[] = [];
onMounted(() => {
const payload = {
@@ -92,7 +94,7 @@ onMounted(() => {
.post('/json_data', payload)
.then((res) => {
if (res.data.get) {
dbmData.value = buildTree(res.data.get);
dbmData.splice(0, dbmData.length, ...buildTree(res.data.get));
}
})
.catch((err) => {
@@ -121,7 +123,6 @@ function onLazyLoad({
fail: () => void;
}): void {
//first unsubsrice nodes
unsubscribe([
{
path: '.*',
@@ -129,7 +130,7 @@ function onLazyLoad({
},
])
.then(() => {
Subscriptions.value = [];
Subscriptions.length = 0;
})
.catch((err) => {
NotifyResponse($q, err, 'error');
@@ -152,9 +153,13 @@ function onLazyLoad({
resp.subscribe.filter((sub) => sub.uuid !== ZERO_UUID).map((sub) => sub.uuid),
);
Subscriptions.value = getAllSubscriptions().filter((sub) => toRemove.has(sub.uuid));
Subscriptions.splice(
0,
Subscriptions.length,
...getAllSubscriptions().filter((sub) => toRemove.has(sub.uuid)),
);
done(dbmData.value);
done(dbmData);
} else {
done([]); // no children returned
}
@@ -167,11 +172,12 @@ function onLazyLoad({
function onValueEdit(newValue: undefined, node: TreeNode) {
console.log(node.value, node.value === undefined);
if (!node.key) return;
const sub = getSubscriptionsByUuid(node.key);
if (sub) {
setValues([
{
path: sub.path ?? '',
path: sub.value?.path ?? '',
value: newValue,
},
]).catch((err) => {
@@ -180,37 +186,72 @@ function onValueEdit(newValue: undefined, node: TreeNode) {
}
}
watch(
expanded,
(newVal, oldVal) => {
const collapsedKeys = oldVal.filter((key) => !newVal.includes(key));
collapsedKeys.forEach((key: string) => {
// WebSocket unsubscribe
unsubscribe([
function onExpandedChange(newExpanded: readonly string[]) {
const collapsed = lastExpanded.filter((k) => !newExpanded.includes(k));
const newlyExpanded = newExpanded.filter((k) => !lastExpanded.includes(k));
if (collapsed.length) {
collapsed.forEach((key: string) => {
subscribe([
{
uuid: key,
path: '.*',
depth: 0,
path: '',
depth: 2,
},
])
.then((resp) => {
// Remove children of this node from the tree
removeSubtreeByParentKey(key);
if (resp?.unsubscribe) {
if (resp?.subscribe) {
// Optional: update your internal store too
addChildrentoTree(resp?.subscribe);
const toRemove = new Set(
resp.unsubscribe.filter((sub) => sub.uuid !== ZERO_UUID).map((sub) => sub.uuid),
resp.subscribe.filter((sub) => sub.uuid !== ZERO_UUID).map((sub) => sub.uuid),
);
Subscriptions.value = Subscriptions.value.filter((sub) => !toRemove.has(sub.uuid));
Subscriptions.splice(
0,
Subscriptions.length,
...getAllSubscriptions().filter((sub) => toRemove.has(sub.uuid)),
);
}
})
.catch((err) => {
NotifyResponse($q, err, 'error');
});
});
},
{ deep: false },
);
} else if (newlyExpanded.length) {
newlyExpanded.forEach((key: string) => {
subscribe([
{
uuid: key,
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.splice(
0,
Subscriptions.length,
...getAllSubscriptions().filter((sub) => toRemove.has(sub.uuid)),
);
}
})
.catch((err) => {
NotifyResponse($q, err, 'error');
});
});
}
lastExpanded = [...newExpanded];
}
</script>
<style scoped>

11
src/components/dbm/dataTable.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="q-pa-md">
<q-table
v-if="props.rows.length > 0"
v-if="tableRows.length > 0"
style="height: 600px"
flat
bordered
:title="props.rows[0]?.path"
:rows="props.rows ?? []"
:rows="rows"
:columns="columns"
row-key="path"
virtual-scroll
@@ -17,13 +17,16 @@
<script setup lang="ts">
import type { QTableProps } from 'quasar';
import type { Subscribe } from 'src/models/Subscribe';
import type { Subs } from 'src/models/Subscribe';
import { computed } from 'vue';
// we generate lots of rows here
const props = defineProps<{
rows: Subscribe[];
rows: Subs;
}>();
const tableRows = computed(() => [...props.rows]);
const columns = [
{ name: 'path', label: 'Path', field: 'path', align: 'left' },
{

89
src/components/dialog/okDialog.vue Normal file
View File

@@ -0,0 +1,89 @@
<template>
<q-dialog v-model="internalShowDialog">
<q-card :style="'width:' + props.width">
<q-card-section
v-if="props.dialogLabel"
class="text-h6 text-center"
:class="'text-' + props.labelColor"
>{{ props.dialogLabel }}</q-card-section
>
<q-card-section v-if="props.text" class="text-center" style="white-space: pre-line">{{
props.text
}}</q-card-section>
<q-card-actions align="right" class="text-primary">
<q-btn v-if="props.buttonCancelLabel" flat :label="props.buttonCancelLabel" v-close-popup>
</q-btn>
<q-btn
v-if="props.buttonOkLabel"
flat
:label="props.buttonOkLabel"
v-close-popup
@click="closeDialog"
>
</q-btn>
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
const props = defineProps({
showDialog: {
type: Boolean,
required: true,
},
buttonOkLabel: {
type: String,
default: 'OK',
},
labelColor: {
type: String,
default: 'primary',
},
dialogLabel: {
type: String,
default: '',
},
text: {
type: String,
default: '',
},
buttonCancelLabel: {
type: String,
default: '',
},
width: {
type: String,
default: '300px',
},
});
const emit = defineEmits(['update:showDialog', 'confirmed', 'cancel']);
const internalShowDialog = ref(props.showDialog);
watch(
() => props.showDialog,
(newValue) => {
console.log('watch showDialog', newValue);
internalShowDialog.value = newValue;
},
);
watch(internalShowDialog, (newValue) => {
console.log('watch internalShowDialog', newValue);
emit('update:showDialog', newValue);
if (!newValue) {
console.log('emit cancel');
emit('cancel');
} else {
console.log('emit confirmed');
emit('confirmed');
}
});
function closeDialog() {
internalShowDialog.value = false;
emit('update:showDialog', false);
}
</script>

14
src/components/lights/DomeLight.vue
View File

@@ -18,7 +18,7 @@
reverse
v-model="light.Brightness"
:min="0"
:max="100"
:max="255"
:step="1"
color="black"
style="opacity: 0.5"
@@ -29,7 +29,7 @@
reverse
v-model="light.Red"
:min="0"
:max="100"
:max="255"
:step="1"
label
color="red"
@@ -41,7 +41,7 @@
reverse
v-model="light.Green"
:min="0"
:max="100"
:max="255"
:step="1"
label
color="green"
@@ -53,7 +53,7 @@
reverse
v-model="light.Blue"
:min="0"
:max="100"
:max="255"
:step="1"
label
color="blue"
@@ -65,7 +65,7 @@
reverse
v-model="light.White"
:min="0"
:max="100"
:max="255"
:step="1"
label
color="grey"
@@ -77,7 +77,7 @@
reverse
v-model="light.Amber"
:min="0"
:max="100"
:max="255"
:step="1"
label
color="amber"
@@ -89,7 +89,7 @@
reverse
v-model="light.Purple"
:min="0"
:max="100"
:max="255"
:step="1"
label
color="purple"

132
src/components/lights/DragPad.vue
View File

@@ -3,22 +3,35 @@
<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-item-label
@click="toggleTilt = !toggleTilt"
:class="[
'cursor-pointer',
'text-bold',
'clickable-text-effect',
'q-mb-none',
`text-black`,
]"
>
{{ toggleTilt ? 'Tilt Fine' : '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"
@click="reverseTilt ? substractTilt : addTilt"
v-touch-repeat:0:300:300:300:300:50:50:50:20.mouse="
reverseTilt ? substractTilt : addTilt
"
/>
<q-slider
vertical
:reverse="!props.reverseTilt"
v-model="tilt"
:min="0"
:max="100"
:max="255"
:step="1"
label
class="col"
@@ -31,9 +44,9 @@
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
@click="reverseTilt ? addTilt : substractTilt"
v-touch-repeat:0:300:300:300:300:50:50:50:20.mouse="
reverseTilt ? addTilt : substractTilt
"
/>
</div>
@@ -49,7 +62,11 @@
>
<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>
<q-item-label
@click="togglePan = !togglePan"
:class="['cursor-pointer', 'text-bold', 'clickable-text-effect', 'q-mt-lg', `text-black`]"
>{{ togglePan ? 'Pan Fine' : 'Pan' }}</q-item-label
>
<div class="q-gutter-sm row items-center full-width">
<q-btn
@@ -58,9 +75,9 @@
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
@click="reversePan ? addPan : substractPan"
v-touch-repeat:0:300:300:300:300:50:50:50:50:20.mouse="
reversePan ? addPan : substractPan
"
/>
<q-slider
@@ -68,7 +85,7 @@
:reverse="props.reversePan"
v-model="pan"
:min="0"
:max="100"
:max="255"
:step="1"
label
color="black"
@@ -80,8 +97,8 @@
round
color="positive"
icon="add_circle_outline"
@click="reversePan ? substractPanOne : addPanOne"
v-touch-repeat:300:300:300:300:50.mouse="reversePan ? substractPanOne : addPanOne"
@click="reversePan ? substractPan : addPan"
v-touch-repeat:0:300:300:300:300:50:50:50:20.mouse="reversePan ? substractPan : addPan"
/>
</div>
</div>
@@ -90,18 +107,53 @@
</template>
<script lang="ts" setup>
import { addOne, substractOne } from 'src/utils/number-helpers';
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { updateValue } from 'src/composables/dbm/dbmTree';
import { useQuasar } from 'quasar';
const props = defineProps({
reversePan: {
type: Boolean,
default: false,
},
reverseTilt: {
type: Boolean,
default: false,
},
panPath: {
type: String,
default: '',
required: true,
},
panPath2: {
type: String,
default: '',
},
tiltPath: {
type: String,
default: '',
required: true,
},
tiltPath2: {
type: String,
default: '',
},
});
const $q = useQuasar();
const togglePan = ref(false);
const toggleTilt = ref(false);
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 pan = updateValue(props.panPath, $q, togglePan, props.panPath2);
const tilt = updateValue(props.tiltPath, $q, toggleTilt, props.tiltPath2);
const scaleFactor = computed(() => containerSize.value / 255);
// 200px → 2, 400px → 4, etc.
const buttonSize = computed(() => (containerSize.value <= 200 ? 'sm' : 'md'));
onMounted(() => {
@@ -120,16 +172,12 @@ onMounted(() => {
});
});
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`,
top: `${scale * (props.reverseTilt ? tilt.value : 255 - tilt.value)}px`,
left: `${scale * (props.reversePan ? 255 - pan.value : pan.value)}px`,
width: '12px',
height: '12px',
borderRadius: '50%',
@@ -191,35 +239,27 @@ function updatePosition(e: MouseEvent | Touch) {
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);
? Math.round((1 - newX / rect.width) * 255)
: Math.round((newX / rect.width) * 255);
tilt.value = props.reverseTilt
? Math.round((newY / rect.height) * 100)
: Math.round(100 - (newY / rect.height) * 100);
? Math.round((newY / rect.height) * 255)
: Math.round(255 - (newY / rect.height) * 255);
}
function addTiltOne() {
if (tilt.value <= 255) {
tilt.value++;
}
function addTilt() {
addOne(tilt, 255);
}
function substractTiltOne() {
if (tilt.value >= 0) {
tilt.value--;
}
function substractTilt() {
substractOne(tilt, 0);
}
function addPanOne() {
if (pan.value <= 255) {
pan.value++;
}
function addPan() {
addOne(pan, 255);
}
function substractPanOne() {
if (pan.value >= 0) {
pan.value--;
}
function substractPan() {
substractOne(pan, 0);
}
</script>

34
src/components/lights/LightBarCBL.vue
View File

@@ -12,46 +12,46 @@
/>
</div>
<LightSlider
title="Dimmer"
:dbm-path="'LightBar:Brightness'"
mainTitle="Dimmer"
dbm-path="LightBar:Brightness"
:opacity="0.5"
class="q-ma-sm"
></LightSlider>
<LightSlider
title="Strobe"
:dbm-path="'LightBar:Strobe'"
mainTitle="Strobe"
dbm-path="LightBar:Strobe"
:opacity="0.5"
class="q-ma-sm"
></LightSlider>
<LightSlider
title="Program"
:dbm-path="'LightBar:Program'"
mainTitle="Program"
dbm-path="LightBar:Program"
:opacity="0.5"
class="q-ma-sm"
></LightSlider>
<LightSlider
title="Program Speed"
:dbm-path="'LightBar:Program:Speed'"
mainTitle="Program Speed"
dbm-path="LightBar:Program:Speed"
:opacity="0.8"
class="q-ma-sm"
></LightSlider>
<LightSlider
title="Red"
:dbm-path="'LightBar:Red'"
mainTitle="Red"
dbm-path="LightBar:Red"
color="red"
:opacity="0.8"
class="q-ma-sm"
></LightSlider>
<LightSlider
title="Green"
:dbm-path="'LightBar:Green'"
mainTitle="Green"
dbm-path="LightBar:Green"
:opacity="0.8"
color="green"
class="q-ma-sm"
></LightSlider>
<LightSlider
title="Blue"
:dbm-path="'LightBar:Blue'"
mainTitle="Blue"
dbm-path="LightBar:Blue"
:opacity="0.8"
color="blue"
class="q-ma-sm"
@@ -67,12 +67,12 @@
<script setup lang="ts">
import { useQuasar } from 'quasar';
import LightSlider from './LightSlider.vue';
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);
@@ -87,7 +87,7 @@ onMounted(() => {
])
.then((response) => {
if (response?.subscribe) {
dbmData.value = buildTree(response.subscribe ?? []);
dbmData.splice(0, dbmData.length, ...buildTree(response.subscribe));
} else {
NotifyResponse($q, response);
}
@@ -111,7 +111,7 @@ onUnmounted(() => {
function changeState() {
if (brightness.value === 0) {
if (state.value === 0) {
brightness.value = 100;
brightness.value = 255;
return;
}
brightness.value = state.value;

70
src/components/lights/LightSlider.vue
View File

@@ -1,14 +1,22 @@
<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-item-label v-if="!toggleHighLow" :class="['text-bold', `text-${textColor}`]"
><p v-html="mainTitle"></p>
</q-item-label>
<q-item-label
v-else
@click="toggle = !toggle"
:class="['cursor-pointer', 'text-bold', 'clickable-text-effect', `text-${textColor}`]"
><p v-html="toggle ? secondTitle : mainTitle"></p>
</q-item-label>
<q-btn
size="sm"
class="q-mb-sm"
class="q-mb-md"
round
color="positive"
icon="add_circle_outline"
@click="addOne"
v-touch-repeat:300:300:300:300:50:50:50:50:20.mouse="addOne"
@click="reverse ? add : substract"
v-touch-repeat:0:300:300:300:300:50:50:50:50:20.mouse="reverse ? add : substract"
/>
<div>
<q-slider
@@ -29,20 +37,30 @@
round
color="negative"
icon="remove_circle_outline"
@click="substractOne"
v-touch-repeat:300:300:300:300:50:50:50:50:20.mouse="substractOne"
@click="reverse ? substract : add"
v-touch-repeat:0:300:300:300:300:50:50:50:50:20.mouse="reverse ? substract : add"
/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useQuasar } from 'quasar';
import { updateValue } from 'src/composables/dbm/dbmTree';
import { addOne, substractOne } from 'src/utils/number-helpers';
const $q = useQuasar();
const props = defineProps({
title: {
toggleHighLow: {
type: Boolean,
default: false,
},
mainTitle: {
type: String,
default: '',
},
secondTitle: {
type: String,
default: '',
},
@@ -77,7 +95,7 @@ const props = defineProps({
},
max: {
type: Number,
default: 100,
default: 255,
},
vertical: {
type: Boolean,
@@ -105,17 +123,35 @@ const props = defineProps({
},
});
const localValue = updateValue(props.dbmPath, $q, props.dbmPath2, props.dbmPath3, props.dbmValue3);
const toggle = ref(false);
const localValue = updateValue(
props.dbmPath,
$q,
toggle,
props.dbmPath2,
props.dbmPath3,
props.dbmValue3,
);
function addOne() {
if (localValue.value <= 255) {
localValue.value++;
}
function add() {
addOne(localValue, 255);
}
function substractOne() {
if (localValue.value >= 0) {
localValue.value--;
}
function substract() {
substractOne(localValue, 0);
}
</script>
<style>
.clickable-text-effect {
cursor: pointer;
color: #040303; /* Static text color */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
/* Add hover effect here if you want it part of this class */
transition: text-shadow 0.2s ease-in-out;
}
.clickable-text-effect:hover {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
</style>

72
src/components/lights/MovingHead.vue
View File

@@ -21,49 +21,59 @@ select
</div>
<LightSlider
title="Dimmer"
:dbm-path="'MovingHead:Brightness'"
:dbm-path2="'MovingHead:BrightnessFine'"
:dbm-path3="'MovingHead:Strobe'"
mainTitle="Dimmer"
second-title="Dimmer Fine"
:toggle-high-low="true"
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'"
mainTitle="Red"
second-title="Red Fine"
:toggle-high-low="true"
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'"
mainTitle="Green"
second-title="Green Fine"
:toggle-high-low="true"
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'"
mainTitle="Blue"
second-title="Blue Fine"
:toggle-high-low="true"
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'"
mainTitle="White"
second-title="White Fine"
:toggle-high-low="true"
dbm-path="MovingHead:White"
dbm-path2="MovingHead:WhiteFine"
:opacity="0.3"
color="grey"
class="q-ma-md"
/>
<LightSlider
title="Zoom"
:dbm-path="'MovingHead:Zoom'"
mainTitle="Zoom"
dbm-path="MovingHead:Zoom"
:opacity="1"
color="black"
class="q-ma-md"
@@ -71,9 +81,11 @@ select
<div>
<DragPad
class="q-ma-md"
v-model:pan="pan"
pan-path="MovingHead:Pan"
pan-path2="MovingHead:PanFine"
v-model:reverse-pan="settings.reversePan"
v-model:tilt="tilt"
tilt-path="MovingHead:Tilt"
tilt-path2="MovingHead:TiltFine"
v-model:reverse-tilt="settings.reverseTilt"
/>
</div>
@@ -102,8 +114,6 @@ 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,
@@ -125,7 +135,7 @@ onMounted(() => {
.then((response) => {
console.log(response);
if (response?.subscribe) {
dbmData.value = buildTree(response.subscribe ?? []);
dbmData.splice(0, dbmData.length, ...buildTree(response.subscribe));
} else {
NotifyResponse($q, response);
}
@@ -149,7 +159,7 @@ onUnmounted(() => {
function changeState() {
if (brightness.value === 0) {
if (state.value === 0) {
brightness.value = 100;
brightness.value = 255;
return;
}
brightness.value = state.value;
@@ -164,14 +174,13 @@ function updateValue(path: string, isDouble = false) {
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);
return isDouble ? value : value;
},
set(val) {
const baseValue = Math.round((255 / 100) * val);
const setPaths = [{ path, value: baseValue }];
const setPaths = [{ path, value: val }];
if (isDouble) {
setPaths.push({ path: `${path}Fine`, value: baseValue });
setPaths.push({ path: `${path}Fine`, value: val });
}
setValues(setPaths)
@@ -186,12 +195,11 @@ function updateBrightnessValue(path: string) {
get() {
const sub = getSubscriptionsByPath(path);
const value = sub ? Number(sub.value ?? 0) : 0;
return Math.round((100 / 255) * value);
return value;
},
set(val) {
const baseValue = Math.round((255 / 100) * val);
const setPaths = [{ path, value: baseValue }];
setPaths.push({ path: `${path}Fine`, value: baseValue });
const setPaths = [{ path, value: val }];
setPaths.push({ path: `${path}Fine`, value: val });
setPaths.push({ path: `MovingHead:Strobe`, value: 255 });
setValues(setPaths)

292
src/components/scenes/ScenesTab.vue Normal file
View File

@@ -0,0 +1,292 @@
<template>
<!-- new edit scene dialog-->
<q-dialog v-model="showDialog" persistent>
<q-card style="min-width: 350px">
<q-card-section>
<div class="text-primary text-h6">{{ dialogLabel }}</div>
</q-card-section>
<q-card-section class="q-pt-none">
<q-input
class="q-mb-md"
dense
v-model="newScene.name"
placeholder="Name"
autofocus
:rules="[(val) => !!val || 'Field is required']"
@keyup.enter="saveScene"
/>
<q-input
dense
v-model="newScene.description"
placeholder="Description"
autofocus
@keyup.enter="saveScene"
/>
<div class="q-py-md">
<div class="q-gutter-sm">
<q-checkbox v-model="newScene.movingHead" label="Moving Head" />
<q-checkbox v-model="newScene.lightBar" label="Light Bar" />
</div>
</div>
</q-card-section>
<q-card-actions align="right" class="text-primary">
<q-btn flat label="Cancel" v-close-popup />
<q-btn flat :label="dialogLabel" @click="saveScene" />
</q-card-actions>
</q-card>
</q-dialog>
<Dialog
dialogLabel="Duplicate Scene"
:text="`Scene '${newScene.name}' exists already`"
:show-dialog="existsAlready"
v-on:update:show-dialog="existsAlready = $event"
/>
<q-list
bordered
v-if="items.length > 0"
class="q-mx-auto"
style="max-width: 100%; max-width: 500px"
>
<q-btn
rounded
color="primary"
:class="['q-ma-md', 'text-bold', 'text-white']"
@click="openAddDialog"
>Add New Scene</q-btn
>
<q-item class="row">
<q-item-section :class="['text-black', 'text-bold', 'col-5']">Name</q-item-section>
<q-item-section :class="['text-black', 'text-left', 'text-bold', 'text-left']"
>Description</q-item-section
>
</q-item>
<q-item
v-for="(item, index) in items"
:key="item.name"
bordered
style="border: 0.1px solid lightgray; border-radius: 5px; margin-bottom: 1px"
>
<q-item-section
@click="openLoadDialog(item.name)"
:class="['text-black', 'text-left', 'cursor-pointer']"
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
>{{ item.name }}</q-item-section
>
<q-item-section
@click="openLoadDialog(item.name)"
:class="['text-black', 'text-left', 'cursor-pointer']"
left
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
>{{ item.description }}</q-item-section
>
<q-item-section top side>
<div class="text-grey-8 q-gutter-xs">
<q-btn size="12px" flat dense round icon="delete" @click="removeScene(item.name)" />
<q-btn
size="12px"
flat
dense
round
icon="more_vert"
@click="openEditDialog(item, index)"
/>
</div>
</q-item-section>
</q-item>
</q-list>
<!-- Fallback if list is empty -->
<div v-else class="q-pa-md text-grey text-center">
<div>No scenes available</div>
<q-btn
rounded
color="primary"
:class="['q-ma-md', 'text-bold', 'text-white']"
@click="openAddDialog"
>Add First Scene</q-btn
>
</div>
</template>
<script setup lang="ts">
import { NotifyDialog } from 'src/composables/notify';
import { onMounted, ref } from 'vue';
import { useQuasar } from 'quasar';
import type { Scene } from 'src/models/Scene';
import type { Set } from 'src/models/Set';
import axios from 'axios';
import { api } from 'boot/axios';
import { NotifyResponse } from 'src/composables/notify';
import Dialog from 'src/components/dialog/okDialog.vue';
import { setValues } from 'src/services/websocket';
const $q = useQuasar();
const showDialog = ref(false);
const isEdit = ref(false);
const isLoad = ref(false);
const existsAlready = ref(false);
const editIndex = ref(-1);
const dialogLabel = ref('');
const newScene = ref<Scene>({
name: '',
movingHead: false,
lightBar: false,
});
const items = ref<Scene[]>([]);
const quasarApi = axios.create({
baseURL: `http://localhost:9500`,
timeout: 10000,
headers: {
'Content-Type': 'application/json',
},
});
onMounted(() => {
quasarApi
.get('/api/loadScenes')
.then((resp) => {
if (resp.data) {
items.value = resp.data as Scene[];
}
})
.catch((err) => NotifyResponse($q, err.response.data.error, 'error'));
});
function removeScene(name: string) {
NotifyDialog($q, 'Delete', 'Do you want to delete scene: ' + name, 'YES', 'NO')
.then((res) => {
if (res) {
items.value = items.value.filter((s) => s.name !== name);
quasarApi
.delete('/api/deleteScene', {
data: { name },
})
.then((res) => {
if (res.data) {
NotifyResponse($q, res.data, 'warning');
}
})
.catch((err) => {
NotifyResponse($q, err.response.data.error, 'error');
});
}
})
.catch((err) => NotifyResponse($q, err.resp, 'warning'));
}
function openAddDialog() {
isEdit.value = false;
dialogLabel.value = 'Add Scene';
newScene.value = {
name: '',
movingHead: true,
lightBar: true,
};
showDialog.value = true;
}
function openEditDialog(scene: Scene, index: number) {
isEdit.value = true;
dialogLabel.value = 'Update Scene';
console.log(76, scene);
newScene.value = { ...scene };
editIndex.value = index;
showDialog.value = true;
}
const saveScene = async () => {
if (!newScene.value.name) {
return;
}
const exists = items.value.some(
(item, index) => item.name === newScene.value.name && index !== editIndex.value,
);
if (exists) {
if (isLoad.value) {
console.log(44, 'load');
const setPaths = <Set[]>[];
newScene.value.values?.forEach((element) => {
setPaths.push({ path: element.path, value: element.value });
});
setValues(setPaths)
.then((response) => NotifyResponse($q, response))
.catch((err) => console.error(`Failed to load scene ${newScene.value.name}`, err));
isLoad.value = false;
showDialog.value = false;
return;
}
existsAlready.value = true;
return;
}
if (isEdit.value && editIndex.value !== -1) {
items.value[editIndex.value] = { ...newScene.value };
} else {
items.value.push(newScene.value);
}
// Sort alphabetically by scene name
items.value.sort((a, b) => a.name.localeCompare(b.name));
const sendValues = [];
if (newScene.value.movingHead) {
sendValues.push({
path: 'MovingHead',
query: { depth: 0 },
});
}
if (newScene.value.lightBar) {
sendValues.push({
path: 'LightBar',
query: { depth: 0 },
});
}
console.log(33, sendValues);
if (sendValues.length > 0) {
try {
const res = await api.post('/json_data', { get: sendValues });
newScene.value.values = res.data.get;
} catch (err) {
NotifyResponse($q, err as Error, 'error');
}
} else {
newScene.value.values = [];
}
quasarApi
.post('/api/saveScene', JSON.stringify(newScene.value))
.then((res) => {
if (res.data) {
NotifyResponse($q, res.data);
}
})
.catch((err) => {
NotifyResponse($q, err.response.data.error, 'error');
});
showDialog.value = false;
};
function openLoadDialog(name: string) {
isLoad.value = true;
quasarApi
.post('/api/loadScene', { name })
.then((res) => {
if (res.data) {
const scene = res.data as Scene;
newScene.value = scene;
newScene.value.name = name;
showDialog.value = true;
isEdit.value = true;
dialogLabel.value = 'Load Scene';
}
})
.catch((err) => NotifyResponse($q, err.response.data.error, 'error'));
}
</script>

75
src/composables/dbm/dbmTree.ts
View File

@@ -1,12 +1,13 @@
import type { Subs } from 'src/models/Subscribe';
import { ref, nextTick, computed } from 'vue';
import type { Subs, Subscribe } from 'src/models/Subscribe';
import type { Ref } from 'vue';
import { nextTick, computed, reactive, ref } from 'vue';
import { setValues } from 'src/services/websocket';
import { NotifyResponse } from 'src/composables/notify';
import type { QVueGlobals } from 'quasar';
const Subscriptions = ref<Subs>([]);
const Subscriptions = reactive<Record<string, Subscribe>>({});
export const dbmData = ref<TreeNode[]>([]);
export const dbmData = reactive<TreeNode[]>([]);
export interface TreeNode {
path: string | undefined;
@@ -28,9 +29,10 @@ export function buildTree(subs: Subs): TreeNode[] {
const root: TreeMap = {};
Subscriptions.value = subs;
for (const item of subs) {
if (item.path) {
Subscriptions[item.path] = item;
}
const pathParts = item.path?.split(':') ?? [];
let current = root;
@@ -54,13 +56,15 @@ export function buildTree(subs: Subs): TreeNode[] {
}
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 reactive(
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 [
@@ -74,24 +78,32 @@ export function buildTree(subs: Subs): TreeNode[] {
}
export function getTreeElementByPath(path: string) {
return dbmData.value.find((s) => s.path === path);
const sub = dbmData.find((s) => s.path === path);
return ref(sub);
}
export function getSubscriptionsByUuid(uid: string | undefined) {
return Subscriptions.value.find((s) => s.uuid === uid);
export function getSubscriptionsByUuid(uid: string) {
const sub = Object.values(Subscriptions).find((sub) => sub.uuid === uid);
return ref(sub);
}
export function addChildrentoTree(subs: Subs) {
const ZERO_UUID = '00000000-0000-0000-0000-000000000000';
const existingIds = new Set(Subscriptions.value.map((sub) => sub.uuid));
const existingIds = new Set(Object.values(Subscriptions).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);
for (const sub of newSubs) {
if (sub.path !== undefined) {
Subscriptions[sub.path] = sub;
} else {
console.warn('Skipping sub with undefined path', sub);
}
}
void nextTick(() => {
dbmData.value = buildTree(Subscriptions.value);
dbmData.splice(0, dbmData.length, ...buildTree(Object.values(Subscriptions)));
});
}
@@ -111,39 +123,44 @@ export function removeSubtreeByParentKey(parentKey: string) {
return false;
}
removeChildrenAndMarkLazy(dbmData.value, parentKey);
removeChildrenAndMarkLazy(dbmData, parentKey);
}
export function getSubscriptionsByPath(path: string | undefined) {
return Subscriptions.value.find((s) => s.path === path);
export function getSubscriptionsByPath(path: string) {
return ref(Subscriptions[path]);
}
export function getAllSubscriptions() {
return Subscriptions.value;
return Object.values(Subscriptions);
}
export function updateValue(
path1: string,
$q: QVueGlobals,
toggle?: Ref<boolean>,
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);
const sub = getSubscriptionsByPath(toggle?.value && path2 ? path2 : path1);
const value = sub?.value ? Number(sub.value.value ?? 0) : 0;
return value;
},
set(val) {
const baseValue = Math.round((255 / 100) * val);
const setPaths = [{ path: path1, value: baseValue }];
if (path2) {
const baseValue = val;
const setPaths = [];
if (toggle?.value && path2) {
setPaths.push({ path: path2, value: baseValue });
} else {
setPaths.push({ path: path1, value: baseValue });
}
if (path3) {
setPaths.push({ path: path3, value: value3 ? value3 : baseValue });
}
setValues(setPaths)
.then((response) => NotifyResponse($q, response))
.catch((err) => {

34
src/composables/notify.ts
View File

@@ -16,7 +16,7 @@ export function NotifyResponse(
icon = 'warning';
break;
case 'error':
color = 'orange';
color = 'red';
icon = 'error';
break;
}
@@ -26,8 +26,9 @@ export function NotifyResponse(
if (message === '') {
return;
}
color = typeof response === 'string' ? response : response?.error ? 'red' : color;
icon = typeof response === 'string' ? response : response?.error ? 'error' : icon;
color = typeof response === 'string' ? color : response?.error ? 'red' : color;
icon = typeof response === 'string' ? icon : response?.error ? 'error' : icon;
$q?.notify({
message: message,
color: color,
@@ -37,3 +38,30 @@ export function NotifyResponse(
});
}
}
export function NotifyDialog(
$q: QVueGlobals,
title: string,
text: string,
okText?: string,
cancelText?: string,
) {
return new Promise((resolve) => {
$q.dialog({
title: title,
message: text,
persistent: true,
ok: okText ?? 'OK',
cancel: cancelText ?? 'CANCEL',
})
.onOk(() => {
resolve(true);
})
.onCancel(() => {
resolve(false);
})
.onDismiss(() => {
resolve(false);
});
});
}

9
src/models/Scene.ts Normal file
View File

@@ -0,0 +1,9 @@
import type { Value } from './Value';
export interface Scene {
name: string;
description?: string;
movingHead: boolean;
lightBar: boolean;
values?: Value[];
}

2
src/models/Set.ts
View File

@@ -2,7 +2,7 @@ export type Set = {
uuid?: string | undefined;
path: string;
type?: string;
value: number | boolean | undefined;
value: string | number | boolean | undefined;
create?: boolean;
};

7
src/models/Subscribe.ts
View File

@@ -1,8 +1,9 @@
// API type (from backend)
export type Subscribe = {
uuid?: string | undefined;
path?: string | undefined;
uuid?: string;
path?: string;
depth?: number;
value?: string | number | boolean | undefined;
value?: string | number | boolean;
hasChild?: boolean;
};

7
src/models/Value.ts Normal file
View File

@@ -0,0 +1,7 @@
import type { UUID } from 'crypto';
export interface Value {
uuid?: UUID;
path: string;
value: number | string | undefined;
}

1
src/pages/DataPage.vue
View File

@@ -10,6 +10,7 @@ import { NotifyResponse } from 'src/composables/notify';
import { useQuasar } from 'quasar';
const $q = useQuasar();
function saveDBM() {
api
.get('saveData')

0
src/pages/IndexPage.vue → src/pages/MainPage.vue
View File

3
src/router/routes.ts
View File

@@ -5,8 +5,9 @@ const routes: RouteRecordRaw[] = [
path: '/',
component: () => import('layouts/MainLayout.vue'),
children: [
{ path: '', component: () => import('pages/IndexPage.vue') },
{ path: '', component: () => import('pages/MainPage.vue') },
{ path: '/data', component: () => import('pages/DataPage.vue') },
{ path: '/scenes', component: () => import('components/scenes/ScenesTab.vue') },
],
},