Fix OSD (HD) display overflow on Android (#3241)

* Fix OSD (HD) display overflow on Android * Add button for OSD tab orientation (Android)
betaflight · Jan 15, 2023 · 4b0d446 · 4b0d446
1 parent b407740
commit 4b0d446
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 1 deletion.
diff --git a/locales/en/messages.json b/locales/en/messages.json
@@ -4839,6 +4839,9 @@
         "message": "Uploaded all {{length}} characters to the OSD"
     },
 
+    "osdToggleOrientation": {
+        "message": "Orientation"
+    },
     "osdSetupSave": {
         "message": "Save"
     },

diff --git a/src/css/tabs/osd.less b/src/css/tabs/osd.less
@@ -541,7 +541,7 @@ button {
 @media all and (max-width: 575px) {
 	.tab-osd {
 		.osd-preview {
-			min-width: 100%;
+			width: fit-content;
 			order: 1;
 		}
 		.osd-feature {

diff --git a/src/js/tabs/osd.js b/src/js/tabs/osd.js
@@ -2609,6 +2609,8 @@ osd.initialize = function(callback) {
         // must invoke before i18n.localizePage() since it adds translation keys for expected logo size
         LogoManager.init(FONT, SYM.LOGO);
 
+        $('div.btn.orientation').toggle(GUI.isCordova());
+
         // translate to user-selected language
         i18n.localizePage();
 
@@ -3281,6 +3283,8 @@ osd.initialize = function(callback) {
             self.analyticsChanges = {};
         });
 
+        $('a.orientation').on('click', () => screen.orientation.lock(screen.orientation.type.startsWith("portrait") ? "landscape" : "portrait"));
+
         // font preview window
         const fontPreviewElement = $('.font-preview');
 
@@ -3411,6 +3415,10 @@ osd.cleanup = function(callback) {
         OSD.GUI.fontManager.destroy();
     }
 
+    if (GUI.isCordova()) {
+        window.screen.orientation.lock("portrait");
+    }
+
     // unbind "global" events
     $(document).unbind('keypress');
     $(document).off('click', 'span.progressLabel a');

diff --git a/src/tabs/osd.html b/src/tabs/osd.html
@@ -197,6 +197,9 @@ <h3 i18n="osdSetupCustomLogoInfoTitle"></h3>
 
                 <div class="supported hide">
                     <div class="content_toolbar" style="left:0;">
+                        <div class="btn orientation">
+                            <a class="orientation" href="#" i18n="osdToggleOrientation"></a>
+                        </div>
                         <div class="btn">
                             <a class="requires-max7456-font-device-detected fonts" id="fontmanager" href="#" i18n="osdSetupFontManager"></a>
                         </div>