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
2025-05-28 21:56:05 +02:00
parent d7565ed09c
commit 03f23d6d5a
24 changed files with 1324 additions and 841 deletions

View 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>