start printing

This commit is contained in:
Stefan Dej
2020-03-06 00:53:27 +01:00
parent c4736a4975
commit b26bc80060
7 changed files with 116 additions and 34 deletions

View File

@@ -32,7 +32,7 @@
elevate-on-scroll>
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-spacer></v-spacer>
<v-btn color="error">Emergency Stop</v-btn>
<v-btn color="error" :loading="loadingEmergencyStop" @click="emergencyStop">Emergency Stop</v-btn>
</v-app-bar>
<v-content id="content">
@@ -81,7 +81,11 @@ export default {
header: [],
heater_bed: [],
extruder: ["temperature", "target"],
fan: []});
fan: [],
pause_resume: [],
idle_timeout: [],
});
this.$socket.sendObj('get_printer_files', {}, 'getFileList');
}
},
@@ -93,7 +97,14 @@ export default {
toolhead: state => state.printer.toolhead,
hostname: state => state.printer.hostname,
version: state => state.printer.version,
loadingEmergencyStop: state => state.socket.loadingEmergencyStop,
}),
},
methods: {
emergencyStop: function() {
this.$store.commit('setLoadingEmergencyStop', true);
this.$socket.sendObj('post_printer_gcode', {script: 'M112'}, 'setLoadingEmergencyStop');
},
}
}
</script>

View File

@@ -6,6 +6,9 @@
<v-list-item-title class="headline">Status</v-list-item-title>
<v-list-item-subtitle>{{ toolhead !== null && 'status' in toolhead ? toolhead.status : "" }}</v-list-item-subtitle>
</v-list-item-content>
<v-btn class="orange" v-if="toolhead && toolhead.status === 'Printing'" @click="btnPauseJob" :loading="btnStatusPause">pause job</v-btn>
<v-btn class="red" v-if="toolhead && toolhead.status === 'Paused'" :loading="btnStatusResume">resume job</v-btn>
<v-btn class="red" v-if="toolhead && toolhead.status === 'Paused'">cancel job</v-btn>
</v-list-item>
<v-divider class="my-2" ></v-divider>
<v-card-text class="px-0 pt-0 pb-2 content">
@@ -110,14 +113,23 @@
export default {
computed: {
...mapState({
position: state => state.printer.toolhead.position
position: state => state.printer.toolhead.position,
btnStatusPause: state => state.socket.loadingPrintPause,
btnStatusResume: state => state.socket.loadingPrintResume,
}),
...mapGetters([
'toolhead'
])
},
methods: {
btnPauseJob() {
this.$store.commit('setLoadingPrintPause', true);
this.$socket.sendObj('post_printer_print_pause', { }, 'setLoadingPrintPause');
},
btnResumeJob() {
this.$store.commit('setLoadingPrintResume', true);
this.$socket.sendObj('post_printer_print_resume', { }, 'setLoadingPrintResume');
}
},
}
</script>

View File

@@ -7,8 +7,9 @@ import routes from './routes'
import VueResource from 'vue-resource'
import './components'
import store from './store'
import { hostname } from './store/variables'
Vue.use(JRPCWS, 'ws://'+window.location.host+'/websocket', {
Vue.use(JRPCWS, 'ws://' + hostname + '/websocket', {
store: store
});

View File

@@ -22,7 +22,7 @@
</template>
<template #item="{ item }">
<tr @contextmenu="showContextMenu($event, item)">
<tr @contextmenu="showContextMenu($event, item)" @click="dialog.show = true, dialog.filename = item.filename">
<td class=" ">
{{ item.filename }}
</td>
@@ -38,25 +38,41 @@
</v-card>
<v-menu v-model="contextMenu.shown" :position-x="contextMenu.x" :position-y="contextMenu.y" absolute offset-y>
<v-list>
<v-list-item>
<!--<v-list-item>
<v-icon class="mr-1">mdi-cloud-download</v-icon> Download
</v-list-item>
</v-list-item>-->
<v-list-item @click="removeFile">
<v-icon class="mr-1">mdi-delete</v-icon> Delete
</v-list-item>
</v-list>
</v-menu>
<v-dialog v-model="dialog.show" max-width="400">
<v-card>
<v-card-title class="headline">Start Job</v-card-title>
<v-card-text>Do you want to start {{ dialog.filename }}?</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="red darken-1" text @click="dialog.show = false">No</v-btn>
<v-btn color="green darken-1" text @click="startPrint(dialog.filename)">Yes</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
import { mapState } from 'vuex';
import axios from 'axios';
import { hostname } from '../store/variables';
export default {
data () {
return {
sortBy: 'modified',
sortDesc: true,
dialog: {
show: false,
filename: ""
},
headers: [
{
text: 'Name',
@@ -101,7 +117,7 @@
formData.append('file', file);
this.$store.commit('setLoadingGcodeUpload', true);
axios.post('http://'+window.location.host+'/printer/files/upload',
axios.post('http://' + hostname + '/printer/files/upload',
formData, {
headers: { 'Content-Type': 'multipart/form-data' }
}
@@ -151,17 +167,22 @@
});
},
removeFile() {
window.console.log(this.contextMenu.item);
window.console.log("remove");
axios.delete(
'http://'+window.location.host+'/printer/files/'+this.contextMenu.item.filename
'http://'+hostname+'/printer/files/'+this.contextMenu.item.filename
).then(() => {
window.console.log('success');
this.$toast(this.contextMenu.item.filename+" successfully deleted.", {
icon: 'fa-trash'
});
}).catch(() => {
window.console.log('fail');
this.$toast.error("Error! Cannot delete file.", {
icon: 'fa-warning'
});
});
},
startPrint(filename = "") {
this.dialog.show = false;
this.$socket.sendObj('post_printer_print_start', { filename: filename }, 'switchToDashboard');
}
}
}
</script>

View File

@@ -1,9 +1,9 @@
import Dashboard from '../pages/Dashboard.vue'
import Status from '../pages/Status.vue'
//import Status from '../pages/Status.vue'
import Console from '../pages/Console.vue'
import Files from '../pages/Files.vue'
import SettingsGeneral from '../pages/settings/general.vue'
import SettingsMachine from '../pages/settings/machine.vue'
//import SettingsGeneral from '../pages/settings/general.vue'
//import SettingsMachine from '../pages/settings/machine.vue'
const routes = [
{
@@ -13,24 +13,24 @@ const routes = [
component: Dashboard
},
{
title: "Console",
path: '/console',
icon: 'code-tags',
component: Console
},
/*{
title: "Current Job",
path: '/status',
icon: 'printer-3d-nozzle',
component: Status
},
},*/
{
title: "G-Code Files",
path: '/files',
icon: 'printer-3d-nozzle',
component: Files
},
{
title: "Console",
path: '/console',
icon: 'code-tags',
component: Console
},
{
/*{
title: "Settings",
path: '/settings',
icon: 'wrench',
@@ -48,7 +48,7 @@ const routes = [
component: SettingsMachine
},
]
},
},*/
];

View File

@@ -24,6 +24,9 @@ export default new Vuex.Store({
isConnected: false,
loadingGcodeUpload: false,
loadingGcodeRefresh: false,
loadingEmergencyStop: false,
loadingPrintPause: false,
loadingPrintResume: false,
},
printer: {
hostname: '',
@@ -160,8 +163,7 @@ export default new Vuex.Store({
state.socket.loadingSendGcode = value;
},
sendGcode(state, data) {
window.console.log(data);
sendGcode(state) {
state.socket.loadingSendGcode = false;
},
@@ -177,6 +179,22 @@ export default new Vuex.Store({
state.socket.loadingGcodeRefresh = value;
},
setLoadingEmergencyStop(state, value) {
state.socket.loadingEmergencyStop = value;
},
setLoadingPrintPause(state, value) {
state.socket.loadingPrintPause = value;
},
setLoadingPrintResume(state, value) {
state.socket.loadingPrintResume = value;
},
reportError: (data) => {
this.$toast(data.message)
},
voidMutation() {
},
@@ -199,11 +217,7 @@ export default new Vuex.Store({
},
socket_on_error ({ commit }, data) {
commit('voidMutation');
window.console.error('Socket Error: ' + data.message);
window.console.log(data);
//this.$toast.error(data.message)
commit('reportError', data);
},
socket_on_message ({ commit, state }, data) {
@@ -221,6 +235,10 @@ export default new Vuex.Store({
commit('setPrinterStatus', data.params[0]);
break;
/*case 'notify_klippy_state_changed':
commit('setPrinterStatus', data.params[0]);
break;*/
case 'notify_filelist_changed':
commit('setFileList', data.params[0].filelist);
break;
@@ -267,9 +285,26 @@ export default new Vuex.Store({
commit('setLoadingSendGcode', value);
},
setLoadingEmergencyStop({commit}) {
commit('setLoadingEmergencyStop', false);
},
setLoadingPrintPause({commit}) {
commit('setLoadingPrintPause', false);
},
setLoadingPrintResume({commit}) {
commit('setLoadingPrintResume', false);
},
sendGcode({commit}, data) {
commit('setLoadingSendGcode', false);
commit('sendGcode', data);
},
switchToDashboard(state) {
window.console.log(state);
}
}
});

2
src/store/variables.js Normal file
View File

@@ -0,0 +1,2 @@
//export const hostname = window.location.host;
export const hostname = "kossel.local:8080";