first alpha

mainsail-crew · Mar 7, 2020 · e7a5e34 · e7a5e34
1 parent b26bc80
commit e7a5e34
Show file tree

Hide file tree

Showing 11 changed files with 178 additions and 98 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "vue-json-rpc-websocket": "^1.0.5",
     "vue-resource": "^1.5.1",
     "vue-simple-upload": "^0.1.6",
+    "vue-toast-notification": "0.0.3",
     "vuetify": "^2.1.0",
     "vuetify-toast-snackbar": "^0.6.1",
     "vuex": "^3.1.1"

diff --git a/src/App.vue b/src/App.vue
@@ -32,7 +32,8 @@
                    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" :loading="loadingEmergencyStop" @click="emergencyStop">Emergency Stop</v-btn>
+            <v-btn color="green" v-if="!isConnected" :loading="loadingEmergencyStop" @click="emergencyStop"><v-icon class="mr-2">mdi-refresh-circle</v-icon> reconnect</v-btn>
+            <v-btn color="error" v-if="isConnected" :loading="loadingEmergencyStop" @click="emergencyStop">Emergency Stop</v-btn>
         </v-app-bar>
 
         <v-content id="content">
@@ -75,7 +76,7 @@ export default {
             this.$socket.sendObj('get_printer_objects', {}, 'getObjectInfo');
             this.$socket.sendObj('get_printer_status', { heater: [] }, 'getObjectInfo');
             this.$socket.sendObj('post_printer_subscriptions', {
-                gcode: ["gcode_position", "speed", "speed_factor", "extrude_factor"],
+                gcode: ["gcode_position", "speed", "speed_factor", "extrude_factor", "busy", "abs_extrude"],
                 toolhead: [],
                 virtual_sdcard: [],
                 header: [],
@@ -98,6 +99,7 @@ export default {
             hostname: state => state.printer.hostname,
             version: state => state.printer.version,
             loadingEmergencyStop: state => state.socket.loadingEmergencyStop,
+            isConnected: state => state.socket.isConnected,
         }),
     },
     methods: {

diff --git a/src/components/panels/StatusPanel.vue b/src/components/panels/StatusPanel.vue
@@ -7,8 +7,8 @@
                 <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-btn class="orange" v-if="(toolhead && toolhead.status === 'Ready') && is_paused" :loading="btnStatusResume" @click="btnResumeJob">resume job</v-btn>
+            <v-btn class="red ml-2" v-if="(toolhead && toolhead.status === 'Ready') && is_paused" :loading="btnStatusCancel" @click="btnCancelJob">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">
@@ -35,91 +35,64 @@
                     </v-layout>
                 </v-flex>
             </v-layout>
-
-            <!--<v-divider class="my-2" v-if="'position' in toolhead && toolhead.position.length > 3"></v-divider>
-
-            <v-layout wrap class=" text-center" v-if="toolhead && toolhead.position.length > 3">
-                <v-flex col tag="strong" class="category-header">
-                    Drives
-                </v-flex>
-                <v-layout v-for="(drive, index) in this.getDrives()" :key="index" v-bind:index="index">
-                    <v-flex grow class="equal-width">
-                        <v-layout column>
-                            <v-flex tag="strong">E{{ index }}</v-flex>
-                            <v-flex tag="span">{{ drive.toFixed(2) }}</v-flex>
-                        </v-layout>
-                    </v-flex>
-                </v-layout>
-            </v-layout>-->
-
-            <!--<v-divider class="my-2"></v-divider>
-
-            <v-layout wrap class=" text-center">
+            <v-divider class="my-2" v-if="(toolhead && toolhead.status === 'Printing') || is_paused"></v-divider>
+            <v-layout wrap class=" text-center" v-if="(toolhead && toolhead.status === 'Printing') || is_paused">
                 <v-flex col tag="strong" class="category-header">
-                    Speeds
-                </v-flex>
-                <v-flex grow class="equal-width">
-                    <v-layout column>
-                        <v-flex tag="strong">Requested Speed</v-flex>
-                        <v-flex tag="span">123 mm/s</v-flex>
-                    </v-layout>
-                </v-flex>
-                <v-flex grow class="equal-width">
-                    <v-layout column>
-                        <v-flex tag="strong">Top Speed</v-flex>
-                        <v-flex tag="span">321 mm/s</v-flex>
-                    </v-layout>
-                </v-flex>
-            </v-layout>-->
-
-            <!--<v-divider class="my-2"></v-divider>
-
-            <v-layout wrap class=" text-center">
-                <v-flex tag="strong" class="category-header">
-                    Quad Gantry Levelin
+                    Printstatus
                 </v-flex>
                 <v-flex grow class="equal-width">
                     <v-layout column>
-                        <v-flex tag="strong">Z0</v-flex>
-                        <v-flex tag="span">1.2um</v-flex>
+                        <v-flex tag="strong">printing</v-flex>
+                        <v-flex tag="span">{{ formatTime(toolhead.printing_time) }}</v-flex>
                     </v-layout>
                 </v-flex>
                 <v-flex grow class="equal-width">
                     <v-layout column>
-                        <v-flex tag="strong">Z1</v-flex>
-                        <v-flex tag="span">0.9um</v-flex>
+                        <v-flex tag="strong">estimated</v-flex>
+                        <v-flex tag="span">{{ formatTime(print_time) }}</v-flex>
                     </v-layout>
                 </v-flex>
                 <v-flex grow class="equal-width">
                     <v-layout column>
-                        <v-flex tag="strong">Z2</v-flex>
-                        <v-flex tag="span">1.0um</v-flex>
+                        <v-flex tag="strong">total</v-flex>
+                        <v-flex tag="span">{{ formatTime(print_time + toolhead.printing_time) }}</v-flex>
                     </v-layout>
                 </v-flex>
-                <v-flex grow class="equal-width">
-                    <v-layout column>
-                        <v-flex tag="strong">Z3</v-flex>
-                        <v-flex tag="span">1.5um</v-flex>
-                    </v-layout>
-                </v-flex>
-            </v-layout>-->
+            </v-layout>
+            <v-layout wrap class=" text-center" v-if="(toolhead && toolhead.status === 'Printing') || is_paused">
+                <v-layout column class="mt-2" >
+                    <v-progress-linear
+                        :value="printProgress * 100"
+                        height="25"
+                    >
+                        <template>
+                            <strong>{{ Math.ceil(printProgress * 100) }}%</strong>
+                        </template>
+                    </v-progress-linear>
+                </v-layout>
+            </v-layout>
         </v-card-text>
     </v-card>
 </template>
 
 <script>
-    import { mapState, mapGetters } from 'vuex';
+    import { mapState } from 'vuex';
 
     export default {
+        data: () => ({
+            progress: 0.15
+        }),
         computed: {
             ...mapState({
+                toolhead: state => state.printer.toolhead,
                 position: state => state.printer.toolhead.position,
+                is_paused: state => state.printer.pause_resume.is_paused,
                 btnStatusPause: state => state.socket.loadingPrintPause,
                 btnStatusResume: state => state.socket.loadingPrintResume,
+                btnStatusCancel: state => state.socket.loadingPrintCancel,
+                printProgress: state => state.printer.virtual_sdcard.progress,
+                print_time: state => state.printer.idle_timeout.printing_time,
             }),
-            ...mapGetters([
-                'toolhead'
-            ])
         },
         methods: {
             btnPauseJob() {
@@ -129,6 +102,16 @@
             btnResumeJob() {
                 this.$store.commit('setLoadingPrintResume', true);
                 this.$socket.sendObj('post_printer_print_resume', { }, 'setLoadingPrintResume');
+            },
+            btnCancelJob() {
+                this.$store.commit('setLoadingPrintCancel', true);
+                this.$socket.sendObj('post_printer_print_cancel', { }, 'setLoadingPrintCancel');
+            },
+            formatTime(seconds) {
+                let date = new Date(null);
+                date.setSeconds(seconds);
+
+                return date.toISOString().substr(11,8);
             }
         },
     }

diff --git a/src/components/panels/ToolsPanel.vue b/src/components/panels/ToolsPanel.vue
@@ -1,3 +1,9 @@
+<style>
+    .heater-row .vertical_align_center {
+        margin: auto 0;
+    }
+</style>
+
 <template>
     <v-card>
         <v-list-item>
@@ -9,26 +15,23 @@
         </v-list-item>
         <v-divider class="my-2"></v-divider>
         <v-card-text class="px-0 pt-0 pb-2 content">
-            <v-layout wrap class=" text-center">
-                <v-flex tag="strong" class="category-header">Heater</v-flex>
-                <v-flex tag="strong" class="equal-width">Current</v-flex>
-                <v-flex tag="strong" class="equal-width">Target</v-flex>
-            </v-layout>
+            <v-row class="pl-3 pr-3">
+                <v-col class="text-center"><b>Heater</b></v-col>
+                <v-col class="text-center"><b>Current</b></v-col>
+                <v-col class="text-center"><b>Target</b></v-col>
+            </v-row>
             <div v-for="(heater, index) in heaters" v-bind:key="index" >
                 <v-divider class="my-2"></v-divider>
-                <v-layout wrap class=" text-center">
-                    <v-flex col tag="strong" class="category-header">
-                        <a>{{ heater.name }}</a>
-                    </v-flex>
-                    <v-flex col class="equal-width text-center">
-                        <v-layout column>
-                            <v-flex tag="strong">{{ heater.temperature.toFixed(1) }}°C</v-flex>
-                        </v-layout>
-                    </v-flex>
-                    <v-flex grow class="equal-width pr-2">
-                        <toolInput :name="heater.name" ></toolInput>
-                    </v-flex>
-                </v-layout>
+                <v-row class="pl-3 pr-3 heater-row">
+                    <v-col class="text-center">
+                        <b>{{ heater.name }}</b><br />
+                        <small>{{ heater.target > 0 ? "active" : "off" }}</small>
+                    </v-col>
+                    <v-col class="text-center vertical_align_center"><span>{{ heater.temperature.toFixed(1) }}°C</span></v-col>
+                    <v-col class="text-center vertical_align_center">
+                        <toolInput :name="heater.name" :target="heater.target" ></toolInput>
+                    </v-col>
+                </v-row>
             </div>
         </v-card-text>
     </v-card>

diff --git a/src/inputs/ToolInput.vue b/src/inputs/ToolInput.vue
@@ -1,27 +1,43 @@
-<style scoped>
+<style>
     .tool-input {
         min-width: 5rem;
+        margin-top: 0;
+        padding: 0;
     }
+
+    .tool-input .v-input__slot { margin-bottom: 0; }
+    .tool-input .v-text-field__details { display: none; }
 </style>
 
 <template>
-    <v-text-field type="number" min="-273" max="1999" step="any" v-model="value" class="tool-input" @change="setTemps">
+    <v-text-field type="number" min="-273" max="1999" step="any" ref="toolField" v-model="value" class="tool-input" @change="setTemps">
     </v-text-field>
 </template>
 
 
 <script>
     export default {
-        data: () => ({
-            value: 0
-        }),
+        data: function() {
+            return {
+                value: this.target
+            }
+        },
         props: {
             name: String,
+            target: Number,
+        },
+        computed: {
+
         },
         methods: {
             setTemps() {
                 this.$socket.sendObj('post_printer_gcode', {script: 'SET_HEATER_TEMPERATURE HEATER='+this.name+' TARGET='+this.value});
             }
-        }
+        },
+        watch: {
+            target: function() {
+                this.value = this.target;
+            }
+        },
     }
 </script>
diff --git a/src/main.js b/src/main.js
@@ -1,21 +1,19 @@
 import Vue from 'vue'
-import VueRouter from 'vue-router'
 import JRPCWS from './plugins/json-rpc-websocket'
 import App from './App.vue'
 import vuetify from './plugins/vuetify'
-import routes from './routes'
 import VueResource from 'vue-resource'
 import './components'
 import store from './store'
+import router from './plugins/router'
 import { hostname } from './store/variables'
+import 'vue-toast-notification/dist/index.css';
 
 Vue.use(JRPCWS, 'ws://' + hostname + '/websocket', {
   store: store
 });
 
 Vue.config.productionTip = false;
-Vue.use(VueRouter);
-const router = new VueRouter({mode: 'history', routes});
 
 Vue.use(VueResource);
 Vue.http.headers.common['Content-Type'] = 'application/json';

diff --git a/src/pages/Files.vue b/src/pages/Files.vue
@@ -6,7 +6,7 @@
                 <v-spacer></v-spacer>
                 <v-btn :loading="loadingRefresh" @click="refreshFileList"><v-icon class="mr-1">mdi-refresh</v-icon> Refresh</v-btn>
                 <input type="file" ref="fileUpload" style="display: none" @change="uploadFile" />
-                <v-btn color="primary ml-4 " :loading="loadingUpload" @click="clickUploadButton"><v-icon>mdi-upload</v-icon>Upload</v-btn>
+                <v-btn color="primary ml-4 " v-if="printStatus == 'Ready'" :loading="loadingUpload" @click="clickUploadButton"><v-icon>mdi-upload</v-icon>Upload</v-btn>
             </v-card-title>
             <v-data-table
                     :headers="headers"
@@ -106,6 +106,7 @@
                 files: state => state.files,
                 loadingUpload: state => state.socket.loadingGcodeUpload,
                 loadingRefresh: state => state.socket.loadingGcodeRefresh,
+                printStatus: state => state.printer.toolhead.status,
             })
         },
         methods: {
@@ -128,6 +129,7 @@
                         });
                     })
                     .catch(() => {
+                        this.$store.commit('setLoadingGcodeUpload', false);
                         toast.error("Cannot upload the file!", {
                             icon: 'fa-exclamation-triangle'
                         });

diff --git a/src/plugins/router.js b/src/plugins/router.js
@@ -0,0 +1,8 @@
+import VueRouter from 'vue-router'
+import Vue from "vue";
+import routes from "../routes";
+
+Vue.use(VueRouter);
+const router = new VueRouter({mode: 'history', routes});
+
+export default router;