[Request] Scale ImGui UI to match OS DPI on HiDPI displays

[sjoerdev]

currently the imgui ui does not scale on hidpi displays, i have a 2k display with windows scaling at 150%, the imgui window however is tiny and has tiny text. imgui recently added great support for hidpi scaling, and i think it will probably be quite simple to implement. i believe the variable is ImGui.GetStyle().FontScaleDpi but im not completely sure. you can ask glfw or sdl for the display scale that windows is set to, for example 150%, and then update the imgui variable. this will make scaling work.

[devmuaz]

Hey @sjoerdev,

Thanks a lot for the detailed report and for pointing out the new ImGui HiDPI support!

I've just pushed a fix that wires this up end-to-end:

• The window now opens at the correct size on high-DPI displays
• Text, icons, padding, and borders all scale to match your Windows
  scaling setting (100%, 125%, 150%, 200%, etc.)
• If you drag the app between monitors with different scaling, the
  UI re-scales live without needing a restart

You can either:

• Pull the latest changes on main, then build it from source and confirm that the fix is correct.
• Or, wait for the next stable release v0.7.0 in the upcoming days (probably a few days just to make sure everything works correctly on all platforms).

[sjoerdev]

absolutely amazing how fast you implemented that. i just wanted to add to my previous post that imgui seems to have a lot of scaling options, and personally i dont understand how all of them work, so i just put the in a little list here so you at least know about the existance of them:

// base scaling options

// ImGui.GetStyle().FontScaleDpi
// ImGui.GetStyle().FontScaleMain
// ImGui.GetStyle().FontSizeBase
// ImGui.GetFontSize() == FontScaleMain * FontScaleDpi

// other scaling options that imgui has:

// ImGui.GetIO().ConfigDpiScaleFonts
// ImGui.GetIO().ConfigDpiScaleViewports
// ImGui.GetIO().DisplayFramebufferScale
// ImGui.GetStyle().ScaleAllSizes()

[devmuaz]

Thanks for referring them out!

I was happy fixing this bug tbh!
Btw, they used to have different APIs for scaling, but nowadays they have much cleaner ones than we did back then!

I'm gonna leave the issue open for now, just until I release the next stable version and make sure everything works as smoothly as possible.

If you find any issues ever, it would mean a lot if you report them here, and I would be happy fixing them at any time.

Thanks again!

[devmuaz]

Hi @sjoerdev again!

Now, you can test the app by downloading the pre-release v0.7.0-beta.3 that's available on:

CoreDeck's Website or the Release Page

[devmuaz]

Hi @sjoerdev

I'm gonna be closing this issue for now, but feel free to reopen it at any time!

[sjoerdev]

@devmuaz i have been testing the 0.7 beta, alot of times i found that text overflows its container, for buttons and subwindows. i think doing ImGui::GetStyle().ScaleAllSizes is not a good idea, i think only scaling the ImGui.GetStyle().FontScaleDpi value is the better solution. that way text is still readable on hidpi displays, but the scaling of everything else stays the way it was intended.

[sjoerdev]

[devmuaz]

Hello @sjoerdev

Well, that's unfortunately looks ugly tbh! It shouldn't behave like that!

The thing is, I've been out of my main office for like a week or so, and I only carry my MacBook Pro machine with me right now, which is why I couldn't test it manually on Windows machines with different screen scaling (except the CI tests)!

I will be back in the next 2 days, and I should be able to fix it properly this time.

[sjoerdev]

@devmuaz there is no rush, take your time. also maybe testing in a virtual maschine with different scaling factors is a good way to test it. when i want to test if a cross platform application im working on works well on other platforms i just use virtualbox or vmware or qemu