feat: adds Tool Changer controls (#1111)

Signed-off-by: Pedro Lamas <[email protected]>

src/components/widgets/toolhead/ExtruderSelection.vue

@@ -3,7 +3,7 @@
     v-model="extruder"
     :items="extruders"
     :readonly="printerPrinting"
-    :disabled="!klippyReady"
+    :disabled="!klippyReady || printerPrinting"
     item-value="key"
     item-text="name"
     hide-details
@@ -18,9 +18,7 @@
 import { Component, Mixins } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
 
-@Component({
-  components: {}
-})
+@Component({})
 export default class ExtruderSelection extends Mixins(StateMixin) {
   get extruders () {
     return this.$store.getters['printer/getExtruders']

src/components/widgets/toolhead/ToolChangeMacros.vue

@@ -0,0 +1,56 @@
+<template>
+  <v-row v-if="toolChangeMacros.length > 0">
+    <v-col>
+      <app-btn-group>
+        <app-btn
+          v-for="(macro, index) of toolChangeMacros"
+          :key="index"
+          min-width="10"
+          :color="macro.color"
+          :disabled="!klippyReady || printerPrinting"
+          class="px-0 flex-grow-1"
+          @click="sendGcode(macro.name)"
+        >
+          {{ macro.name }}
+        </app-btn>
+      </app-btn-group>
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import { Macro } from '@/store/macros/types'
+
+const toolChangeMacroRegExp = /^t\d+$/i
+
+type ToolChangeMacro = {
+  name: string,
+  color?: string,
+  active?: boolean
+}
+
+@Component({})
+export default class ToolChangeMacros extends Mixins(StateMixin) {
+  get macros (): Macro[] {
+    return this.$store.getters['macros/getMacros'] as Macro[]
+  }
+
+  get toolChangeMacros (): ToolChangeMacro[] {
+    return this.macros
+      .filter(macro => toolChangeMacroRegExp.test(macro.name))
+      .map(macro => ({
+        name: macro.name.toUpperCase(),
+        color: macro.variables?.color ? `#${macro.variables.color}` : undefined,
+        active: macro.variables?.active ?? false
+      } as ToolChangeMacro))
+      .sort((a, b) => {
+        const numberA = parseInt(a.name.substring(1))
+        const numberB = parseInt(b.name.substring(1))
+
+        return numberA - numberB
+      })
+  }
+}
+</script>

src/components/widgets/toolhead/Toolhead.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
     <v-card-text>
+      <tool-change-macros />
+
       <v-row
         justify="space-between"
         align="start"
@@ -48,6 +50,7 @@ import SpeedAndFlowAdjust from './SpeedAndFlowAdjust.vue'
 import PressureAdvanceAdjust from './PressureAdvanceAdjust.vue'
 import ExtruderStats from './ExtruderStats.vue'
 import ExtruderSteppers from './ExtruderSteppers.vue'
+import ToolChangeMacros from './ToolChangeMacros.vue'
 import { Extruder } from '@/store/printer/types'
 
 @Component({
@@ -60,7 +63,8 @@ import { Extruder } from '@/store/printer/types'
     SpeedAndFlowAdjust,
     PressureAdvanceAdjust,
     ExtruderStats,
-    ExtruderSteppers
+    ExtruderSteppers,
+    ToolChangeMacros
   }
 })
 export default class Toolhead extends Mixins(StateMixin) {