Indicators tab improvements.

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a0ec682d4d850f0a12a60e97b24dc5e3f52e11aa..96c5c1f5dcd8d9376d5354116045d6d03bde3746 100644 (file)
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@ Buildbotics CNC Controller Firmware Changelog
  - Increased display precision of position and motor config.
  - Added support for 256 microstepping.
  - Smoother operation at 250k step rate by doubling clock as needed.
+ - Indicators tab improvements.
 
 ## v0.3.28
  - Show step rate on motor configuration page.

diff --git a/src/jade/templates/indicators.jade b/src/jade/templates/indicators.jade
index 36cdc0633561473126bb1aa91f1212b120dfe6a7..7081d2d1a7d33744f4b20e10840fadc7b76cc1ae 100644 (file)
--- a/src/jade/templates/indicators.jade
+++ b/src/jade/templates/indicators.jade
@@ -27,39 +27,69 @@
 
 script#indicators-template(type="text/x-template")
   .indicators
+    table.legend
+      tr
+        th.header(colspan=100) Legend
+
+      tr
+        td
+         .fa.fa-plus-circle.io
+        th Hi/+3.3v
+        th.separator
+        td
+         .fa.fa-minus-circle.io
+        th Lo/Gnd
+        th.separator
+        td
+         .fa.fa-circle.io.active
+        th Active
+        th.separator
+        td
+         .fa.fa-circle.io.inactive
+        th Inactive
+        th.separator
+        td
+         .fa.fa-circle-o.io
+        th Tristated/Disabled
+
     table.inputs
       tr
         th.header(colspan=7) Inputs
+
       tr
-        th
+        th State
         th Pin
         th Name
         th.separator
-        th
+        th State
         th Pin
         th Name
 
       each motor in '0123'
         tr
           td
-            .fa(:class="get_class('#{motor}lw')")
-          th {{get_min_pin(#{motor})}}
+            .fa.io(:class="get_input_class('#{motor}lw', '#{motor}ls')",
+              :title="get_input_tooltip('#{motor}lw', '#{motor}ls')")
+          td {{get_min_pin(#{motor})}}
           th Motor #{motor} Min
           th.separator
           td
-            .fa(:class="get_class('#{motor}xw')")
-          th {{get_max_pin(#{motor})}}
+            .fa.io(:class="get_input_class('#{motor}xw', '#{motor}xs')",
+              :title="get_input_tooltip('#{motor}xw', '#{motor}xs')")
+          td {{get_max_pin(#{motor})}}
           th Motor #{motor} Max
 
       tr
         td
-          .fa(:class="get_class('ew')")
-        th 23
+          .fa.io(:class="get_input_class('ew', 'et')",
+            :title="get_input_tooltip('ew', 'et')")
+        td 23
         th EStop
         th.separator
         td
-          .fa(:class="get_class('pw')")
-        th 22
+          .fa.io(:class="get_input_class('pw', 'pt')",
+            :title="get_input_tooltip('pw', 'pt')")
+        td 22
         th Probe
 
     table.outputs
@@ -67,73 +97,86 @@ script#indicators-template(type="text/x-template")
         th.header(colspan=7) Outputs
 
       tr
-        th
+        th State
         th Pin
         th Name
         th.separator
-        th
+        th State
         th Pin
         th Name
 
       tr
         td
-          .fa(:class="get_class('eos')")
-        th 15
+          .fa.io(:class="get_output_class('e')",
+            :title="get_output_tooltip('e')")
+        td 15
         th Tool Enable
         th.separator
         td
-          .fa(:class="get_class('1os')")
-        th 2
+          .fa.io(:class="get_output_class('1')",
+            :title="get_output_tooltip('1')")
+        td 2
         th Load 1
 
       tr
         td
-          .fa(:class="get_class('dos')")
-        th 16
+          .fa.io(:class="get_output_class('d')",
+            :title="get_output_tooltip('d')")
+        td 16
         th Tool Direction
         th.separator
         td
-          .fa(:class="get_class('2os')")
-        th 1
+          .fa.io(:class="get_output_class('2')",
+            :title="get_output_tooltip('2')")
+        td 1
         th Load 2
 
       tr
         td {{state['pd'] | percent 0}}
-        th 17
+        td 17
         th Tool PWM
         th.separator
         td
-          .fa(:class="get_class('fos')")
-        th 21
+          .fa.io(:class="get_output_class('f')",
+            :title="get_output_tooltip('f')")
+        td 21
         th Fault
 
     table.pwr_fault
       tr
         th.header(colspan=5) Power Faults
       tr
-        th Under voltage
-        td {{state['under_voltage'] ? 'True' : 'False'}}
+        th(:class="{error: state['under_voltage']}") Under voltage
+        td(:class="{error: state['under_voltage']}")
+          | {{state['under_voltage'] ? 'True' : 'False'}}
         th.separator
-        th Over voltage
-        td {{state['over_voltage'] ? 'True' : 'False'}}
+        th(:class="{error: state['over_voltage']}") Over voltage
+        td(:class="{error: state['over_voltage']}")
+          | {{state['over_voltage'] ? 'True' : 'False'}}
       tr
-        th Over current
-        td {{state['over_current'] ? 'True' : 'False'}}
+        th(:class="{error: state['over_current']}") Over current
+        td(:class="{error: state['over_current']}")
+          | {{state['over_current'] ? 'True' : 'False'}}
         th.separator
-        th Sense error
-        td {{state['sense_error'] ? 'True' : 'False'}}
+        th(:class="{error: state['sense_error']}") Sense error
+        td(:class="{error: state['sense_error']}")
+          | {{state['sense_error'] ? 'True' : 'False'}}
       tr
-        th Shunt overload
-        td {{state['shunt_overload'] ? 'True' : 'False'}}
+        th(:class="{error: state['shunt_overload']}") Shunt overload
+        td(:class="{error: state['shunt_overload']}")
+          | {{state['shunt_overload'] ? 'True' : 'False'}}
         th.separator
-        th Motor overload
-        td {{state['motor_overload'] ? 'True' : 'False'}}
+        th(:class="{error: state['motor_overload']}") Motor overload
+        td(:class="{error: state['motor_overload']}")
+          | {{state['motor_overload'] ? 'True' : 'False'}}
       tr
-        th Load 1 shutdown
-        td {{state['load1_shutdown'] ? 'True' : 'False'}}
+        th(:class="{error: state['load1_shutdown']}") Load 1 shutdown
+        td(:class="{error: state['load1_shutdown']}")
+          | {{state['load1_shutdown'] ? 'True' : 'False'}}
         th.separator
-        th Load 2 shutdown
-        td {{state['load2_shutdown'] ? 'True' : 'False'}}
+        th(:class="{error: state['load2_shutdown']}") Load 2 shutdown
+        td(:class="{error: state['load2_shutdown']}")
+          | {{state['load2_shutdown'] ? 'True' : 'False'}}
 
     table.measurements
       tr
@@ -172,38 +215,18 @@ script#indicators-template(type="text/x-template")
         th.header(colspan=5) Modbus VFD
 
       tr
-        th(colspan=5) {{modbus_status}}
-
-      tr
+        td {{modbus_status}}
+        th Status
+        th.separator
         td {{state['hz']}} Hz
         th Frequency
-        th.separator
-        td {{state['hc']}} A
-        th Current
 
       tr
         td {{state['s']}} RPM
         th Speed
         th.separator
-        td
-        th
-
-    table.legend
-      tr
-        th.header(colspan=10) Legend
-
-      tr
-        td
-         .fa.fa-circle.logic-hi
-        th Logic Hi
-
-        td
-         .fa.fa-circle.logic-lo
-        th Logic Lo
-
-        td
-         .fa.fa-circle-o.logic-tri
-        th Tristated / Disabled
+        td {{state['hc']}} A
+        th Current
 
     h2 DB25 breakout box
     img(width=700, src="/images/DB25_breakout_box.png")

diff --git a/src/js/indicators.js b/src/js/indicators.js
index 7b98eb53f1f3ff564d340ab7a8b5d2794873f91b..af340330c4f7365fadbcbbb70387c100f904b228 100644 (file)
--- a/src/js/indicators.js
+++ b/src/js/indicators.js
@@ -67,16 +67,82 @@ module.exports = {
     },
 
 
-    get_class: function (code) {
-      if (typeof this.state[code] != 'undefined') {
-        var state = this.state[code];
+    get_class: function (active, state) {
+      if (typeof active == 'undefined' || typeof state == 'undefined')
+        return 'fa-exclamation-triangle warn';
 
-        if (state == 0 || state === false) return 'logic-lo fa-circle';
-        if (state == 1 || state === true) return 'logic-hi fa-circle';
-        if (state == 2) return 'logic-tri fa-circle-o';
-      }
+      if (state == 2) return 'fa-circle-o';
+
+      return (state ? 'fa-plus-circle' : 'fa-minus-circle') + ' ' +
+        (active ? 'active' : 'inactive');
+    },
+
+
+    get_input_active: function (stateCode, typeCode) {
+      var type = this.state[typeCode];
+      var state = this.state[stateCode];
+
+      if (type == 1) return !state;     // Normally open
+      else if (type == 2) return state; // Normally closed
+
+      return false
+    },
+
+
+    get_input_class: function (stateCode, typeCode) {
+      return this.get_class(this.get_input_active(stateCode, typeCode),
+                            this.state[stateCode]);
+    },
+
+
+    get_output_class: function (output) {
+      return this.get_class(this.state[output + 'oa'],
+                            this.state[output + 'os']);
+    },
 
-      return 'fa-exclamation-triangle warn';
-    }
+
+    get_tooltip: function (mode, active, state) {
+      if (typeof mode == 'undefined' || typeof active == 'undefined' ||
+          typeof state == 'undefined') return 'Invalid';
+
+      if (state == 0) state = 'Lo/Gnd';
+      else if (state == 1) state = 'Hi/+3.3v';
+      else if (state == 2) state = 'Tristated';
+      else return 'Invalid';
+
+      return 'Mode: ' + mode + '\nActive: ' + (active ? 'True' : 'False') +
+        '\nLevel: ' + state;
+    },
+
+
+    get_input_tooltip: function (stateCode, typeCode) {
+      var type = this.state[typeCode];
+      if (type == 0) return 'Disabled';
+      else if (type == 1) type = 'Normally open';
+      else if (type == 2) type = 'Normally closed';
+
+      var active = this.get_input_active(stateCode, typeCode);
+      var state = this.state[stateCode];
+
+      return this.get_tooltip(type, active, state);
+    },
+
+
+    get_output_tooltip: function (output) {
+      var mode = this.state[output + 'om'];
+      if (mode == 0) return 'Disabled';
+      else if (mode == 1) mode = 'Lo/Hi';
+      else if (mode == 2) mode = 'Hi/Lo';
+      else if (mode == 3) mode = 'Tri/Lo';
+      else if (mode == 4) mode = 'Tri/Hi';
+      else if (mode == 5) mode = 'Lo/Tri';
+      else if (mode == 6) mode = 'Hi/Tri';
+      else mode = undefined;
+
+      var active = this.state[output + 'oa'];
+      var state = this.state[output + 'os'];
+
+      return this.get_tooltip(mode, active, state);
+    },
   }
 }

diff --git a/src/stylus/style.styl b/src/stylus/style.styl
index 42102d9b8b1c380aa48f96a4a1eec595efb31cfb..ed3dd11998d8def4d208e1c9c034ba93d07d39e0 100644 (file)
--- a/src/stylus/style.styl
+++ b/src/stylus/style.styl
@@ -445,7 +445,7 @@ span.unit
         color green
 
 .indicators
-  padding 1em
+  padding 1em 0.75em
   text-align center
 
   table
@@ -461,43 +461,32 @@ span.unit
     tr:nth-child(odd)
       background #f7f7f7
 
-    td:nth-child(1), td:nth-child(3)
-      text-align center
-
-    th:nth-child(2), th:nth-child(4)
+    th
       text-align left
 
+    td
+      text-align right
+
     &.inputs, &.outputs
-      td:nth-child(1), td:nth-child(4)
+      td:nth-child(1), td:nth-child(5)
         text-align center
 
-      th:nth-child(2), th:nth-child(5)
-        text-align right
-
-      th:nth-child(3), th:nth-child(6)
-        text-align left
-
     th.header
       height 2.5em
       border-bottom 3px solid #ccc
+      text-align center
 
     th.separator
       background #ccc
       border 1px solid #ccc
       padding 1px
 
-    &.pwr_fault th:nth-child(1)
-      text-align left
-
-    &.pwr_fault tr:nth-child(1) th
-      text-align center
+  .io.active
+    color green
 
-  .logic-lo
+  .io.inactive
     color black
 
-  .logic-hi
-    color green
-
   .warn
     background-color transparent
     color orange