From 76932540001ecf946fcc5164bfbfb4df9603f115 Mon Sep 17 00:00:00 2001
From: PAJohnson <pajohns4@ncsu.edu>
Date: Tue, 6 Oct 2020 00:53:36 -0400
Subject: [PATCH] Fixed numeric inputs for relevant components

---
 GUI/src/components/actions/Action.vue         | 21 ++----
 GUI/src/components/controls/CtrlNumeric.vue   | 17 ++---
 .../components/wizard/choices/wizardBrake.vue | 43 +++++++-----
 .../choices/wizardEncoderIncremental.vue      | 69 +++++++++---------
 .../choices/wizardEncoderIncrementalIndex.vue | 70 ++++++++++---------
 .../components/wizard/choices/wizardMisc.vue  | 53 +++++++++-----
 .../components/wizard/choices/wizardMotor.vue |  2 +-
 GUI/src/lib/odrive_utils.js                   | 17 +++++
 8 files changed, 163 insertions(+), 129 deletions(-)

diff --git a/GUI/src/components/actions/Action.vue b/GUI/src/components/actions/Action.vue
index b5cbab2c..ce896c31 100644
--- a/GUI/src/components/actions/Action.vue
+++ b/GUI/src/components/actions/Action.vue
@@ -3,14 +3,14 @@
     <button class="close-button" @click=deleteAction>X</button>
     <span class="ctrlName">{{shortPath}}:</span>
     <div class="right">
-      <input v-on:change="newVal" :placeholder="initVal"/>
+      <input v-on:change="newVal" :placeholder="initVal" :value="this.value"/>
       <button class="action-button close-button" @click="putVal">Send</button>
     </div>
   </div>
 </template>
 
 <script>
-import { putVal } from "../../lib/odrive_utils.js";
+import { putVal, parseMath } from "../../lib/odrive_utils.js";
 
 export default {
   name: "Action",
@@ -39,19 +39,12 @@ export default {
   },
   methods: {
     newVal: function (e) {
-      let input = e.target.value;
-      let allowedChars = "0123456789eE/*-+.()";
-      let send = true;
-      for (const c of input) {
-        if (!allowedChars.includes(c)) {
-          send = false;
-        }
+      let val = parseMath(e.target.value);
+      if (val != false) {
+        this.value = val;
+        console.log("input = " + e.target.value + ", val = " + this.value);
+        this.$store.commit("setActionVal", {dashID: this.dashID, actionID: this.id, val: this.value});
       }
-      if (send) {
-        this.value = eval(input);
-        console.log("input = " + input + ", val = " + this.value);
-      }
-      this.$store.commit("setActionVal", {dashID: this.dashID, actionID: this.id, val: this.value});
     },
     putVal: function () {
       let keys = this.path.split(".");
diff --git a/GUI/src/components/controls/CtrlNumeric.vue b/GUI/src/components/controls/CtrlNumeric.vue
index 52c5eb4d..752dbce6 100644
--- a/GUI/src/components/controls/CtrlNumeric.vue
+++ b/GUI/src/components/controls/CtrlNumeric.vue
@@ -4,14 +4,14 @@
     <span class="ctrlName">{{name}}:</span>
     <div class="right">
       <span v-if="!writeAccess" class="ctrlVal">{{value}}</span>
-      <input v-if="writeAccess" :placeholder="value" v-on:change="putVal" />
+      <input v-if="writeAccess" :placeholder="value" v-on:change="putVal" :value="value"/>
       <!-- <span class="unit">[{{unit}}]</span> -->
     </div>
   </div>
 </template>
 
 <script>
-import { getVal, getReadonly, putVal, fetchParam, getUnit } from "../../lib/odrive_utils.js";
+import { getVal, getReadonly, putVal, fetchParam, getUnit, parseMath } from "../../lib/odrive_utils.js";
 
 export default {
   name: "CtrlNumeric",
@@ -47,16 +47,9 @@ export default {
     putVal: function (e) {
       let keys = this.path.split('.');
       keys.shift();
-      let input = e.target.value;
-      let allowedChars = "0123456789eE/*-+.()";
-      let send = true;
-      for (const c of input) {
-        if (!allowedChars.includes(c)) {
-          send = false;
-        }
-      }
-      if (send) {
-        putVal(keys.join('.'), eval(input));
+      let val = parseMath(e.target.value);
+      if (val != false) {
+        putVal(keys.join('.'), val);
       }
     },
     deleteCtrl: function() {
diff --git a/GUI/src/components/wizard/choices/wizardBrake.vue b/GUI/src/components/wizard/choices/wizardBrake.vue
index b56a9e21..caef2057 100644
--- a/GUI/src/components/wizard/choices/wizardBrake.vue
+++ b/GUI/src/components/wizard/choices/wizardBrake.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="card wizard-choice" :class="{'choice-inactive': !allowed}">
+  <div class="card wizard-choice" :class="{ 'choice-inactive': !allowed }">
     <div class="left">
-      <span>Brake resistor value =</span>
-      <input type="number" v-on:change="setBR" placeholder="Change Me!" />
-      <span class="unit"> [{{unit}}] </span>
+      <span>Brake resistor value = </span>
+      <input v-on:change="setBR" placeholder="Change Me!" :value="brake_resistance"/>
+      <span class="unit"> [{{ unit }}] </span>
     </div>
   </div>
 </template>
 
 <script>
-import { getUnit } from '../../../lib/odrive_utils.js';
+import { getUnit, parseMath, getVal } from "../../../lib/odrive_utils.js";
 
 export default {
   name: "wizardBrake",
@@ -26,24 +26,31 @@ export default {
     unit() {
       // goal is to return "Ohms" from odriveUnits
       let path = "odrive0.config.brake_resistance";
-      return getUnit(this.$store.state.odrives.odrive0,path);
+      return getUnit(this.$store.state.odrives.odrive0, path);
     },
+    value() {
+      let path = "odrive0.config.brake_resistance";
+      return getVal(path);
+    }
   },
   methods: {
     setBR(e) {
       console.log("from setBR " + e.target.value);
-      this.brake_resistance = parseFloat(e.target.value);
-      let configStub = undefined;
-      configStub = {
-        config: {
-          brake_resistance: this.brake_resistance,
-        },
-      };
-      this.$emit("choice", {
-        choice: "Brake Resistor",
-        configStub: configStub,
-        hooks: [],
-      });
+      let val = parseMath(e.target.value);
+      if (val != false) {
+        this.brake_resistance = val;
+        let configStub = undefined;
+        configStub = {
+          config: {
+            brake_resistance: this.brake_resistance,
+          },
+        };
+        this.$emit("choice", {
+          choice: "Brake Resistor",
+          configStub: configStub,
+          hooks: [],
+        });
+      }
     },
   },
 };
diff --git a/GUI/src/components/wizard/choices/wizardEncoderIncremental.vue b/GUI/src/components/wizard/choices/wizardEncoderIncremental.vue
index 1fa57ea5..6395f921 100644
--- a/GUI/src/components/wizard/choices/wizardEncoderIncremental.vue
+++ b/GUI/src/components/wizard/choices/wizardEncoderIncremental.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="card wizard-choice" :class="{'choice-inactive': !allowed}">
+  <div class="card wizard-choice" :class="{ 'choice-inactive': !allowed }">
     <div class="left">
       <span>counts per revolution = </span>
-      <input type="number" v-on:change="setCPR" placeholder="Change Me!" />
+      <input v-on:change="setCPR" placeholder="Change Me!" :value="cpr" />
     </div>
     <span class="name">Incremental Encoder without Index</span>
   </div>
@@ -10,6 +10,7 @@
 
 <script>
 import odriveEnums from "../../../assets/odriveEnums.json";
+import { parseMath } from "../../../lib/odrive_utils.js";
 export default {
   name: "wizardEncoderIncremental",
   props: {
@@ -24,39 +25,41 @@ export default {
   },
   methods: {
     setCPR(e) {
-      this.cpr = parseInt(e.target.value);
-      let configStub = undefined;
-      if (this.data.axis == "axis0") {
-        configStub = {
-          axis0: {
-            encoder: {
-              config: {
-                cpr: this.cpr,
-                use_index: false,
-                mode: odriveEnums.ENCODER_MODE_INCREMENTAL,
-              }
-            }
-          }
+      let val = parseMath(e.target.value);
+      if (val != false) {
+        this.cpr = val;
+        let configStub = undefined;
+        if (this.data.axis == "axis0") {
+          configStub = {
+            axis0: {
+              encoder: {
+                config: {
+                  cpr: this.cpr,
+                  use_index: false,
+                  mode: odriveEnums.ENCODER_MODE_INCREMENTAL,
+                },
+              },
+            },
+          };
+        } else if (this.data.axis == "axis1") {
+          configStub = {
+            axis1: {
+              encoder: {
+                config: {
+                  cpr: this.cpr,
+                  use_index: false,
+                  mode: odriveEnums.ENCODER_MODE_INCREMENTAL,
+                },
+              },
+            },
+          };
         }
+        this.$emit("choice", {
+          choice: "Incremental",
+          configStub: configStub,
+          hooks: [],
+        });
       }
-      else if (this.data.axis == "axis1") {
-        configStub = {
-          axis1: {
-            encoder: {
-              config: {
-                cpr: this.cpr,
-                use_index: false,
-                mode: odriveEnums.ENCODER_MODE_INCREMENTAL,
-              }
-            }
-          }
-        }
-      }
-      this.$emit("choice", {
-        choice: "Incremental",
-        configStub: configStub,
-        hooks: [],
-      });
     },
   },
 };
diff --git a/GUI/src/components/wizard/choices/wizardEncoderIncrementalIndex.vue b/GUI/src/components/wizard/choices/wizardEncoderIncrementalIndex.vue
index 1a34fcd2..79baa12a 100644
--- a/GUI/src/components/wizard/choices/wizardEncoderIncrementalIndex.vue
+++ b/GUI/src/components/wizard/choices/wizardEncoderIncrementalIndex.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="card wizard-choice" :class="{'choice-inactive': !allowed}">
+  <div class="card wizard-choice" :class="{ 'choice-inactive': !allowed }">
     <div class="left">
       <span>counts per revolution = </span>
-      <input type="number" v-on:change="setCPR" placeholder="Change Me!" />
+      <input v-on:change="setCPR" placeholder="Change Me!" :value="cpr" />
     </div>
     <span class="name">Incremental Encoder with Index</span>
   </div>
@@ -10,6 +10,8 @@
 
 <script>
 import odriveEnums from "../../../assets/odriveEnums.json";
+import { parseMath } from "../../../lib/odrive_utils.js";
+
 export default {
   name: "wizardEncoderIncremental",
   props: {
@@ -24,39 +26,41 @@ export default {
   },
   methods: {
     setCPR(e) {
-      this.cpr = parseInt(e.target.value);
-      let configStub = undefined;
-      if (this.data.axis == "axis0") {
-        configStub = {
-          axis0: {
-            encoder: {
-              config: {
-                cpr: this.cpr,
-                use_index: true,
-                mode: odriveEnums.ENCODER_MODE_INCREMENTAL,
-              }
-            }
-          }
+      let val = parseMath(e.target.value);
+      if (val != false) {
+        this.cpr = val;
+        let configStub = undefined;
+        if (this.data.axis == "axis0") {
+          configStub = {
+            axis0: {
+              encoder: {
+                config: {
+                  cpr: this.cpr,
+                  use_index: true,
+                  mode: odriveEnums.ENCODER_MODE_INCREMENTAL,
+                },
+              },
+            },
+          };
+        } else if (this.data.axis == "axis1") {
+          configStub = {
+            axis1: {
+              encoder: {
+                config: {
+                  cpr: this.cpr,
+                  use_index: true,
+                  mode: odriveEnums.ENCODER_MODE_INCREMENTAL,
+                },
+              },
+            },
+          };
         }
+        this.$emit("choice", {
+          choice: "IncrementalIndex",
+          configStub: configStub,
+          hooks: [],
+        });
       }
-      else if (this.data.axis == "axis1") {
-        configStub = {
-          axis1: {
-            encoder: {
-              config: {
-                cpr: this.cpr,
-                use_index: true,
-                mode: odriveEnums.ENCODER_MODE_INCREMENTAL,
-              }
-            }
-          }
-        }
-      }
-      this.$emit("choice", {
-        choice: "IncrementalIndex",
-        configStub: configStub,
-        hooks: [],
-      });
     },
   },
 };
diff --git a/GUI/src/components/wizard/choices/wizardMisc.vue b/GUI/src/components/wizard/choices/wizardMisc.vue
index aa473703..9aa8f39f 100644
--- a/GUI/src/components/wizard/choices/wizardMisc.vue
+++ b/GUI/src/components/wizard/choices/wizardMisc.vue
@@ -1,20 +1,31 @@
 <template>
-  <div class="card wizard-motor-custom wizard-choice" :class="{'choice-inactive': !allowed}">
+  <div
+    class="card wizard-motor-custom wizard-choice"
+    :class="{ 'choice-inactive': !allowed }"
+  >
     <div class="left">
       <span>Motor Velocity Limit =</span>
-      <input type="number" v-on:change="setVelocityLimit" :placeholder="velocityLimit" />
-      <span class="unit">[{{velUnit}}]</span>
+      <input
+        v-on:change="setVelocityLimit"
+        :placeholder="velocityLimit"
+        :value="vel_limit"
+      />
+      <span class="unit">[{{ velUnit }}]</span>
     </div>
     <div class="left">
       <span>Motor Current Limit =</span>
-      <input type="number" v-on:change="setCurrentLimit" :placeholder="currentLimit" />
+      <input
+        v-on:change="setCurrentLimit"
+        :placeholder="currentLimit"
+        :value="current_lim"
+      />
       <span class="unit">[Amps]</span>
     </div>
   </div>
 </template>
 
 <script>
-import { getVal, getUnit } from "../../../lib/odrive_utils.js"
+import { getVal, getUnit, parseMath } from "../../../lib/odrive_utils.js";
 
 export default {
   name: "wizardMisc",
@@ -41,7 +52,7 @@ export default {
     },
     velUnit() {
       let path = "odrive0." + this.data.axis + ".controller.config.vel_limit";
-      return getUnit(this.$store.state.odrives.odrive0,path)
+      return getUnit(this.$store.state.odrives.odrive0, path);
     },
   },
   methods: {
@@ -55,13 +66,13 @@ export default {
               controller: {
                 config: {
                   vel_limit: this.vel_limit,
-                }
+                },
               },
               motor: {
                 config: {
                   current_lim: this.current_lim,
-                }
-              }
+                },
+              },
             },
           };
         } else if (this.data.axis == "axis1") {
@@ -70,13 +81,13 @@ export default {
               controller: {
                 config: {
                   vel_limit: this.vel_limit,
-                }
+                },
               },
               motor: {
                 config: {
                   current_lim: this.current_lim,
-                }
-              }
+                },
+              },
             },
           };
         }
@@ -88,14 +99,20 @@ export default {
       }
     },
     setVelocityLimit(e) {
-      this.vel_limit = parseFloat(e.target.value);
-      this.vel_set = true;
-      this.sendConfig();
+      let val = parseMath(e.target.value);
+      if (val != false) {
+        this.vel_limit = parseFloat(e.target.value);
+        this.vel_set = true;
+        this.sendConfig();
+      }
     },
     setCurrentLimit(e) {
-      this.current_lim = parseFloat(e.target.value);
-      this.current_set = true;
-      this.sendConfig();
+      let val = parseMath(e.target.value);
+      if (val != false) {
+        this.current_lim = parseFloat(e.target.value);
+        this.current_set = true;
+        this.sendConfig();
+      }
     },
   },
 };
diff --git a/GUI/src/components/wizard/choices/wizardMotor.vue b/GUI/src/components/wizard/choices/wizardMotor.vue
index 7eb8c531..6fbc71bc 100644
--- a/GUI/src/components/wizard/choices/wizardMotor.vue
+++ b/GUI/src/components/wizard/choices/wizardMotor.vue
@@ -14,7 +14,7 @@
       <span class="unit">[Ohms]</span>
     </div>
     <div class="left">
-      <span>Phase Inductace =</span>
+      <span>Phase Inductance =</span>
       <span>{{" " + inductance}}</span>
       <span class="unit">[Henries]</span>
     </div>
diff --git a/GUI/src/lib/odrive_utils.js b/GUI/src/lib/odrive_utils.js
index f98a2d63..8f1993e2 100644
--- a/GUI/src/lib/odrive_utils.js
+++ b/GUI/src/lib/odrive_utils.js
@@ -32,6 +32,23 @@ export function fetchParam(path) {
     }
 }
 
+export function parseMath(inString) {
+    // given an input string that is valid arithmetic, use eval() to evaluate it
+    let allowedChars = "0123456789eE/*-+.()";
+    let send = true;
+    for (const c of inString) {
+        if (!allowedChars.includes(c)) {
+            send = false;
+        }
+    }
+    if (send) {
+        return eval(inString);
+    }
+    else {
+        return false;
+    }
+}
+
 export function putVal(path, value) {
     console.log("path: " + path + ", val: " + value + ", type: " + typeof value);
     socketio.sendEvent({