feat: bed mesh, runout sensors & end stops

- add stop motors button
- stop actions being fired on response error
- app no longer requests a metadata update for 'standby'
- supports managing bed meshes
- supports toggling sensor runout switches on / off
- supports end stop status for printer setup
- web errors now presented in a snack bar with better messaging

Author: cadriel

package-lock.json

@@ -28,6 +28,7 @@
     "vue": "^2.6.11",
     "vue-chartjs": "^3.5.1",
     "vue-class-component": "^7.2.3",
+    "vue-plotly": "^1.1.0",
     "vue-property-decorator": "^8.4.2",
     "vue-router": "^3.2.0",
     "vuetify": "^2.2.11",
@@ -38,6 +39,7 @@
     "@types/chai": "^4.2.11",
     "@types/lodash-es": "^4.17.3",
     "@types/mocha": "^5.2.4",
+    "@types/plotly.js": "^1.50.21",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^2.33.0",
     "@vue/cli-plugin-babel": "~4.5.0",

package.json

@@ -11,15 +11,16 @@
     </v-toolbar-title>
     <v-spacer />
     <v-btn color="secondary" class="mr-2" to="/"><v-icon small class="mr-2">mdi-home</v-icon> Dashboard</v-btn>
-    <!-- <v-btn color="secondary" class="mr-2" to="/configuration"><v-icon small class="mr-2">mdi-tune</v-icon> Configuration</v-btn> -->
+    <v-btn color="secondary" class="mr-2" to="/configuration"><v-icon small class="mr-2">mdi-tune</v-icon> Configuration</v-btn>
+    <v-btn color="secondary" class="mr-2" to="/settings"><v-icon small class="mr-2">mdi-cog</v-icon> Settings</v-btn>
     <v-spacer />
     <v-tooltip bottom v-if="printerConnected && klippyConnected">
       <template v-slot:activator="{ on, attrs }">
         <v-btn @click="emergencyStop()" v-bind="attrs" v-on="on" icon color="error"><v-icon>mdi-car-brake-alert</v-icon></v-btn>
       </template>
       Emergency Stop
     </v-tooltip>
-    <v-btn icon color="white" class="mr-2" to="/settings"><v-icon small>mdi-cog</v-icon></v-btn>
+    <!-- <v-btn icon color="white" class="mr-2" to="/settings"><v-icon small>mdi-cog</v-icon></v-btn> -->
   </v-app-bar>
 </template>
 
@@ -54,8 +55,8 @@ export default class AppBar extends Mixins(UtilsMixin) {
   // Watch currentfile and refresh its metadata to ensure
   // our status has the correct data.
   @Watch('currentFile')
-  oncurrentFileChanged (val: string) {
-    if (val && val.length > 0) {
+  onCurrentFileChanged (val: string) {
+    if (val && val.length > 0 && val !== 'standby') {
       SocketActions.serverFilesMetaData(val)
     }
   }

src/components/AppBar.vue

@@ -21,6 +21,7 @@
       </v-col>
       <v-col cols="6" v-if="!printerConnected">
         <v-progress-linear
+          class="mb-4"
           color="warning"
           indeterminate
           rounded

src/components/AppDisconnected.vue

@@ -4,6 +4,14 @@
       <v-icon large left>mdi-printer-3d-nozzle-outline</v-icon>
       <span class="title font-weight-light text-h5">Toolhead</span>
       <v-spacer />
+      <v-btn
+        v-if="!printerPrinting"
+        @click="sendGcode('M84')"
+        :disabled="hasWaits"
+        class="mr-2"
+        color="secondary">
+          MOTORS OFF
+      </v-btn>
       <v-btn
         v-if="!printerPrinting && printerSupportsZtilt"
         @click="sendGcode('Z_TILT', waits.onZTilt)"
@@ -28,7 +36,7 @@
         :loading="hasWait(waits.onHomeAll)"
         :disabled="hasWaits"
         :color="(!allHomed) ? 'warning' : 'secondary'">
-          <v-icon>mdi-home</v-icon> All
+          <v-icon small class="mr-1">mdi-home</v-icon> All
       </v-btn>
     </v-card-title>
     <toolhead-widget></toolhead-widget>
@@ -48,17 +56,5 @@ import { Waits } from '@/globals'
 })
 export default class ToolheadCard extends Mixins(UtilsMixin) {
   waits = Waits
-
-  get printerSupportsQgl (): boolean {
-    return 'quad_gantry_level' in this.$store.state.socket.printer.configfile.config
-  }
-
-  get printerSupportsZtilt (): boolean {
-    return 'z_tilt' in this.$store.state.socket.printer.configfile.config
-  }
-
-  get allHomed (): boolean {
-    return this.$store.getters['socket/getHomedAxes']('xyz')
-  }
 }
 </script>

src/components/cards/ToolheadCard.vue

@@ -2,8 +2,8 @@
   <v-dialog
     @input="emitChange(value)"
     :value="value"
+    :max-width="maxWidthValue"
     persistent
-    max-width="250px"
   >
     <v-card>
       <v-card-title>
@@ -33,6 +33,13 @@ export default class DialogInput extends Mixins(UtilsMixin) {
   @Prop({ type: String, required: true })
   title!: string
 
+  @Prop({ type: Number, required: false, default: 250 })
+  maxWidth!: number
+
+  get maxWidthValue (): string | undefined {
+    return (this.maxWidth) ? this.maxWidth.toString() + 'px' : undefined
+  }
+
   emitChange (val: boolean) {
     this.$emit('input', val)
   }