Add assistance for OSD selection (#4385)

* Add assistance for OSD selection

* cleanup

* improve

* refactor

Author: haslinghuis

locales/en/messages.json

@@ -7584,6 +7584,18 @@
     "firmwareFlasherBuildCustomDefines": {
         "message": "Custom Defines"
     },
+    "firmwareFlasherOSDProtocolNotSelected": {
+        "message": "OSD protocol not selected"
+    },
+    "firmwareFlasherOSDProtocolNotSelectedDescription": {
+        "message": "You must select an OSD protocol to build a firmware."
+    },
+    "firmwareFlasherOSDProtocolSelect": {
+        "message": "Select OSD protocol"
+    },
+    "firmwareFlasherOSDProtocolNotSelectedContinue": {
+        "message": "Continue without OSD protocol"
+    },
     "coreBuild": {
         "message": "Core Only"
     },

src/js/tabs/firmware_flasher.js

@@ -241,6 +241,14 @@ firmware_flasher.initialize = function (callback) {
             }
         }
 
+        function updateOsdProtocolColor() {
+            const osdProtocol = $('select[name="osdProtocols"] option:selected').val();
+            $('select[name="osdProtocols"]')
+                .next(".select2-container")
+                .find(".select2-selection__rendered")
+                .attr("style", osdProtocol === "" ? "color: red !important" : "");
+        }
+
         function buildOptions(data) {
             if (!ispConnected()) {
                 return;
@@ -267,6 +275,12 @@ firmware_flasher.initialize = function (callback) {
             buildOptionsList($('select[name="options"]'), data.generalOptions);
             buildOptionsList($('select[name="motorProtocols"]'), data.motorProtocols);
 
+            // Using setTimeout to ensure this runs after Select2 has finished initializing/rendering
+            setTimeout(updateOsdProtocolColor, 0);
+
+            // Add change handler to update color when selection changes
+            $('select[name="osdProtocols"]').on("change", updateOsdProtocolColor);
+
             if (!self.validateBuildKey()) {
                 preselectRadioProtocolFromStorage();
             }
@@ -838,11 +852,35 @@ firmware_flasher.initialize = function (callback) {
             self.cancelBuild = true;
         });
 
-        $("a.load_remote_file").on("click", function (evt) {
+        async function enforceOSDSelection() {
+            if ($('select[name="osdProtocols"] option:selected').val() === "") {
+                return new Promise((resolve) => {
+                    GUI.showYesNoDialog({
+                        title: i18n.getMessage("firmwareFlasherOSDProtocolNotSelected"),
+                        text: i18n.getMessage("firmwareFlasherOSDProtocolNotSelectedDescription"),
+                        buttonYesText: i18n.getMessage("firmwareFlasherOSDProtocolNotSelectedContinue"),
+                        buttonNoText: i18n.getMessage("firmwareFlasherOSDProtocolSelect"),
+                        buttonYesCallback: () => resolve(true),
+                        buttonNoCallback: () => resolve(false),
+                    });
+                });
+            } else {
+                return true; // No issue with OSD selection
+            }
+        }
+
+        $("a.load_remote_file").on("click", async function (evt) {
             if (!self.selectedBoard) {
                 return;
             }
 
+            // Ensure the user has selected an OSD protocol
+            const shouldContinue = await enforceOSDSelection();
+
+            if (!shouldContinue) {
+                return;
+            }
+
             // Reset button when loading a new firmware
             self.enableFlashButton(false);
             self.enableLoadRemoteFileButton(false);