Add a select font preview in OSD (#1450)

Add a select font preview in OSD

locales/en/messages.json

@@ -3594,7 +3594,11 @@
     },
     "osdSetupPreviewSelectProfileTitle": {
         "message": "Preview for",
-        "description": "Label of the selector for the OSD Profile in the preview"
+        "description": "Label of the selector for the OSD Profile in the preview. KEEP IT SHORT!!!"
+    },
+    "osdSetupPreviewForTitle": {
+        "message": "Changing here the profile or the font will NOT change the profile or the font in the flight controller, only affects the preview window. If you want to change it, you must use the '$t(osdSetupSelectedProfileTitle.message)' option or the '$t(osdSetupFontManager.message)' button respectively.",
+        "description": "Help content for the OSD profile and font PREVIEW"
     },
     "osdSetupSelectedProfileTitle": {
         "message": "Active OSD Profile",
@@ -3608,6 +3612,10 @@
         "message": "OSD Profile {{profileNumber}}",
         "description": "Content of the selector for the OSD Profile in the preview"
     },
+    "osdSetupPreviewSelectFontElement": {
+        "message": "Font {{fontName}}",
+        "description": "Content of the selector for the OSD Font in the preview"
+    },
     "osdSetupPreviewTitleTip": {
         "message": "Show or hide the logo in the preview window. This will not change any settings on the flight controller."
     },
@@ -3641,6 +3649,10 @@
     "osdSetupFontPresetsSelector": {
         "message": "Select Font Presets:"
     },
+    "osdSetupFontPresetsSelectorCustomOption": {
+        "message": "User supplied font",
+        "description": "Option to show as selected when the user selects a custom local font"
+    },
     "osdSetupFontPresetsSelectorOr": {
         "message": "or"
     },

src/css/tabs/osd.css

@@ -302,6 +302,23 @@
   position: relative;
 }
 
+.tab-osd .preview .gui_box_titlebar label {
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    white-space: nowrap;
+    vertical-align: bottom;
+}
+
+.tab-osd .preview .gui_box_titlebar select {
+    max-width: 100px;
+    border-radius: 2px;
+    font-size: 11px;
+    font-weight: normal;
+    font-family: 'open_sansregular', 'Segoe UI', Tahoma, sans-serif;
+}
+
 .tab-osd .preview .gui_box_bottombar {
   text-align: center;
 }

src/js/tabs/osd.js

@@ -2188,6 +2188,37 @@ TABS.osd.initialize = function (callback) {
                     // Select the current OSD profile
                     osdProfileActive_e.val(OSD.data.osd_profiles.selected);
 
+                    // Populate the fonts selector preview
+                    let osdFontSelector_e = $('.osdfont-selector');
+                    let osdFontPresetsSelector_e = $('.fontpresets');
+                    if (osdFontSelector_e.children().length == 0) {
+
+                        // Custom font selected by the user
+                        var option = $('<option>', {
+                            text: i18n.getMessage("osdSetupFontPresetsSelectorCustomOption"),
+                            value: -1,
+                            "disabled": "disabled",
+                            "style":"display: none;",
+                        });
+                        osdFontSelector_e.append($(option));
+
+                        // Standard fonts
+                        OSD.constants.FONT_TYPES.forEach(function (e, i) {
+                            let optionText = i18n.getMessage('osdSetupPreviewSelectFontElement', {fontName : e.name});
+                            osdFontSelector_e.append(new Option(optionText, e.file));
+                        });
+
+                        osdFontSelector_e.change(function() {
+                            // Change the font selected in the Font Manager, in this way it is easier to flash if the user likes it
+                            osdFontPresetsSelector_e.val(this.value).change();
+                        });
+                    }
+
+                    // Select the same element than the Font Manager window
+                    osdFontSelector_e.val(osdFontPresetsSelector_e.val() != null ? osdFontPresetsSelector_e.val() : -1);
+                    // Hide custom if not used
+                    $('.osdfont-selector option[value=-1]').toggle(osdFontSelector_e.val() == -1);
+
                     // display fields on/off and position
                     var $displayFields = $('#element-fields').empty();
                     var enabledCount = 0;
@@ -2455,6 +2486,7 @@ TABS.osd.initialize = function (callback) {
                 FONT.preview(fontPreviewElement);
                 LogoManager.drawPreview();
                 updateOsdView();
+                $('.fontpresets option[value=-1]').hide();
             });
         });
         // load the first font when we change tabs
@@ -2467,6 +2499,8 @@ TABS.osd.initialize = function (callback) {
                 LogoManager.drawPreview();
                 updateOsdView();
                 $('.font-manager-version-info').text(i18n.getMessage('osdDescribeFontVersionCUSTOM'));
+                $('.fontpresets option[value=-1]').show();
+                $('.fontpresets').val(-1);
             }).catch(error => console.error(error));
         });
 

src/tabs/osd.html

@@ -37,11 +37,14 @@
 
                         <div class="gui_box_titlebar image">
                             <div class="spacer_box_title">
-                               <span>
+                               <span i18n_title="osdSetupPreviewForTitle">
                                    <label id="osdprofile-selector-label" i18n="osdSetupPreviewSelectProfileTitle"/>
                                    <select class="osdprofile-selector">
                                        <!--  Populated at runtime -->
                                    </select>
+                                   <select class="osdfont-selector">
+                                       <!-- Populated at runtime -->
+                                   </select>
                                </span>
                                 <span class="preview-logo cf_tip" i18n_title="osdSetupPreviewTitleTip"></span>
                             </div>
@@ -152,7 +155,10 @@
                         <div class="content_wrapper font-preview"></div>
                         <div class="fontpresets_wrapper">
                             <label id="font-selector-label" i18n="osdSetupFontPresetsSelector"></label>
-                            <select class="fontpresets"></select>
+                            <select class="fontpresets">
+                                <option value="-1" disabled i18n="osdSetupFontPresetsSelectorCustomOption" />
+                                <!-- Other values populated at runtime -->
+                            </select>
                             <span id="font-selector-span" i18n="osdSetupFontPresetsSelectorOr"> Or </span>
                         </div>
                         <!-- Boot logo setup -->