feat(HappyHare): Regular click pop-up action menu and reworked MMU unit layout and footer with heater/dryer info#1790
Conversation
…erent actions. Added ability to jump into filament editor dialog with gate pre-selected
There was a problem hiding this comment.
Pull request overview
Refactors the HappyHare MMU widget UI to replace the right-click context menu with a regular click action menu (mobile-friendly), and reworks MMU unit layout to include a new footer showing heater/dryer and environment sensor (“climate”) info.
Changes:
- Replaced right-click context menu flow with click-triggered pop-up actions, including non-GCode actions (e.g., open filament editor for selected gate).
- Added MMU unit footer component and new “climate” UI (heater, humidity/temp, drying state + tooltip per-gate report).
- Extended MMU typings/config to support new MMU capabilities (crossload, heaters/sensors arrays, drying state) and new UI setting (
showClimate).
Reviewed changes
Copilot reviewed 15 out of 16 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| src/typings/klipper.d.ts | Adds MMU machine/state fields (drying state, crossload, heater/sensor refs) to typings. |
| src/types/mmu.ts | Extends MmuUnitDetails to reflect new MMU machine capabilities/fields. |
| src/store/config/types.ts | Adds uiSettings.mmu.showClimate config flag. |
| src/store/config/state.ts | Sets default showClimate: true. |
| src/mixins/mmu.ts | Adds drying state accessors/constants and shared spool sizing helper. |
| src/locales/en.yaml | Adds new MMU button/label/setting strings for change-tool and climate/drying UI. |
| src/globals.ts | Adds icons + a new wait token for MMU “Change Tool”. |
| src/components/widgets/mmu/MmuUnitFooter.vue | New footer component for unit name/logo + climate/heater/drying display with per-gate tooltip report. |
| src/components/widgets/mmu/MmuUnit.vue | Reworks gate rendering and menu behavior; integrates new footer; emits events for selection/editing. |
| src/components/widgets/mmu/MmuSpool.vue | Adjusts bypass spool “empty/full” rendering based on extruder loaded state. |
| src/components/widgets/mmu/MmuSettings.vue | Adds widget-level toggle for showing climate info. |
| src/components/widgets/mmu/MmuMachine.vue | Wires gate selection/edit events upward; supports standalone bypass rendering and bypass hiding. |
| src/components/widgets/mmu/MmuGateStatus.vue | Tweaks gate badge geometry and switches to computed font color logic. |
| src/components/widgets/mmu/MmuEditGateMapDialog.vue | Supports preselecting an initial gate; emits close event. |
| src/components/widgets/mmu/MmuCard.vue | Handles emitted gate selection + edit actions; passes initial gate into edit dialog. |
| src/components/settings/MmuSettings.vue | Adds global settings toggles for unit name + climate display. |
Signed-off-by: Pedro Lamas <pedrolamas@gmail.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
Signed-off-by: Pedro Lamas <pedrolamas@gmail.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
…dition into footer_menu
Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
| this.sendGcode('MMU_SELECT GATE=' + gate) | ||
| } | ||
| get footerStyle () { | ||
| const numSpools = this.mmuMachineUnit.numGates + (this.showBypass ? 1 : 0) |
There was a problem hiding this comment.
When unitIndex is -1 (standalone bypass), footerStyle calculates maxWidth based on mmuMachineUnit.numGates (which defaults to 1) plus showBypass (which is true), resulting in numSpools=2. However, displayGates will only contain [TOOL_GATE_BYPASS], which is 1 gate. This causes the footer width calculation to be incorrect. Consider using displayGates.length instead of calculating numSpools manually.
| const numSpools = this.mmuMachineUnit.numGates + (this.showBypass ? 1 : 0) | |
| const numSpools = this.displayGates.length |
There was a problem hiding this comment.
I will assume this is correct as is.
There was a problem hiding this comment.
Actually it wouldn't have an effect because the unitIndex is -1 for the "standalone" bypass gate representation (shown in pic). That doesn't have content in the footer so max-width doesn't matter. The max-width was to correct user defined text
Bottom line is that the code probably could be cleaner for this case but works fine as-is.
2 participants
Description
This (large) PR represents some cleanup and restructuring to achieve two goals:
Removes the right-click context menu and replaces it with a regular click pop-up action menu. This simplifies operation especially on mobile devices and was advocated by the community. The sensitivity of menu items is set based on current MMU state/capabilities and now necessarily extends to the bypass gate. This PR groups all changes the the context menu including the ability to invoke none gcode command operations like opening the filament editor dialog with the selected gate as default.
Separates and refactors the footer of the mmu unit component. This ensures layout is also constrained to component size and adds a new footer to contains the previous logo and name but also information about MMU heater and environment sensors including a new feature of filament dryer for newer MMU's. A couple of fixes to the spool representation have also been fixed with the bypass gate where it is now shown empty/full based on whether extruder is loaded.
I realize this is a large PR but this work was impossible to cleanly pull into separate PRs without creating a problematic merge.
Related Tickets & Documents
This PR replaces closed PR #2430
Mobile & Desktop Screenshots/Recordings
Regular-click context menu allow now allows for quick navigation to edit the filament on the selected spool:
New unit layout with "heater/climate" bar:
Compat display with "bypass" outside of the unit now possible (based on HH config):
Showing MMU enclosure being actively heated:
Signed-off-by: Paul Morgan moggieuk@hotmail.com