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

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)