Merge pull request #2182 from chmelevskij/chore/add-vue

gulpfile.js

@@ -20,6 +20,7 @@ const commandExistsSync = require('command-exists').sync;
 const targz = require('targz');
 
 const gulp = require('gulp');
+const rollup = require('rollup');
 const concat = require('gulp-concat');
 const yarn = require("gulp-yarn");
 const rename = require('gulp-rename');
@@ -42,6 +43,8 @@ const CORDOVA_DIST_DIR = './dist_cordova/';
 
 const LINUX_INSTALL_DIR = '/opt/betaflight';
 
+const NODE_ENV = process.env.NODE_ENV || 'production';
+
 // Global variable to hold the change hash from when we get it, to when we use it.
 var gitChangeSetId;
 
@@ -86,7 +89,7 @@ const getChangesetId = gulp.series(getHash, writeChangesetId);
 gulp.task('get-changeset-id', getChangesetId);
 
 // dist_yarn MUST be done after dist_src
-const distBuild = gulp.series(dist_src, dist_changelog, dist_yarn, dist_locale, dist_libraries, dist_resources, getChangesetId, gulp.series(cordova_dist()));
+const distBuild = gulp.series(dist_src, dist_changelog, dist_yarn, dist_locale, dist_libraries, dist_resources, dist_rollup, getChangesetId, gulp.series(cordova_dist()));
 const distRebuild = gulp.series(clean_dist, distBuild);
 gulp.task('dist', distRebuild);
 
@@ -297,6 +300,38 @@ function dist_resources() {
         .pipe(gulp.dest(DIST_DIR));
 }
 
+function dist_rollup() {
+    const commonjs = require('@rollup/plugin-commonjs');
+    const resolve = require('@rollup/plugin-node-resolve').default;
+    const alias = require('@rollup/plugin-alias');
+    const vue = require('rollup-plugin-vue');
+    const rollupReplace = require('@rollup/plugin-replace');
+
+    return rollup
+        .rollup({
+            input: 'src/components/init.js',
+            plugins: [
+                alias({
+                    entries: {
+                        vue: require.resolve('vue/dist/vue.esm.js'),
+                    },
+                }),
+                rollupReplace({
+                    'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
+                }),
+                resolve(),
+                commonjs(),
+                vue(),
+            ],
+        })
+        .then(bundle =>
+            bundle.write({
+                format: 'esm',
+                file: 'dist/components/init.js',
+            }),
+        );
+}
+
 // Create runable app directories in ./apps
 function apps(done) {
     var platforms = getPlatforms();

locales/en/messages.json

@@ -68,9 +68,6 @@
     "cancel": {
         "message": "Cancel"
     },
-    "cancel": {
-        "message": "Cancel"
-    },
     "autoConnectEnabled": {
         "message": "Auto-Connect: Enabled - Configurator automatically tries to connect when new port is detected"
     },

package.json

@@ -7,9 +7,9 @@
   "chromium-args": "--disable-features=nw2",
   "default_locale": "en",
   "scripts": {
-    "start": "gulp debug",
+    "start": "NODE_ENV=development gulp debug",
     "gulp": "gulp",
-    "release": "gulp release",
+    "release": "NODE_ENV=production gulp release",
     "test": "karma start test/karma.conf.js"
   },
   "window": {
@@ -61,16 +61,23 @@
     "semver-min": "^0.6.5",
     "short-unique-id": "^1.1.1",
     "three": "~0.97.0",
-    "universal-ga": "^1.2.0"
+    "universal-ga": "^1.2.0",
+    "vue": "2.6.12",
+    "vue-i18n": "8.21.1"
   },
   "devDependencies": {
     "@quanle94/innosetup": "^6.0.2",
+    "@rollup/plugin-alias": "^3.1.1",
+    "@rollup/plugin-commonjs": "^15.1.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-replace": "^2.3.3",
     "chai": "^4.2.0",
     "command-exists": "^1.2.8",
     "cordova-lib": "^9.0.1",
     "del": "^5.0.0",
     "follow-redirects": "^1.10.0",
     "fs-extra": "^8.1.0",
+    "postcss": "^8.1.1",
     "gulp": "^4.0.2",
     "gulp-concat": "~2.6.1",
     "gulp-debian": "~0.1.8",
@@ -91,12 +98,15 @@
     "mocha": "^7.0.1",
     "nw-builder": "^3.5.7",
     "os": "^0.1.1",
+    "rollup": "^2.28.2",
+    "rollup-plugin-vue": "^5.*.*",
     "rpm-builder": "^1.2.1",
     "sinon": "^9.0.0",
     "sinon-chai": "^3.5.0",
     "targz": "^1.0.1",
     "temp": "^0.9.1",
     "vinyl-source-stream": "^2.0.0",
+    "vue-template-compiler": "^2.6.12",
     "yarn": "^1.22.0"
   },
   "optionalDependencies": {

src/components/MotorOutputReordering/MotorOutputReorderingComponent.js

@@ -16,7 +16,7 @@ class MotorOutputReorderComponent
 
         this._currentSpinningMotor = -1;
 
-        this._contentDiv.load("./Components/MotorOutputReordering/Body.html", () =>
+        this._contentDiv.load("./components/MotorOutputReordering/Body.html", () =>
         {
             this._setupdialog();
         });

src/components/betaflight-logo/BetaflightLogo.vue

@@ -0,0 +1,108 @@
+<style>
+.logo {
+  height: 70px;
+  width: 240px;
+  background-image: url(./images/light-wide-2.svg);
+  background-repeat: no-repeat;
+  background-position: left center;
+  background-size: contain;
+  position: relative;
+  margin-top: -25px;
+}
+
+.logo_text {
+  position: absolute;
+  left: 80px;
+  top: 49px;
+  color: #949494;
+  opacity: 0.5;
+  font-size: 10px;
+  min-width: 210px;
+}
+
+.tab_container .logo {
+  display: none;
+}
+
+@media all and (max-width: 575px) {
+  .logo {
+    height: 24px;
+    width: 150px;
+    background-image: url(./images/light-wide-2-compact.svg);
+    background-position: left center;
+    order: 2;
+    margin-top: 0;
+  }
+  .logo_text {
+    display: none !important;
+  }
+  .tab_container .logo {
+    display: block;
+    background-image: url(./images/light-wide-2.svg);
+    background-repeat: no-repeat;
+    background-position: center 20px;
+    background-position-x: 12px;
+    background-size: 80%;
+    height: 120px;
+    width: auto;
+    margin-top: unset;
+    position: relative;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+  }
+  .tab_container .logo .logo_text {
+    display: block !important;
+    left: 82px;
+    top: 62px;
+  }
+}
+
+@media all and (min-width: 1125px) {
+  .logo {
+    width: 340px;
+  }
+
+  .logo_text {
+    font-size: inherit;
+    position: relative;
+  }
+}
+</style>
+
+<template>
+  <div class="logo">
+    <div class="logo_text">
+      <span>
+        {{ $t("versionLabelConfigurator.message") }}: {{ configuratorVersion }}
+        <br />
+        <span v-if="firmwareVersion && firmwareId">
+          {{ $t("versionLabelFirmware.message") }}: {{ firmwareVersion }}
+          {{ firmwareId }}
+        </span>
+        <br />
+        <span v-if="hardwareId">
+          {{ $t("versionLabelTarget.message") }}: {{ hardwareId }}
+        </span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    configuratorVersion: {
+      type: String,
+      required: true,
+    },
+    firmwareVersion: {
+      type: String,
+    },
+    firmwareId: {
+      type: String,
+    },
+    hardwareId: {
+      type: String,
+    },
+  },
+};
+</script>

src/components/init.js

@@ -0,0 +1,40 @@
+import Vue from "vue";
+import vueI18n from "./vueI18n.js";
+import BatteryLegend from "./quad-status/BatteryLegend.vue";
+import BetaflightLogo from "./betaflight-logo/BetaflightLogo.vue";
+import StatusBar from "./status-bar/StatusBar.vue";
+
+// a bit of a hack here to get around the current translations.
+// vue i18n provides slightly different api for this. But
+// it's also possible to provide custom formatter
+Vue.filter(
+    "stripEnd",
+    (value) => value.replace(/\$1%/, "")
+);
+
+// Most of the global objects can go here at first.
+// It's a bit of overkill for simple components,
+// but these instance would eventually have more children
+// which would find the use for those extra properties.
+const betaflightModel = {
+    CONFIGURATOR,
+    FC,
+    MSP,
+    PortUsage,
+};
+
+const app = new Vue({
+    i18n: vueI18n,
+    data: betaflightModel,
+    components: {
+        BatteryLegend,
+        BetaflightLogo,
+        StatusBar,
+    },
+    el: '#main-wrapper',
+});
+
+// Not strictly necessary here, but if needed
+// it's always possible to modify this model in
+// jquery land to trigger updates in vue
+window.vm = betaflightModel;

src/components/quad-status/BatteryLegend.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="battery-legend">{{ reading }}</div>
+</template>
+<script>
+const NO_BATTERY_VOLTAGE_MAXIMUM = 1.8; // Maybe is better to add a call to MSP_BATTERY_STATE but is not available for all versions
+
+export default {
+  props: {
+    voltage: {
+      type: Number,
+      default: 0,
+    },
+    vbatmaxcellvoltage: {
+      type: Number,
+      default: 1,
+    },
+  },
+  computed: {
+    reading() {
+      let nbCells = Math.floor(this.voltage / this.vbatmaxcellvoltage) + 1;
+
+      if (this.voltage === 0) {
+        nbCells = 1;
+      }
+
+      const cellsText =
+        this.voltage > NO_BATTERY_VOLTAGE_MAXIMUM ? `${nbCells}S` : "USB";
+      return `${this.voltage.toFixed(2)}V (${cellsText})`;
+    },
+  },
+};
+</script>

src/components/status-bar/PortUtilization.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <span>{{ $t("statusbar_port_utilization.message") }}</span>
+    <ReadingStat
+      message="statusbar_usage_download"
+      :value="usageDown"
+      unit="%"
+    />
+    <ReadingStat message="statusbar_usage_upload" :value="usageUp" unit="%" />
+  </div>
+</template>
+
+<script>
+import ReadingStat from "./ReadingStat.vue";
+
+export default {
+  props: {
+    usageDown: {
+      type: Number,
+    },
+    usageUp: {
+      type: Number,
+    },
+  },
+  components: {
+    ReadingStat,
+  },
+};
+</script>

src/components/status-bar/ReadingStat.vue

@@ -0,0 +1,22 @@
+<template>
+  <span>
+    <span>{{ $t(message + ".message") | stripEnd }}</span>
+    <span>{{ value }}</span>
+    <span v-if="unit">{{ unit }}</span>
+  </span>
+</template>
+<script>
+export default {
+  props: {
+    message: {
+      type: String,
+    },
+    value: {
+      type: Number,
+    },
+    unit: {
+      type: String,
+    },
+  },
+};
+</script>

src/components/status-bar/StatusBar.vue

@@ -0,0 +1,65 @@
+<template>
+  <div id="status-bar">
+    <PortUtilization :usage-down="portUsageDown" :usage-up="portUsageUp" />
+    <ReadingStat message="statusbar_packet_error" :value="packetError" />
+    <ReadingStat message="statusbar_i2c_error" :value="i2cError" />
+    <ReadingStat message="statusbar_cycle_time" :value="cycleTime" />
+    <ReadingStat message="statusbar_cpu_load" :value="cpuLoad" unit="%" />
+    <StatusBarVersion
+      :configurator-version="configuratorVersion"
+      :firmware-version="firmwareVersion"
+      :firmware-id="firmwareId"
+      :hardware-id="hardwareId"
+      :git-changeset-id="gitChangesetId"
+    />
+  </div>
+</template>
+<script>
+import StatusBarVersion from "./StatusBarVersion.vue";
+import ReadingStat from "./ReadingStat.vue";
+import PortUtilization from "./PortUtilization.vue";
+
+export default {
+  props: {
+    portUsageDown: {
+      type: Number,
+    },
+    portUsageUp: {
+      type: Number,
+    },
+    packetError: {
+      type: Number,
+    },
+    i2cError: {
+      type: Number,
+    },
+    cycleTime: {
+      type: Number,
+    },
+    cpuLoad: {
+      type: Number,
+    },
+
+    configuratorVersion: {
+      type: String,
+    },
+    firmwareVersion: {
+      type: String,
+    },
+    firmwareId: {
+      type: String,
+    },
+    hardwareId: {
+      type: String,
+    },
+    gitChangesetId: {
+      type: String,
+    },
+  },
+  components: {
+    PortUtilization,
+    ReadingStat,
+    StatusBarVersion,
+  },
+};
+</script>

src/components/status-bar/StatusBarVersion.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="version">
+    {{ $t("versionLabelConfigurator.message") }}: {{ configuratorVersion }}
+    <span v-if="firmwareVersion && firmwareId">
+      , {{ $t("versionLabelFirmware.message") }}: {{ firmwareVersion }}
+      {{ firmwareId }}
+    </span>
+    <span v-if="hardwareId">
+      , {{ $t("versionLabelTarget.message") }}: {{ hardwareId }}
+    </span>
+    ({{ gitChangesetId }})
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    configuratorVersion: {
+      type: String,
+    },
+    firmwareVersion: {
+      type: String,
+    },
+    firmwareId: {
+      type: String,
+    },
+    hardwareId: {
+      type: String,
+    },
+    gitChangesetId: {
+      type: String,
+    },
+  },
+};
+</script>

src/components/vueI18n.js

@@ -0,0 +1,18 @@
+import Vue from "vue";
+import VueI18n from "vue-i18n";
+
+Vue.use(VueI18n);
+
+const vueI18n = new VueI18n(i18next);
+
+i18next.on("initialized", () => {
+    vueI18n.setLocaleMessage("en", i18next.getDataByLanguage("en").messages);
+});
+
+i18next.on("languageChanged", (lang) => {
+    vueI18n.setLocaleMessage(lang, i18next.getDataByLanguage(lang).messages);
+    vueI18n.locale = lang;
+    document.querySelector("html").setAttribute("lang", lang);
+});
+
+export default vueI18n;

src/css/dark-theme.css

@@ -40,8 +40,8 @@ body {
     background-color: #414443;
 }
 
-#status-bar div {
+#status-bar > * ~ * {
-    border-right: 1px solid #9c9c9c;
+    border-left: 1px solid #9c9c9c;
 }
 
 dialog {

src/css/main.css

@@ -205,38 +205,6 @@ input[type="number"]::-webkit-inner-spin-button {
     margin-left: 15px;
 }
 
-#logo {
-    height: 70px;
-    width: 240px;
-    background-image: url(../images/light-wide-2.svg);
-    background-repeat: no-repeat;
-    background-position: left center;
-    background-size: contain;
-    position: relative;
-    margin-top: -25px;
-}
-
-.logo_text {
-    position: absolute;
-    left: 80px;
-    top: 49px;
-    color: #949494;
-    opacity: 0.5;
-    font-size: 10px;
-    min-width: 210px;
-}
-
-@media all and (min-width: 1125px) {
-    #logo {
-        width: 340px;
-    }
-
-    .logo_text {
-        font-size: inherit;
-        position: relative;
-    }
-}
-
 #port-picker {
     display: flex;
     align-items: center;
@@ -754,15 +722,6 @@ input[type="number"]::-webkit-inner-spin-button {
         order: 1;
     }
 
-    #logo {
-        height: 24px;
-        width: 150px;
-        background-image: url(../images/light-wide-2-compact.svg);
-        background-position: left center;
-        order: 2;
-        margin-top: 0;
-    }
-
     #header_btns {
         margin-left: auto;
         order: 3;
@@ -779,7 +738,7 @@ input[type="number"]::-webkit-inner-spin-button {
         zoom: 0.6;
     }
 
-    .logo_text, #port-picker, .header-wrapper, .flash_state, .connect_state {
+    #port-picker, .header-wrapper, .flash_state, .connect_state {
         display: none !important;
     }
 
@@ -964,23 +923,6 @@ input[type="number"]::-webkit-inner-spin-button {
     background-color: #2e2e2e;
 }
 
-#tab_logoversion {
-    display: none;
-    background-image: url(../images/light-wide-2.svg);
-    background-repeat: no-repeat;
-    background-position: center 20px;
-    background-position-x: 12px;
-    background-size: 80%;
-    height: 120px;
-    position: relative;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.30);
-}
-#tab_logoversion .logo_text {
-    display: block !important;
-    left: 82px;
-    top: 62px;
-}
-
 #tabs {
     font-size: 13px;
 }
@@ -1100,9 +1042,6 @@ input[type="number"]::-webkit-inner-spin-button {
     .tab_container.reveal {
         left: 0;
     }
-    #tab_logoversion {
-        display: block;
-    }
 }
 
 /* Tab-Icons */
@@ -1448,6 +1387,7 @@ li.active .ic_mission {
 /** Status bar **/
 #status-bar {
     position: fixed;
+    display: flex;
     bottom: 0;
     width: calc(100% - 20px);
     height: 20px;
@@ -1457,18 +1397,17 @@ li.active .ic_mission {
     background-color: #bfbeb5;
 }
 
-#status-bar div {
+#status-bar > * ~ * {
-    float: left;
+    padding-left: 10px;
-    padding-right: 10px;
+    margin-left: 10px;
-    margin-right: 10px;
+    border-left: 1px solid #7d7d79;
-    border-right: 1px solid #7d7d79;
 }
 
 #status-bar .version {
-    float: right;
     margin: 0;
     padding: 0;
     border: 0;
+    margin-left: auto;
 }
 
 /** Status bar (phones) **/

src/js/fc.js

@@ -1,5 +1,61 @@
 'use strict';
 
+const INITIAL_CONFIG = {
+    apiVersion:                       "0.0.0",
+    flightControllerIdentifier:       '',
+    flightControllerVersion:          '',
+    version:                          0,
+    buildInfo:                        '',
+    multiType:                        0,
+    msp_version:                      0, // not specified using semantic versioning
+    capability:                       0,
+    cycleTime:                        0,
+    i2cError:                         0,
+    activeSensors:                    0,
+    mode:                             0,
+    profile:                          0,
+    uid:                              [0, 0, 0],
+    accelerometerTrims:               [0, 0],
+    name:                             '',
+    displayName:                      'JOE PILOT',
+    numProfiles:                      3,
+    rateProfile:                      0,
+    boardType:                        0,
+    armingDisableCount:               0,
+    armingDisableFlags:               0,
+    armingDisabled:                   false,
+    runawayTakeoffPreventionDisabled: false,
+    boardIdentifier:                  "",
+    boardVersion:                     0,
+    targetCapabilities:               0,
+    targetName:                       "",
+    boardName:                        "",
+    manufacturerId:                   "",
+    signature:                        [],
+    mcuTypeId:                        255,
+    configurationState:               0,
+    sampleRateHz:                     0,
+    configurationProblems:            0,
+    hardwareName:                     '',
+};
+
+const INITIAL_ANALOG = {
+    voltage:                    0,
+    mAhdrawn:                   0,
+    rssi:                       0,
+    amperage:                   0,
+    last_received_timestamp:    Date.now(), // FIXME this code lies, it's never been received at this point
+};
+
+const INITIAL_BATTERY_CONFIG = {
+    vbatmincellvoltage:         0,
+    vbatmaxcellvoltage:         0,
+    vbatwarningcellvoltage:     0,
+    capacity:                   0,
+    voltageMeterSource:         0,
+    currentMeterSource:         0,
+};
+
 const FC = {
 
     // define all the global variables that are uses to hold FC state
@@ -7,17 +63,43 @@ const FC = {
     ADJUSTMENT_RANGES: null,
     ADVANCED_TUNING: null,
     ADVANCED_TUNING_ACTIVE: null,
-    ANALOG: null,
+    ANALOG: {...INITIAL_CONFIG},
     ARMING_CONFIG: null,
     AUX_CONFIG: null,
     AUX_CONFIG_IDS: null,
-    BATTERY_CONFIG: null,
+    BATTERY_CONFIG: {...INITIAL_BATTERY_CONFIG},
     BATTERY_STATE: null,
     BEEPER_CONFIG: null,
     BF_CONFIG: null,          // Remove when we officialy retire BF 3.1
     BLACKBOX: null,
     BOARD_ALIGNMENT_CONFIG: null,
-    CONFIG: null,
+    // Shallow copy of original config and added getter
+    // getter allows this to be used with simple dot notation
+    // and bridges the vue and rest of the code
+    CONFIG: {
+        ...INITIAL_CONFIG,
+        get hardwareName() {
+            let name;
+            if (this.targetName) {
+                name = this.targetName;
+            } else {
+                name = this.boardIdentifier;
+            }
+
+            if (this.boardName && this.boardName !== name) {
+                name = `${this.boardName}(${name})`;
+            }
+
+            if (this.manufacturerId) {
+                name = `${this.manufacturerId}/${name}`;
+            }
+
+            return name;
+        },
+        set hardwareName(name) {
+            // NOOP, can't really be set. Maybe implement some logic?
+        },
+    },
     COPY_PROFILE: null,
     CURRENT_METERS: null,
     CURRENT_METER_CONFIGS: null,
@@ -72,43 +154,11 @@ const FC = {
     VTX_CONFIG: null,
 
     resetState () {
-        this.CONFIG = {
+        // Using `Object.assign` instead of reassigning to
-            apiVersion:                       "0.0.0",
+        // trigger the updates on the Vue side
-            flightControllerIdentifier:       '',
+        Object.assign(this.CONFIG, INITIAL_CONFIG);
-            flightControllerVersion:          '',
+        Object.assign(this.ANALOG, INITIAL_CONFIG);
-            version:                          0,
+        Object.assign(this.BATTERY_CONFIG, INITIAL_BATTERY_CONFIG);
-            buildInfo:                        '',
-            multiType:                        0,
-            msp_version:                      0, // not specified using semantic versioning
-            capability:                       0,
-            cycleTime:                        0,
-            i2cError:                         0,
-            activeSensors:                    0,
-            mode:                             0,
-            profile:                          0,
-            uid:                              [0, 0, 0],
-            accelerometerTrims:               [0, 0],
-            name:                             '',
-            displayName:                      'JOE PILOT',
-            numProfiles:                      3,
-            rateProfile:                      0,
-            boardType:                        0,
-            armingDisableCount:               0,
-            armingDisableFlags:               0,
-            armingDisabled:                   false,
-            runawayTakeoffPreventionDisabled: false,
-            boardIdentifier:                  "",
-            boardVersion:                     0,
-            targetCapabilities:               0,
-            targetName:                       "",
-            boardName:                        "",
-            manufacturerId:                   "",
-            signature:                        [],
-            mcuTypeId:                        255,
-            configurationState:               0,
-            sampleRateHz:                     0,
-            configurationProblems:            0,
-        };
 
         this.BF_CONFIG = {
             currentscale:               0,
@@ -249,13 +299,6 @@ const FC = {
             cno:                        [],
         };
 
-        this.ANALOG = {
-            voltage:                    0,
-            mAhdrawn:                   0,
-            rssi:                       0,
-            amperage:                   0,
-            last_received_timestamp:    Date.now(), // FIXME this code lies, it's never been received at this point
-        };
 
         this.VOLTAGE_METERS =           [];
         this.VOLTAGE_METER_CONFIGS =    [];
@@ -671,6 +714,7 @@ const FC = {
         return name;
     },
 
+
     MCU_TYPES: {
         0: "SIMULATOR",
         1: "F103",

src/js/localization.js

@@ -39,7 +39,6 @@ i18n.init = function(cb) {
                         i18n.addResources({"detectedLanguage": detectedLanguage });
                         i18next.on('languageChanged', function () {
                             i18n.localizePage(true);
-                            updateStatusBarVersion();
                         });
                     }
                     if (cb !== undefined) {

src/js/main.js

@@ -188,9 +188,9 @@ function startProcess() {
     }
 
     $('.connect_b a.connect').removeClass('disabled');
-    $('#logo .version, #tab_logoversion .version').text(CONFIGURATOR.version);
+    // with Vue reactive system we don't need to call these,
-    updateStatusBarVersion();
+    // our view is reactive to model changes
-    updateTopBarVersion();
+    // updateTopBarVersion();
 
     if (!GUI.isOther() && GUI.operating_system !== 'ChromeOS') {
         checkForConfiguratorUpdates();
@@ -580,10 +580,6 @@ function notifyOutdatedVersion(releaseData) {
     });
 }
 
-function update_packet_error(caller) {
-    $('span.packet-error').html(caller.packet_error);
-}
-
 function microtime() {
     return new Date().getTime() / 1000;
 }
@@ -704,62 +700,6 @@ function generateFilename(prefix, suffix) {
     return `${filename}.${suffix}`;
 }
 
-function getTargetVersion(hardwareId) {
-    let versionText = '';
-
-    if (hardwareId) {
-       versionText = `${i18n.getMessage('versionLabelTarget')}: ${hardwareId}`;
-    }
-
-    return versionText;
-}
-
-function getFirmwareVersion(firmwareVersion, firmwareId) {
-    let versionText = '';
-
-    if (firmwareVersion) {
-        versionText = `${i18n.getMessage('versionLabelFirmware')}: ${firmwareId} ${firmwareVersion}`;
-    }
-
-    return versionText;
-}
-
-function getConfiguratorVersion() {
-    return `${i18n.getMessage('versionLabelConfigurator')}: ${CONFIGURATOR.version}`;
-}
-
-function updateTopBarVersion(firmwareVersion, firmwareId, hardwareId) {
-
-    const configuratorVersion = getConfiguratorVersion();
-    const firmwareVersionAndId = getFirmwareVersion(firmwareVersion, firmwareId);
-    const targetVersion = getTargetVersion(hardwareId);
-
-    const versionText = `${configuratorVersion}<br />${firmwareVersionAndId}<br />${targetVersion}`;
-
-    $('#logo .logo_text, #tab_logoversion .version').html(versionText);
-}
-
-function updateStatusBarVersion(firmwareVersion, firmwareId, hardwareId) {
-    let versionText = '';
-
-    versionText = versionText + getFirmwareVersion(firmwareVersion, firmwareId);
-
-    if (versionText !== '') {
-        versionText = `${versionText}, `;
-    }
-
-    const targetVersion = getTargetVersion(hardwareId);
-    versionText = versionText + targetVersion;
-
-    if (targetVersion !== '') {
-        versionText = `${versionText}, `;
-    }
-
-    versionText = `${versionText}${getConfiguratorVersion()} (${CONFIGURATOR.gitChangesetId})`;
-
-    $('#status-bar .version').text(versionText);
-}
-
 function showErrorDialog(message) {
    const dialog = $('.dialogError')[0];
 

src/js/msp/MSPConnector.js

@@ -44,7 +44,6 @@ MSPConnectorImpl.prototype.connect = function (port, baud, onConnectCallback, on
 
             serial.onReceive.addListener(read_serial);
             
-            MSP.listen(update_packet_error);
             mspHelper = new MspHelper();
             MSP.listen(mspHelper.process_data.bind(mspHelper));
             

src/js/msp/MSPHelper.js

@@ -83,8 +83,6 @@ MspHelper.prototype.process_data = function(dataHandler) {
                 TABS.pid_tuning.checkUpdateProfile(false);
 
                 sensor_status(FC.CONFIG.activeSensors);
-                $('span.i2c-error').text(FC.CONFIG.i2cError);
-                $('span.cycle-time').text(FC.CONFIG.cycleTime);
                 break;
             case MSPCodes.MSP_STATUS_EX:
                 FC.CONFIG.cycleTime = data.readU16();
@@ -113,9 +111,6 @@ MspHelper.prototype.process_data = function(dataHandler) {
                 }
 
                 sensor_status(FC.CONFIG.activeSensors);
-                $('span.i2c-error').text(FC.CONFIG.i2cError);
-                $('span.cycle-time').text(FC.CONFIG.cycleTime);
-                $('span.cpu-load').text(i18n.getMessage('statusbar_cpu_load', [FC.CONFIG.cpuload]));
                 break;
 
             case MSPCodes.MSP_RAW_IMU:

src/js/port_usage.js

@@ -3,6 +3,8 @@
 var PortUsage = {
     previous_received:  0,
     previous_sent:      0,
+    port_usage_down:    0,
+    port_usage_up:      0,
 
     initialize: function() {
         var self = this;
@@ -18,17 +20,19 @@ var PortUsage = {
 
             this.previous_received = serial.bytesReceived;
             this.previous_sent = serial.bytesSent;
+            this.port_usage_down = port_usage_down;
+            this.port_usage_up = port_usage_up;
 
-            // update UI
-            $('span.port_usage_down').text(i18n.getMessage('statusbar_usage_download', [port_usage_down]));
-            $('span.port_usage_up').text(i18n.getMessage('statusbar_usage_upload', [port_usage_up]));
         } else {
-            $('span.port_usage_down').text(i18n.getMessage('statusbar_usage_download', [0]));
+            this.port_usage_down = 0;
-            $('span.port_usage_up').text(i18n.getMessage('statusbar_usage_upload', [0]));
+            this.port_usage_up = 0;
         }
     },
     reset: function() {
         this.previous_received = 0;
         this.previous_sent = 0;
+
+        this.port_usage_down = 0;
+        this.port_usage_up = 0;
     }
 };

src/js/serial_backend.js

@@ -169,18 +169,14 @@ function finishClose(finishedCallback) {
 
     MSP.disconnect_cleanup();
     PortUsage.reset();
+    // To trigger the UI updates by Vue reset the state.
+    FC.resetState();
 
     GUI.connected_to = false;
     GUI.allowedTabs = GUI.defaultAllowedTabsWhenDisconnected.slice();
     // close problems dialog
     $('#dialogReportProblems-closebtn').click();
 
-    // Reset various UI elements
-    $('span.i2c-error').text(0);
-    $('span.cycle-time').text(0);
-    if (semver.gte(FC.CONFIG.apiVersion, "1.20.0"))
-        $('span.cpu-load').text('');
-
     // unlock port select & baud
     $('div#port-picker #port').prop('disabled', false);
     if (!GUI.auto_connect) $('div#port-picker #baud').prop('disabled', false);
@@ -228,7 +224,6 @@ function onOpen(openInfo) {
         setConnectionTimeout();
 
         FC.resetState();
-        MSP.listen(update_packet_error);
         mspHelper = new MspHelper();
         MSP.listen(mspHelper.process_data.bind(mspHelper));
 
@@ -247,8 +242,6 @@ function onOpen(openInfo) {
                             analytics.setFlightControllerData(analytics.DATA.FIRMWARE_VERSION, FC.CONFIG.flightControllerVersion);
 
                             GUI.log(i18n.getMessage('fcInfoReceived', [FC.CONFIG.flightControllerIdentifier, FC.CONFIG.flightControllerVersion]));
-                            updateStatusBarVersion(FC.CONFIG.flightControllerVersion, FC.CONFIG.flightControllerIdentifier);
-                            updateTopBarVersion(FC.CONFIG.flightControllerVersion, FC.CONFIG.flightControllerIdentifier);
 
                             MSP.send_message(MSPCodes.MSP_BUILD_INFO, false, false, function () {
 
@@ -318,8 +311,6 @@ function processBoardInfo() {
     analytics.setFlightControllerData(analytics.DATA.MCU_TYPE, FC.getMcuType());
 
     GUI.log(i18n.getMessage('boardInfoReceived', [FC.getHardwareName(), FC.CONFIG.boardVersion]));
-    updateStatusBarVersion(FC.CONFIG.flightControllerVersion, FC.CONFIG.flightControllerIdentifier, FC.getHardwareName());
-    updateTopBarVersion(FC.CONFIG.flightControllerVersion, FC.CONFIG.flightControllerIdentifier, FC.getHardwareName());
 
     if (bit_check(FC.CONFIG.targetCapabilities, FC.TARGET_CAPABILITIES_FLAGS.SUPPORTS_CUSTOM_DEFAULTS) && bit_check(FC.CONFIG.targetCapabilities, FC.TARGET_CAPABILITIES_FLAGS.HAS_CUSTOM_DEFAULTS) && FC.CONFIG.configurationState === FC.CONFIGURATION_STATES.DEFAULTS_BARE) {
         var dialog = $('#dialogResetToCustomDefaults')[0];
@@ -538,9 +529,6 @@ function onClosed(result) {
     $('#tabs ul.mode-connected-cli').hide();
     $('#tabs ul.mode-disconnected').show();
 
-    updateStatusBarVersion();
-    updateTopBarVersion();
-
     var sensor_state = $('#sensor-status');
     sensor_state.hide();
 
@@ -726,9 +714,6 @@ function update_live_status() {
            }
        }
 
-       let cellsText = (FC.ANALOG.voltage > NO_BATTERY_VOLTAGE_MAXIMUM)? nbCells + 'S' : 'USB';
-       $(".battery-legend").text(FC.ANALOG.voltage.toFixed(2) + "V (" + cellsText + ")");
-
     }
 
     if (active) {

src/main.html

@@ -38,12 +38,13 @@
     <link type="text/css" rel="stylesheet" href="./css/dropdown-lists/css/style_lists.css" media="all"/>
     <link type="text/css" rel="stylesheet" href="./js/libraries/switchery/switchery.css" media="all"/>
     <link type="text/css" rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.css" media="all"/>
-    <link type="text/css" rel="stylesheet" href="./Components/MotorOutputReordering/Styles.css" media="all"/>
+    <link type="text/css" rel="stylesheet" href="./components/MotorOutputReordering/Styles.css" media="all"/>
     <link type="text/css" rel="stylesheet" href="./css/select2_custom.css" media="all"/>
     <link type="text/css" rel="stylesheet" href="./node_modules/select2/dist/css/select2.min.css" media="all"/>
 
     <link type="text/css" rel="stylesheet" href="./css/dark-theme.css" media="all" disabled/>
 
+    <script type="module" src="./components/init.js"></script>
     <!-- CORDOVA_INCLUDE js/cordova_chromeapi.js -->
     <!-- CORDOVA_INCLUDE js/cordova_startup.js -->
     <script type="text/javascript" src="./node_modules/lru_map/lru.js"></script>
@@ -138,11 +139,12 @@
     <script type="text/javascript" src="./js/TuningSliders.js"></script>
     <script type="text/javascript" src="./js/phones_ui.js"></script>
     <script type="text/javascript" src="./node_modules/jquery-touchswipe/jquery.touchSwipe.min.js"></script>
-    <script type="text/javascript" src="./Components/MotorOutputReordering/MotorOutputReorderingComponent.js"></script>
+    <script type="text/javascript" src="./components/MotorOutputReordering/MotorOutputReorderingComponent.js"></script>
-    <script type="text/javascript" src="./Components/MotorOutputReordering/MotorOutputReorderingCanvas.js"></script>
+    <script type="text/javascript" src="./components/MotorOutputReordering/MotorOutputReorderingCanvas.js"></script>
-    <script type="text/javascript" src="./Components/MotorOutputReordering/MotorOutputReorderingConfig.js"></script>
+    <script type="text/javascript" src="./components/MotorOutputReordering/MotorOutputReorderingConfig.js"></script>
     <script type="text/javascript" src="./node_modules/select2/dist/js/select2.min.js"></script>
     
+
     <title i18n="windowTitle"></title>
 </head>
 <body>
@@ -153,12 +155,12 @@
         <div id="menu_btn">
             <em class="fas fa-bars"></em>
         </div>
-        <div id="logo">
+        <betaflight-logo
-            <div class="logo_text">
+            :configurator-version="CONFIGURATOR.version" 
-                CONFIGURATOR
+            :firmware-version="FC.CONFIG.flightControllerVersion" 
-                <div class="version"></div>
+            :firmware-id="FC.CONFIG.flightControllerIdentifier" 
-            </div>
+            :hardware-id="FC.CONFIG.hardwareName" 
-        </div>
+        ></betaflight-logo>
         <div id="port-picker">
             <div id="port-override-option">
                 <label for="port-override">
@@ -203,7 +205,10 @@
                         <div class="battery-status"></div>
                     </div>
                 </div>
-                <div class="battery-legend">Battery voltage</div>
+                <battery-legend 
+                    :voltage="FC.ANALOG.voltage"
+                    :vbatmaxcellvoltage="FC.BATTERY_CONFIG.vbatmaxcellvoltage"
+                ></battery-legend>
                 <div class="bottomStatusIcons">
                     <div class="armedicon cf_tip" i18n_title="mainHelpArmed"></div>
                     <div class="failsafeicon cf_tip" i18n_title="mainHelpFailsafe"></div>
@@ -274,11 +279,12 @@
     </div>
     <div id="tab-content-container">
         <div class="tab_container">
-            <div id="tab_logoversion">
+            <betaflight-logo
-                <div class="logo_text">
+                :configurator-version="CONFIGURATOR.version" 
-                    <div class="version"></div>
+                :firmware-version="FC.CONFIG.flightControllerVersion" 
-                </div>
+                :firmware-id="FC.CONFIG.flightControllerIdentifier" 
-            </div>
+                :hardware-id="FC.CONFIG.hardwareName" 
+            ></betaflight-logo>
             <div id="tabs">
                 <ul class="mode-disconnected">
                     <li class="tab_landing" id="tab_landing"><a href="#" i18n="tabLanding" class="tabicon ic_welcome" i18n_title="tabLanding"></a>
@@ -342,27 +348,20 @@
         </div>
         <div id="content"></div>
     </div>
-    <div id="status-bar">
+    <status-bar
-        <div>
+            :port-usage-down="PortUsage.port_usage_down"
-            <span i18n="statusbar_port_utilization"></span> <span class="port_usage_down">D: 0%</span> <span
+            :port-usage-up="PortUsage.port_usage_up"
-                class="port_usage_up">U: 0%</span>
+            :packet-error="MSP.packet_error"
-        </div>
+            :i2c-error="FC.CONFIG.i2cError"
-        <div>
+            :cycle-time="FC.CONFIG.cycleTime"
-            <span i18n="statusbar_packet_error"></span> <span class="packet-error">0</span>
+            :cpu-load="FC.CONFIG.cpuload"
-        </div>
+
-        <div>
+            :configurator-version="CONFIGURATOR.version" 
-            <span i18n="statusbar_i2c_error"></span> <span class="i2c-error">0</span>
+            :firmware-version="FC.CONFIG.flightControllerVersion" 
-        </div>
+            :firmware-id="FC.CONFIG.flightControllerIdentifier" 
-        <div>
+            :hardware-id="FC.CONFIG.hardwareName" 
-            <span i18n="statusbar_cycle_time"></span> <span class="cycle-time">0</span>
+            :git-changeset-id="CONFIGURATOR.gitChangesetId" 
-        </div>
+    ></status-bar>
-        <div>
-            <span class="cpu-load"> </span>
-        </div>
-        <div class="version">
-            <!-- configuration version generated here -->
-        </div>
-    </div>
     <div id="cache">
         <div class="data-loading">
             <p>Waiting for data ...</p>