mirror of
https://github.com/PhotonVision/photonvision
synced 2026-07-05 03:21:40 +00:00
19b57235fe
* Rework settings page; touch up contour, output, and 3D tabs; font sizing No stream placeholder; driver mode refined; cameras page Make settings snackbar work Lint fix Fix settings page padding Actually hide settings fields if unsupported * Make toggle buttons less confusing; fix driver toggle; form validation * Make eyedropper work and make input/select styling more consistent * Fix color picker and tabbing bugs * Set up camera and settings pages to talk to the backend * Add auto reconnect * Add lots of tooltips and improve related thematic consistency * Only show output stream while color picking * Unbreak robot offset * Increase tooltip delay and refactor tooltip label into a component * Remove toggle button switching behavior * Fix PnP tab and add a flag to disable FOV configuration * Move FPS indicator * Make GPU acceleration status use one value in the store * Only allow IPv4 static IPs and remove accidentally committed index
131 lines
3.0 KiB
Vue
131 lines
3.0 KiB
Vue
<template>
|
|
<div>
|
|
<v-row
|
|
dense
|
|
align="center"
|
|
>
|
|
<v-col cols="2">
|
|
<tooltipped-label
|
|
:tooltip="tooltip"
|
|
:text="name"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="10">
|
|
<v-range-slider
|
|
:value="localValue"
|
|
:max="max"
|
|
:min="min"
|
|
hide-details
|
|
class="align-center"
|
|
dark
|
|
color="accent"
|
|
:step="step"
|
|
@input="handleInput"
|
|
@mousedown="$emit('rollback', localValue)"
|
|
>
|
|
<template v-slot:prepend>
|
|
<v-text-field
|
|
dark
|
|
color="accent"
|
|
:value="localValue[0]"
|
|
:max="max"
|
|
:min="min"
|
|
class="mt-0 pt-0"
|
|
hide-details
|
|
single-line
|
|
type="number"
|
|
style="width: 50px"
|
|
:step="step"
|
|
@input="handleChange"
|
|
@focus="prependFocused = true"
|
|
@blur="prependFocused = false"
|
|
/>
|
|
</template>
|
|
|
|
<template v-slot:append>
|
|
<v-text-field
|
|
dark
|
|
color="accent"
|
|
:value="localValue[1]"
|
|
:max="max"
|
|
:min="min"
|
|
class="mt-0 pt-0"
|
|
hide-details
|
|
single-line
|
|
type="number"
|
|
style="width: 50px"
|
|
:step="step"
|
|
@input="handleChange"
|
|
@focus="appendFocused = true"
|
|
@blur="appendFocused = false"
|
|
/>
|
|
</template>
|
|
</v-range-slider>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TooltippedLabel from "./cv-tooltipped-label";
|
|
|
|
export default {
|
|
name: "RangeSlider",
|
|
components: {
|
|
TooltippedLabel,
|
|
},
|
|
// eslint-disable-next-line vue/require-prop-types
|
|
props: ["name", "min", "max", "value", "step", "tooltip"],
|
|
data() {
|
|
return {
|
|
prependFocused: false,
|
|
appendFocused: false,
|
|
currentTempVal: null,
|
|
};
|
|
},
|
|
computed: {
|
|
localValue: {
|
|
get() {
|
|
return Object.values(this.value);
|
|
},
|
|
set(value) {
|
|
this.$emit("input", value);
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
delay(ms) {
|
|
return new Promise((resolve) => setTimeout(resolve, ms));
|
|
},
|
|
|
|
async handleChange(val) {
|
|
this.currentTempVal = val;
|
|
|
|
await this.delay(200).then(() => {
|
|
let i = 0;
|
|
if (this.prependFocused === false && this.appendFocused === true) {
|
|
i = 1;
|
|
}
|
|
|
|
// will get empty string if entry is not a number
|
|
if (this.currentTempVal !== val || val === "") return;
|
|
|
|
let parsed = parseFloat(val);
|
|
let tmp = this.localValue;
|
|
tmp[i] = Math.max(this.min, Math.min(parsed, this.max));
|
|
this.localValue = tmp;
|
|
|
|
this.$emit("rollback", this.localValue);
|
|
});
|
|
},
|
|
handleInput(val) {
|
|
if (!this.prependFocused || !this.appendFocused) {
|
|
this.localValue = val;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="" scoped>
|
|
</style> |