new dynamic slider example
This commit is contained in:
Eike Ahmels
parent
1a18af1569
commit
48403d09cc
@ -25,7 +25,7 @@
|
||||
</v-toolbar>
|
||||
<tool-slider label="Speed factor" :target="speed_factor" :max="200" :multi="100" :step="5" :dynamic-range="true" command="M220" attribute-name="S" ></tool-slider>
|
||||
<v-divider></v-divider>
|
||||
<tool-slider label="Extrusion factor" :target="extrude_factor" :max="200" :multi="100" :step="1" :dynamic-range="true" command="M221" attribute-name="S" ></tool-slider>
|
||||
<tool-slider label="Extrusion factor" new-dynamic :editable="true" :target="extrude_factor" :max="200" :multi="100" :step="1" :dynamic-range="true" command="M221" attribute-name="S" ></tool-slider>
|
||||
</v-card>
|
||||
<v-card class="mt-6" v-if="this['printer/getMiscellaneous'].length">
|
||||
<v-toolbar flat dense >
|
||||
@ -67,7 +67,7 @@
|
||||
]),
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.printer_state);
|
||||
console.log(this.extrude_factor, this.speed_factor, this.printer_state);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<span class="font-weight-bold">
|
||||
<template v-if="dynamicRange">
|
||||
<!-- <template v-if="dynamicRange">
|
||||
<v-progress-circular
|
||||
v-if="sliding && (value === processedMin || value === processedMax)"
|
||||
class="mr-2"
|
||||
@ -30,18 +30,50 @@
|
||||
:size="20"
|
||||
:width="2"
|
||||
></v-progress-circular>
|
||||
</template>-->
|
||||
<template v-if="editable">
|
||||
<v-btn @click="editing = true" icon x-small>
|
||||
<v-icon x-small>mdi-pencil</v-icon>
|
||||
</v-btn>
|
||||
<v-dialog v-model="editing" :max-width="200">
|
||||
<v-card>
|
||||
<v-card-title>{{ label }}</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="d-flex justify-center text-center">
|
||||
<v-text-field
|
||||
ref="editInput"
|
||||
:value="value"
|
||||
type="number"
|
||||
class="flex-shrink-1"
|
||||
style="width: 80px;"
|
||||
autofocus
|
||||
@keypress.enter="editSpeed()"
|
||||
>
|
||||
<span
|
||||
slot="append"
|
||||
>{{ unit }}</span>
|
||||
</v-text-field>
|
||||
</div>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn color="red darken-1" text @click="editing = false">Cancel</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="green darken-1" text @click="editSpeed()">Ok</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
{{ value }} {{ unit }}
|
||||
</span>
|
||||
</v-subheader>
|
||||
<v-card-text class="py-0">
|
||||
<v-slider
|
||||
v-if="!newDynamic"
|
||||
v-model="value"
|
||||
:min="processedMin"
|
||||
:max="processedMax"
|
||||
@start="sliding = true"
|
||||
@end="sendCmd"
|
||||
@input="processNewRange"
|
||||
hide-details>
|
||||
|
||||
<template v-slot:prepend>
|
||||
@ -52,6 +84,57 @@
|
||||
<v-icon @click="increment">mdi-plus</v-icon>
|
||||
</template>
|
||||
</v-slider>
|
||||
<v-slider
|
||||
v-else
|
||||
v-model="dynamicValue"
|
||||
:min="0"
|
||||
:max="60"
|
||||
:step="10"
|
||||
color="none"
|
||||
thumb-color="blue"
|
||||
:thumb-size="20"
|
||||
track-fill-color="blue"
|
||||
track-color="blue"
|
||||
@start="sliding = true"
|
||||
@input="changeDynamicRange"
|
||||
@end="dynamicValue = 30; clearInterval(dynamicTimer); dynamicTimer = null; sendCmd(); sliding = false;"
|
||||
>
|
||||
<template #thumb-label="{ value }">
|
||||
<template v-if="value > 30">
|
||||
<span class="d-flex">
|
||||
<v-icon
|
||||
v-for="key in Array(Math.abs(value - 30) / 10).keys()" :key="'arrow-' + key"
|
||||
style="height: 8px; width: 4px;"
|
||||
small
|
||||
>mdi-menu-right</v-icon>
|
||||
</span>
|
||||
</template>
|
||||
<template v-if="value < 30">
|
||||
<span class="d-flex">
|
||||
<v-icon
|
||||
v-for="key in Array(Math.abs(value - 30) / 10).keys()" :key="'arrow-' + key"
|
||||
style="height: 8px; width: 4px;"
|
||||
small
|
||||
>mdi-menu-left</v-icon>
|
||||
</span>
|
||||
</template>
|
||||
<template v-if="value === 30">
|
||||
<v-icon
|
||||
style="transform: rotateZ(90deg)"
|
||||
small
|
||||
>
|
||||
mdi-menu-swap
|
||||
</v-icon>
|
||||
</template>
|
||||
</template>
|
||||
<template v-slot:prepend>
|
||||
<v-icon @click="decrement" class="mr-5">mdi-minus</v-icon>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-icon @click="increment" class="ml-5">mdi-plus</v-icon>
|
||||
</template>
|
||||
</v-slider>
|
||||
</v-card-text>
|
||||
</v-col>
|
||||
</v-row>
|
||||
@ -104,6 +187,11 @@
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
newDynamic: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
defaultValue: {
|
||||
type: Number,
|
||||
required: false,
|
||||
@ -119,6 +207,11 @@
|
||||
required: false,
|
||||
default: 1
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -128,7 +221,11 @@
|
||||
processedMin: this.min,
|
||||
processedMax: this.max,
|
||||
dynamicStep: Math.floor((this.max - this.min) / 2),
|
||||
processingTimer: null
|
||||
dynamicTimer: null,
|
||||
dynamicValue: 30,
|
||||
editing: false,
|
||||
processingTimer: null,
|
||||
clearInterval: (timer) => clearInterval(timer)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -141,20 +238,74 @@
|
||||
|
||||
},
|
||||
watch: {
|
||||
target: function(newVal) {
|
||||
this.value = newVal * this.multi;
|
||||
target: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
this.value = newVal * this.multi;
|
||||
if (!this.dynamicRange) {
|
||||
return;
|
||||
}
|
||||
if (this.processingTimer) {
|
||||
clearTimeout(this.processingTimer);
|
||||
this.processingTimer = null;
|
||||
}
|
||||
if (this.value === this.processedMax || this.value === this.processedMin) {
|
||||
this.processingTimer = setTimeout(() => {
|
||||
this.processedMin = Math.max(0, this.value - this.dynamicStep);
|
||||
this.processedMax = Math.min(1000, this.value + this.dynamicStep);
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
editSpeed() {
|
||||
if (this.$refs.editInput) {
|
||||
try {
|
||||
const newValue = parseInt(this.$refs.editInput.internalValue);
|
||||
if (!isNaN(newValue)) {
|
||||
this.value = this.clamp(newValue, 1, 1000);
|
||||
this.sendCmd(true);
|
||||
}
|
||||
} catch(e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
this.editing = false;
|
||||
},
|
||||
changeDynamicRange() {
|
||||
if (this.dynamicTimer) {
|
||||
clearInterval(this.dynamicTimer);
|
||||
this.dynamicTimer = null;
|
||||
}
|
||||
const normalised = this.dynamicValue - 30;
|
||||
const step = Math.abs(normalised) / 10;
|
||||
console.log(normalised, step);
|
||||
this.dynamicTimer = setInterval(() => {
|
||||
let addVal = 0;
|
||||
if (normalised < 0) {
|
||||
addVal = -1;
|
||||
} else if(normalised > 0) {
|
||||
addVal = 1;
|
||||
}
|
||||
this.value = this.value + addVal;
|
||||
}, 500 * (1 / (step * 10)));
|
||||
},
|
||||
processNewRange() {
|
||||
if (!this.dynamicRange || !this.sliding) {
|
||||
return;
|
||||
}
|
||||
if (this.processingTimer) {
|
||||
clearInterval(this.processingTimer);
|
||||
clearTimeout(this.processingTimer);
|
||||
this.processingTimer = null;
|
||||
}
|
||||
if (this.value === this.processedMax || this.value === this.processedMin) {
|
||||
this.processingTimer = setTimeout(() => {
|
||||
this.processedMin = Math.max(0, this.value - this.dynamicStep);
|
||||
this.processedMax = Math.min(1000, this.value + this.dynamicStep);
|
||||
}, 1000);
|
||||
}
|
||||
/*if (this.value === this.processedMax || this.value === this.processedMin) {
|
||||
this.processingTimer = setInterval(() => {
|
||||
let was = '';
|
||||
if (this.value === this.processedMax) {
|
||||
@ -166,27 +317,26 @@
|
||||
this.processedMax = Math.min(1000, this.value + this.dynamicStep);
|
||||
this.value = was === 'max' ? this.processedMax : this.processedMin;
|
||||
}, 500);
|
||||
}
|
||||
}*/
|
||||
},
|
||||
sendCmd() {
|
||||
if (this.sliding) {
|
||||
sendCmd(btnPress = false) {
|
||||
if (this.sliding || btnPress) {
|
||||
let gcode = this.command + ' ' + this.attributeName + (Math.max(1, this.value) * this.attributeScale).toFixed(0)
|
||||
this.$store.commit('server/addEvent', {message: gcode, type: 'command'})
|
||||
this.$socket.sendObj('printer.gcode.script', {script: gcode})
|
||||
this.sliding = false;
|
||||
if (this.processingTimer) {
|
||||
clearInterval(this.processingTimer);
|
||||
this.processingTimer = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
clamp(value, min, max) {
|
||||
return Math.max(min, Math.min(max, value ?? 0));
|
||||
},
|
||||
decrement() {
|
||||
this.value = this.value > this.min ? (this.value - this.step).toFixed(0) : this.min
|
||||
this.sendCmd();
|
||||
this.value = this.value > this.min ? this.value - this.step : this.min
|
||||
this.sendCmd(true);
|
||||
},
|
||||
increment() {
|
||||
this.value = this.value < this.max ? (this.value + this.step).toFixed(0) : this.max
|
||||
this.sendCmd();
|
||||
this.value = this.value < this.max ? this.value + this.step : this.max
|
||||
this.sendCmd(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user