From d19519dd42e786a2576d48c1b2a5ce3173483fd0 Mon Sep 17 00:00:00 2001
From: PAJohnson <pajohns4@ncsu.edu>
Date: Tue, 22 Dec 2020 22:48:17 -0500
Subject: [PATCH] [GUI] Updated vue-slider-component version number, changed
 display behavior of numerical values to automatically switch to scientific
 notation under certain conditions, fixed header menu behavior

---
 GUI/README.md                               | 14 ++++++
 GUI/package-lock.json                       | 48 +++++++++++++++++----
 GUI/package.json                            |  3 +-
 GUI/src/App.vue                             | 12 +++++-
 GUI/src/assets/wizard/configTemplate.json   |  6 ++-
 GUI/src/components/actions/Action.vue       |  6 ++-
 GUI/src/components/controls/CtrlNumeric.vue |  5 ++-
 GUI/src/components/controls/CtrlSlider.vue  | 39 +++++++++++++----
 GUI/src/lib/utils.js                        | 15 +++++++
 9 files changed, 122 insertions(+), 26 deletions(-)

diff --git a/GUI/README.md b/GUI/README.md
index 6849cc570..c4cba806a 100644
--- a/GUI/README.md
+++ b/GUI/README.md
@@ -38,5 +38,19 @@ npm run electron:serve
 npm run electron:build
 ```
 
+### Build electron app for all platforms
+```
+npm run electron:build -- -mwl
+```
+
+### Building for rpi and potentially other ARM platform devices
+
+PhantomJS is required as a dependency, so it must be installed first:
+```
+sudo apt install phantomjs
+```
+
+After it is installed, `npm run electron:build` can be used to build the AppImage for ARM
+
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/GUI/package-lock.json b/GUI/package-lock.json
index 94084dde3..960126a38 100644
--- a/GUI/package-lock.json
+++ b/GUI/package-lock.json
@@ -3045,6 +3045,16 @@
       "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==",
       "dev": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -6551,6 +6561,13 @@
       "integrity": "sha512-Qe/5NJrgIOlwijpq3B7BEpzPFcgzggOTagZmkXQY4LA6bsXKTUstK7Wp12lEJ/mLKTpvIZxmIuRcLYWT6ov9lw==",
       "dev": true
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "file-url": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/file-url/-/file-url-2.0.2.tgz",
@@ -9238,6 +9255,13 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "nan": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+      "dev": true,
+      "optional": true
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -13609,9 +13633,9 @@
       "integrity": "sha512-yWNhG3B6g6lvYqNInP0WaDWNZG/SNb6XnltkjR0wYC5pmLm6jvdiotj8er7Mui8qkJGfLZe6ULjrZdHWjegAUg=="
     },
     "vue-class-component": {
-      "version": "7.2.5",
-      "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.5.tgz",
-      "integrity": "sha512-0CSftHY0bDTD+4FbYkuFf6+iKDjZ4h2in2YYJDRMk5daZIjrgT9LjFHvP7Rzqy9/s1pij3zDtTSLRUjsPWMwqg=="
+      "version": "7.2.6",
+      "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.6.tgz",
+      "integrity": "sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w=="
     },
     "vue-cli-plugin-electron-builder": {
       "version": "2.0.0-rc.4",
@@ -14135,9 +14159,9 @@
       }
     },
     "vue-slider-component": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/vue-slider-component/-/vue-slider-component-3.2.2.tgz",
-      "integrity": "sha512-Nxz5UYemwfpsFsv98yQuI4+XyMNtMYwFgW5Ue9i/w+ArSs/Ow7LJuixD6Tf/Lpnc2NUuMN+AwxZCE4FapxElCA==",
+      "version": "3.2.11",
+      "resolved": "https://registry.npmjs.org/vue-slider-component/-/vue-slider-component-3.2.11.tgz",
+      "integrity": "sha512-2YyJW6TFnYk5FUvqQLvZcCJ+hthBXB819qNHtwnEUyDbOcTXV0n3Ou1ZphOi5FX9phlQIiC2NvjLuRAVmNq+Zw==",
       "requires": {
         "core-js": "^3.6.5",
         "vue-property-decorator": "^8.0.0"
@@ -14260,7 +14284,11 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",
@@ -14562,7 +14590,11 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",
diff --git a/GUI/package.json b/GUI/package.json
index 87d549393..6582aa45f 100644
--- a/GUI/package.json
+++ b/GUI/package.json
@@ -30,7 +30,7 @@
     "vue-context": "^5.2.0",
     "vue-directive-tooltip": "^1.6.3",
     "vue-json-component": "^0.4.1",
-    "vue-slider-component": "^3.2.2",
+    "vue-slider-component": "^3.2.11",
     "vuex": "^3.5.1"
   },
   "devDependencies": {
@@ -46,7 +46,6 @@
     "eslint-plugin-vue": "^6.2.2",
     "vue-cli-plugin-electron-builder": "~2.0.0-rc.4",
     "vue-cli-plugin-yaml": "^1.0.2",
-    "vue-json-component": "^0.4.1",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {
diff --git a/GUI/src/App.vue b/GUI/src/App.vue
index 2cf3ea020..1867e71f4 100644
--- a/GUI/src/App.vue
+++ b/GUI/src/App.vue
@@ -19,8 +19,8 @@
             style="display: none"
           />
         </button>
-        <button class="dash-button menu-item" id="importButton" @click="calcImportLeft();calcImportTop();showImport = !showImport">Import ODrive config</button>
-        <button class="dash-button menu-item" id="exportButton" @click="calcExportLeft();calcExportTop();showExport = !showExport">Export ODrive config</button>
+        <button class="dash-button menu-item" id="importButton" @click="calcImportLeft();calcImportTop();toggleImport()">Import ODrive config</button>
+        <button class="dash-button menu-item" id="exportButton" @click="calcExportLeft();calcExportTop();toggleExport()">Export ODrive config</button>
       </div>
       <div class="card import-menu" :style="{top: importTop, left: importLeft}" v-show="showImport">
         <button v-for="odrive in Object.keys(odrives)" :key="odrive" class="dash-button" @click="importConfigWrapper">
@@ -189,6 +189,14 @@ export default {
         this.showExport = false;
       }
     },
+    toggleImport() {
+      this.showImport = !this.showImport;
+      this.showExport = false;
+    },
+    toggleExport() {
+      this.showExport = !this.showExport;
+      this.showImport=  false;
+    },
     importConfigWrapper() {
       const inputElem = document.getElementById("inputConfig");
       if (inputElem) {
diff --git a/GUI/src/assets/wizard/configTemplate.json b/GUI/src/assets/wizard/configTemplate.json
index 6fbae6a03..6bfab803f 100644
--- a/GUI/src/assets/wizard/configTemplate.json
+++ b/GUI/src/assets/wizard/configTemplate.json
@@ -18,7 +18,8 @@
         "mode": null,
         "use_index": null,
         "cpr": null,
-        "calib_scan_distance": null
+        "calib_scan_distance": null,
+        "abs_spi_cs_gpio_pin": null
       }
     },
     "controller": {
@@ -53,7 +54,8 @@
         "mode": null,
         "use_index": null,
         "cpr": null,
-        "calib_scan_distance": null
+        "calib_scan_distance": null,
+        "abs_spi_cs_gpio_pin": null
       }
     },
     "controller": {
diff --git a/GUI/src/components/actions/Action.vue b/GUI/src/components/actions/Action.vue
index d78948b6c..ebc224297 100644
--- a/GUI/src/components/actions/Action.vue
+++ b/GUI/src/components/actions/Action.vue
@@ -3,7 +3,7 @@
     <button class="close-button" @click=deleteAction>X</button>
     <span class="ctrlName">{{shortPath}}:</span>
     <div class="right">
-      <input v-on:change="newVal" :placeholder="initVal" :value="this.value"/>
+      <input v-on:change="newVal" :placeholder="initVal" :value="valueDisplay" spellcheck="false"/>
       <button class="action-button close-button" @click="putVal">Send</button>
     </div>
   </div>
@@ -11,6 +11,7 @@
 
 <script>
 import { putVal, parseMath } from "../../lib/odrive_utils.js";
+import { numberDisplay } from "../../lib/utils.js"
 
 export default {
   name: "Action",
@@ -35,6 +36,9 @@ export default {
       let keys = this.path.split('.');
       keys.shift();
       return keys.join('.');
+    },
+    valueDisplay() {
+      return numberDisplay(this.value);
     }
   },
   methods: {
diff --git a/GUI/src/components/controls/CtrlNumeric.vue b/GUI/src/components/controls/CtrlNumeric.vue
index 814172062..ee2fa7be0 100644
--- a/GUI/src/components/controls/CtrlNumeric.vue
+++ b/GUI/src/components/controls/CtrlNumeric.vue
@@ -4,7 +4,7 @@
     <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" :value="value"/>
+      <input v-if="writeAccess" :placeholder="value" v-on:change="putVal" :value="value" spellcheck="false"/>
       <!-- <span class="unit">[{{unit}}]</span> -->
     </div>
   </div>
@@ -12,6 +12,7 @@
 
 <script>
 import { getVal, getReadonly, putVal, fetchParam, getUnit, parseMath } from "../../lib/odrive_utils.js";
+import { numberDisplay } from "../../lib/utils.js";
 
 export default {
   name: "CtrlNumeric",
@@ -27,7 +28,7 @@ export default {
       keys.shift();
       let val = getVal(keys.join('.'));
       console.log(val + ' ' + typeof val);
-      return parseFloat(val).toFixed(3);
+      return numberDisplay(val);
     },
     name: function () {
       let keys = this.path.split(".");
diff --git a/GUI/src/components/controls/CtrlSlider.vue b/GUI/src/components/controls/CtrlSlider.vue
index 5d9e85206..e23a2a9df 100644
--- a/GUI/src/components/controls/CtrlSlider.vue
+++ b/GUI/src/components/controls/CtrlSlider.vue
@@ -5,10 +5,10 @@
       <span class="ctrlName">{{name}}</span>
     </div>
     <div class="slider-container">
-      <input type="number" :value="min" v-on:change="setMin"/>
+      <input type="number" :value="displayMin" v-on:change="setMin"/>
       <!-- <vue-slider v-model="value" :min="min" :max="max" :interval="interval" /> -->
-      <vue-slider v-model="value" :data="data" @change="putVal"/>
-      <input type="number" :value="max" v-on:change="setMax" />
+      <vue-slider v-model="value" :data="data" :adsorb="true" @change="putVal"/>
+      <input type="number" :value="displayMax" v-on:change="setMax" />
     </div>
   </div>
 </template>
@@ -16,7 +16,8 @@
 <script>
 import VueSlider from "vue-slider-component";
 import "vue-slider-component/theme/default.css";
-import { getVal, putVal } from "../../lib/odrive_utils.js";
+import { getVal, putVal, parseMath } from "../../lib/odrive_utils.js";
+import { numberDisplay } from "../../lib/utils.js";
 
 export default {
   name: "CtrlSlider",
@@ -49,6 +50,12 @@ export default {
     sliderData: function () {
       let interval = (this.max - this.min) / 100;
       return Array.from(Array(101), (_, i) => this.min + interval * i);
+    },
+    displayMin() {
+      return numberDisplay(this.min);
+    },
+    displayMax() {
+      return numberDisplay(this.max);
     }
   },
   methods: {
@@ -59,27 +66,41 @@ export default {
       putVal(keys.join('.'), value);
     },
     setMin: function (e) {
-      this.min = parseFloat(e.target.value);
+      this.min = parseMath(e.target.value);
       this.data = Array.from(Array(101), (_, i) => this.min + (this.max-this.min) / 100 * i);
+      this.value = this.findNearest(this.data, this.value);
     },
     setMax: function (e) {
-      this.max = parseFloat(e.target.value);
+      this.max = parseMath(e.target.value);
       this.data = Array.from(Array(101), (_, i) => this.min + (this.max-this.min) / 100 * i);
+      this.value = this.findNearest(this.data, this.value);
     },
     deleteCtrl: function() {
       // commit a mutation in the store with the relevant information
       this.$store.commit("removeCtrlFromDash", {dashID: this.dashID, path: this.path});
+    },
+    findNearest(data, value) {
+      // find item in data closest to value
+      let diff = Number.POSITIVE_INFINITY;
+      let retVal = value;
+      for (const val of data) {
+        if (Math.abs(val - value) < diff) {
+          diff = Math.abs(val - value);
+          retVal = val;
+        }
+      }
+      return retVal;
     }
   },
   mounted() {
     let initVal = () => {
       let keys = this.path.split(".");
       keys.shift(); // don't need first key here
-      return getVal(keys.join('.'));
+      return parseFloat(getVal(keys.join('.')));
     };
     this.value = initVal();
-    this.max = parseFloat((this.value * 4).toFixed(3));
-    this.min = parseFloat((this.value / 4).toFixed(3));
+    this.max = this.value * 4;
+    this.min = this.value / 4;
     this.data = Array.from(Array(101), (_, i) => this.min + (this.max-this.min) / 100 * i);
   },
 };
diff --git a/GUI/src/lib/utils.js b/GUI/src/lib/utils.js
index 426a203c9..0148d3691 100644
--- a/GUI/src/lib/utils.js
+++ b/GUI/src/lib/utils.js
@@ -75,4 +75,19 @@ export let pathsFromTree = (tree) => {
     // array path
     pathFromTree(tree);
     return flatpaths;
+}
+
+export let numberDisplay = (val) => {
+    // if a number can be represented with 3 decimals, return it in that form
+    // otherwise, return scientific notation
+    let retVal = '';
+    try {
+        retVal = parseFloat(val).toFixed(3);
+        if (retVal == '0.000' && val != 0 || retVal.length > 7) {
+            retVal = parseFloat(val).toExponential(3);
+        }
+    } catch (error) {
+        console.log(error);
+    }
+    return retVal;
 }
\ No newline at end of file