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
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>
|
||||
Reference in New Issue
Block a user