HighDPI support on Windows and Linux

[devernay]

I made some change that shuld lead to HiDPI support on Windows as well, but:

• I don't even know if the OpenGL context is HighDPI on Windows
• I have no way to test it.

Can someone (@rodlie?) make a windows build from this, and can someone test if there are visible changes with 2.4.1alpha2 on a HighDPI screen? Actually I think it should even work if you set the magnification to 150% or 200% in the windows preferences, even if it's not a highdpi screen.

[coveralls]

Coverage remained the same at 0.0% when pulling 4184149 on RB-2.4-highdpi into 4af0454 on RB-2.4.

[rodlie]

Build: https://sourceforge.net/projects/natron/files/Windows/64/snapshots/Natron-RB-2.4-highdpi-202106100824-939d27f-Windows-64.zip/download

[devernay]

@rodlie were you able to test it? does it change anything?

[rodlie]

I did not, will have time this weekend. I will gather feedback from others on discord/facebook and post them here.

[devernay]

@rodlie any feedback on this?
Three questions:

1. does it change anything on windows compared to 2.4.0 when you change the "scale" setting, even on a non hidpi screen?
2. Is the the result correct?
3. Is the result acceptable? (if not, I won't merge the windows part of this commit)

[rodlie]

I will sit down and test in about an hour. The only displays I have available at the moment is 27" 1440p and 24" 1080p.

[rodlie]

Result on 150% scale (1920x1080):

2.4:

HighDPI:

[devernay]

@rodlie So do you think it looks good? Should I leave the "HiDPI" checkbox in the plugins, or disable it on Natron with macOS and Windows?
I was thinking of leaving it in case something goes wrong and the graphics become too small.

Also, can you try drag-n-dropping a tab (eg the viewer): is there a transparent image of the tab content while dragging, as on macOS? Does it have the right size? I'm asking to check that specifically, because of that comment: https://github.com/NatronGitHub/Natron/blob/RB-2.4/Gui/TabWidget.cpp#L1542
I would like to know if I should surround this code with #ifdef Q_WS_MACX or not.

Also, do you think there's a solution for testing for screen density on Linux? I think there's a solution here, which uses the global resource Xft.dpi glfw/glfw#1019 (comment) - which we then have to divide by 96.

[rodlie]

So do you think it looks good?

Yes, looks better than without.

Also, can you try drag-n-dropping a tab (eg the viewer): is there a transparent image of the tab content while dragging, as on macOS? Does it have the right size?

Will check after work.

Also, do you think there's a solution for testing for screen density on Linux?

Unsure, will check.

[devernay]

Added support for Linux using the Xft.dpi resource, which is supported by almost all toolkits/desktops (including GTK+2, GTK+3, Qt4)
I first implemented it myself, but then noticed it is already implemented in Qt, and can be retrieved from QX11Info::appDpiX()

[devernay]

OK I will merge this one so that it gets tested on all platforms, since it's very easy to revert (there's one central place: Gui::devicePixelRatio())

The TabWidget bug workaround is now only enabled on macOS, since we never got reports of issues on other platforms.

[p2or]

Hi guys,

I've tested the windows build provided on a hiDPI screen (3840x2160) and it's already way sharper than before, thanks. You might want to adjust the padding of the UI elements, feels like too compressed IMHO. Comparison of 2.4.0 vs. the snapshot:

Screenshot of version 2.4.0

Screenshot of the build provided (version 2.4.1)

---

Notice that the image of the splash screen gets resized and does not show up properly:

And lastly, the type of the Shortcut Editor is not readable anymore (a problem of version 4.2.0 on high-dpi screens as well):

Hope this helps. If there is something else I can test, just let me know.

Cheers,
Christian

[devernay]

Thanks Christian for the report. What scaling value did you use for these screenshots (in the Windows display settings)?

[devernay]

@p2or commits 6c87fc0 and a84cd0f should fix these issues

[p2or]

Hi @devernay,

great! The scale setting set to 250% which is the default as well as the recommended value. Unfortunately, I can't compile Natron along with your fixes myself since I don't have any build-environment set up. Is there any automatic/daily/snapshot build so I can test your already good looking patches?

Cheers,
Christian

[devernay]

@rodlie will probably upload his build here when time permits: https://github.com/NatronGitHub/Natron/releases/tag/v2.4.1-alpha5
(@rodlie maybe you could make a docker for windows image so that anyone with windows can build Natron?)

[rodlie]

I just started a build, will upload and notify when done.

maybe you could make a docker for windows image so that anyone with windows can build Natron?

Probably, don't have time at the moment.

Currently I build Natron in vbox on Windows 8, on a Windows 10 machine. I can't have docker and vbox installed at the same time, and I can't run Windows in docker on other platforms.

[rodlie]

Sorry for the delay, Windows binaries are now available.

Note that I will downgrade OIIO to 2.2.14, since 2.2.15 idiff has deadlock issues and unit tests never finish.

[p2or]

Hey guys,

no problem @rodlie, thanks for compiling so quickly and thanks for your patch @devernay. I think that's pretty close, shortcut manger is looking great and even the splashscreen looks nice:

---

4 potential/remaining issues I found:

1. The type in the splashscreen has an offset (seems it's still sitting its old location):

2. The width of all the dialogs is too low (we would have to manually resize them):

3. The size of all scrollbars is pretty small compared to all other elements and (4.) I still think increasing the padding of the elements in menu bar might improve readability quite a lot:

Hope that helps, just let me know if there is something else I can test. Thanks for your work.

Cheers,
Christian

[devernay]

Thanks for testing and reporting!

1. The type in the splashscreen has an offset (seems it's still sitting its old location):

Easy to fix, and I felt this was going to be an issue. I'll do it

2. The width of all the dialogs is too low (we would have to manually resize them):

Will fix

3 The size of all scrollbars is pretty small compare to all other elements and I still think increasing the padding of the elements in menu bar might improve readability quite a lot:

This is hard for me to work on this one without a windows system. @rodlie can you try editing mainstyle.qss, and replacing everywhere "px" with "pt". Maybe we're lucky and this works.

[rodlie]

can you try editing mainstyle.qss, and replacing everywhere "px" with "pt". Maybe we're lucky and this works.

Sadly did not work, it broke all widgets regardless of scaling.

[devernay]

Can you check if using "em" as the unit scales correctly?
It requires some conversion, see
https://www.w3schools.com/cssref/css_units.asp
and
https://www.w3schools.com/tags/ref_pxtoemconversion.asp

[devernay]

Here's mainstyle.css with all units converted from pw to em. Can you try that @rodlie?
mainstyle.qss.zip

[rodlie]

Better.

Screenshot (remote desktop scale at 150):

[devernay]

Ok looks good. How can we proceed from here? I don't remember if it's possible to load this custom stylesheet to test it. @rodlie? So that Christian can test it

…

On Sat, Jun 19, 2021, 5:41 AM Ole-André ***@***.***> wrote: Better. Screenshot (remote desktop scale at 150): [image: hidpi-test01] <https://user-images.githubusercontent.com/34516798/122642747-41484480-d10c-11eb-91b9-0bbfdeee6f30.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#635 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA42MF43IKSTYICZIX5B3DTTTSF57ANCNFSM46NAQQUQ> .

[rodlie]

We have an option to load a custom stylesheet in the settings.

[devernay]

Could you also test it with scale=250%?

[rodlie]

Can't go over 175, probably because my resolution is too small (1080p). I can hook it up to a better monitor when I get home from work.

[p2or]

Hi guys,

good idea to test a custom stylesheet @devernay. How about using the official nuke sheet from https://github.com/NatronGitHub/natron-python-scripting. What do you think?

No hassle @rodlie, I can test whatever you want, just need a new build (I can test it on linux as well). Apologies, that I don't have an option to set up any natron build environment right now... would make it way easier for sure, I'm working on it.

Cheers,
Christian

[rodlie]

How about using the official nuke sheet from https://github.com/NatronGitHub/natron-python-scripting. What do you think?

There will be a style overhaul in the near future.

I can test whatever you want, just need a new build

A new build will be available in about an hour, will add link when done.

[rodlie]

New build: https://github.com/NatronGitHub/Natron/releases/download/v2.4.1-alpha5/Natron-RB-2.4-highdpi-202106220714-4b62360-Windows-64.zip

Also remember to use the stylesheet from #635 (comment)

[p2or]

Hi guys,

thanks for build @rodlie and thanks for your patches @devernay. As suggested, a screenshot using the updated stylesheet file, the font size is set to 10:

Scollbars looking nice, additional dialogs have proper size and the splashscreen is back to normal. The main menu doesn't seem effected by the patches though.

As far as I can tell there are only 2 show-stoppers from a user perspective IMHO:

1. Node Search Menu - Is there any chance to increase the size of the search menu? (see the first screenshot)
2. Default Application Icons - Some of the icons like the dropdown icon doesn't scale like others, makes it tough to recognize (see both screenshots). Tried to create a list of that ones I found:
   • Dropdown icon (all, eg. viewer channel list)
   • Close icon (tabs in the node viewer)
   • Color Wheel icon (all)
   • Folder icon (e.g. stylesheet filepath)
   • Reload icon (e.g. stylesheet filepath)
   • New Folder icon (e.g. file dialog)
   • Bold/Italic/Font Color icons (all, e.g. in the node tab of each node)
   • Drag-Area icon (mouse pointer while expanding or shrinking an area e.g. the node properties)

Hope this helps. If there is something else I can do or test, just let me know.

Cheers,
Christian

---

For the sake, a screenshot without the new stylesheets applied: