feature: add customize feedrate for ControlPanel.vue (fix #49)

Signed-off-by: Stefan Dej <[email protected]>
mainsail-crew · Feb 7, 2021 · 88ac7a5 · 88ac7a5
1 parent eb123ff
commit 88ac7a5
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 22 deletions.
diff --git a/src/components/panels/ControlPanel.vue b/src/components/panels/ControlPanel.vue
@@ -22,39 +22,39 @@
             <v-row no-gutters class="mt-3" v-if="['standby', 'paused', 'complete', 'error'].includes(printer_state)">
                 <v-col class="text-center">
                     <v-btn-toggle dense no-gutters class="row no-gutters  mx-auto" style="flex-wrap: nowrap;" >
-                        <v-btn @click="doSendMove('X-100')" class="btnMinWidthAuto col"><span class="body-2">-100</span></v-btn>
-                        <v-btn @click="doSendMove('X-10')" class="btnMinWidthAuto col"><span class="body-2">-10</span></v-btn>
-                        <v-btn @click="doSendMove('X-1')" class="btnMinWidthAuto col"><span class="body-2">-1</span></v-btn>
+                        <v-btn @click="doSendMove('X-100', feedrateXY)" class="btnMinWidthAuto col"><span class="body-2">-100</span></v-btn>
+                        <v-btn @click="doSendMove('X-10', feedrateXY)" class="btnMinWidthAuto col"><span class="body-2">-10</span></v-btn>
+                        <v-btn @click="doSendMove('X-1', feedrateXY)" class="btnMinWidthAuto col"><span class="body-2">-1</span></v-btn>
                         <v-btn @click="doHomeX" :color="homedAxes.includes('x') ? 'primary' : 'warning'" :loading="loadings.includes('homeX')" class="font-weight-bold btnHomeAxis">X</v-btn>
-                        <v-btn @click="doSendMove('X+1')" class="btnMinWidthAuto col"><span class="body-2">+1</span></v-btn>
-                        <v-btn @click="doSendMove('X+10')" class="btnMinWidthAuto col"><span class="body-2">+10</span></v-btn>
-                        <v-btn @click="doSendMove('X+100')" class="btnMinWidthAuto col"><span class="body-2">+100</span></v-btn>
+                        <v-btn @click="doSendMove('X+1', feedrateXY)" class="btnMinWidthAuto col"><span class="body-2">+1</span></v-btn>
+                        <v-btn @click="doSendMove('X+10', feedrateXY)" class="btnMinWidthAuto col"><span class="body-2">+10</span></v-btn>
+                        <v-btn @click="doSendMove('X+100', feedrateXY)" class="btnMinWidthAuto col"><span class="body-2">+100</span></v-btn>
                     </v-btn-toggle>
                 </v-col>
             </v-row>
             <v-row no-gutters class="mt-3" v-if="['standby', 'paused', 'complete', 'error'].includes(printer_state)">
                 <v-col class="text-center">
                     <v-btn-toggle dense no-gutters class="row no-gutters  mx-auto" style="flex-wrap: nowrap;" >
-                        <v-btn @click="doSendMove('Y-100')" class="btnMinWidthAuto col"><span class="body-2">-100</span></v-btn>
-                        <v-btn @click="doSendMove('Y-10')" class="btnMinWidthAuto col"><span class="body-2">-10</span></v-btn>
-                        <v-btn @click="doSendMove('Y-1')" class="btnMinWidthAuto col"><span class="body-2">-1</span></v-btn>
+                        <v-btn @click="doSendMove('Y-100', feedrateXY)" class="btnMinWidthAuto col"><span class="body-2">-100</span></v-btn>
+                        <v-btn @click="doSendMove('Y-10', feedrateXY)" class="btnMinWidthAuto col"><span class="body-2">-10</span></v-btn>
+                        <v-btn @click="doSendMove('Y-1', feedrateXY)" class="btnMinWidthAuto col"><span class="body-2">-1</span></v-btn>
                         <v-btn @click="doHomeY" :color="homedAxes.includes('y') ? 'primary' : 'warning'" :loading="loadings.includes('homeY')" class="font-weight-bold btnHomeAxis">Y</v-btn>
-                        <v-btn @click="doSendMove('Y+1')" class="btnMinWidthAuto col"><span class="body-2">+1</span></v-btn>
-                        <v-btn @click="doSendMove('Y+10')" class="btnMinWidthAuto col"><span class="body-2">+10</span></v-btn>
-                        <v-btn @click="doSendMove('Y+100')" class="btnMinWidthAuto col"><span class="body-2">+100</span></v-btn>
+                        <v-btn @click="doSendMove('Y+1', feedrateXY)" class="btnMinWidthAuto col"><span class="body-2">+1</span></v-btn>
+                        <v-btn @click="doSendMove('Y+10', feedrateXY)" class="btnMinWidthAuto col"><span class="body-2">+10</span></v-btn>
+                        <v-btn @click="doSendMove('Y+100', feedrateXY)" class="btnMinWidthAuto col"><span class="body-2">+100</span></v-btn>
                     </v-btn-toggle>
                 </v-col>
             </v-row>
             <v-row no-gutters class="mt-3" v-if="['standby', 'paused', 'complete', 'error'].includes(printer_state)">
                 <v-col class="text-center">
                     <v-btn-toggle dense no-gutters class="row no-gutters mx-auto" style="flex-wrap: nowrap;" >
-                        <v-btn @click="doSendMove('Z-25')" dense class="btnMinWidthAuto col"><span class="body-2">-25</span></v-btn>
-                        <v-btn @click="doSendMove('Z-1')" dense class="btnMinWidthAuto col"><span class="body-2">-1</span></v-btn>
-                        <v-btn @click="doSendMove('Z-0.1')" dense class="btnMinWidthAuto col"><span class="body-2">-0.1</span></v-btn>
+                        <v-btn @click="doSendMove('Z-25', feedrateZ)" dense class="btnMinWidthAuto col"><span class="body-2">-25</span></v-btn>
+                        <v-btn @click="doSendMove('Z-1', feedrateZ)" dense class="btnMinWidthAuto col"><span class="body-2">-1</span></v-btn>
+                        <v-btn @click="doSendMove('Z-0.1', feedrateZ)" dense class="btnMinWidthAuto col"><span class="body-2">-0.1</span></v-btn>
                         <v-btn @click="doHomeZ" :color="homedAxes.includes('z') ? 'primary' : 'warning'" :loading="loadings.includes('homeZ')" class="font-weight-bold btnHomeAxis">Z</v-btn>
-                        <v-btn @click="doSendMove('Z+0.1')" dense class="btnMinWidthAuto col"><span class="body-2">+0.1</span></v-btn>
-                        <v-btn @click="doSendMove('Z+1')" dense class="btnMinWidthAuto col"><span class="body-2">+1</span></v-btn>
-                        <v-btn @click="doSendMove('Z+25')" dense class="btnMinWidthAuto col"><span class="body-2">+25</span></v-btn>
+                        <v-btn @click="doSendMove('Z+0.1', feedrateZ)" dense class="btnMinWidthAuto col"><span class="body-2">+0.1</span></v-btn>
+                        <v-btn @click="doSendMove('Z+1', feedrateZ)" dense class="btnMinWidthAuto col"><span class="body-2">+1</span></v-btn>
+                        <v-btn @click="doSendMove('Z+25', feedrateZ)" dense class="btnMinWidthAuto col"><span class="body-2">+25</span></v-btn>
                     </v-btn-toggle>
                 </v-col>
             </v-row>
@@ -85,7 +85,10 @@
                 homedAxes: state => state.printer.toolhead.homed_axes,
                 config: state => state.printer.configfile.config,
                 loadings: state => state.socket.loadings,
-                printer_state: state => state.printer.print_stats.state
+                printer_state: state => state.printer.print_stats.state,
+
+                feedrateXY: state => state.gui.dashboard.control.feedrateXY,
+                feedrateZ: state => state.gui.dashboard.control.feedrateZ,
             }),
             ...mapGetters([
                 'printer/getMacros',
@@ -122,9 +125,9 @@
                 this.$store.commit('socket/addLoading', { name: 'zTilt' });
                 this.$socket.sendObj('printer.gcode.script', { script: "Z_TILT_ADJUST" }, "socket/removeLoading", { name: 'zTilt' });
             },
-            doSendMove(gcode) {
+            doSendMove(gcode, feedrate) {
                 gcode = "G91" + "\n" +
-                    "G1 " + gcode + " F6000" + "\n" +
+                    "G1 " + gcode + " F"+feedrate*60 + "\n" +
                     "G90";
 
                 this.doSend(gcode);

diff --git a/src/components/panels/Settings/ControlPanel.vue b/src/components/panels/Settings/ControlPanel.vue
@@ -0,0 +1,63 @@
+<style>
+    .webcamImage {
+        width: 100%;
+    }
+</style>
+
+<template>
+    <v-card>
+        <v-toolbar flat dense >
+            <v-toolbar-title>
+                <span class="subheading"><v-icon left>mdi-tune</v-icon>Control & Extruder</span>
+            </v-toolbar-title>
+        </v-toolbar>
+        <v-card-text class="pt-2 pb-0">
+            <v-text-field
+                label="Feedrate XY"
+                v-model="feedrateXY"
+                type="number"
+                suffix="mm/s"
+            ></v-text-field>
+            <v-text-field
+                label="Feedrate Z"
+                v-model="feedrateZ"
+                type="number"
+                suffix="mm/s"
+            ></v-text-field>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script>
+    export default {
+        components: {
+
+        },
+        data: function() {
+            return {
+
+            }
+        },
+        computed: {
+            feedrateXY: {
+                get() {
+                    return this.$store.state.gui.dashboard.control.feedrateXY
+                },
+                set(value) {
+                    return this.$store.dispatch('gui/setSettings', { dashboard: { control: { feedrateXY: value } } })
+                }
+            },
+            feedrateZ: {
+                get() {
+                    return this.$store.state.gui.dashboard.control.feedrateZ
+                },
+                set(value) {
+                    return this.$store.dispatch('gui/setSettings', { dashboard: { control: { feedrateZ: value } } })
+                }
+            },
+        },
+        methods: {
+
+        }
+    }
+</script>
diff --git a/src/components/panels/Settings/index.js b/src/components/panels/Settings/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 
 import GeneralPanel from './GeneralPanel'
+import ControlPanel from './ControlPanel'
 import WebcamPanel from './WebcamPanel'
 import DashboardPanel from "./DashboardPanel";
 import ConsolePanel from "./ConsolePanel";
@@ -15,6 +16,7 @@ import RemotePrintersPanel from "./RemotePrintersPanel";
 import PresetsPanel from "./PresetsPanel";
 
 Vue.component('settings-general-panel', GeneralPanel);
+Vue.component('settings-control-panel', ControlPanel);
 Vue.component('settings-webcam-panel', WebcamPanel);
 Vue.component('settings-dashboard-panel', DashboardPanel);
 Vue.component('settings-console-panel', ConsolePanel);

diff --git a/src/pages/settings/interface.vue b/src/pages/settings/interface.vue
@@ -8,7 +8,8 @@
                 <settings-console-panel class="mt-6"></settings-console-panel>
             </v-col>
             <v-col class="col-12 col-md-6 col-lg-4">
-                <settings-macros-panel></settings-macros-panel>
+                <settings-control-panel></settings-control-panel>
+                <settings-macros-panel class="mt-6"></settings-macros-panel>
             </v-col>
             <v-col class="col-12 col-md-6 col-lg-4">
                 <settings-presets-panel></settings-presets-panel>

diff --git a/src/store/gui/index.js b/src/store/gui/index.js
@@ -13,6 +13,10 @@ export function getDefaultState() {
 			boolConsole: true,
 			hiddenMacros: [],
 			hiddenTempChart: [],
+			control: {
+				feedrateXY: 100,
+				feedrateZ: 25,
+			}
 		},
 		webcam: {
 			url: "",