combine control and extruder panel
Signed-off-by: Stefan Dej <meteyou@gmail.com>
This commit is contained in:
Stefan Dej
parent
f16d80745a
commit
78549ef587
@ -227,6 +227,31 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
<v-row>
|
||||
<v-col class="pa-0">
|
||||
<v-divider></v-divider>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class="">
|
||||
<v-col class="col col-md-6 pt-2">
|
||||
<span class="text--disabled" style="font-size: .9em">Feed amount [mm]</span>
|
||||
<v-btn-toggle class="mt-1" dense no-gutters style="flex-wrap: nowrap; width: 100%;" >
|
||||
<v-btn v-for="amount in feedamountsSorted" v-bind:key="amount" @click="setFeedAmount(amount)" dense :class="(amount === currentFeedAmount ? '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 pt-2">
|
||||
<span class="text--disabled" style="font-size: .9em">Feedrate [mm/s]</span>
|
||||
<v-btn-toggle class="mt-1" dense no-gutters style="flex-wrap: nowrap; width: 100%;" >
|
||||
<v-btn v-for="rate in feedratesSorted" v-bind:key="rate" @click="setFeedrate(rate)" dense :class="(rate === currentFeedRate ? 'v-btn--active' : '') + ' btnMinWidthAuto flex-grow-1 px-0 _btnFeedrate'">{{ rate }}</v-btn>
|
||||
</v-btn-toggle>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class="">
|
||||
<v-col class="col text-center pt-0">
|
||||
<v-btn small @click="sendRetract()" class="mx-3" :loading="loadings.includes('btnRetract')" :disabled="!this['printer/getExtrudePossible']"><v-icon small class="mr-1">mdi-arrow-up-bold</v-icon> Retract</v-btn>
|
||||
<v-btn small @click="sendDetract()" class="mx-3" :loading="loadings.includes('btnDetract')" :disabled="!this['printer/getExtrudePossible']"><v-icon small class="mr-1">mdi-arrow-down-bold</v-icon> Extrude</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card>
|
||||
<v-card class="mt-6" v-if="this['printer/getMacros'].length > 0">
|
||||
@ -273,6 +298,10 @@
|
||||
config: state => state.printer.configfile.config,
|
||||
loadings: state => state.socket.loadings,
|
||||
printer_state: state => state.printer.print_stats.state,
|
||||
extruder: state => state.printer.extruder,
|
||||
|
||||
feedamounts: state => state.gui.dashboard.extruder.feedamounts,
|
||||
feedrates: state => state.gui.dashboard.extruder.feedrates,
|
||||
|
||||
feedrateXY: state => state.gui.dashboard.control.feedrateXY,
|
||||
stepsXY: state => state.gui.dashboard.control.stepsXY,
|
||||
@ -284,6 +313,7 @@
|
||||
}),
|
||||
...mapGetters([
|
||||
'printer/getMacros',
|
||||
'printer/getExtrudePossible',
|
||||
]),
|
||||
reverseZ: {
|
||||
get() {
|
||||
@ -342,6 +372,32 @@
|
||||
...(this.stepsAll ?? []),
|
||||
])).sort((a, b) => a-b)
|
||||
}
|
||||
},
|
||||
feedamountsSorted: {
|
||||
get() {
|
||||
return [...this.feedamounts].sort((a,b) => { return b-a })
|
||||
}
|
||||
},
|
||||
feedratesSorted: {
|
||||
get() {
|
||||
return [...this.feedrates].sort((a,b) => { return b-a })
|
||||
}
|
||||
},
|
||||
currentFeedAmount: {
|
||||
get() {
|
||||
return parseFloat(this.$store.state.gui.dashboard.extruder.feedamount)
|
||||
},
|
||||
set(newVal) {
|
||||
return this.$store.dispatch('gui/setSettings', { dashboard: { extruder: { feedamount: newVal } } })
|
||||
}
|
||||
},
|
||||
currentFeedRate: {
|
||||
get() {
|
||||
return parseFloat(this.$store.state.gui.dashboard.extruder.feedrate)
|
||||
},
|
||||
set(newVal) {
|
||||
return this.$store.dispatch('gui/setSettings', { dashboard: { extruder: { feedrate: newVal } } })
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -405,6 +461,24 @@
|
||||
this.$store.commit('socket/addLoading', { name: 'macro_'+gcode });
|
||||
Vue.prototype.$socket.sendObj('printer.gcode.script', { script: gcode }, "socket/removeLoading", { name: 'macro_'+gcode });
|
||||
},
|
||||
setFeedAmount(value) {
|
||||
this.currentFeedAmount = value;
|
||||
},
|
||||
setFeedrate(value) {
|
||||
this.currentFeedRate = value;
|
||||
},
|
||||
sendRetract() {
|
||||
let gcode = "M83\nG1 E-"+this.currentFeedAmount+" F"+(this.currentFeedRate * 60);
|
||||
this.$store.commit('server/addEvent', { message: gcode, type: 'command' });
|
||||
this.$store.commit('socket/addLoading', { name: 'btnRetract' });
|
||||
Vue.prototype.$socket.sendObj('printer.gcode.script', { script: gcode }, "socket/removeLoading", { name: 'btnRetract' });
|
||||
},
|
||||
sendDetract() {
|
||||
let gcode = "M83\nG1 E"+this.currentFeedAmount+" F"+(this.currentFeedRate * 60);
|
||||
this.$store.commit('server/addEvent', { message: gcode, type: 'command' });
|
||||
this.$store.commit('socket/addLoading', { name: 'btnDetract' });
|
||||
Vue.prototype.$socket.sendObj('printer.gcode.script', { script: gcode }, "socket/removeLoading", { name: 'btnDetract' });
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,98 +0,0 @@
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<v-card v-if="(['standby', 'paused', 'complete'].includes(printer_state))">
|
||||
<v-container>
|
||||
<v-row class="">
|
||||
<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 feedamountsSorted" v-bind:key="amount" @click="setFeedAmount(amount)" dense :class="(amount === currentFeedAmount ? '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 feedratesSorted" v-bind:key="rate" @click="setFeedrate(rate)" dense :class="(rate === currentFeedRate ? 'v-btn--active' : '') + ' btnMinWidthAuto flex-grow-1 px-0 _btnFeedrate'">{{ rate }}</v-btn>
|
||||
</v-btn-toggle>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class="">
|
||||
<v-col class="col text-center">
|
||||
<v-btn small @click="sendRetract()" class="mx-2" :loading="loadings.includes('btnRetract')" :disabled="!this['printer/getExtrudePossible']"><v-icon small class="mr-1">mdi-arrow-up-bold</v-icon> Retract</v-btn>
|
||||
<v-btn small @click="sendDetract()" class="mx-2" :loading="loadings.includes('btnDetract')" :disabled="!this['printer/getExtrudePossible']"><v-icon small class="mr-1">mdi-arrow-down-bold</v-icon> Extrude</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import Vue from "vue";
|
||||
|
||||
export default {
|
||||
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,
|
||||
|
||||
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 })
|
||||
}
|
||||
},
|
||||
currentFeedAmount: {
|
||||
get() {
|
||||
return parseFloat(this.$store.state.gui.dashboard.extruder.feedamount)
|
||||
},
|
||||
set(newVal) {
|
||||
return this.$store.dispatch('gui/setSettings', { dashboard: { extruder: { feedamount: newVal } } })
|
||||
}
|
||||
},
|
||||
currentFeedRate: {
|
||||
get() {
|
||||
return parseFloat(this.$store.state.gui.dashboard.extruder.feedrate)
|
||||
},
|
||||
set(newVal) {
|
||||
return this.$store.dispatch('gui/setSettings', { dashboard: { extruder: { feedrate: newVal } } })
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setFeedAmount(value) {
|
||||
this.currentFeedAmount = value;
|
||||
},
|
||||
setFeedrate(value) {
|
||||
this.currentFeedRate = value;
|
||||
},
|
||||
sendRetract() {
|
||||
let gcode = "M83\nG1 E-"+this.currentFeedAmount+" F"+(this.currentFeedRate * 60);
|
||||
this.$store.commit('server/addEvent', { message: gcode, type: 'command' });
|
||||
this.$store.commit('socket/addLoading', { name: 'btnRetract' });
|
||||
Vue.prototype.$socket.sendObj('printer.gcode.script', { script: gcode }, "socket/removeLoading", { name: 'btnRetract' });
|
||||
},
|
||||
sendDetract() {
|
||||
let gcode = "M83\nG1 E"+this.currentFeedAmount+" F"+(this.currentFeedRate * 60);
|
||||
this.$store.commit('server/addEvent', { message: gcode, type: 'command' });
|
||||
this.$store.commit('socket/addLoading', { name: 'btnDetract' });
|
||||
Vue.prototype.$socket.sendObj('printer.gcode.script', { script: gcode }, "socket/removeLoading", { name: 'btnDetract' });
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -6,7 +6,6 @@ import MinSettingsPanel from './MinSettingsPanel.vue'
|
||||
import MoonrakerFailedPluginsPanel from './MoonrakerFailedPluginsPanel.vue'
|
||||
import ToolsPanel from './ToolsPanel.vue'
|
||||
import ControlPanel from "./ControlPanel";
|
||||
import ExtruderPanel from "./ExtruderPanel";
|
||||
import ZOffsetPanel from "./ZOffsetPanel";
|
||||
import Miscellaneous from "./MiscellaneousPanel";
|
||||
import WebcamPanel from "./WebcamPanel";
|
||||
@ -20,7 +19,6 @@ Vue.component('min-settings-panel', MinSettingsPanel);
|
||||
Vue.component('moonraker-failed-plugins-panel', MoonrakerFailedPluginsPanel);
|
||||
Vue.component('tools-panel', ToolsPanel);
|
||||
Vue.component('control-panel', ControlPanel);
|
||||
Vue.component('extruder-panel', ExtruderPanel);
|
||||
Vue.component('zoffset-panel', ZOffsetPanel);
|
||||
Vue.component('miscellaneous-panel', Miscellaneous);
|
||||
Vue.component('webcam-panel', WebcamPanel);
|
||||
|
||||
@ -8,7 +8,6 @@
|
||||
<webcam-panel class="mt-6" v-if="showDashboardWebcam"></webcam-panel>
|
||||
<z-offset-panel class="mt-6" v-if="klippy_state === 'ready'"></z-offset-panel>
|
||||
<control-panel class="mt-6" v-if="klippy_state === 'ready'"></control-panel>
|
||||
<extruder-panel class="mt-6" v-if="klippy_state === 'ready'"></extruder-panel>
|
||||
<miscellaneous-panel v-if="klippy_state === 'ready'"></miscellaneous-panel>
|
||||
</v-col>
|
||||
<v-col class="col-sm-12 col-md-7" v-if="klippy_connected">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user