feat: Enhancements to Happy Hare MMU support

src/components/settings/MmuSettings.vue

@@ -52,6 +52,16 @@
 
       <v-divider />
 
+      <app-setting :title="$t('app.mmu.setting.show_unavailable_spool_color')">
+        <v-switch
+          v-model="showUnavailableSpoolColor"
+          hide-details
+          class="mt-0 mb-4"
+        />
+      </app-setting>
+
+      <v-divider />
+
       <app-setting :title="$t('app.mmu.setting.show_logos')">
         <v-switch
           v-model="showLogos"
@@ -134,6 +144,18 @@ export default class MmuSettings extends Mixins(StateMixin, MmuMixin) {
     })
   }
 
+  get showUnavailableSpoolColor (): boolean {
+    return this.$typedState.config.uiSettings.mmu.showUnavailableSpoolColor
+  }
+
+  set showUnavailableSpoolColor (value: boolean) {
+    this.$typedDispatch('config/saveByPath', {
+      path: 'uiSettings.mmu.showUnavailableSpoolColor',
+      value,
+      server: true
+    })
+  }
+
   get showLogos (): boolean {
     return this.$typedState.config.uiSettings.mmu.showLogos
   }

src/components/widgets/mmu/MmuCard.vue

@@ -169,7 +169,7 @@
             :cols="col1Size"
             class="pt-0 d-flex flex-column align-center justify-center"
           >
-            <div class="text--disabled smaller-font min-height-text">
+            <div class="text--disabled smaller-font">
               {{ toolchangeText }}
             </div>
             <div class="min-height-text">
@@ -359,10 +359,12 @@ export default class MmuCard extends Mixins(StateMixin, MmuMixin) {
 
 .smaller-font {
     font-size: 0.8em;
+    min-height: 1.0em;
+    line-height: 1.0em;
 }
 
 .min-height-text {
-    min-height: 1.2em;
-    line-height: 1.2em;
+    min-height: 1.1em;
+    line-height: 1.1em;
 }
 </style>

src/components/widgets/mmu/MmuEditGateMapDialog.vue

@@ -213,7 +213,7 @@
                     >
                       <v-switch
                         v-model="selectedGateStatus"
-                        :label="$t('app.mmu.msg.filament_available')"
+                        :label="selectedGateStatusLabel"
                         hide-details
                         class="short-switch"
                       />
@@ -506,11 +506,17 @@ export default class MmuEditGateMapDialog extends Mixins(BrowserMixin, StateMixi
   }
 
   set selectedGateStatus (value: boolean) {
-    if (value) {
-      this.editGateMap[this.editGateSelected].status = this.GATE_AVAILABLE
-    } else {
-      this.editGateMap[this.editGateSelected].status = this.GATE_EMPTY
+    this.editGateMap[this.editGateSelected].status = value ? this.GATE_AVAILABLE : this.GATE_EMPTY
+  }
+
+  get selectedGateStatusLabel (): string {
+    const status = this.editGateMap[this.editGateSelected].status
+    if (status === this.GATE_UNKNOWN) {
+      return this.$t('app.mmu.msg.filament_unknown').toString()
+    } else if (status === this.GATE_EMPTY) {
+      return this.$t('app.mmu.msg.filament_empty').toString()
     }
+    return this.$t('app.mmu.msg.filament_available').toString()
   }
 
   handleSelectSpool () {

src/components/widgets/mmu/MmuFilamentStatus.vue

@@ -229,7 +229,7 @@
           x="278"
           y="115"
           :class="{ 'text-disabled': !isSensorEnabled('mmu_gate') }"
-        >Gate</text>
+        >{{ gateSensorName }}</text>
         <transition name="fade">
           <text
             v-if="homedToGate"
@@ -526,6 +526,13 @@ export default class MmuFilamentStatus extends Mixins(StateMixin, MmuMixin) {
 
         case this.FILAMENT_POS_IN_EXTRUDER:
           pos = this.POSITIONS['cooling-tube']
+          if (
+            this.hasSensor('toolhead') &&
+            this.isSensorEnabled('toolhead') &&
+            !this.isSensorTriggered('toolhead')
+          ) {
+            pos = this.POSITIONS['before-toolhead'] // Don't show beyond toolhead sensor if not triggered
+          }
           break
 
         case this.FILAMENT_POS_LOADED:
@@ -658,6 +665,13 @@ export default class MmuFilamentStatus extends Mixins(StateMixin, MmuMixin) {
     return `${this.encoderPos}`
   }
 
+  get gateSensorName (): string {
+    if (this.unitDetails(this.unit).multiGear) {
+      return 'Hub (Gate)'
+    }
+    return 'Gate'
+  }
+
   get temperatureClass (): string {
     const canExtrude = this.$typedState.printer.printer.extruder?.can_extrude ?? false
     if (canExtrude === false) return 'text-disabled'

src/components/widgets/mmu/MmuMachine.vue

@@ -8,7 +8,7 @@
       >
         <div :class="$vuetify.theme.dark ? 'mmu-unit mmu-unit-dark-theme' : 'mmu-unit mmu-unit-light-theme'">
           <mmu-unit
-            :unit="index"
+            :unit-index="index"
             :edit-gate-map="editGateMap"
             :edit-gate-selected="editGateSelected"
             @select-gate="selectGate"

src/components/widgets/mmu/MmuMaintenanceDialog.vue

@@ -514,9 +514,9 @@ export default class MmuMaintainanceStateDialog extends Mixins(BrowserMixin, Sta
     return this.$typedState.printer.printer.mmu_leds?.led_effect_module ?? false
   }
 
-  private unitDisplayName (unit: number): string {
-    const name = this.unitDetails(unit).name
-    return `MMU #${unit + 1} - ${name}`
+  private unitDisplayName (unitIndex: number): string {
+    const name = this.unitDetails(unitIndex).name
+    return `MMU #${unitIndex + 1} - ${name}`
   }
 
   private updateLeds () {

src/components/widgets/mmu/MmuSettings.vue

@@ -66,6 +66,17 @@
         </v-list-item-content>
       </v-list-item>
 
+      <v-list-item @click="showUnavailableSpoolColor = !showUnavailableSpoolColor">
+        <v-list-item-action class="my-0">
+          <v-checkbox :input-value="showUnavailableSpoolColor" />
+        </v-list-item-action>
+        <v-list-item-content>
+          <v-list-item-title>
+            {{ $t('app.mmu.setting.show_unavailable_spool_color') }}
+          </v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+
       <v-list-item @click="showLogos = !showLogos">
         <v-list-item-action class="my-0">
           <v-checkbox :input-value="showLogos" />
@@ -135,6 +146,18 @@ export default class MmuSettings extends Mixins(StateMixin, MmuMixin) {
     })
   }
 
+  get showUnavailableSpoolColor (): boolean {
+    return this.$typedState.config.uiSettings.mmu.showUnavailableSpoolColor
+  }
+
+  set showUnavailableSpoolColor (value: boolean) {
+    this.$typedDispatch('config/saveByPath', {
+      path: 'uiSettings.mmu.showUnavailableSpoolColor',
+      value,
+      server: true
+    })
+  }
+
   get showLogos (): boolean {
     return this.$typedState.config.uiSettings.mmu.showLogos
   }

src/components/widgets/mmu/MmuSpool.vue

@@ -71,7 +71,7 @@
       />
     </g>
     <path
-      v-if="filamentAmount !== 0"
+      v-if="filamentAmount !== 0 || details.status !== GATE_EMPTY"
       ref="filament"
       d="M 0 -63 C 35 -63 63 -35 63 0 C 63 35 35 63 0 63 L -424 63 L -424 -63 z"
       vector-effect="non-scaling-stroke"
@@ -93,7 +93,7 @@
 
     <g v-if="!editGateMap">
       <text
-        v-if="showPercent && filamentAmount > 0"
+        v-if="filamentAmount > 0"
         x="152"
         y="270"
         text-anchor="middle"
@@ -104,7 +104,7 @@
         {{ filamentAmount }}%
       </text>
       <text
-        v-else-if="!showPercent && filamentAmount === 0"
+        v-else-if="filamentAmount === 0 && details.status !== GATE_EMPTY"
         x="140"
         y="310"
         text-anchor="middle"
@@ -144,9 +144,6 @@ export default class MmuSpool extends Mixins(StateMixin, MmuMixin) {
   @Prop({ required: false, default: '#AD8762' })
   readonly spoolWheelColor!: string
 
-  @Prop({ required: false, default: true })
-  readonly showPercent!: boolean
-
   @Prop({ required: false, default: null })
   readonly editGateMap!: MmuGateDetails[] | null
 
@@ -161,9 +158,13 @@ export default class MmuSpool extends Mixins(StateMixin, MmuMixin) {
     return this.gateDetails(this.gateIndex)
   }
 
+  get showUnavailableSpoolColor (): boolean {
+    return this.$typedState.config.uiSettings.mmu.showUnavailableSpoolColor
+  }
+
   get filamentAmount (): number {
     if (this.editGateMap) return 100
-    if (this.details.status === this.GATE_EMPTY) return 0
+    if (this.details.status === this.GATE_EMPTY && !(this.showUnavailableSpoolColor && this.details.color !== this.NO_FILAMENT_COLOR)) return 0
 
     const spoolmanSpool = this.spoolmanSpool(this.details.spoolId)
     if (!spoolmanSpool) return -1

src/components/widgets/mmu/MmuUnit.vue

@@ -199,7 +199,7 @@ import MmuGateStatus from '@/components/widgets/mmu/MmuGateStatus.vue'
 })
 export default class MmuUnit extends Mixins(BrowserMixin, StateMixin, MmuMixin) {
   @Prop({ required: false, default: 0 })
-  readonly unit!: number
+  readonly unitIndex!: number
 
   @Prop({ required: false, default: null })
   readonly editGateMap!: MmuGateDetails[] | null
@@ -219,12 +219,12 @@ export default class MmuUnit extends Mixins(BrowserMixin, StateMixin, MmuMixin)
   }
 
   get unitDisplayName (): string {
-    const name = this.unitDetails(this.unit).name
-    return `#${this.unit + 1} ${name}`
+    const name = this.unitDetails(this.unitIndex).name
+    return `#${this.unitIndex + 1} ${name}`
   }
 
   get unitGateRange (): number[] {
-    const unitDetails = this.unitDetails(this.unit)
+    const unitDetails = this.unitDetails(this.unitIndex)
     return Array.from({ length: unitDetails.numGates }, (v, k) => k + unitDetails.firstGate)
   }
 
@@ -262,7 +262,7 @@ export default class MmuUnit extends Mixins(BrowserMixin, StateMixin, MmuMixin)
   }
 
   get showBypass (): boolean {
-    return !this.editGateMap && this.unitDetails(this.unit).hasBypass && this.hasBypass
+    return !this.editGateMap && this.unitDetails(this.unitIndex).hasBypass && this.hasBypass
   }
 
   gateTooltip (gate: number): string[] {

src/locales/en.yaml

@@ -1078,6 +1078,8 @@ app:
       are_you_sure: Are you sure?
       bad_temperature: Temperature out of range
       filament_available: Filament available in gate
+      filament_unknown: Unknown filament state (please set)
+      filament_empty: Filament not available
       maintenance_intro: Directly manage specific MMU functions and selective configuration.
       recover_intro: This is a low level recovery for use when Happy Hare is out of sync with your MMU. It is recommended to try automatic recovery first however this will be required to correct the current tool or gate (Alternatively on Type-A MMU's you can unload and home the selector).
       no_custom_controls: No Custom Controls
@@ -1112,6 +1114,7 @@ app:
       show_details: Show Filament Details
       show_ttg_map: Show TTG Map
       show_logos: Show Logos
+      show_unavailable_spool_color: Show Unavailable Spools
   sensors:
     title:
       sensors: Sensors

src/mixins/mmu.ts

@@ -111,6 +111,12 @@ export default class MmuMixin extends Vue {
     return this.mmuState?.is_homed ?? false
   }
 
+  get unit (): number {
+    return this.mmuState?.unit ?? this.UNIT_UNKNOWN
+  }
+
+  readonly UNIT_UNKNOWN: number = -1
+
   get gate (): number {
     return this.mmuState?.gate ?? this.TOOL_GATE_UNKNOWN
   }

src/store/config/state.ts

@@ -148,7 +148,8 @@ export const defaultState = (): ConfigState => {
         showTtgMap: true,
         showDetails: true,
         largeFilamentStatus: false,
-        showLogos: false
+        showLogos: false,
+        showUnavailableSpoolColor: false
       }
     }
   }

src/store/config/types.ts

@@ -60,6 +60,7 @@ export interface MmuConfig {
   showDetails: boolean;
   largeFilamentStatus: boolean;
   showLogos: boolean;
+  showUnavailableSpoolColor: boolean;
 }
 
 export interface HostConfig {