Scalable graphics - HiDPI

Beep6581 commented 7 years ago

The aim of this issue is to get RawTherapee to look well when scaled up, something which is becoming increasingly common. The change should not cause a performance penalty.

Reading SVG icons is slow, but once they are read they will be drawn just as fast as PNG icons. As startup time does matter to us, we will use PNG icons. The icons will be stored as SVG in the repository, but will be converted to PNG for builds for performance reasons.

Steps:

[x] Clean up icon situation, #4469
[x] Use a script to render PNGs of various sizes, optimize, maybe create iconsets.
[x] Remove rtdata/images/* and tools/source_icons
[x] Keep SVGs separate from PNGs.
[x] Do not ship SVGs with builds.
[x] Update CSS themes as needed.
[x] Implement HiDPI support in RT code - the UI including the preview and thumbnails should scale correctly.

https://wiki.gnome.org/HowDoI/HiDpi

TooWaBoo commented 5 years ago

@Hombre57 -gtk-dpi can be used to simulate a DPI value in css.

e.g.

* {-gtk-dpi: 150;}

regs01 commented 5 years ago

@Hombre57 https://mail.gnome.org/archives/commits-list/2015-February/msg01357.html They probably forgot to document it.

@TooWaBoo Assuming the talk is about UI element, like widths, borders, paddings etc. I mean, rem is always static and depend on DPI. It changes if DPI changes. em would depend on parent element. If you would like to make some element font size size bigger, you would have to recalculate all its properties in em.

TooWaBoo commented 5 years ago

@regs01 I know, but the GUI has to follow the font size in RT which is defined by the user within RT and not based on a system wide font size.

If a user selects e.g. font size 12 and the buttons are designed in rem, the button will grow, but an image button will not grow. You'll get an inconsistent layout.

Hombre57 commented 5 years ago

@TooWaBoo @regs01 @Beep6581 So the * {-gtk-dpi: 150;} worked for fonts, but not for icons. I'll let you try that by yourself if you want, but I for one has spent too much time with the Gtk's DPI arcane. I'm finishing this issue with the custom widgets update, then will ask for merge.

[EDIT] Tried on Win7/64-bits/MSYS2

Beep6581 commented 5 years ago

@Hombre57 could you summarize what the branch accomplishes?

Hombre57 commented 5 years ago

@Beep6581 This branch look for the GDK_SCALE environment variable, store the value in a global variable and in the new RTScalable class, then force it to 1 so that RT handles scaling by itself, i.e. fonts and widgets. So far, only Adwaita's icons are not scaled, the -gtk-dpi doesn't help here.

It also detect the selected font size and compute a font-scale factor, vs a 9pt font size. Both scale and font-scale are used to compute a tweaked scale factor.

SVG icons are now bundled instead of the png files. When a tool ask for e.g. refresh.png, it tries to load it from the icon cache. If it can't be found, it loads the svg file, render it in a Cairo::ImageSurface and save it in the cache.

See here for more details on the cache path and caveats.

Hombre57 commented 5 years ago

@Beep6581 @regs01 @TooWaBoo @Jacob-Bishop @hyphone @pkolaczk

The hidpi-icons branch should be complete now. I'm waiting for testers that actually own a Hi-DPI monitor, or set a GDK_SCALE=2 environment variable to simulate Hi-DPI monitors. Please use the TooWaBoo's theme, since RawTherapee's theme as to be updated (doing that now).

Tested on Low-DPI monitor / Win7. Looking for MacOS (ping @Benitoite) and Linux tester (X.Org and Wayland server).

Beside this theme rewrite, the last remaining fix are some svg icons (@Beep6581 offered his help on this).

Things to test :

fire up RT and see if the icons size followed the font size
set a new font and size in Preferences, then restart RT and see if the icons size followed the font size
each time you switch from low to Hi DPI mode and/or update the font size in Preferences, the iconset will be built when starting RT and saved in the cachefolder (pattern: %LocalAppData%\RawTherapee\cache\svg2png\[current tweaked DPI] on Windows), and unused DPI ones will be deleted (from this cache folder) when exiting RT. Please check that unused DPI folders are correctly deleted.

Known caveats :

icons are not resize after closing the Preferences window where a new font size has been selected
Adwaita's icons are not resized (e.g. in the Drive list of the directory browser, probably in other places). This won't be fixed by me, I've already spent too much time on this
dual monitor not tested, don't know if this will work
problem may occur for Gtkmm <3.20 (I can't test that) for real font size guessing, since there may be a mixup between px and pt in css files.

Please report your Gtkmm version when reporting troubles (see the AboutThisBuild.txt file). If possible, start RT from a command line, the debug printfs will provide helpful information as well.

Hombre57 commented 5 years ago

Ah, I just forgot the Histogram and some other widgets. Anyway, I'm still listening to you, if the curves and threshold selector works, the yet to update widgets will work too.

gaaned92 commented 5 years ago

Tested on W10, GTK 3.24.2, GTKMM 3.24.0, GDK_SCALE=2, ToWaBoo theme, Low-DPI monitor

Font size=12

rt-browser-12

rt-edit-12

Font size=6 rt-browser-6 rt-edit-6

Remarks :

icons size follow font size after restart and not after closing preferences
icons cache deleted on exit
Adwaita's icons seem resized (to be confirmed)
can use all widgets without problem

TooWaBoo commented 5 years ago

@gaaned92 Your GDK_SCALE=2 test didn't work. Add the var to the windows environment variables. grafik

gaaned92 commented 5 years ago

@TooWaBoo
exactly what I did. What else I have to define?

env

TooWaBoo commented 5 years ago

@Hombre57 ❌ Setting System DPI to 192dpi (200%) results in blurry thumbnails, image and icons. --> GDK_SCALE has to be forced always to "1" to get sharp thumbnails and images on windows.

✔ Outdated cached icons are deleted on exit

TooWaBoo commented 5 years ago

@gaaned92 For GDK_SCALE = 2 and Font size = 12 the buttons are to small in your screenshoots. grafik

@Hombre57 System DPI = 96, GDK_SCALE = 2, Font size = 9 gdk

System DPI = 192, GDK_SCALE = unset, Font size = 9 !!!Blurry thumbnails, images and icons 192

Hombre57 commented 5 years ago

@TooWaBoo That's what I do and it works fine here. What's your system / version ?

Hombre57 commented 5 years ago

@TooWaBoo Ok, didn't handled the case where GDK_SCALE is unset, I thought that Gtk would provide one. I'll commit a patch today.

TooWaBoo commented 5 years ago

@Hombre57 I would change it to this.

if GTK_MAJOR_VERSION == 3 && GTK_MINOR_VERSION >= 20
    g_setenv("GDK_SCALE", "1", true);
endif

There is no need to check GDK_SCALE first.

gaaned92 commented 5 years ago

@TooWaBoo I am sorry but I think you are wrong. You see the complete window 1280x1024

TooWaBoo commented 5 years ago

@gaaned92 Your scaling of the buttons is only the higher font size but not the GDK_SCALE=2 setting.

Hombre57 commented 5 years ago

@gaaned92 @TooWaBoo seem to be right. On such a low resolution, Hi-DPI would be enormous even at 9pt. Either the GDK_SCALE didn't worked, or you have to add GTK_CSD=1, as he explained (didn't tried myself, on Win7, GDK_SCALE is sufficient).

Hombre57 commented 5 years ago

@TooWaBoo I need to check GDK_SCALE for coding this feature, I can't code with Windows @ 200% on a FullHD monitor :slightly_smiling_face: , or you have a better solution ?

TooWaBoo commented 5 years ago

GTK_CSD=1 isn't necessary. @gaaned92 Did you run RT from CMD or by double click?

gaaned92 commented 5 years ago

@Hombre57 @TooWaBoo double click. On Windows you seldom run a program from CMD. GTK_CSD=1 does nothing

TooWaBoo commented 5 years ago

@TooWaBoo I need to check GDK_SCALE for coding this feature, I can't code with Windows @ 200% on a FullHD monitor 🙂 , or you have a better solution ?

No, I don't. 😁

gaaned92 commented 5 years ago

With the dev branch, icones become enormous with GDK_SCALE=2. I can see on my display only a part of RT window.

TooWaBoo commented 5 years ago

With the dev branch, icones become enormous with GDK_SCALE=2. I can see on my display only a part of RT window.

This is how it has to look like.

gaaned92 commented 5 years ago

But it is not that on Hidpi-icons branch!

TooWaBoo commented 5 years ago

But it is not that on Hidpi-icons branch!

I've no idea.

gaaned92 commented 5 years ago

With GDK_SCALE=2

if I start double clicking, the window gets a windows decoration and you have what I posted above: RT window is entirely inside the display.
if I start from a desktop short cut, it doesn't seem to get a windows decoration and RT window is larger than display (this is how it has to look like)

The two branches behaves the same.

Hombre57 commented 5 years ago

@gaaned92 I have a Win10 PC nearby, I'll test myself.

Benitoite commented 5 years ago

@Hombre57 I will test this on mac with non-hidpi screen and GDK_SCALE=2 on your branch. Just have to take care of the dependency on Rust with librsvg first.

Hombre57 commented 5 years ago

@Benitoite @gaaned92 @TooWaBoo The latest commit ensure that it works fine when setting resolution to 200% in Windows7 without setting any GDK_SCALE. It has also been (roughly) tested successfully on Win10.

@gaaned92 When setting the GDK_SCALE environment variable, don't forget to close that window so it takes effect (just in case...)

Benitoite commented 5 years ago

@Hombre57 Test of GDK_SCALE=2 on the hidpi-icons branch (On macOS the variable is export'ed in the exec loader script) screen shot 2019-01-04 at 6 54 12 pm

screen shot 2019-01-04 at 6 54 47 pm

TooWaBoo commented 5 years ago

@Benitoite The scaling of the buttons is correct but the icons are too small. I guess this is an issue with the font size or the base DPI which is 72dpi as far as I know on MacOS. Please, provide your System DPI and RT font size. @Hombre57 It looks like the calculation of the icon size has to be handled different for MacOS.

Benitoite commented 5 years ago

@TooWaBoo TooWaBlue Dark theme on Native resolution (1080p) with font Monaco Regular 9. DPI has no adjustment in macOS, so it is what it is (72p = 1” in GIMP @ 100%)

TooWaBoo commented 5 years ago

@Hombre57 What do think about this solution only for the stock icons? I'm doing a css scaling in rtwindow.cc. Branch hidpi-icons-plus in my fork. A compiled Windows version can be downloaded from here: https://filebin.net/ry0ghkbl3o42w0r9 Cache folder name: RawTherapee-hidpi-icons-plus

grafik

I suggest to replace the colered editor icon with the multi editor icon.

Right now I don't have solution for the the folder list arrow. I don't have access to an individual object in a treeview. 😒

TooWaBoo commented 5 years ago

@Benitoite Thanks @Hombre57 For MacOS the Base DPI has to be changed from 96dpi to 72dpi in the formular. Scaling at 200% on Windows works fine now.

Hombre57 commented 5 years ago

@TooWaBoo Does it mean that Hi-DPI on Mac start at 144dpi ?

I'll test your branch this evening, but it looks to be an acceptable workaround for me, by looking at the result.

@Benitoite At least it looks to work fine with the actual formula :slightly_smiling_face:

Still, I wouldn't mind some test from real Hi-DPI users.

justdanyul commented 5 years ago

I'm on an LG-34WK95U running @ 5120x2160 under Linux + i3wm, so I suppose I fall into the real HiDPI user demographic.

launching with GDK_SCALE=2 set, gives me fairly decent results. However, it seems as it might be colliding a bit with other HiDPI settings, such as my DPI settings in xresources, as the fonts goes absolutely huge. Setting a font size of 4, from within RT, makes for a fairly decent look and feel though.

Benitoite commented 5 years ago

@justdanyul is that testing the hidpi-icons branch, and if so can you make a screenshot or two?

Hombre57 commented 5 years ago

@justdanyul Thanks for the report, but please try without using GDK_SCALE at all, this is used to simulate Hi-DPI on low dpi systems. Could you also start RT from a shell and report back the debug messages ?

justdanyul commented 5 years ago

@Benitoite I don't believe so, this is just using the standard build available in Arch Linux

@Hombre57 running RT from a terminal without using GDK_SCALE yields small icons, and no error messages in the terminal window.

1546718169

TooWaBoo commented 5 years ago

@justdanyul You must use a TooWa... theme

Benitoite commented 5 years ago

... just using the standard build ...

Aha, if you are able @justdanyul, please compile the hidpi-icons branch to test.

Hombre57 commented 5 years ago

@justdanyul ... and set back a font size of 9-11pt.

Benitoite commented 5 years ago

Let's see if any Retina folks can get a screenshot up... https://discuss.pixls.us/t/help-test-rawtherapee-on-retina-4k-etc-hidpi-monitors/10705

justdanyul commented 5 years ago

I build out the hidpi-icons branch, switcthed to a TooWa theme and reset the font size, I've attached a screenshot of my results (note, this tile represents 50% of my screen)

1546720855

The output from the terminal when running RT was

$ ./rawtherapee
RTScalable::init / setDPInScale(scale:1, DPI:150.000)
"Non-Default" font size(10) * scale(1) / fontScale(1.111)
CSS:
* { font-family: Cantarell; font-size: 10pt}

RTWindow::on_configure_event  /  newScale:1  /  newDPI: 150.000
RTWindow::on_configure_event  /  newScale:1  /  newDPI: 150.000
RTWindow::on_configure_event  /  newScale:1  /  newDPI: 150.000

looks fine now. I'm going to un-install now though, as I was just playing with RT to see if I could potentially use it in the future.

I really like the idea of having a history though, between application restarts, so I'm not 100% it's for me. Thanks for the great work you guys are all doing though, and I hope the above + screenshot is helpful

Hombre57 commented 5 years ago

@justdanyul It is helpful, thanks for your feedback.

Benitoite commented 5 years ago

Here’s a few hidpi-icons / TooWa* themed screenshots Claes (from discuss.pixls.us) has sent along:

95381cdd-356d-483c-84d1-19cdeda67e6b

845a5da0-3572-4e50-b4bf-7ff680e81d47

Hombre57 commented 5 years ago

@Benitoite Could you post the original jpeg to filebin please ?

Benitoite commented 5 years ago

@Hombre57 here is the zip of the screenshots https://filebin.net/6vr86rcs3wajlgr7/hiResTest_190106.zip?t=gtns2tzp

Beep6581 / RawTherapee

Scalable graphics - HiDPI #3547