feat(Happy Hare): Adds new flowguard meter for monitoring clog and tangles (#1759)

Signed-off-by: Paul Morgan <moggieuk@hotmail.com>
Co-authored-by: Pedro Lamas <pedrolamas@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 3 people

src/components/widgets/mmu/MmuCard.vue

@@ -177,12 +177,18 @@
             </div>
             <mmu-filament-status />
             <template v-if="showClogDetection">
-              <mmu-clog-meter
-                v-if="hasEncoder"
-                width="40%"
-              />
-              <div class="text--disabled">
-                {{ $t('app.mmu.label.clog_detection') }}
+              <div class="text-center">
+                <mmu-clog-meter
+                  v-if="hasEncoder"
+                  width="40%"
+                />
+                <mmu-flowguard-meter
+                  v-if="hasSyncFeedback"
+                  width="40%"
+                />
+                <div class="text--disabled body-1">
+                  {{ $t('app.mmu.label.clog_tangle_detection') }}
+                </div>
               </div>
             </template>
           </v-col>
@@ -261,6 +267,7 @@ import MmuTtgMap from '@/components/widgets/mmu/MmuTtgMap.vue'
 import MmuControls from '@/components/widgets/mmu/MmuControls.vue'
 import MmuGateSummary from '@/components/widgets/mmu/MmuGateSummary.vue'
 import MmuClogMeter from '@/components/widgets/mmu/MmuClogMeter.vue'
+import MmuFlowguardMeter from '@/components/widgets/mmu/MmuFlowguardMeter.vue'
 import MmuSettings from '@/components/widgets/mmu/MmuSettings.vue'
 import MmuRecoverStateDialog from '@/components/widgets/mmu/MmuRecoverStateDialog.vue'
 import MmuEditGateMapDialog from '@/components/widgets/mmu/MmuEditGateMapDialog.vue'
@@ -274,6 +281,7 @@ import MmuMaintenanceDialog from '@/components/widgets/mmu/MmuMaintenanceDialog.
     MmuControls,
     MmuGateSummary,
     MmuClogMeter,
+    MmuFlowguardMeter,
     MmuSettings,
     MmuRecoverStateDialog,
     MmuEditGateMapDialog,
@@ -299,7 +307,7 @@ export default class MmuCard extends Mixins(StateMixin, MmuMixin) {
   }
 
   get showClogDetection (): boolean {
-    return this.hasEncoder && this.$typedState.config.uiSettings.mmu.showClogDetection
+    return (this.hasEncoder || this.hasSyncFeedback) && this.$typedState.config.uiSettings.mmu.showClogDetection
   }
 
   get showTtgMap (): boolean {
@@ -344,6 +352,26 @@ export default class MmuCard extends Mixins(StateMixin, MmuMixin) {
       show: true,
     })
   }
+
+  get hasSyncFeedback (): boolean {
+    return this.hasFilamentCompressionSensor || this.hasFilamentTensionSensor || this.hasFilamentProportionalSensor
+  }
+
+  get hasFilamentProportionalSensor (): boolean {
+    return this.hasSensor('filament_proportional')
+  }
+
+  get hasFilamentCompressionSensor (): boolean {
+    return this.hasSensor('filament_compression')
+  }
+
+  get hasFilamentTensionSensor (): boolean {
+    return this.hasSensor('filament_tension')
+  }
+
+  private hasSensor (sensorName: string): boolean {
+    return sensorName in this.sensors
+  }
 }
 </script>
 

src/components/widgets/mmu/MmuClogMeter.vue

@@ -36,7 +36,7 @@
         class="warning-color"
         fill="transparent"
         stroke-width="18"
-        opacity="0.4"
+        opacity="0.3"
         :stroke-dasharray="circumference"
         :stroke-dashoffset="headroomArc"
       />
@@ -51,7 +51,7 @@
       :class="{ 'warning-color': headroomWarning, 'primary-color': !headroomWarning }"
       stroke-width="4"
       stroke-dashoffset="0"
-      stroke-dasharray="25,65"
+      stroke-dasharray="23,63"
     />
     <line
       :x1="x1Start"
@@ -61,7 +61,7 @@
       stroke="white"
       stroke-width="2"
       stroke-dashoffset="0"
-      stroke-dasharray="24,65"
+      stroke-dasharray="22,63"
     />
     <line
       :x1="x1End"
@@ -71,7 +71,7 @@
       class="warning-color"
       stroke-width="2"
       stroke-dashoffset="0"
-      stroke-dasharray="24,65"
+      stroke-dasharray="22,63"
     />
 
     <text
@@ -91,25 +91,25 @@
     <text
       v-if="encoderDetectionMode === 2"
       x="70"
-      y="124"
+      y="122"
       text-anchor="middle"
       class="small-text-color"
       font-size="12px"
     >
       Auto
     </text>
     <text
-      x="30"
-      y="136"
+      x="32"
+      y="139"
       text-anchor="end"
       class="small-text-color"
       font-size="12px"
     >
       {{ encoderDetectionLength }}
     </text>
     <text
-      x="108"
-      y="136"
+      x="106"
+      y="139"
       class="small-text-color"
       font-size="12px"
     >0</text>
@@ -133,13 +133,13 @@ export default class MmuClogMeter extends Mixins(StateMixin, MmuMixin) {
   private dialArc: number = this.circumference * (60 / 360)
   private dashOffset: number = this.circumference
 
-  private x1Start: number = 70 + 65 * Math.cos((120 * Math.PI) / 180)
-  private y1Start: number = 70 + 65 * Math.sin((120 * Math.PI) / 180)
-  private x1End: number = 70 + 65 * Math.cos((60 * Math.PI) / 180)
-  private y1End: number = 70 + 65 * Math.sin((60 * Math.PI) / 180)
+  private x1Start: number = 70 + 63 * Math.cos((120 * Math.PI) / 180)
+  private y1Start: number = 70 + 63 * Math.sin((120 * Math.PI) / 180)
+  private x1End: number = 70 + 63 * Math.cos((60 * Math.PI) / 180)
+  private y1End: number = 70 + 63 * Math.sin((60 * Math.PI) / 180)
 
-  x1MinHeadroom: number = 70 + 66 * Math.cos(((120 + 0) * Math.PI) / 180)
-  y1MinHeadroom: number = 70 + 66 * Math.sin(((120 + 0) * Math.PI) / 180)
+  x1MinHeadroom: number = 70 + 64 * Math.cos(((120 + 0) * Math.PI) / 180)
+  y1MinHeadroom: number = 70 + 64 * Math.sin(((120 + 0) * Math.PI) / 180)
   headroomWarning: boolean = false
 
   get headroomArc (): number {