Add support for ELRS UID (#3097)

* Add support for ELRS UID

* Add Babel

* Fix review

* Fix CSS

.eslintrc.js

@@ -2,6 +2,7 @@ module.exports = {
     parserOptions: {
         ecmaVersion: 2020,
         sourceType: "module",
+        allowImportExportEverywhere: true,
     },
     extends: ["plugin:vue/recommended"],
     env: {

gulpfile.js

@@ -1101,6 +1101,11 @@ function cordova_execbrowserify(file) {
     const destpath = file.replace(filename, '');
     console.log(`Include required modules in ${file}`);
     return browserify(file, { ignoreMissing: true })
+        .transform("babelify", {
+            presets: ["@babel/preset-env"],
+            sourceMaps: false,
+            global:true,
+            ignore: [/\/node_modules\/(?!md5.js\/)/] })
         .bundle()
         .pipe(source(filename))
         .pipe(gulp.dest(destpath));

locales/en/messages.json

@@ -2192,6 +2192,9 @@
     "receiverButtonBindMessage": {
         "message": "Bind request sent to the flight controller."
     },
+    "receiverButtonPassphrase": {
+        "message": "Passphrase"
+    },
     "receiverButtonSticks": {
         "message": "Control sticks"
     },
@@ -6821,7 +6824,7 @@
         "description": "Warning message that shows up at the top of the preset sources dialog"
     },
     "presetsNoPresetsFound": {
-        "message": "No presets found for the given search paramteres",
+        "message": "No presets found for the given search parameters",
         "description": "Message that apprears on presets tab if no presets were found"
     },
     "presetsTooManyPresetsFound": {

package.json

@@ -51,8 +51,11 @@
     "node": "16.x"
   },
   "dependencies": {
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/preset-env": "^7.20.2",
     "@fortawesome/fontawesome-free": "^5.13.0",
     "@panter/vue-i18next": "^0.15.2",
+    "babelify": "^10.0.0",
     "bluebird": "^3.7.2",
     "bonjour": "^3.5.0",
     "djv": "^2.1.4",
@@ -67,6 +70,7 @@
     "jquery-ui-npm": "^1.12.0",
     "lru_map": "^0.3.3",
     "marked": "^4.1.1",
+    "md5.js": "^1.3.5",
     "multicast-dns": "^7.2.5",
     "multiple-select": "^1.5.2",
     "nw-vue-devtools-prebuilt": "^0.0.10",

src/css/tabs/receiver.less

@@ -486,6 +486,12 @@
 		fill: none;
 	}
 	.axis {
+		line {
+			fill: none;
+			stroke: #ccc;
+			stroke-width: 1px;
+			shape-rendering: crispEdges;
+		}
 		path {
 			fill: none;
 			stroke: #ccc;
@@ -605,6 +611,30 @@
 			margin-bottom: 0;
 		}
 	}
+	.number {
+		input {
+			width: 220px;
+			margin-right: 11px;
+			border: solid 1px var(--subtleAccent);
+			border-radius: 3px;
+			min-height: 20px;
+			padding: 2px 4px 2px 4px;
+		}
+	}
+	.elrsContainer {
+		float: left;
+		width: calc(100% - 20px);
+	}
+	.elrsPassphrase {
+		margin-left: 5px;
+	}
+	.elrsUid {
+		float: left;
+		width: 223px;
+		margin: 10px 0 0 6px;
+		border: solid 1px var(--subtleAccent);
+		padding-left: 4px;
+	}
 	.gui_box_titlebar {
 		margin-bottom: 0;
 	}
@@ -628,6 +658,9 @@
 			&:nth-child(2) {
 				width: 20px;
 			}
+			div {
+				width: 27px;
+			}
 		}
 		.gui_box {
 			float: left;
@@ -636,18 +669,20 @@
 	.serialRXBox {
 		padding-top: 0;
 	}
-}
+	.spiRxBox {
-.axis {
+		padding-top: 0;
-	line {
+		.select2 {
-		fill: none;
+			width: 230px;
-		stroke: #ccc;
+			height: 20px;
-		stroke-width: 1px;
+			float: left;
-		shape-rendering: crispEdges;
+			margin-left: 4px;
+			margin-right: 15px;
+			border: 1px solid var(--subtleAccent);
+			border-radius: 3px;
+            color: #3f4241;
+        }
 	}
 }
-.spiRxBox {
-	padding-top: 0;
-}
 @media all and (max-width: 575px) {
 	.tab-receiver {
 		.bars {

src/js/fc.js

@@ -557,6 +557,7 @@ const FC = {
             rcSmoothingAutoFactor:        0,
             usbCdcHidType:                0,
             rcSmoothingMode:              0,
+            elrsUid:                      0,
         };
 
         this.FAILSAFE_CONFIG = {

src/js/msp/MSPHelper.js

@@ -1116,6 +1116,13 @@ MspHelper.prototype.process_data = function(dataHandler) {
                                 FC.RX_CONFIG.rcSmoothingAutoFactor = data.readU8();
                                 if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_44)) {
                                     FC.RX_CONFIG.rcSmoothingMode = data.readU8();
+                                    if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_45)) {
+                                        const elrsUidLength = 6;
+                                        FC.RX_CONFIG.elrsUid = [];
+                                        for (let i = 0; i < elrsUidLength; i++) {
+                                            FC.RX_CONFIG.elrsUid.push(data.readU8());
+                                        }
+                                    }
                                 }
                             }
                         }
@@ -2089,6 +2096,9 @@ MspHelper.prototype.crunch = function(code, modifierCode = undefined) {
                                 .push8(FC.RX_CONFIG.rcSmoothingAutoFactor);
                             if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_44)) {
                                 buffer.push8(FC.RX_CONFIG.rcSmoothingMode);
+                                if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_45)) {
+                                    FC.RX_CONFIG.elrsUid.forEach((b) => buffer.push8(b));
+                                }
                             }
                         }
                     }

src/js/tabs/receiver.js

@@ -1,16 +1,44 @@
 import { i18n } from "../localization";
 
+const MD5 = require('md5.js');
+
 const receiver = {
     rateChartHeight: 117,
     analyticsChanges: {},
     needReboot: false,
+    elrsPassphraseEnabled: false,
 };
 
 receiver.initialize = function (callback) {
     const tab = this;
 
-    if (GUI.active_tab !== 'receiver') {
+    GUI.active_tab = 'receiver';
-        GUI.active_tab = 'receiver';
+
+    function lookup_elrs_passphrase(uidString) {
+        const passphraseMap = ConfigStorage.get('passphrase_map').passphrase_map || {};
+
+        return passphraseMap[uidString] ?? 0;
+    }
+
+    function save_elrs_passphrase(uidString, passphrase) {
+        const passphraseMap = ConfigStorage.get('passphrase_map').passphrase_map ?? {};
+
+        passphraseMap[uidString] = passphrase;
+        ConfigStorage.set({'passphrase_map': passphraseMap});
+      }
+
+    function elrs_passphrase_to_bytes(text) {
+        let uidBytes = [0,0,0,0,0,0];
+
+        if (text) {
+            const bindingPhraseFull = `-DMY_BINDING_PHRASE="${text}"`;
+            const md5stream = new MD5();
+            md5stream.end(bindingPhraseFull);
+            const buffer = md5stream.read().subarray(0, 6);
+            uidBytes = Uint8Array.from(buffer);
+        }
+
+        return uidBytes;
     }
 
     function get_rc_data() {
@@ -336,8 +364,34 @@ receiver.initialize = function (callback) {
                     },
                 });
             }
-        }
 
+            if (FC.FEATURE_CONFIG.features.isEnabled('RX_SPI') && FC.RX_CONFIG.rxSpiProtocol == 19 && semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_45)) {
+                tab.elrsPassphraseEnabled = true;
+
+                const elrsUid = $('span.elrsUid');
+                const elrsUidString = FC.RX_CONFIG.elrsUid.join(',');
+
+                elrsUid.text(elrsUidString);
+
+                const elrsPassphrase = $('input.elrsPassphrase');
+
+                const passphraseString = lookup_elrs_passphrase(elrsUidString);
+                if (passphraseString) {
+                    elrsPassphrase.val(passphraseString);
+                }
+                elrsPassphrase.on('keyup', function() {
+                    const passphrase = elrsPassphrase.val();
+                    if (passphrase) {
+                        elrsUid.text(elrs_passphrase_to_bytes(passphrase));
+                    } else {
+                        elrsUid.text("0.0.0.0.0.0");
+                    }
+                    updateSaveButton(true);
+                });
+            } else {
+                tab.elrsPassphraseEnabled = false;
+            }
+        }
 
         // UI Hooks
 
@@ -381,6 +435,11 @@ receiver.initialize = function (callback) {
             }
         }
 
+        function checkShowElrsPassphrase() {
+            $('#elrsContainer').toggle(tab.elrsPassphraseEnabled);
+            $('input.elrsUid').toggle(tab.elrsPassphraseEnabled);
+        }
+
         $(featuresElement).filter('select').change(function () {
             const element = $(this);
             FC.FEATURE_CONFIG.features.updateData(element);
@@ -388,12 +447,14 @@ receiver.initialize = function (callback) {
             if (element.attr('name') === 'rxMode') {
                 checkShowSerialRxBox();
                 checkShowSpiRxBox();
+                checkShowElrsPassphrase();
                 updateSaveButton(true);
             }
         });
 
         checkShowSerialRxBox();
         checkShowSpiRxBox();
+        checkShowElrsPassphrase();
         updateSaveButton();
 
         $('a.refresh').click(function () {
@@ -442,6 +503,19 @@ receiver.initialize = function (callback) {
                 FC.RX_CONFIG.rcSmoothingAutoFactor = parseInt($('input[name="rcSmoothingAutoFactor-number"]').val());
             }
 
+            if (tab.elrsPassphraseEnabled) {
+                const elrsUidChars = $('span.elrsUid')[0].innerText.split(',').map(uidChar => parseInt(uidChar, 10));
+                if (elrsUidChars.length === 6) {
+                    FC.RX_CONFIG.elrsUid = elrsUidChars;
+
+                    const elrsUid =  $('span.elrsUid')[0].innerText;
+                    const elrsPassphrase = $('input.elrsPassphrase').val();
+                    save_elrs_passphrase(elrsUid, elrsPassphrase);
+                } else {
+                    FC.RX_CONFIG.elrsUid = [0, 0, 0, 0, 0, 0];
+                }
+            }
+
             function save_rssi_config() {
                 MSP.send_message(MSPCodes.MSP_SET_RSSI_CONFIG, mspHelper.crunch(MSPCodes.MSP_SET_RSSI_CONFIG), false, save_rc_configs);
             }

src/tabs/receiver.html

@@ -59,6 +59,15 @@
                             </select>
                             <span i18n="configurationSpiRX"></span>
                         </div>
+                        <div id="elrsContainer" class="elrsContainer spacer_box">
+                            <div class="number">
+                                <input type="text" class="elrsPassphrase">
+                                <span i18n="receiverButtonPassphrase"></span>
+                            </div>
+                            <div>
+                                <span class="elrsUid"></span>
+                            </div>
+                        </div>
                     </div>
                 </div>