Match limits colors and support no item name

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

@@ -1,5 +1,5 @@
 <!--
-# Copyright 2024 OpenC3, Inc.
+# Copyright 2025 OpenC3, Inc.
 # All Rights Reserved.
 #
 # This program is free software; you can modify and/or redistribute it
@@ -100,6 +100,7 @@ export default {
   border: 1px solid black;
   background-color: white;
 }
+/* The background-colors match the values in LimitscolorWidget.vue */
 .limitsbar__redlow {
   position: absolute;
   top: -1px;

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

@@ -13,17 +13,21 @@
 # GNU Affero General Public License for more details.
 
 # Modified by OpenC3, Inc.
-# All changes Copyright 2022, OpenC3, Inc.
+# All changes Copyright 2025, OpenC3, Inc.
 # All Rights Reserved
 #
 # This file may also be used under the terms of a commercial license
 # if purchased from OpenC3, Inc.
 -->
 
 <template>
-  <div ref="container" class="d-flex flex-row" :style="computedStyle">
-    <div class="led align-self-center" :style="cssProps"></div>
+  <div ref="container" class="d-flex flex-row" :style="myComputedStyle">
+    <div
+      :class="`led align-self-center ${this.limitsColor}`"
+      :style="cssProps"
+    ></div>
     <label-widget
+      v-if="displayLabel"
       :parameters="labelName"
       :settings="appliedSettings"
       :style="computedStyle"
@@ -40,14 +44,21 @@ export default {
     return {
       radius: 15,
       fullLabelDisplay: false,
+      displayLabel: true,
     }
   },
   created() {
     if (this.parameters[4]) {
       this.radius = parseInt(this.parameters[4])
     }
-    if (this.parameters[5] && this.parameters[5].toLowerCase() === 'true') {
-      this.fullLabelDisplay = true
+    if (this.parameters[5]) {
+      if (this.parameters[5].toLowerCase() === 'true') {
+        this.fullLabelDisplay = true
+      } else if (this.parameters[5].toLowerCase() === 'nil') {
+        this.displayLabel = false
+      } else if (this.parameters[5].toLowerCase() === 'none') {
+        this.displayLabel = false
+      }
     }
   },
   computed: {
@@ -70,9 +81,15 @@ export default {
       return {
         '--height': this.radius + 'px',
         '--width': this.radius + 'px',
-        '--color': this.limitsColor,
       }
     },
+    myComputedStyle() {
+      // Remove the flex property from the computedStyle object
+      // because if they choose not to display the label
+      // the flex property makes it difficult to line up a custom LABEL widget
+      delete this.computedStyle.flex
+      return this.computedStyle
+    },
   },
   methods: {
     getType() {
@@ -93,4 +110,17 @@ export default {
   background-color: var(--color);
   border-radius: 50%;
 }
+/* The background-colors match the values in LimitsbarWidget.vue */
+.red {
+  background-color: rgb(255, 45, 45);
+}
+.yellow {
+  background-color: rgb(255, 220, 0);
+}
+.green {
+  background-color: rgb(0, 200, 0);
+}
+.blue {
+  background-color: rgb(0, 153, 255);
+}
 </style>

openc3/data/config/widgets.yaml

@@ -850,9 +850,9 @@ Telemetry Widgets:
           required: false
           description: Radius of the circle (default is 10)
           values: .*
-        - name: Full Item Name
+        - name: Item Name Display
           required: false
-          description: Show the full item name (default is false)
+          description: Show the full item name, e.g. TGT PKT ITEM (true), no item name (nil or none) or just the item name (false). Default is false.
           values: .*
       example: |
         LIMITSCOLOR INST HEALTH_STATUS TEMP1 CONVERTED 30 TRUE