Make OSD screen bigger if possible

[McGiverGim]

Fixes #2631

This is an attempt to make the OSD scale with large resolutions. This is the first versions, it needs:

• To be cleaned
• Tested under different devices resolutions.
• Make some final adjustments

I publish it in this form to get some feedback and testing.

This is an example of before:

And after:

[asizon]

@McGiverGim this is my result lol:

[HThuren]

What about a possibility to change the OSD background from the IDE ?

[McGiverGim]

@McGiverGim this is my result lol:

@asizon What screen resolution are you using? I think I forgot maybe give a min-size to the display. I will test it later.

What about a possibility to change the OSD background from the IDE ?

@HThuren we have a petition of not do it :P

betaflight-configurator/src/css/tabs/osd.css

Lines 464 to 466 in 6319421

	/* please don't copy the generic background image from another project
	* and replace the one that @nathantsoi took :)
	*/

But I think you can open a feature request for this. This petition is out of the scope of this PR.

[asizon]

@McGiverGim not sure about my screen resolution, but is small, i can check it later.

[McGiverGim]

@asizon modified the code. Changed the "manual" adjustment in JS to a lot of FLEX magic in CSS. Now I hope it adjusts to your resolution...

[haslinghuis]

Windows 10 1600x900:

[McGiverGim]

Modified, rebased and cleaned. Ready for a real review and test.

[blckmn]

AUTOMERGE: (FAIL)

• github identifies PR as mergeable -> FAIL
• assigned to a milestone -> PASS
• cooling off period lapsed -> PASS
• commit count less or equal to three -> PASS
• Don't merge label NOT found -> PASS
• at least one RN: label found -> PASS
• Tested label found -> FAIL
• assigned to an approver -> PASS
• approver count at least three -> FAIL

[benlumley]

Testing on MacOS here - there's a point here that may not be as intended (it's before the nav bar collapses)

One fix is to put flex-wrap: nowrap on the container (in an appropriate media query I guess?)

Or maybe we just don't support this size ? The header is going wrong too...

[McGiverGim]

@benlumley thanks for the feedback...

Pushed a new version, I've adjusted the size of the columns to fit in the space just before the collapse of the menu. Is a little ugly, the texts and the selects of the OSD lateral columns wrap, but all remains in correct position. There is not too much that we can do with this small resolution.
Another solution is to move to the Android layout, only one colum with OSD first, but is better to limit this option to small screens.
The header goes wrong when you use the "virtual FC", because it takes space used by the header. Has nothing to do with this PR, but you can open a bug for it.

EDIT: another solution is maybe collapse the menu a little earlier...

[haslinghuis]

Can't test OSX otherwise it's LGTM

Need to refresh my skills: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

[mrRobot62]

Found a little hickup for this solution.

Min-Width of the window is limited as well as min-height of window but min-height limiting is to small, because OSD image is cropped. Min-height limitation should be a little bit bigger. Will include a screenshoot asap

[benlumley]

Just tested on mac...

Issue gone from me; looks good at all widths; here's a range of screenshots....

[mrRobot62]

on my Mac below images with min-width and min-height

Image is cropped

[McGiverGim]

@mrRobot62 what resolution is this? I will change it to take into account the height of the window.

[mrRobot62]

And with rulers

@McGiverGim - take a look at the left border, the menu is cropped too. The context area should be a little bit smaler, to see the menu icons (without text) but icons should visible completely. That's more user friendly

[McGiverGim]

A little magic in the CSS and now it adjusts to the height too... at the minimum height it is a little out of screen, but it was before this change too... the only solution is to limit a little more the minimum resolution.

[McGiverGim]

Pushed new version with the little fixes of latest review.

[haslinghuis]

@McGiverGim please rebase

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[github-actions]

Do you want to test this code? Here you have an automated build:
Betaflight-Configurator-Android
Betaflight-Configurator-Linux
Betaflight-Configurator-macOS
Betaflight-Configurator-Windows
WARNING: It may be unstable and result in corrupted configurations or data loss. Use only for testing!

[ctzsnooze]

Works well on my Mac! Looks great - thank you!

[mrRobot62]

sorry guys - same issue as I postet days ago - MacBook Pro, Catalina

Monitor resolution

[mrRobot62]

my recommendation limit width and height auf the main window - like this

[McGiverGim]

Use the scroll to center the OSD. Of course limiting the size is another option but it's not necessary at this moment.