[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

Author: PAJohnson

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/).

GUI/package-lock.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": {

GUI/package.json

@@ -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) {

GUI/src/App.vue

@@ -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": {

GUI/src/assets/wizard/configTemplate.json

@@ -3,14 +3,15 @@
     <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>
 </template>
 
 <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: {

GUI/src/components/actions/Action.vue

@@ -4,14 +4,15 @@
     <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>
 </template>
 
 <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(".");

GUI/src/components/controls/CtrlNumeric.vue

@@ -5,18 +5,19 @@
       <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>
 
 <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);
   },
 };

GUI/src/components/controls/CtrlSlider.vue

@@ -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;
 }