Fix OSD preview

[haslinghuis]

Fixes: #3100

[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

[nerdCopter]

hmm, well it does indeed fix the issue, but if the window width is less than ~1436 pixels, column 2 does not shrink enough and/or column 3 gets moved.

approx width 1436:

approx width 1432:

old behavior at approx width 1061:

[McGiverGim]

The problem here is the "size" of the char that contains the symbol. It is 12x18 and we don't reduce it because it almost disappears because the reduction algorithm done by the browser works very bad with character images.
Until now, PAL and NTSC have 30 columns, so 30 x 12 = 360 px (the CSS rule was wrong by 10 pixels). Now, in HD it contains 53 columns, so the minimum must be 53 x 12 = 636.
This will make difficult to fit all without flexing, so the better approach is to give different sizes for both systems, at least PAL and NTSC will fit better. We have the code to add a class, and use different backgronds depending on the video system before this PR #3071 that removed it because it was not needed anymore.
So, two options:

• Solution 1: simply use 636 as maximum
• Solution 2: add the code removed in the PR to add a class based on the video system, and use 360 by default and 636 for HD.

[haslinghuis]

Thanks. Tried 636 but getting same behavior.

[nerdCopter]

last commit 9f5e0e82 reverts to same behavior as bug and also limits minimal usable width.
this is approx 1332px at which anything smaller, then column 3 moves down.

[haslinghuis]

Reverted for now.

[howels]

Could we arrange the Elements and Active OSD/Video Format columns below Preview on screens <1432?

Text moves outside the Preview frame currently:

[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!

[howels]

Looks to be working well, resizes the preview area and then moves columns underneath.

HD-preview-test.mp4

[McGiverGim]

It seems Android UI is broken now...

[howels]

Android OSD preview isn't completely broken but the contents need to be aligned left and scaled.

Android-HD-OSD.mp4

[haslinghuis]

On Samsung Galaxy S7 (SM-935F) with resolution 1440 x 2560 pixels the preview fills the screen (aligned left),
Only you can scroll to the right where there is white space,

What is the screen resolution of your device?

[McGiverGim]

In my case, pixel 4 with 2280 × 1080.

[howels]

On Samsung Galaxy S7 (SM-935F) with resolution 1440 x 2560 pixels the preview fills the screen (aligned left), Only you can scroll to the right where there is white space,

What is the screen resolution of your device?

Sony Xperia 1 III, resolution 1644 x 3840. Guess it's down to the screen scaling. I am also running HD OSD.

[howels]

SD OSD is also offset but the text doesn't break the image preview box as much.

[haslinghuis]

Not sure how we are going to solve this for different resolutions as I have added a media query kicking in at 1455px or below and a, second at 1200px or below. They are based on FHD desktop screen (android does not have the menu visible as desktop does - this makes scaling even harder).

Maybe it would work better with the side panels dropped down below the preview as default on all platforms so we can use max instead of min. Happy to have some suggestions as I'm running out of idea's looking at the following table:

Device	OS	Resolution	Status
FHD Desktop	Ubuntu 22.04	1920 * 1080	OK
Sony Xperia 1 III	Android	1644 x 3840
HP Elitebook	Windows 10 Pro	1600 x 900	OK
Samsung Galaxy S7	Android	1440 * 2560	OK
Google Pixel 4	Stock Android	1080 * 2280
Nokia G60	Stock Android	1080 * 2408	N/A

[howels]

Could we scale the preview window on mobile? I know on desktop we want to avoid this but on mobile the touch targets are already challenging anyway. Losing fidelity in the fonts isn't a big deal on very small screens.