Justify Telemetry Viewer widgets

Author: jmthomas

openc3-cosmos-init/plugins/packages/openc3-cosmos-demo/targets/INST/screens/hs.txt

@@ -12,10 +12,10 @@ VERTICAL
 
   VERTICALBOX "General Telemetry"
     BUTTON 'Start Collect' 'api.cmd("<%= target_name %> COLLECT with TYPE NORMAL, DURATION 5")'
-    FORMATVALUE <%= target_name %> HEALTH_STATUS COLLECTS "0x%08X" CONVERTED 14
+    FORMATVALUE <%= target_name %> HEALTH_STATUS COLLECTS "0x%08X" CONVERTED 16
     LABELVALUE <%= target_name %> HEALTH_STATUS COLLECT_TYPE
     LABELVALUE <%= target_name %> HEALTH_STATUS DURATION
-    LABELVALUE <%= target_name %> HEALTH_STATUS ASCIICMD WITH_UNITS 30
+    LABELVALUE <%= target_name %> HEALTH_STATUS ASCIICMD WITH_UNITS 40
   END
   SETTING BACKCOLOR 163 185 163
 

openc3-cosmos-init/plugins/packages/openc3-cosmos-demo/targets/INST/screens/limits.txt

@@ -36,9 +36,9 @@ HORIZONTAL
       LABELVALUERANGEBAR <%= target_name %> HEALTH_STATUS TEMP2 0 100
     END
     VERTICALBOX "Limits Colors"
-      LIMITSCOLOR <%= target_name %> HEALTH_STATUS TEMP1 CONVERTED 5 NIL # No label
+      LIMITSCOLOR <%= target_name %> HEALTH_STATUS TEMP1 CONVERTED 10 NIL # No label
       LIMITSCOLOR <%= target_name %> HEALTH_STATUS TEMP2 # Default is label with just item name
-      LIMITSCOLOR <%= target_name %> HEALTH_STATUS GROUND1STATUS CONVERTED 5 TRUE # Full TGT/PKT/ITEM label
+      LIMITSCOLOR <%= target_name %> HEALTH_STATUS GROUND1STATUS CONVERTED 20 TRUE # Full TGT/PKT/ITEM label
     END
   END
 END

openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/widgets/LabelWidget.vue

@@ -16,7 +16,7 @@
 # All changes Copyright 2022, OpenC3, Inc.
 # All Rights Reserved
 #
-# This file may also be used under the terms of a commercial license 
+# This file may also be used under the terms of a commercial license
 # if purchased from OpenC3, Inc.
 -->
 

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

@@ -21,7 +21,7 @@
 -->
 
 <template>
-  <div class="led mt-2" :style="[cssProps, computedStyle]"></div>
+  <div class="led mt-1" :style="cssProps"></div>
 </template>
 
 <script>

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

@@ -22,7 +22,7 @@
 
 <template>
   <div ref="container" class="d-flex flex-row" :style="computedStyle">
-    <div class="led align-self-center" :style="[cssProps, computedStyle]"></div>
+    <div class="led align-self-center" :style="cssProps"></div>
     <label-widget
       :parameters="labelName"
       :settings="settings"

openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/widgets/Widget.js

@@ -64,6 +64,13 @@ export default {
         }
         this.applySetting(style, setting)
       })
+      // If they haven't defined a width then we add flex to the style
+      if (style['width'] === undefined) {
+        // This flex allows for alignment in our widgets
+        // The value of '0 10 100%' was achieved through trial and error
+        // The larger flex-shrink value was critical for success
+        style['flex'] = '0 10 100%' // flex-grow, flex-shrink, flex-basis
+      }
       return style
     },
   },