feat(HappyHare): Addition of heater and climate to the MMU unit footer (#2429)

Co-authored-by: Stefan Dej <meteyou@gmail.com>

Author: moggieuk

src/components/mixins/mmu.ts

@@ -89,6 +89,7 @@ export interface Mmu {
     spoolman_support: 'off' | 'readonly' | 'push' | 'pull'
     bowden_progress: number
     espooler_active: MmuEspoolerState
+    drying_state: MmuDryingState[]
     sensors: {
         mmu_pre_gate?: boolean
         mmu_gear?: boolean
@@ -145,7 +146,23 @@ export interface MmuMachineUnit {
     can_crossload: boolean
     has_bypass: boolean
     multi_gear: boolean
-    environment_sensor: string
+    environment_sensor?: string
+    environment_sensors?: string[]
+    filament_heater?: string
+    filament_heaters?: string[]
+}
+
+export type MmuDryingState = '' | 'active' | 'queued' | 'complete' | 'cancelled'
+
+export interface MmuFilamentHeater {
+    temperature: number
+    target: number
+    power: number
+}
+
+export interface MmuEnvironmentSensor {
+    temperature?: number
+    humidity?: number
 }
 
 export interface MmuSlicerToolMap {

src/components/panels/Mmu/MmuPanelSettings.vue

@@ -43,6 +43,13 @@
             <v-list-item class="minHeight36">
                 <v-checkbox v-model="showLogos" class="mt-0" hide-details :label="$t('Panels.MmuPanel.ShowLogos')" />
             </v-list-item>
+            <v-list-item class="minHeight36">
+                <v-checkbox
+                    v-model="showClimate"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.MmuPanel.ShowClimate')" />
+            </v-list-item>
         </v-list>
     </v-menu>
 </template>
@@ -105,6 +112,14 @@ export default class MmuPanelSettings extends Mixins(BaseMixin, MmuMixin) {
         return this.$store.state.gui.view.mmu.showName
     }
 
+    set showClimate(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.mmu.showClimate', value: newVal })
+    }
+
+    get showClimate(): boolean {
+        return this.$store.state.gui.view.mmu.showClimate
+    }
+
     get showUnavailableSpoolColor(): boolean {
         return this.$store.state.gui.view.mmu.showUnavailableSpoolColor
     }

src/components/panels/Mmu/MmuUnit.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="mmu-unit d-inline-flex flex-column mx-1 rounded-lg mb-3">
+    <div :class="mmuUnitClass" class="d-inline-flex flex-column mx-1 mb-3 mmu-unit">
         <div class="d-flex flex-wrap pt-3 px-4 position-relative">
             <mmu-unit-gate
                 v-for="gateIndex in numGates"
@@ -21,7 +21,13 @@
                 :selected-gate="selectedGate"
                 @select-gate="selectGate" />
         </div>
-        <mmu-unit-footer class="pt-0 position-relative" :mmu-machine-unit="mmuMachineUnit" :unit-index="unitIndex" />
+        <mmu-unit-footer
+            class="pt-0 position-relative"
+            :style="footerStyle"
+            :mmu-machine-unit="mmuMachineUnit"
+            :show-details="showDetails"
+            :show-footer="showFooter"
+            :unit-index="unitIndex" />
     </div>
 </template>
 <script lang="ts">
@@ -37,9 +43,14 @@ export default class MmuUnit extends Mixins(BaseMixin, MmuMixin) {
     @Prop({ required: true }) readonly unitIndex!: number
     @Prop({ default: false }) readonly showDetails!: boolean
     @Prop({ default: true }) readonly showContextMenu!: boolean
+    @Prop({ default: true }) readonly showFooter!: boolean
     @Prop({ default: false }) readonly hideBypass!: boolean
     @Prop({ default: false }) readonly unhighlightSpools!: boolean
 
+    get mmuUnitClass() {
+        return this.unitIndex < 0 ? 'mmu-unit-clear' : ''
+    }
+
     get mmuMachineUnit() {
         return this.getMmuMachineUnit(this.unitIndex)
     }
@@ -58,6 +69,12 @@ export default class MmuUnit extends Mixins(BaseMixin, MmuMixin) {
         return this.mmuMachineUnit?.has_bypass ?? true
     }
 
+    get footerStyle() {
+        const numSpools = this.numGates + (this.hasBypass ? 1 : 0)
+        const maxWidth = this.spoolWidth * numSpools + 32
+        return `max-width: ${maxWidth}px;`
+    }
+
     editFilament(gateIndex: number) {
         this.$emit('edit-filament', gateIndex)
     }
@@ -69,12 +86,20 @@ export default class MmuUnit extends Mixins(BaseMixin, MmuMixin) {
 </script>
 
 <style scoped>
+.mmu-unit-clear {
+    background: none !important;
+    box-shadow: none !important;
+}
+
 .mmu-unit {
     background: #2c2c2c;
     overflow: hidden;
+    border-radius: 32px 32px 8px 8px;
+    box-shadow: inset 0 4px 4px -4px #ffffff80;
 }
 
 html.theme--light .mmu-unit {
     background: #f0f0f0;
+    box-shadow: inset 0 4px 2px -4px #2c2c2c80;
 }
 </style>

src/components/panels/Mmu/MmuUnitFooter.vue

@@ -1,22 +1,23 @@
 <template>
-    <div class="mmu-unit-footer zindex-4 d-flex flex-row align-center px-4 pb-1">
+    <div class="mmu-unit-footer zindex-4 d-flex flex-row align-center px-2 pb-1">
         <v-icon
-            v-if="showLogos"
+            v-if="showFooter && showLogos"
             class="mr-4 flex-grow-0 flex-shrink-0 opacity-70"
             :class="logoClasses"
             :size="logoHeight">
             {{ logo }}
         </v-icon>
-        <div class="flex-grow-1 flex-shrink-1 min-width-0 text-caption">
+        <div v-if="showFooter" class="flex-grow-1 flex-shrink-1 min-width-0 text-caption">
             <div v-if="showName" class="text-truncate">{{ unitDisplayName }}</div>
-            <div v-if="unitClimateInfo" class="text-truncate">{{ unitClimateInfo }}</div>
+            <mmu-unit-footer-climate v-if="showDetails && showClimate" :mmu-machine-unit="mmuMachineUnit" />
         </div>
     </div>
 </template>
 <script lang="ts">
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import MmuMixin, { MmuMachineUnit } from '@/components/mixins/mmu'
+import MmuUnitFooterClimate from '@/components/panels/Mmu/MmuUnitFooterClimate.vue'
 import {
     mmuIcon3MS,
     mmuIconAngryBeaver,
@@ -32,14 +33,17 @@ import {
     mmuIconVvd,
     mmuThemeIcons,
 } from '@/plugins/mmuIcons'
-import { additionalSensors } from '@/store/variables'
 
 const squareLogoVendors = ['3MS', 'AngryBeaver', 'EMU', 'ERCF', 'KMS']
 
-@Component
+@Component({
+    components: { MmuUnitFooterClimate },
+})
 export default class MmuUnitFooter extends Mixins(BaseMixin, MmuMixin) {
     @Prop({ required: true }) readonly unitIndex!: number
     @Prop({ required: true }) readonly mmuMachineUnit!: MmuMachineUnit
+    @Prop({ default: true }) readonly showDetails!: boolean
+    @Prop({ default: true }) readonly showFooter!: boolean
 
     get unitDisplayName(): string {
         const name = this.mmuMachineUnit?.name
@@ -55,43 +59,8 @@ export default class MmuUnitFooter extends Mixins(BaseMixin, MmuMixin) {
         return this.$store.state.gui.view.mmu.showName ?? true
     }
 
-    get unitClimateSensorName() {
-        const name = this.mmuMachineUnit?.environment_sensor?.replace(/^"(.*)"$/, '$1') ?? undefined
-        if (!name) return undefined
-
-        const parts = name.split(' ')
-        if (parts.length !== 2) return undefined
-
-        return parts[1]
-    }
-
-    get unitClimateSensor() {
-        if (!this.unitClimateSensorName) return undefined
-
-        for (const key of additionalSensors) {
-            const objectName: string = `${key} ${this.unitClimateSensorName}`
-            if (!(objectName in this.$store.state.printer)) continue
-
-            return this.$store.state.printer[objectName]
-        }
-
-        return undefined
-    }
-
-    get unitClimateInfo() {
-        if (!this.unitClimateSensor) return undefined
-
-        const values: string[] = []
-
-        if ('temperature' in this.unitClimateSensor && this.unitClimateSensor.temperature !== null) {
-            values.push(`${this.unitClimateSensor.temperature.toFixed(0)}°C`)
-        }
-
-        if ('humidity' in this.unitClimateSensor && this.unitClimateSensor.humidity !== null) {
-            values.push(`${this.unitClimateSensor.humidity.toFixed(0)}%`)
-        }
-
-        return values.length > 0 ? values.join(' / ') : undefined
+    get showClimate(): boolean {
+        return this.$store.state.gui.view.mmu.showClimate ?? true
     }
 
     get mmuVendor() {