new dynamic slider example

src/components/panels/MiscellaneousPanel.vue

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

src/inputs/ToolSlider.vue

@@ -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) {
+            target: {
-                this.value = newVal * this.multi;
+                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() {
+            sendCmd(btnPress = false) {
-                if (this.sliding) {
+                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.value = this.value > this.min ? this.value - this.step : this.min
-                this.sendCmd();
+                this.sendCmd(true);
             },
             increment() {
-                this.value = this.value < this.max ? (this.value + this.step).toFixed(0) : this.max
+                this.value = this.value < this.max ? this.value + this.step : this.max
-                this.sendCmd();
+                this.sendCmd(true);
             }
         }
     }