Merge pull request #1849 from OpenC3/led-blur

Blur LedWidgets when stale

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/widgets/LedWidget.vue

@@ -24,7 +24,7 @@
   <v-tooltip location="top">
     <template v-slot:activator="{ props }">
       <div
-        class="ledwidget mt-1"
+        :class="getClass"
         :style="[cssProps, computedStyle]"
         v-bind="props"
       ></div>
@@ -71,6 +71,13 @@ export default {
         this.parameters[0] + ' ' + this.parameters[1] + ' ' + this.parameters[2]
       )
     },
+    getClass() {
+      let result = 'ledwidget mt-2'
+      if (this.screenValues[this.valueId][1] === 'STALE') {
+        result += ' stale'
+      }
+      return result
+    },
   },
   // Note Vuejs still treats this synchronously, but this allows us to dispatch
   // the store mutation and return the array index.
@@ -105,4 +112,7 @@ export default {
   background-color: var(--color);
   border-radius: 50%;
 }
+.stale {
+  filter: blur(2px) brightness(0.6);
+}
 </style>

openc3/data/config/widgets.yaml

@@ -372,6 +372,7 @@ Telemetry Widgets:
         FORMATVALUE INST LATEST TEMP1 %.2f CONVERTED 20
     LABELLED:
       summary: Displays a LABEL followed by a LED
+      description: See the LED widget for more information
       parameters:
         - name: Target name
           required: true
@@ -688,6 +689,7 @@ Telemetry Widgets:
         Additional values can be added by using the LED_COLOR setting. For example
         LED INST PARAMS VALUE3 RAW can be followed by SETTING LED_COLOR 0 GREEN,
         SETTING LED_COLOR 1 RED, and SETTING LED_COLOR ANY ORANGE.
+        See LIMITSCOLOR for a widget that displays a circle depicting the limits color of an item.
       parameters:
         - name: Target name
           required: true
@@ -791,7 +793,8 @@ Telemetry Widgets:
         LIMITSCOLUMN INST HEALTH_STATUS TEMP1 CONVERTED 50 200
         LIMITSCOLUMN INST HEALTH_STATUS TEMP1
     LIMITSCOLOR:
-      summary: Displays a circle depicting the limits color of an item
+      summary: Displays a circle depicting the limits color of an item.
+        See LED for a widget that displays a circle which changes to an arbitrary color based on telemetry values.
       parameters:
         - name: Target name
           required: true