Merge pull request #1786 from OpenC3/limits_widgets

Nice error message for widget items without limits

Author: jmthomas

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/EditScreenDialog.vue

@@ -52,7 +52,7 @@
           </v-tooltip>
         </div>
       </v-toolbar>
-      <v-card-text>
+      <v-card-text style="max-height: 90vh">
         <v-row class="mt-3"> Upload a screen file. </v-row>
         <v-row no-gutters align="center">
           <v-btn
@@ -88,10 +88,13 @@
             </v-list>
           </v-menu>
         </v-row>
-        <v-row v-for="(error, index) in editErrors" :key="index" class="my-3">
-          <span class="text-red" v-text="error"></span>
+        <!-- Make the error messages a max height and scrollable -->
+        <v-row style="max-height: 120px; overflow-y: auto">
+          <div v-for="(error, index) in editErrors" :key="index">
+            <span class="text-red" v-text="error"></span>
+          </div>
         </v-row>
-        <v-row>
+        <v-row class="mt-5">
           <span
             >Ctrl-space brings up autocomplete. Right click keywords for
             documentation.</span
@@ -168,10 +171,8 @@ export default {
       if (this.errors.length !== 0) {
         let messages = new Set()
         let result = []
+        this.errors.sort((a, b) => a.lineNumber - b.lineNumber)
         for (const error of this.errors) {
-          if (messages.has(error.message)) {
-            continue
-          }
           let msg = `At ${error.lineNumber}: (${error.line}) ${error.message}.`
           if (error.usage) {
             msg += ` Usage: ${error.usage}`
@@ -322,7 +323,7 @@ export default {
 </style>
 <style scoped>
 .editor {
-  height: 50vh;
+  height: 45vh;
   width: 75vw;
   position: relative;
   font-size: 16px;

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/Openc3Screen.vue

@@ -163,7 +163,7 @@
     />
 
     <!-- Error dialog -->
-    <v-dialog v-model="errorDialog" max-width="600">
+    <v-dialog v-model="errorDialog" width="60vw">
       <v-toolbar height="24">
         <v-spacer />
         <span> Screen: {{ target }} {{ screen }} Errors </span>
@@ -778,5 +778,7 @@ export default {
 }
 .v-textarea :deep(textarea) {
   padding: 5px;
+  -webkit-mask-image: unset;
+  mask-image: unset;
 }
 </style>

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

@@ -101,6 +101,9 @@ export default {
   },
   methods: {
     modifyLimits(limitsSettings) {
+      if (!limitsSettings) {
+        return
+      }
       // By default the red bars take 10% of the display
       this.redLow = 10
       this.redHigh = 10

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

@@ -35,6 +35,8 @@
       :settings="[...appliedSettings]"
       :screen-values="screenValues"
       :widget-index="2"
+      :line="line"
+      :lineNumber="lineNumber"
     />
   </div>
 </template>

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

@@ -34,6 +34,8 @@
       :settings="[...appliedSettings]"
       :screen-values="screenValues"
       :widget-index="2"
+      :line="line"
+      :lineNumber="lineNumber"
     />
     <value-widget
       v-bind="$attrs"

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

@@ -52,14 +52,34 @@ export default {
   computed: {
     limitsRange() {
       let values = this.limitsSettings[this.selectedLimitsSet]
-      // Format like the DetailsDialog formatLimit function
-      if (values.length === 4) {
-        return `RL/${values[0]} YL/${values[1]} YH/${values[2]} RH/${values[3]}`
+      if (values) {
+        // Format like the DetailsDialog formatLimit function
+        if (values.length === 4) {
+          return `RL/${values[0]} YL/${values[1]} YH/${values[2]} RH/${values[3]}`
+        } else {
+          return `RL/${values[0]} YL/${values[1]} YH/${values[2]} RH/${values[3]} GL/${values[4]} GH/${values[5]}`
+        }
       } else {
-        return `RL/${values[0]} YL/${values[1]} YH/${values[2]} RH/${values[3]} GL/${values[4]} GH/${values[5]}`
+        // See errorCaptured in Openc3Screen.vue for how this is parsed
+        throw {
+          line: this.line,
+          lineNumber: this.lineNumber,
+          keyword: 'LIMITSBAR',
+          parameters: this.parameters,
+          message: 'Item has no limits settings',
+          usage: 'Only items with limits',
+        }
       }
     },
   },
+  created() {
+    this.verifyNumParams(
+      'LIMITSBAR',
+      3,
+      6,
+      'LIMITSBAR <TARGET> <PACKET> <ITEM> <TYPE> <WIDTH> <HEIGHT>',
+    )
+  },
 }
 </script>
 

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

@@ -52,22 +52,42 @@ export default {
       let limits = this.modifyLimits(
         this.limitsSettings[this.selectedLimitsSet],
       )
-      this.calcLimits(limits)
-      return {
-        '--height': this.height + 'px',
-        '--width': this.width + 'px',
-        '--container-width': this.width - 5 + 'px',
-        '--position': this.calcPosition(value, limits) + '%',
-        '--redlow-height': this.redLow + '%',
-        '--redhigh-height': this.redHigh + '%',
-        '--yellowlow-height': this.yellowLow + '%',
-        '--yellowhigh-height': this.yellowHigh + '%',
-        '--greenlow-height': this.greenLow + '%',
-        '--greenhigh-height': this.greenHigh + '%',
-        '--blue-height': this.blue + '%',
+      if (limits) {
+        this.calcLimits(limits)
+        return {
+          '--height': this.height + 'px',
+          '--width': this.width + 'px',
+          '--container-width': this.width - 5 + 'px',
+          '--position': this.calcPosition(value, limits) + '%',
+          '--redlow-height': this.redLow + '%',
+          '--redhigh-height': this.redHigh + '%',
+          '--yellowlow-height': this.yellowLow + '%',
+          '--yellowhigh-height': this.yellowHigh + '%',
+          '--greenlow-height': this.greenLow + '%',
+          '--greenhigh-height': this.greenHigh + '%',
+          '--blue-height': this.blue + '%',
+        }
+      } else {
+        // See errorCaptured in Openc3Screen.vue for how this is parsed
+        throw {
+          line: this.line,
+          lineNumber: this.lineNumber,
+          keyword: 'LIMITSCOLUMN',
+          parameters: this.parameters,
+          message: 'Item has no limits settings',
+          usage: 'Only items with limits',
+        }
       }
     },
   },
+  created() {
+    this.verifyNumParams(
+      'LIMITSCOLUMN',
+      3,
+      6,
+      'LIMITSCOLUMN <TARGET> <PACKET> <ITEM> <TYPE> <WIDTH> <HEIGHT>',
+    )
+  },
 }
 </script>
 

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

@@ -36,6 +36,8 @@
       :settings="[...appliedSettings]"
       :screen-values="screenValues"
       :widget-index="1"
+      :line="line"
+      :lineNumber="lineNumber"
     />
   </div>
 </template>

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

@@ -29,6 +29,8 @@
       :settings="[...appliedSettings]"
       :screen-values="screenValues"
       :widget-index="1"
+      :line="line"
+      :lineNumber="lineNumber"
     />
     <value-widget
       v-bind="$attrs"