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
163
src/components/lights/DomeLight.vue
Normal file
163
src/components/lights/DomeLight.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<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="light.State = !light.State"
|
||||
round
|
||||
:color="light.State ? 'yellow' : 'blue'"
|
||||
icon="lightbulb"
|
||||
style="position: relative"
|
||||
/>
|
||||
</div>
|
||||
<q-slider
|
||||
label
|
||||
class="q-mr-lg"
|
||||
vertical
|
||||
reverse
|
||||
v-model="light.Brightness"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="1"
|
||||
color="black"
|
||||
style="opacity: 0.5"
|
||||
/>
|
||||
<q-slider
|
||||
class="q-mr-lg"
|
||||
vertical
|
||||
reverse
|
||||
v-model="light.Red"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="1"
|
||||
label
|
||||
color="red"
|
||||
style="opacity: 0.8"
|
||||
/>
|
||||
<q-slider
|
||||
class="q-mr-lg"
|
||||
vertical
|
||||
reverse
|
||||
v-model="light.Green"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="1"
|
||||
label
|
||||
color="green"
|
||||
style="opacity: 0.8"
|
||||
/>
|
||||
<q-slider
|
||||
class="q-mr-lg"
|
||||
vertical
|
||||
reverse
|
||||
v-model="light.Blue"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="1"
|
||||
label
|
||||
color="blue"
|
||||
style="opacity: 0.8"
|
||||
/>
|
||||
<q-slider
|
||||
class="q-mr-lg"
|
||||
vertical
|
||||
reverse
|
||||
v-model="light.White"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="1"
|
||||
label
|
||||
color="grey"
|
||||
style="opacity: 0.3"
|
||||
/>
|
||||
<q-slider
|
||||
class="q-mr-lg"
|
||||
vertical
|
||||
reverse
|
||||
v-model="light.Amber"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="1"
|
||||
label
|
||||
color="amber"
|
||||
style="opacity: 0.8"
|
||||
/>
|
||||
<q-slider
|
||||
class="q-mr-lg"
|
||||
vertical
|
||||
reverse
|
||||
v-model="light.Purple"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="1"
|
||||
label
|
||||
color="purple"
|
||||
style="opacity: 0.8"
|
||||
/>
|
||||
<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 { watch, reactive, ref } from 'vue';
|
||||
import type { Light } from 'src/models/Light';
|
||||
import { setValues } from 'src/services/websocket';
|
||||
import SettingDialog from 'src/components/lights/SettingDomeLight.vue';
|
||||
import { NotifyResponse } from 'src/composables/notify';
|
||||
|
||||
const $q = useQuasar();
|
||||
const settings = ref(false);
|
||||
|
||||
const light = reactive<Light>({
|
||||
State: false,
|
||||
Brightness: 0,
|
||||
Red: 0,
|
||||
Green: 0,
|
||||
Blue: 0,
|
||||
White: 0,
|
||||
Amber: 0,
|
||||
Purple: 0,
|
||||
});
|
||||
|
||||
watch(light, (newVal: Light) => {
|
||||
setValues([
|
||||
{
|
||||
path: 'Light:001:001',
|
||||
value: Math.round((255 / 10000) * newVal.Red * newVal.Brightness * Number(newVal.State)),
|
||||
},
|
||||
{
|
||||
path: 'Light:001:002',
|
||||
value: Math.round((255 / 10000) * newVal.Green * newVal.Brightness * Number(newVal.State)),
|
||||
},
|
||||
{
|
||||
path: 'Light:001:003',
|
||||
value: Math.round((255 / 10000) * newVal.Blue * newVal.Brightness * Number(newVal.State)),
|
||||
},
|
||||
{
|
||||
path: 'Light:001:004',
|
||||
value: Math.round((255 / 10000) * newVal.White * newVal.Brightness * Number(newVal.State)),
|
||||
},
|
||||
{
|
||||
path: 'Light:001:005',
|
||||
value: Math.round((255 / 10000) * newVal.Amber * newVal.Brightness * Number(newVal.State)),
|
||||
},
|
||||
{
|
||||
path: 'Light:001:006',
|
||||
value: Math.round((255 / 10000) * newVal.Purple * newVal.Brightness * Number(newVal.State)),
|
||||
},
|
||||
])
|
||||
.then((response) => {
|
||||
NotifyResponse($q, response);
|
||||
})
|
||||
.catch((err) => {
|
||||
NotifyResponse($q, err, 'error');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
238
src/components/lights/DragPad.vue
Normal file
238
src/components/lights/DragPad.vue
Normal file
@@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<div class="row items-start" style="height: auto; align-items: flex-start">
|
||||
<div class="row q-ma-xs">
|
||||
<div class="column items-center q-mr-md" :style="{ height: containerSize + 'px' }">
|
||||
<div class="column justify-between items-center" :style="{ height: containerSize + 'px' }">
|
||||
<q-item-label class="text-black text-bold q-mb-none">Tilt</q-item-label>
|
||||
<q-btn
|
||||
:size="buttonSize"
|
||||
round
|
||||
color="positive"
|
||||
icon="add_circle_outline"
|
||||
class="q-mb-md"
|
||||
@click="reverseTilt ? substractTiltOne : addTiltOne"
|
||||
v-touch-repeat:300:300:300:300:50.mouse="reverseTilt ? substractTiltOne : addTiltOne"
|
||||
/>
|
||||
<q-slider
|
||||
vertical
|
||||
:reverse="!props.reverseTilt"
|
||||
v-model="tilt"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="1"
|
||||
label
|
||||
class="col"
|
||||
color="black"
|
||||
style="opacity: 1"
|
||||
/>
|
||||
<q-btn
|
||||
:size="buttonSize"
|
||||
class="q-mt-sm"
|
||||
round
|
||||
color="negative"
|
||||
icon="remove_circle_outline"
|
||||
@click="reverseTilt ? addTiltOne : substractTiltOne"
|
||||
v-touch-repeat:300:300:300:300:50:50:50:50:20.mouse="
|
||||
reverseTilt ? addTiltOne : substractTiltOne
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column items-center q-ml-sm">
|
||||
<div
|
||||
class="bg-grey-3 responsive-box"
|
||||
style="position: relative; border: 1px solid #ccc; border-radius: 8px; touch-action: none"
|
||||
@mousedown="startDrag"
|
||||
@touchstart="startTouch"
|
||||
@touchend="stopTouch"
|
||||
ref="pad"
|
||||
>
|
||||
<div class="marker" :style="markerStyle" :class="{ crosshair: dragging }"></div>
|
||||
</div>
|
||||
<q-item-label class="q-ma-sm text-black text-bold">Pan</q-item-label>
|
||||
|
||||
<div class="q-gutter-sm row items-center full-width">
|
||||
<q-btn
|
||||
:size="buttonSize"
|
||||
class="q-mr-sm"
|
||||
round
|
||||
color="negative"
|
||||
icon="remove_circle_outline"
|
||||
@click="reversePan ? addPanOne : substractPanOne"
|
||||
v-touch-repeat:300:300:300:300:50:50:50:50:20.mouse="
|
||||
reversePan ? addPanOne : substractPanOne
|
||||
"
|
||||
/>
|
||||
<q-slider
|
||||
class="col"
|
||||
:reverse="props.reversePan"
|
||||
v-model="pan"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="1"
|
||||
label
|
||||
color="black"
|
||||
style="opacity: 1"
|
||||
/>
|
||||
<q-btn
|
||||
:size="buttonSize"
|
||||
class="q-ml-sm"
|
||||
round
|
||||
color="positive"
|
||||
icon="add_circle_outline"
|
||||
@click="reversePan ? substractPanOne : addPanOne"
|
||||
v-touch-repeat:300:300:300:300:50.mouse="reversePan ? substractPanOne : addPanOne"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||||
|
||||
const pad = ref<HTMLElement | null>(null);
|
||||
const dragging = ref(false);
|
||||
const containerSize = ref(0);
|
||||
|
||||
const pan = defineModel<number>('pan', { default: 0 });
|
||||
const tilt = defineModel<number>('tilt', { default: 0 });
|
||||
const props = defineProps<{
|
||||
reversePan: boolean;
|
||||
reverseTilt: boolean;
|
||||
}>();
|
||||
const buttonSize = computed(() => (containerSize.value <= 200 ? 'sm' : 'md'));
|
||||
|
||||
onMounted(() => {
|
||||
const updateSize = () => {
|
||||
const el = pad.value;
|
||||
if (el) {
|
||||
containerSize.value = el.offsetWidth;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('resize', updateSize);
|
||||
updateSize();
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', updateSize);
|
||||
});
|
||||
});
|
||||
|
||||
const scaleFactor = computed(() => containerSize.value / 100);
|
||||
// 200px → 2, 400px → 4, etc.
|
||||
|
||||
const markerStyle = computed(() => {
|
||||
const scale = scaleFactor.value;
|
||||
|
||||
return {
|
||||
position: 'absolute' as const,
|
||||
top: `${scale * (props.reverseTilt ? tilt.value : 100 - tilt.value)}px`,
|
||||
left: `${scale * (props.reversePan ? 100 - pan.value : pan.value)}px`,
|
||||
width: '12px',
|
||||
height: '12px',
|
||||
borderRadius: '50%',
|
||||
background: 'red',
|
||||
border: '2px solid white',
|
||||
cursor: 'pointer',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
};
|
||||
});
|
||||
|
||||
function startDrag(e: MouseEvent) {
|
||||
dragging.value = true;
|
||||
updatePosition(e);
|
||||
window.addEventListener('mousemove', onDrag);
|
||||
window.addEventListener('mouseup', stopDrag);
|
||||
}
|
||||
|
||||
function stopDrag() {
|
||||
dragging.value = false;
|
||||
window.removeEventListener('mousemove', onDrag);
|
||||
window.removeEventListener('mouseup', stopDrag);
|
||||
}
|
||||
|
||||
function startTouch(e: TouchEvent) {
|
||||
e.preventDefault(); // ✅ block scroll
|
||||
const touch = e.touches[0];
|
||||
if (!touch) return;
|
||||
dragging.value = true;
|
||||
updatePosition(touch);
|
||||
window.addEventListener('touchmove', onTouch, { passive: false });
|
||||
window.addEventListener('touchend', stopTouch);
|
||||
}
|
||||
|
||||
function onTouch(e: TouchEvent) {
|
||||
e.preventDefault(); // ✅ block scroll
|
||||
if (!dragging.value) return;
|
||||
const touch = e.touches[0];
|
||||
if (!touch) return;
|
||||
updatePosition(touch);
|
||||
}
|
||||
|
||||
function onDrag(e: MouseEvent) {
|
||||
e.preventDefault(); // optional, for extra safety
|
||||
if (!dragging.value) return;
|
||||
updatePosition(e);
|
||||
}
|
||||
|
||||
function stopTouch() {
|
||||
dragging.value = false;
|
||||
window.removeEventListener('touchmove', onTouch);
|
||||
window.removeEventListener('touchend', stopTouch);
|
||||
}
|
||||
|
||||
function updatePosition(e: MouseEvent | Touch) {
|
||||
if (!pad.value) return;
|
||||
|
||||
const rect = pad.value.getBoundingClientRect();
|
||||
const newX = Math.min(Math.max(0, e.clientX - rect.left), rect.width);
|
||||
const newY = Math.min(Math.max(0, e.clientY - rect.top), rect.height);
|
||||
|
||||
pan.value = props.reversePan
|
||||
? Math.round((1 - newX / rect.width) * 100)
|
||||
: Math.round((newX / rect.width) * 100);
|
||||
tilt.value = props.reverseTilt
|
||||
? Math.round((newY / rect.height) * 100)
|
||||
: Math.round(100 - (newY / rect.height) * 100);
|
||||
}
|
||||
|
||||
function addTiltOne() {
|
||||
if (tilt.value <= 255) {
|
||||
tilt.value++;
|
||||
}
|
||||
}
|
||||
|
||||
function substractTiltOne() {
|
||||
if (tilt.value >= 0) {
|
||||
tilt.value--;
|
||||
}
|
||||
}
|
||||
|
||||
function addPanOne() {
|
||||
if (pan.value <= 255) {
|
||||
pan.value++;
|
||||
}
|
||||
}
|
||||
|
||||
function substractPanOne() {
|
||||
if (pan.value >= 0) {
|
||||
pan.value--;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.responsive-box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.responsive-box {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
123
src/components/lights/LightBarCBL.vue
Normal file
123
src/components/lights/LightBarCBL.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="q-pa-md">
|
||||
<q-card>
|
||||
<q-card-section class="q-mt-md q-mr-sm row items-start">
|
||||
<div class="column justify-center q-mr-lg" style="height: 200px">
|
||||
<q-btn
|
||||
@click="changeState"
|
||||
round
|
||||
:color="brightness > 0 ? 'yellow' : 'blue'"
|
||||
icon="lightbulb"
|
||||
style="position: relative"
|
||||
/>
|
||||
</div>
|
||||
<LightSlider
|
||||
title="Dimmer"
|
||||
:dbm-path="'LightBar:Brightness'"
|
||||
:opacity="0.5"
|
||||
class="q-ma-sm"
|
||||
></LightSlider>
|
||||
<LightSlider
|
||||
title="Strobe"
|
||||
:dbm-path="'LightBar:Strobe'"
|
||||
:opacity="0.5"
|
||||
class="q-ma-sm"
|
||||
></LightSlider>
|
||||
<LightSlider
|
||||
title="Program"
|
||||
:dbm-path="'LightBar:Program'"
|
||||
:opacity="0.5"
|
||||
class="q-ma-sm"
|
||||
></LightSlider>
|
||||
<LightSlider
|
||||
title="Program Speed"
|
||||
:dbm-path="'LightBar:Program:Speed'"
|
||||
:opacity="0.8"
|
||||
class="q-ma-sm"
|
||||
></LightSlider>
|
||||
<LightSlider
|
||||
title="Red"
|
||||
:dbm-path="'LightBar:Red'"
|
||||
color="red"
|
||||
:opacity="0.8"
|
||||
class="q-ma-sm"
|
||||
></LightSlider>
|
||||
<LightSlider
|
||||
title="Green"
|
||||
:dbm-path="'LightBar:Green'"
|
||||
:opacity="0.8"
|
||||
color="green"
|
||||
class="q-ma-sm"
|
||||
></LightSlider>
|
||||
<LightSlider
|
||||
title="Blue"
|
||||
:dbm-path="'LightBar:Blue'"
|
||||
:opacity="0.8"
|
||||
color="blue"
|
||||
class="q-ma-sm"
|
||||
></LightSlider>
|
||||
<div class="colums q-ma-xl">
|
||||
<q-btn color="secondary" @click="settings = !settings" icon="settings">Settings</q-btn>
|
||||
<SettingDialog :settings-dialog="settings"></SettingDialog>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useQuasar } from 'quasar';
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { subscribe, unsubscribe } from 'src/services/websocket';
|
||||
import SettingDialog from 'src/components/lights/SettingDomeLight.vue';
|
||||
import { NotifyResponse } from 'src/composables/notify';
|
||||
import { updateValue, buildTree, dbmData } from 'src/composables/dbm/dbmTree';
|
||||
import LightSlider from './LightSlider.vue';
|
||||
|
||||
const $q = useQuasar();
|
||||
const settings = ref(false);
|
||||
const brightness = updateValue('LightBar:Brightness', $q);
|
||||
const state = updateValue('LightBar:State', $q);
|
||||
onMounted(() => {
|
||||
subscribe([
|
||||
{
|
||||
path: 'LightBar:.*',
|
||||
depth: 0,
|
||||
},
|
||||
])
|
||||
.then((response) => {
|
||||
if (response?.subscribe) {
|
||||
dbmData.value = buildTree(response.subscribe ?? []);
|
||||
} else {
|
||||
NotifyResponse($q, response);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
NotifyResponse($q, err, 'error');
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
unsubscribe([
|
||||
{
|
||||
path: '.*',
|
||||
depth: 0,
|
||||
},
|
||||
]).catch((err) => {
|
||||
NotifyResponse($q, err, 'error');
|
||||
});
|
||||
});
|
||||
|
||||
function changeState() {
|
||||
if (brightness.value === 0) {
|
||||
if (state.value === 0) {
|
||||
brightness.value = 100;
|
||||
return;
|
||||
}
|
||||
brightness.value = state.value;
|
||||
return;
|
||||
}
|
||||
state.value = brightness.value;
|
||||
brightness.value = 0;
|
||||
}
|
||||
</script>
|
||||
121
src/components/lights/LightSlider.vue
Normal file
121
src/components/lights/LightSlider.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div :class="'column items-center ' + props.class">
|
||||
<q-item-label :class="['text-bold', `text-${textColor}`]"><p v-html="title"></p></q-item-label>
|
||||
<q-btn
|
||||
size="sm"
|
||||
class="q-mb-sm"
|
||||
round
|
||||
color="positive"
|
||||
icon="add_circle_outline"
|
||||
@click="addOne"
|
||||
v-touch-repeat:300:300:300:300:50:50:50:50:20.mouse="addOne"
|
||||
/>
|
||||
<div>
|
||||
<q-slider
|
||||
:vertical="vertical"
|
||||
:reverse="reverse"
|
||||
v-model="localValue"
|
||||
:min="props.min"
|
||||
:max="props.max"
|
||||
:step="props.step"
|
||||
:label="props.label"
|
||||
:color="props.color"
|
||||
:style="{ opacity: props.opacity }"
|
||||
/>
|
||||
</div>
|
||||
<q-btn
|
||||
size="sm"
|
||||
class="q-my-md"
|
||||
round
|
||||
color="negative"
|
||||
icon="remove_circle_outline"
|
||||
@click="substractOne"
|
||||
v-touch-repeat:300:300:300:300:50:50:50:50:20.mouse="substractOne"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useQuasar } from 'quasar';
|
||||
import { updateValue } from 'src/composables/dbm/dbmTree';
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
dbmPath: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true,
|
||||
},
|
||||
dbmPath2: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
dbmPath3: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
dbmValue3: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: 'black',
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'black',
|
||||
},
|
||||
min: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
default: 100,
|
||||
},
|
||||
vertical: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
step: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
label: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
class: {
|
||||
type: String,
|
||||
default: 'q-mr-sm',
|
||||
},
|
||||
opacity: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const localValue = updateValue(props.dbmPath, $q, props.dbmPath2, props.dbmPath3, props.dbmValue3);
|
||||
|
||||
function addOne() {
|
||||
if (localValue.value <= 255) {
|
||||
localValue.value++;
|
||||
}
|
||||
}
|
||||
|
||||
function substractOne() {
|
||||
if (localValue.value >= 0) {
|
||||
localValue.value--;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
203
src/components/lights/MovingHead.vue
Normal file
203
src/components/lights/MovingHead.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
// channel description // 1 Red // 2 Red fine // 3 Green // 4 Green fine // 5 Blue // 6 Blue fine //
|
||||
7 White // 8 White fine // 9 Linear CTO ??? // 10 Macro Color ??? // 11 Strobe // 12 Dimmer // 13
|
||||
Dimer fine // 14 Pan // 15 Pan fine // 16 Tilt // 17 Tilt fine // 18 Function // 19 Reset // 20 Zoom
|
||||
// 21 Zoom rotation // 22 Shape selection // 23 Shape speed // 24 Shape fade // 25 Shape Red // 26
|
||||
Shape Green // 27 Shape Blue // 28 Shape White // 29 Shape Dimmer // 30 Background dimmer // 31
|
||||
Shape transition // 32 Shape Offset // 33 Foreground strobe // 34 Background strobe // 35 Background
|
||||
select
|
||||
|
||||
<template>
|
||||
<div class="q-pa-md">
|
||||
<q-card>
|
||||
<q-card-section class="q-mt-md q-mr-sm row items-start">
|
||||
<div class="column justify-center q-ma-lg" style="height: 200px">
|
||||
<q-btn
|
||||
@click="changeState"
|
||||
round
|
||||
:color="brightness > 0 ? 'yellow' : 'blue'"
|
||||
icon="lightbulb"
|
||||
style="position: relative"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<LightSlider
|
||||
title="Dimmer"
|
||||
:dbm-path="'MovingHead:Brightness'"
|
||||
:dbm-path2="'MovingHead:BrightnessFine'"
|
||||
:dbm-path3="'MovingHead:Strobe'"
|
||||
:dbm-value3="255"
|
||||
:opacity="0.5"
|
||||
class="q-ma-md"
|
||||
/>
|
||||
<LightSlider
|
||||
title="Red"
|
||||
:dbm-path="'MovingHead:Red'"
|
||||
:dbm-path2="'MovingHead:RedFine'"
|
||||
:opacity="0.8"
|
||||
color="red"
|
||||
class="q-ma-md"
|
||||
/>
|
||||
<LightSlider
|
||||
title="Green"
|
||||
:dbm-path="'MovingHead:Green'"
|
||||
:dbm-path2="'MovingHead:GreenFine'"
|
||||
:opacity="0.8"
|
||||
color="green"
|
||||
class="q-ma-md"
|
||||
/>
|
||||
<LightSlider
|
||||
title="Blue"
|
||||
:dbm-path="'MovingHead:Blue'"
|
||||
:dbm-path2="'MovingHead:BlueFine'"
|
||||
:opacity="0.8"
|
||||
color="blue"
|
||||
class="q-ma-md"
|
||||
/>
|
||||
<LightSlider
|
||||
title="White"
|
||||
:dbm-path="'MovingHead:White'"
|
||||
:dbm-path2="'MovingHead:WhiteFine'"
|
||||
:opacity="0.3"
|
||||
color="grey"
|
||||
class="q-ma-md"
|
||||
/>
|
||||
<LightSlider
|
||||
title="Zoom"
|
||||
:dbm-path="'MovingHead:Zoom'"
|
||||
:opacity="1"
|
||||
color="black"
|
||||
class="q-ma-md"
|
||||
/>
|
||||
<div>
|
||||
<DragPad
|
||||
class="q-ma-md"
|
||||
v-model:pan="pan"
|
||||
v-model:reverse-pan="settings.reversePan"
|
||||
v-model:tilt="tilt"
|
||||
v-model:reverse-tilt="settings.reverseTilt"
|
||||
/>
|
||||
</div>
|
||||
<div class="colums q-ma-xl">
|
||||
<q-btn color="secondary" @click="settings.show = !settings.show" icon="settings"
|
||||
>Settings</q-btn
|
||||
>
|
||||
<SettingDialog v-model:settings="settings"></SettingDialog>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useQuasar } from 'quasar';
|
||||
import LightSlider from './LightSlider.vue';
|
||||
import { NotifyResponse } from 'src/composables/notify';
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
import { subscribe, unsubscribe, setValues } from 'src/services/websocket';
|
||||
import { LocalStorage } from 'quasar';
|
||||
import { getSubscriptionsByPath, buildTree, dbmData } from 'src/composables/dbm/dbmTree';
|
||||
import DragPad from 'src/components/lights/DragPad.vue';
|
||||
import SettingDialog from './SettingMovingHead.vue';
|
||||
import type { Settings } from 'src/models/MovingHead';
|
||||
|
||||
const $q = useQuasar();
|
||||
const brightness = updateBrightnessValue('MovingHead:Brightness');
|
||||
const pan = updateValue('MovingHead:Pan', true);
|
||||
const tilt = updateValue('MovingHead:Tilt', true);
|
||||
const state = updateValue('MovingHead:State');
|
||||
const settings = ref<Settings>({
|
||||
show: false,
|
||||
reversePan: false,
|
||||
reverseTilt: false,
|
||||
startAddress: 0,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
settings.value.reversePan = LocalStorage.getItem('reversePan') ?? false;
|
||||
settings.value.reverseTilt = LocalStorage.getItem('reverseTilt') ?? false;
|
||||
|
||||
subscribe([
|
||||
{
|
||||
path: 'MovingHead:.*',
|
||||
depth: 0,
|
||||
},
|
||||
])
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
if (response?.subscribe) {
|
||||
dbmData.value = buildTree(response.subscribe ?? []);
|
||||
} else {
|
||||
NotifyResponse($q, response);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
NotifyResponse($q, err, 'error');
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
unsubscribe([
|
||||
{
|
||||
path: 'MovingHead',
|
||||
depth: 0,
|
||||
},
|
||||
]).catch((err) => {
|
||||
NotifyResponse($q, err, 'error');
|
||||
});
|
||||
});
|
||||
|
||||
function changeState() {
|
||||
if (brightness.value === 0) {
|
||||
if (state.value === 0) {
|
||||
brightness.value = 100;
|
||||
return;
|
||||
}
|
||||
brightness.value = state.value;
|
||||
return;
|
||||
}
|
||||
state.value = brightness.value;
|
||||
brightness.value = 0;
|
||||
}
|
||||
|
||||
function updateValue(path: string, isDouble = false) {
|
||||
return computed({
|
||||
get() {
|
||||
const sub = getSubscriptionsByPath(path);
|
||||
const value = sub ? Number(sub.value ?? 0) : 0;
|
||||
return isDouble ? Math.round((100 / 255) * value) : Math.round((100 / 255) * value);
|
||||
},
|
||||
set(val) {
|
||||
const baseValue = Math.round((255 / 100) * val);
|
||||
const setPaths = [{ path, value: baseValue }];
|
||||
|
||||
if (isDouble) {
|
||||
setPaths.push({ path: `${path}Fine`, value: baseValue });
|
||||
}
|
||||
|
||||
setValues(setPaths)
|
||||
.then((response) => NotifyResponse($q, response))
|
||||
.catch((err) => console.error(`Failed to update ${path.split(':')[1]}:`, err));
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function updateBrightnessValue(path: string) {
|
||||
return computed({
|
||||
get() {
|
||||
const sub = getSubscriptionsByPath(path);
|
||||
const value = sub ? Number(sub.value ?? 0) : 0;
|
||||
return Math.round((100 / 255) * value);
|
||||
},
|
||||
set(val) {
|
||||
const baseValue = Math.round((255 / 100) * val);
|
||||
const setPaths = [{ path, value: baseValue }];
|
||||
setPaths.push({ path: `${path}Fine`, value: baseValue });
|
||||
setPaths.push({ path: `MovingHead:Strobe`, value: 255 });
|
||||
|
||||
setValues(setPaths)
|
||||
.then((response) => NotifyResponse($q, response))
|
||||
.catch((err) => console.error(`Failed to update ${path.split(':')[1]}:`, err));
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
27
src/components/lights/SettingDomeLight.vue
Normal file
27
src/components/lights/SettingDomeLight.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<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>Normal</q-btn>
|
||||
</q-card-section>
|
||||
<q-card-section> </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">
|
||||
const settingsDialog = defineModel<boolean>('settingsDialog', { default: false, required: true });
|
||||
|
||||
function saveSettings() {
|
||||
// Save logic here
|
||||
settingsDialog.value = false;
|
||||
}
|
||||
</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>
|
||||
Reference in New Issue
Block a user