Skip to content

Commit

Permalink
feature: add customize feedrate & feed distances to ExtruderPanel.vue (…
Browse files Browse the repository at this point in the history 
…fix #158)

Signed-off-by: Stefan Dej <[email protected]>
  • Loading branch information
@meteyou
meteyou committed Feb 7, 2021
1 parent 88ac7a5 commit 3749b76
Show file tree
Hide file tree
Showing 5 changed files with 217 additions and 49 deletions.
50 changes: 30 additions & 20 deletions src/components/panels/ControlPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,39 +22,27 @@
<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', 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="doSendMove('X-'+steps, feedrateXY)" class="btnMinWidthAuto col" v-for="steps of stepsXYsorted" v-bind:key="'x-'+steps"><span class="body-2">-{{ steps }}</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', 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 @click="doSendMove('X+'+steps, feedrateXY)" class="btnMinWidthAuto col" v-for="steps of stepsXYsortedReverse" v-bind:key="'x+'+steps"><span class="body-2">+{{ steps }}</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', 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="doSendMove('Y-'+steps, feedrateXY)" class="btnMinWidthAuto col" v-for="steps of stepsXYsorted" v-bind:key="'y-'+steps"><span class="body-2">-{{ steps }}</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', 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 @click="doSendMove('Y+'+steps, feedrateXY)" class="btnMinWidthAuto col" v-for="steps of stepsXYsortedReverse" v-bind:key="'y+'+steps"><span class="body-2">+{{ steps }}</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', 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="doSendMove('Z-'+steps, feedrateZ)" class="btnMinWidthAuto col" v-for="steps of stepsZsorted" v-bind:key="'z-'+steps"><span class="body-2">-{{ steps }}</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', 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 @click="doSendMove('Z+'+steps, feedrateZ)" class="btnMinWidthAuto col" v-for="steps of stepsZsortedReverse" v-bind:key="'z+'+steps"><span class="body-2">{{ steps }}</span></v-btn>
</v-btn-toggle>
</v-col>
</v-row>
Expand Down Expand Up @@ -88,11 +76,33 @@
printer_state: state => state.printer.print_stats.state,
feedrateXY: state => state.gui.dashboard.control.feedrateXY,
stepsXY: state => state.gui.dashboard.control.stepsXY,
feedrateZ: state => state.gui.dashboard.control.feedrateZ,
stepsZ: state => state.gui.dashboard.control.stepsZ,
}),
...mapGetters([
'printer/getMacros',
])
]),
stepsXYsorted: {
get() {
return [...this.$store.state.gui.dashboard.control.stepsXY].sort(function(a, b) { return b-a })
}
},
stepsXYsortedReverse: {
get() {
return [...this.$store.state.gui.dashboard.control.stepsXY].sort(function(a, b) { return a-b })
}
},
stepsZsorted: {
get() {
return [...this.$store.state.gui.dashboard.control.stepsZ].sort(function(a, b) { return b-a })
}
},
stepsZsortedReverse: {
get() {
return [...this.$store.state.gui.dashboard.control.stepsZ].sort(function(a, b) { return a-b })
}
}
},
methods: {
doHome() {
Expand Down Expand Up @@ -141,6 +151,6 @@
this.$store.commit('socket/addLoading', { name: 'macro_'+gcode });
Vue.prototype.$socket.sendObj('printer.gcode.script', { script: gcode }, "socket/removeLoading", { name: 'macro_'+gcode });
},
}
},
}
</script>
21 changes: 16 additions & 5 deletions src/components/panels/ExtruderPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@
<v-col class="col col-md-6">
<v-label>Feed amount in mm:</v-label>
<v-btn-toggle class="mt-2" dense no-gutters style="flex-wrap: nowrap; width: 100%;" >
<v-btn v-for="amount in feedAmounts" v-bind:key="amount" @click="setFeedAmount(amount)" dense :class="(amount === feedAmount ? 'v-btn--active' : '') + ' btnMinWidthAuto flex-grow-1 px-0 _btnFeedrate'">{{ amount }}</v-btn>
<v-btn v-for="amount in feedamountsSorted" v-bind:key="amount" @click="setFeedAmount(amount)" dense :class="(amount === feedAmount ? 'v-btn--active' : '') + ' btnMinWidthAuto flex-grow-1 px-0 _btnFeedrate'">{{ amount }}</v-btn>
</v-btn-toggle>
</v-col>
<v-col class="col col-md-6">
<v-label>Feedrate in mm/s:</v-label>
<v-btn-toggle class="mt-2" dense no-gutters style="flex-wrap: nowrap; width: 100%;" >
<v-btn v-for="rate in feedrates" v-bind:key="rate" @click="setFeedrate(rate)" dense :class="(feedrate === rate ? 'v-btn--active' : '') + ' btnMinWidthAuto flex-grow-1 px-0 _btnFeedrate'">{{ rate }}</v-btn>
<v-btn v-for="rate in feedratesSorted" v-bind:key="rate" @click="setFeedrate(rate)" dense :class="(feedrate === rate ? 'v-btn--active' : '') + ' btnMinWidthAuto flex-grow-1 px-0 _btnFeedrate'">{{ rate }}</v-btn>
</v-btn-toggle>
</v-col>
</v-row>
Expand All @@ -41,20 +41,31 @@
return {
feedAmount: 25,
feedrate: 5,
feedAmounts: [ 100, 25, 10, 5, 1 ],
feedrates: [ 60, 30, 15, 5, 1 ],
}
},
computed: {
...mapState({
loadings: state => state.socket.loadings,
printer_state: state => state.printer.print_stats.state,
extruder: state => state.printer.extruder,
config: state => state.printer.configfile.config
config: state => state.printer.configfile.config,
feedamounts: state => state.gui.dashboard.extruder.feedamounts,
feedrates: state => state.gui.dashboard.extruder.feedrates,
}),
...mapGetters([
'printer/getExtrudePossible',
]),
feedamountsSorted: {
get() {
return [...this.feedamounts].sort((a,b) => { return b-a })
}
},
feedratesSorted: {
get() {
return [...this.feedrates].sort((a,b) => { return b-a })
}
}
},
methods: {
setFeedAmount(value) {
Expand Down
185 changes: 163 additions & 22 deletions src/components/panels/Settings/ControlPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,129 @@
</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>
<div>
<v-card>
<v-toolbar flat dense >
<v-toolbar-title>
<span class="subheading"><v-icon left>mdi-tune</v-icon>Control</span>
</v-toolbar-title>
</v-toolbar>
<v-card-text class="pa-0">
<v-container>
<v-row>
<v-col col-6>
<v-text-field
label="Speed XY"
v-model="feedrateXY"
type="number"
suffix="mm/s"
hide-details="auto"
></v-text-field>
</v-col>
<v-col col-6>
<v-text-field
label="Speed Z"
v-model="feedrateZ"
type="number"
suffix="mm/s"
hide-details="auto"
></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col>
<v-combobox
label="Move distances XY in mm"
v-model="stepsXY"
hide-selected
hide-details="auto"
multiple
small-chips
:deletable-chips="true"
append-icon=""
type="number"
:rules="[
v => v.length > 0 || 'Minimum 1 value',
v => v.length < 4 || 'For narrow screens it is recommended to enter max. 3 values.',
]"
></v-combobox>
</v-col>
</v-row>
<v-row>
<v-col>
<v-combobox
label="Move distances Z in mm"
v-model="stepsZ"
:items="defaultStepsZ"
hide-selected
hide-details="auto"
multiple
small-chips
:deletable-chips="true"
append-icon=""
type="number"
:rules="[
v => v.length > 0 || 'Minimum 1 value',
v => v.length < 4 || 'For narrow screens it is recommended to enter max. 3 values.',
]"
></v-combobox>
</v-col>
</v-row>
</v-container>
</v-card-text>
</v-card>
<v-card class="mt-6">
<v-toolbar flat dense >
<v-toolbar-title>
<span class="subheading"><v-icon left>mdi-tune</v-icon>Extruder</span>
</v-toolbar-title>
</v-toolbar>
<v-card-text class="pa-0">
<v-container>
<v-row>
<v-col>
<v-combobox
label="Move distances E in mm"
v-model="feedamountsE"
:items="defaultFeedamounts"
hide-selected
hide-details="auto"
multiple
small-chips
:deletable-chips="true"
append-icon=""
type="number"
:rules="[
v => v.length > 0 || 'Minimum 1 value',
v => v.length < 6 || 'For narrow screens it is recommended to enter max. 5 values.',
]"
></v-combobox>
</v-col>
</v-row>
<v-row>
<v-col>
<v-combobox
label="Speed E in mm/s"
v-model="feedratesE"
:items="defaultFeedrates"
hide-selected
hide-details="auto"
multiple
small-chips
:deletable-chips="true"
append-icon=""
type="number"
:rules="[
v => v.length > 0 || 'Minimum 1 value',
v => v.length < 6 || 'For narrow screens it is recommended to enter max. 5 values.',
]"
></v-combobox>
</v-col>
</v-row>
</v-container>
</v-card-text>
</v-card>
</div>
</template>

<script>
Expand All @@ -35,7 +137,10 @@
},
data: function() {
return {
defaultStepsXY: [100,10,1],
defaultStepsZ: [25,1,0.1],
defaultFeedamounts: [ 50, 25, 10, 5, 1 ],
defaultFeedrates: [ 60, 30, 15, 5, 1 ],
}
},
computed: {
Expand All @@ -47,6 +152,15 @@
return this.$store.dispatch('gui/setSettings', { dashboard: { control: { feedrateXY: value } } })
}
},
stepsXY: {
get() {
const steps = this.$store.state.gui.dashboard.control.stepsXY
return steps.sort(function (a,b) { return b-a })
},
set(value) {
return this.$store.dispatch('gui/setSettings', { dashboard: { control: { stepsXY: value } } })
}
},
feedrateZ: {
get() {
return this.$store.state.gui.dashboard.control.feedrateZ
Expand All @@ -55,6 +169,33 @@
return this.$store.dispatch('gui/setSettings', { dashboard: { control: { feedrateZ: value } } })
}
},
stepsZ: {
get() {
const steps = this.$store.state.gui.dashboard.control.stepsZ
return steps.sort(function (a,b) { return b-a })
},
set(value) {
return this.$store.dispatch('gui/setSettings', { dashboard: { control: { stepsZ: value } } })
}
},
feedamountsE: {
get() {
const steps = this.$store.state.gui.dashboard.extruder.feedamounts
return steps.sort(function (a,b) { return b-a })
},
set(value) {
return this.$store.dispatch('gui/setSettings', { dashboard: { extruder: { feedamounts: value } } })
}
},
feedratesE: {
get() {
const steps = this.$store.state.gui.dashboard.extruder.feedrates
return steps.sort(function (a,b) { return b-a })
},
set(value) {
return this.$store.dispatch('gui/setSettings', { dashboard: { extruder: { feedrates: value } } })
}
},
},
methods: {
Expand Down
4 changes: 2 additions & 2 deletions src/pages/settings/interface.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@
<settings-console-panel class="mt-6"></settings-console-panel>
</v-col>
<v-col class="col-12 col-md-6 col-lg-4">
<settings-control-panel></settings-control-panel>
<settings-macros-panel class="mt-6"></settings-macros-panel>
<settings-macros-panel></settings-macros-panel>
</v-col>
<v-col class="col-12 col-md-6 col-lg-4">
<settings-presets-panel></settings-presets-panel>
<settings-remote-printers-panel class="mt-6"></settings-remote-printers-panel>
<settings-control-panel class="mt-6"></settings-control-panel>
</v-col>
</v-row>
</div>
Expand Down
6 changes: 6 additions & 0 deletions src/store/gui/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,13 @@ export function getDefaultState() {
hiddenTempChart: [],
control: {
feedrateXY: 100,
stepsXY: [ 100, 10, 1 ],
feedrateZ: 25,
stepsZ: [ 25, 1, 0.1 ],
},
extruder: {
feedamounts: [ 50, 25, 10, 5, 1 ],
feedrates: [ 60, 30, 15, 5, 1 ],
}
},
webcam: {
Expand Down

0 comments on commit 3749b76

Please sign in to comment.