mirror of
https://github.com/PhotonVision/photonvision
synced 2026-07-05 03:21:40 +00:00
7224561b76
Sliders for exposure and brightness would spam messages on the backend. This used to cause crashes and can cause it to get quite laggy / delayed. This will add a 20ms debounce which won't send the value to the backend until the value hasn't changed for 20ms. --------- Co-authored-by: Matt <matthew.morley.ca@gmail.com>
86 lines
1.9 KiB
Vue
86 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
import TooltippedLabel from "@/components/common/pv-tooltipped-label.vue";
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
label?: string;
|
|
tooltip?: string;
|
|
// TODO fully update v-model usage in custom components on Vue3 update
|
|
value: number;
|
|
min: number;
|
|
max: number;
|
|
step?: number;
|
|
disabled?: boolean;
|
|
sliderCols?: number;
|
|
}>(),
|
|
{
|
|
step: 1,
|
|
disabled: false,
|
|
sliderCols: 8
|
|
}
|
|
);
|
|
|
|
const emit = defineEmits<{
|
|
(e: "input", value: number): void;
|
|
}>();
|
|
|
|
// Debounce function
|
|
function debounce(func: (...args: any[]) => void, wait: number) {
|
|
let timeout: ReturnType<typeof setTimeout>;
|
|
return function (...args: any[]) {
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(() => func.apply(this, args), wait);
|
|
};
|
|
}
|
|
|
|
const debouncedEmit = debounce((v: number) => {
|
|
emit("input", v);
|
|
}, 20);
|
|
|
|
const localValue = computed({
|
|
get: () => props.value,
|
|
set: (v) => debouncedEmit(parseFloat(v as unknown as string))
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<v-row dense align="center">
|
|
<v-col :cols="12 - sliderCols">
|
|
<tooltipped-label :tooltip="tooltip" :label="label" />
|
|
</v-col>
|
|
<v-col :cols="sliderCols">
|
|
<v-slider
|
|
v-model="localValue"
|
|
dark
|
|
class="align-center"
|
|
:max="max"
|
|
:min="min"
|
|
hide-details
|
|
color="accent"
|
|
:disabled="disabled"
|
|
:step="step"
|
|
>
|
|
<template #append>
|
|
<v-text-field
|
|
v-model="localValue"
|
|
dark
|
|
color="accent"
|
|
:max="max"
|
|
:min="min"
|
|
:disabled="disabled"
|
|
class="mt-0 pt-0"
|
|
hide-details
|
|
single-line
|
|
type="number"
|
|
style="width: 50px"
|
|
:step="step"
|
|
/>
|
|
</template>
|
|
</v-slider>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
</template>
|