Merge pull request #1143 from frozenskys/feature-addvisionfont

Add vision font from inav

locales/en/messages.json

@@ -3212,6 +3212,12 @@
     "osdSetupFontPresets": {
         "message": "Font presets:"
     },
+    "osdSetupFontPresetsSelector": {
+        "message": "Select Font Presets:"
+    },
+    "osdSetupFontPresetsSelectorOr": {
+        "message": "or"
+    },
     "osdSetupOpenFont": {
         "message": "Open Font File"
     },

src/css/tabs/osd.css

@@ -402,13 +402,17 @@ button {
   cursor: pointer;
 }
 
-.fontbuttons {
+.fontpresets_wrapper {
   display: inline-block;
   position: absolute;
   right: 1.2em;
   top: .8em;
 }
 
+.fontpresets {
+  border: 1px solid #cccccc;
+}
+
 .tab-osd .switchable-field {
   padding: 3px;
   border: 1px solid transparent;

src/js/tabs/osd.js

@@ -913,7 +913,8 @@ OSD.constants = {
     { file: "extra_large", name: "Extra Large" },
     { file: "betaflight", name: "Betaflight" },
     { file: "digital", name: "Digital" },
-    { file: "clarity", name: "Clarity" }
+    { file: "clarity", name: "Clarity" },
+    { file: "vision", name: "Vision" }
   ]
 };
 
@@ -1470,17 +1471,18 @@ TABS.osd.initialize = function (callback) {
     }
 
     $('#content').load("./tabs/osd.html", function () {
-
-        // Generate font type buttons
-        var fontbuttons = $('.fontbuttons');
+        // Generate font type select element
+        var fontselect = $('.fontpresets');
         OSD.constants.FONT_TYPES.forEach(function(e, i) {
-          var button = $('<button>', {
+          var option = $('<option>', {
             "data-font-file": e.file,
+            value: e.file,
             text: e.name
           });
-          fontbuttons.append($(button));
+          fontselect.append($(option));
         });
 
+        var fontbuttons = $('.fontpresets_wrapper');
         fontbuttons.append($('<button>', { class: "load_font_file", i18n: "osdSetupOpenFont" }));
 
         // must invoke before i18n.localizePage() since it adds translation keys for expected logo size
@@ -1974,24 +1976,27 @@ TABS.osd.initialize = function (callback) {
         // init structs once, also clears current font
         FONT.initData();
 
-        var $fontPicker = $('.fontbuttons button');
-        $fontPicker.click(function(e) {
-          if (!$(this).data('font-file')) { return; }
-          $fontPicker.removeClass('active');
-          $(this).addClass('active');
-          $.get('./resources/osd/' + $(this).data('font-file') + '.mcm', function(data) {
+        var $fontpresets = $('.fontpresets')
+        $fontpresets.change(function(e) {
+          var $font = $('.fontpresets option:selected');
+          $.get('./resources/osd/' + $font.data('font-file') + '.mcm', function(data) {
             FONT.parseMCMFontFile(data);
             FONT.preview($preview);
             LogoManager.drawPreview();
             updateOsdView();
           });
         });
-
+        
         // load the first font when we change tabs
-        $fontPicker.first().click();
+        var $font = $('.fontpresets option:selected');
+        $.get('./resources/osd/' + $font.data('font-file') + '.mcm', function(data) {
+          FONT.parseMCMFontFile(data);
+          FONT.preview($preview);
+          LogoManager.drawPreview();
+          updateOsdView();
+        });
 
         $('button.load_font_file').click(function() {
-          $fontPicker.removeClass('active');
           FONT.openFontFile().then(function() {
             FONT.preview($preview);
             LogoManager.drawPreview();

src/tabs/osd.html

@@ -124,7 +124,11 @@
                         <h1 class="tab_title" i18n="osdSetupFontPresets" />
                         <!-- Font preview and list -->
                         <div class="content_wrapper font-preview"></div>
-                        <div class="fontbuttons"></div>
+                        <div class="fontpresets_wrapper">
+                            <label id="font-selector-label" i18n="osdSetupFontPresetsSelector"></label>
+                            <select class="fontpresets"></select>
+                            <span id="font-selector-span" i18n="osdSetupFontPresetsSelectorOr"> Or </span>
+                        </div>
                         <!-- Boot logo setup -->
                         <h1 class="tab_title" i18n="osdSetupCustomLogoTitle" />
                         <div id="font-logo-preview-container" class="content_wrapper">