Add support for imperial units (#35)

* Add imperial unit support in Config view

* Improve imperial chart loading speed

* Redraw plots when unit changed, add units info tooltip

* Bump version

* Fix config input fields not showing on first render when using imperial units

* Convert non-saved imperial values

* Detect changes to fields in case imperial units are used

* Maintain scroll position when unit system is changed on Home view

* Fix charts scroll bug

* Change units switch info hover text

Author: nur557

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cats-configurator",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "private": true,
   "scripts": {
     "start": "vue-cli-service electron:serve",

src/components/NavigationPanel.vue

@@ -1,15 +1,9 @@
 <template>
-  <v-navigation-drawer app dark clipped permanent width="300">
+  <v-navigation-drawer app dark clipped permanent width="300" class="navigation-panel pb-4">
     <v-alert v-if="!active" dense text type="info" class="mx-2 mt-2 caption">
-      Plug in CATS board and connect to activate this panel.
+      Plug in CATS board and connect to activate this area.
     </v-alert>
-    <v-alert
-      v-if="changedTab"
-      dense
-      text
-      type="warning"
-      class="mx-2 mt-2 caption"
-    >
+    <v-alert v-if="changedTab" dense text type="warning" class="mx-2 mt-2 caption">
       <div class="d-flex justify-space-between align-center">
         <div>Unsaved changes.</div>
         <v-btn small text @click="discard">discard</v-btn>
@@ -26,6 +20,7 @@
         </v-list-item-group>
       </v-list>
     </v-card>
+    <UnitSwitch class="unit-switch mb-2" />
   </v-navigation-drawer>
 </template>
 
@@ -35,9 +30,13 @@ import { getConfigs } from "@/services/configService";
 import { getEvents } from "@/services/eventService";
 import { getTimers } from "@/services/timerService";
 import { getLogData } from "@/services/logService";
+import UnitSwitch from "./UnitSwitch.vue";
 
 export default {
   name: "NavigationPanel",
+  components: {
+    UnitSwitch,
+  },
   props: {
     items: {
       type: Array,
@@ -71,4 +70,13 @@ export default {
 };
 </script>
 
-<style></style>
+<style scoped>
+.navigation-panel ::v-deep .v-navigation-drawer__content {
+  display: flex;
+  flex-direction: column;
+}
+
+.unit-switch {
+  margin-top: auto;
+}
+</style>

src/components/UnitSwitch.vue

@@ -0,0 +1,60 @@
+<template>
+  <v-container class="py-0">
+    <v-row align="center" justify="start">
+      <v-col cols="auto">
+        <v-switch v-model="useImperialUnitsState" label="Use imperial units" hide-details inset class="mt-0 pt-0"
+          color="primary"></v-switch>
+      </v-col>
+      <v-tooltip top>
+        <template v-slot:activator="{ on, attrs }">
+        <v-icon
+              color="primary"
+              v-on="on"
+              v-bind="attrs"
+            >
+              mdi-information-variant-box-outline
+            </v-icon>
+            </template>
+        <span>Flight Computer natively uses metric units; Imperial values will be converted to the nearest metric integer.</span>
+      </v-tooltip>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+
+export default {
+  name: 'UnitSwitch',
+  computed: {
+    ...mapGetters(['useImperialUnits']),
+    useImperialUnitsState: {
+      get() {
+        return this.useImperialUnits;
+      },
+      set(newValue) {
+        this.toggleUnitSystem();
+      }
+    }
+  },
+  methods: {
+    ...mapActions(['toggleUnitSystem']),
+  }
+};
+</script>
+
+<style scoped>
+/* These styles help align the switch better within its container */
+.v-input--switch.mt-0 {
+  margin-top: 0 !important;
+}
+
+.v-input--switch.pt-0 {
+  padding-top: 0 !important;
+}
+
+/* You can adjust margin-right if the label is too close to the switch thumb */
+.v-input--switch .v-label {
+  margin-right: 8px;
+}
+</style>

src/modules/plots.js

@@ -1,20 +1,33 @@
 import Plotly from 'plotly.js-dist';
+import { getDisplayValue } from "@/utils/unitConversions.js";
 
 const COLOR = "rgb(100, 100, 100)"
 const EVENT_MAP = {
-  0: { name: "ev_moving", color: COLOR },
-  1: { name: "ev_ready", color: COLOR },
-  2: { name: "ev_liftoff", color: COLOR },
-  3: { name: "ev_burnout", color: COLOR },
-  4: { name: "ev_apogee", color: COLOR },
-  5: { name: "ev_main_deployment", color: COLOR },
-  6: { name: "ev_touchdown", color: COLOR },
-  7: { name: "ev_custom1", color: COLOR },
-  8: { name: "ev_custom2", color: COLOR },
+    0: { name: "ev_moving", color: COLOR },
+    1: { name: "ev_ready", color: COLOR },
+    2: { name: "ev_liftoff", color: COLOR },
+    3: { name: "ev_burnout", color: COLOR },
+    4: { name: "ev_apogee", color: COLOR },
+    5: { name: "ev_main_deployment", color: COLOR },
+    6: { name: "ev_touchdown", color: COLOR },
+    7: { name: "ev_custom1", color: COLOR },
+    8: { name: "ev_custom2", color: COLOR },
 }
 
+function adaptTraceNameForConverterFunction(name) {
+    if (name === 'height') return 'altitude';
+    if (name === 'Ax') return 'acceleration';
+    if (name === 'Ay') return 'acceleration';
+    if (name === 'Az') return 'acceleration';
+    if (name === 'T') return 'temperature';
+    if (name === 'P') return 'pressure';
+    if (name === 'filteredAltitudeAGL') return 'altitude';
+    return name;
+}
+
+const TRACES_TO_CONVERT = ['height', 'acceleration', 'velocity', 'Ax', 'Ay', 'Az', 'T', 'P', 'filteredAltitudeAGL'];
 
-function makePlot(data, elementId, title, ylabel, traceNames, eventInfo) {
+function makePlot(data, elementId, title, ylabel, traceNames, eventInfo, useImperialUnits) {
 
     let lines = []
     let x = []
@@ -27,6 +40,16 @@ function makePlot(data, elementId, title, ylabel, traceNames, eventInfo) {
             })
         }
     }
+
+    if (useImperialUnits) {
+        data = structuredClone(data)
+        for (const o of data) {
+            for (let key of traceNames.filter(value => TRACES_TO_CONVERT.includes(value))) {
+                o[key] = getDisplayValue(o[key], adaptTraceNameForConverterFunction(key));
+            }
+        }
+    }
+
     for (const o of data) {
         let i = 0;
         for (let key of traceNames) {
@@ -43,10 +66,10 @@ function makePlot(data, elementId, title, ylabel, traceNames, eventInfo) {
         elementId,
         lines,
         {
-            title: { text: title},
+            title: { text: title },
             margin: { t: 50 },
             xaxis: { title: "Timestamp [s]" },
-            yaxis: { title: ylabel },
+            yaxis: { title: ylabel, tickFormat: ',.0f' },
             shapes: eventInfo.shapes,
             annotations: eventInfo.annotations,
             template: 'plotly_dark',
@@ -199,43 +222,44 @@ function makeEventInfoTraces(flightlog) {
     return { shapes: shapes, annotations: annotations }
 }
 
-export function makePlots(flightlog, element) {
+export function makePlots(flightlog, element, useImperialUnits) {
     let eventInfo = makeEventInfoTraces(flightlog)
 
     element.replaceChildren([])
 
     let el = document.createElement("div")
-    document.create
     element.append(el)
-    makePlot(flightlog.flightInfo, el, "State Estimation - Altitude", "Altitude [m]", ["height"], eventInfo)
+    const altitudeYLabel = useImperialUnits ? "Altitude [ft]" : "Altitude [m]"
+    makePlot(flightlog.flightInfo, el, "State Estimation - Altitude", altitudeYLabel, ["height"], eventInfo, useImperialUnits)
 
     el = document.createElement("div")
     element.append(el)
-    makePlot(flightlog.flightInfo, el, "State Estimation - Velocity", "Velocity [m/s]", ["velocity"], eventInfo)
-
-    // el = document.createElement("div")
-    // element.append(el)
-    // makePlot(flightlog.flightInfo, el, "Acceleration [m/s^2]", ["acceleration"], eventInfo)
+    const velocityYLabel = useImperialUnits ? "Velocity [ft/s]" : "Velocity [m/s]"
+    makePlot(flightlog.flightInfo, el, "State Estimation - Velocity", velocityYLabel, ["velocity"], eventInfo, useImperialUnits)
 
     el = document.createElement("div")
     element.append(el)
-    makePlot(flightlog.imu, el,  "IMU - Acceleration", "Acceleration [m/s^2]", ["Ax", "Ay", "Az"], eventInfo)
+    const accelerationYLabel = useImperialUnits ? "Acceleration [ft/s²]" : "Acceleration [m/s²]"
+    makePlot(flightlog.imu, el, "IMU - Acceleration", accelerationYLabel, ["Ax", "Ay", "Az"], eventInfo, useImperialUnits)
 
     el = document.createElement("div")
     element.append(el)
     makePlot(flightlog.imu, el, "IMU - Gyroscope", "Angular Movement [deg/s]", ["Gx", "Gy", "Gz"], eventInfo)
 
     el = document.createElement("div")
     element.append(el)
-    makePlot(flightlog.baro, el, "Temperature", "Temperature [°C]", ["T"], eventInfo)
+    const temperatureYLabel = useImperialUnits ? "Temperature [°F]" : "Temperature [°C]"
+    makePlot(flightlog.baro, el, "Temperature", temperatureYLabel, ["T"], eventInfo, useImperialUnits)
 
     el = document.createElement("div")
     element.append(el)
-    makePlot(flightlog.baro, el, "Pressure", "Pressure [hPa]", ["P"], eventInfo)
+    const pressureYLabel = useImperialUnits ? "Pressure [psi]" : "Pressure [hPa]"
+    makePlot(flightlog.baro, el, "Pressure", pressureYLabel, ["P"], eventInfo, useImperialUnits)
 
     el = document.createElement("div")
     element.append(el)
-    makePlot(flightlog.filteredDataInfo, el, "Filtered Barometer Altitude", "Altitude [m]", ["filteredAltitudeAGL"], eventInfo)
+    const filteredAltitudeYLabel = useImperialUnits ? "Altitude [ft]" : "Altitude [m]"
+    makePlot(flightlog.filteredDataInfo, el, "Filtered Barometer Altitude", filteredAltitudeYLabel, ["filteredAltitudeAGL"], eventInfo, useImperialUnits)
 
     el = document.createElement("div")
     element.append(el)

src/modules/settings.js

@@ -43,16 +43,16 @@ export const EVENT_SETTINGS = [
 ];
 
 export const CONFIG_SETTINGS = {
-  main_altitude: {section: "general", name: "Main Altitude", unit: "m" },
-  acc_threshold: {section: "general", name: "Liftoff Detection Acceleration", unit: "m/s^2" },
-  servo1_init_pos: {section: "general", name: "Initial Position Servo 1", unit: "‰" },
-  servo2_init_pos: {section: "general", name: "Initial Position Servo 2", unit: "‰" },
-  tele_enable: {section: "telemetry", name: "Enable Telemetry", unit: null},
-  tele_link_phrase: {section: "telemetry", name: "Link Phrase", unit: null},
-  tele_power_level: {section: "telemetry", name: "Telemetry Power Level", unit: "dBm" },
-  tele_adaptive_power: {section: "telemetry", name: "Adaptive Power Level", unit: null},
-  test_mode: {section: "testing", name: "Enable Testing Mode", unit: null},
-  tele_test_phrase: {section: "testing", name: "Testing Phrase", unit: null},
+  main_altitude: { section: "general", name: "Main Altitude", unit: "m" },
+  acc_threshold: { section: "general", name: "Liftoff Detection Acceleration", unit: "m/s²" },
+  servo1_init_pos: { section: "general", name: "Initial Position Servo 1", unit: "‰" },
+  servo2_init_pos: { section: "general", name: "Initial Position Servo 2", unit: "‰" },
+  tele_enable: { section: "telemetry", name: "Enable Telemetry", unit: null },
+  tele_link_phrase: { section: "telemetry", name: "Link Phrase", unit: null },
+  tele_power_level: { section: "telemetry", name: "Telemetry Power Level", unit: "dBm" },
+  tele_adaptive_power: { section: "telemetry", name: "Adaptive Power Level", unit: null },
+  test_mode: { section: "testing", name: "Enable Testing Mode", unit: null },
+  tele_test_phrase: { section: "testing", name: "Testing Phrase", unit: null },
 };
 
 export const LOG_ELEMENTS = [

src/store/index.js

@@ -18,6 +18,7 @@ export default new Vuex.Store({
       rec_speed: {},
       rec_elements: {},
     },
+    useImperialUnits: false,
   },
   mutations: {
     SET_SERIAL_PORTS(state, ports) {
@@ -59,6 +60,9 @@ export default new Vuex.Store({
     SET_SUCCESS_MESSAGE(state, value) {
       state.successSetMessage = value;
     },
+    SET_USE_IMPERIAL_UNITS(state, value) {
+      state.useImperialUnits = value;
+    }
   },
   actions: {
     setSerialPorts({ commit }, ports) {
@@ -74,8 +78,8 @@ export default new Vuex.Store({
       if (!payload.key) return;
 
       payload.name = CONFIG_SETTINGS[payload.key]
-      ? CONFIG_SETTINGS[payload.key].name
-      : null;
+        ? CONFIG_SETTINGS[payload.key].name
+        : null;
 
       payload.unit = CONFIG_SETTINGS[payload.key]
         ? CONFIG_SETTINGS[payload.key].unit
@@ -124,6 +128,10 @@ export default new Vuex.Store({
       commit("SET_SUCCESS_MESSAGE", value);
       setTimeout(() => commit("SET_SUCCESS_MESSAGE", null), 5000);
     },
+    toggleUnitSystem({ commit, state }) {
+      const newValue = !state.useImperialUnits;
+      commit("SET_USE_IMPERIAL_UNITS", newValue);
+    },
   },
   getters: {
     isEventsChanged(state) {
@@ -144,5 +152,8 @@ export default new Vuex.Store({
 
       return changed;
     },
+    useImperialUnits(state) {
+      return state.useImperialUnits;
+    }
   },
 });