Icon resize

[TooWaBoo]

GTK supports icon resize in css. I made some qick and dirty tests how it looks like. Here comes two extrem examples. Font size 7 Font size 18

But there is a problem. I don't know the font size and DPI. And now my idea.

Set a class at window level (eg. .scale-1, .scale-2, ...) which is the result of font size and DPI. In css do this (code is simplified):

. scale-1 image {-gtk-icon-transform: scale(0.8);}
. scale-2 image {-gtk-icon-transform: scale(0.9);}
.
.
.
. scale-n image {-gtk-icon-transform: scale(2);}

What do think?

[Hombre57]

@TooWaBoo

But there is a problem. I don't know the font size and DPI.

Sorry but I don't understand what you mean. Could you explain what you're trying to do ?

[TooWaBoo]

I want to scale the icons for differnt DPI/font size. Right now the TWB theme scales the buttons but the icons don't scale.

I don't have the information for DPI or font size in css. Setting a class to the window at start time which reperents this informations allowes me to scale the icons.

eg. for 96dpi set a class .scale-1, for 120dpi set a class.scale-2 ...

Run RT with TWB theme and set font size to 18 perhaps you will understand what I mean. Sorry for my bad English. https://discuss.pixls.us/t/rawtherapee-scaling-4k-monitor/8896

[Thanatomanic]

If GTK+ CSS styling works anything like a regular website, there should be a default setting for font-size belonging to the main parent element of RT. You can set that yourself too of course. Ideally, anything else (child elements) can and probably should get relative sizing. I have not checked, but I assume this is already the case?

As for scaling up icons, can you make use of media-queries to determine what kind of display you have, and work from there? See e.g. https://www.html5rocks.com/en/mobile/high-dpi/

[Beep6581]

• All units in GTK+ are logical, including pixels, i.e. a pixel in GTK+ does not necessarily represent a pixel on the screen. One can control scaling in Linux using GDK_SCALE and GDK_DPI_SCALE but regardless how those are set, to GTK+ 12px is 12px.
• The em unit depends on font size, and how many pixels it takes depends on font size and the DPI setting (which is typically 96).
• When using a HiDPI screen, one does not rely on changing the font size, but instead relies on changing the system scale-everything value.

[TooWaBoo]

@Thanatomanic CSS in GTK is very very basic and it doesn't follow the rules of Standard CSS. It's like CSS version 0.1. 😄 There is no media-query or anything like this. You can work with ID's, classes and objects, that's all.

@Hombre57 , @Thanatomanic , @heckflosse , @Beep6581 , @And everyone who is reading this. I've made some test themes with different DPI settings. The theme simulates 96dpi, 120dpi, 144dpi, 168dpi and 192dpi. It works well in font size 8, 9 and 10.

TooWaBlueTest-096dpi-GTK3-20_.css.txt TooWaBlueTest-120dpi-GTK3-20_.css.txt TooWaBlueTest-144dpi-GTK3-20_.css.txt TooWaBlueTest-168dpi-GTK3-20_.css.txt TooWaBlueTest-192dpi-GTK3-20_.css.txt

[Beep6581]

What are you trying to do?

[TooWaBoo]

I want to scale the image depending on the DPI of the system.

[TooWaBoo]

@Beep6581 I've found this at pixl.us https://discuss.pixls.us/t/rt-displayed-images-on-retina-mac-fuzzy/9047/2

I think you are wrong. RT is HiDPI compatible when you use the TWB theme but you must switch off all automatic scaling features in the system. The GUI ist scaled by RT itself to the correct size and all images, photos and icons, won't be scaled. So you don't get a blurry photo preview but the bad thing is that the icons are tiny.

What I'm trying to do here is to scale only the icons to fit in the GUI without scaling the photo. Picture 1: 96dpi no scaling Picture 2: 168dpi only GUI is scalled by RT Picture 3: 168dpi GUI and icons are scalled by RT --- all screenshots are taken with font size 9 --- The photo always looks perfect.

To simulate DPI settings use* {-gtk-dpi: xxx;}and no system scaling features. The test themes above already contain this style for testing. The only reason why I switched from px to em was to make RT HiDPI compatible.

[Beep6581]

RT is HiDPI compatible when you use the TWB theme but you must switch off all automatic scaling features in the system.

Then it's not HiDPI compatible.

The only reason why I switched from px to em was to make RT HiDPI compatible.

px and em are both logical units, they are not screen units. Using em units makes the object they're applied to scale in accordance with the font size, but that is unrelated to HiDPI scaling.

RT's UI already responds to HiDPI scaling correctly, including the RawTherapee theme. What hasn't been done yet is scaling the cairo surfaces (used for the main preview, navigator and thumbnails) by gdk_window_get_scale_factor, and loading a double-sized icon set which I will generate once needed.

[TooWaBoo]

And why do I use "em" when it won't help for HiDPI? If this is true I will go back to "px" thats much easier to handle.

[TooWaBoo]

When I activate scaling in Windows only the font is scaled in RT with the RT theme, no GUI element. In the TWB theme the GUI and font are scaled but no icons. With the test themes above everthing is scaled except the photo and thumbnails.

EDIT: Only at 192dpi (200%) Windows is scaling everything.

Using em units makes the object they're applied to scale in accordance with the font size, but that is unrelated to HiDPI scaling.

Because DPI affects the font size it affects the objects with em units too.

But what we found out is, that in Windows system scaling has not effect on the GUI except the font size.

Now I understand why you Linux guys don't understand what I'm doing or what I'm talking about. 😄

[Hombre57]

@TooWaBoo @Beep6581 Maybe there's a misunderstanding on how Windows works here, you're not talking about the same thing.

Here is a screenshot of Windows with 150% scale, but it's still not HiDPI (and Windows don't talk about DPI here!)

At least Gtk send back an integer value when asking for scale, and it's still 1 in this configuration (see the debug printf for the ThumbnailBrowser).

Windows set a scale factor of 1.5 for its fonts and icons, so should do RT too. Maybe there's an aquivalent on Linux and MacOS too ? Then comes the HiDPI problem which is a connected one but a separate concept for Gtk.

[TooWaBoo]

@Hombre57 , Maybe you are right.

At pixls.us @niccoc1603 is testing the TWB theme on his 4k monitor. Have a look on the screenshot it looks good. He's using the release version of RT, so the latest TWB them is not full combatible. but you can see it works well on HiDPI https://discuss.pixls.us/t/rawtherapee-scaling-4k-monitor/8896/13

[TooWaBoo]

Screenshots from the 4k monitor on Windows 10

[Hombre57]

@TooWaBoo That's what I said : there's 2 concepts. Windows seem to mixes them up in a single combobox. It would be nice if you could use this patch and report the output for the following conditions without your patch applied :

• size = 100%, (GDK_SCALE not set !)
• size = 150%, (GDK_SCALE not set !)
• size = 200%, (GDK_SCALE not set !)
• size = 100%, GDK_SCALE=1
• size = 150%, GDK_SCALE=1
• size = 200%, GDK_SCALE=1
• size = 100%, GDK_SCALE=2
• size = 150%, GDK_SCALE=2
• size = 200%, GDK_SCALE=2

GDK_SCALE can be set in an environment variable.

diff --git a/rtgui/thumbbrowserbase.cc b/rtgui/thumbbrowserbase.cc
index 829aec9..803ca76 100644
--- a/rtgui/thumbbrowserbase.cc
+++ b/rtgui/thumbbrowserbase.cc
@@ -657,6 +657,14 @@
     }
 }

+bool ThumbBrowserBase::Internal::on_configure_event(GdkEventConfigure *configure_event)
+{
+    double screenDPI = get_window()->get_screen()->get_resolution();
+    printf("ThumbBrowserBase::Internal::on_configure_event  /  Scale:%d   StyleScale:%d   X:%d Y:%d W:%d H:%d  /  DPI: %.3f\n",
+            get_scale_factor(), get_style_context()->get_scale(), configure_event->x, configure_event->y, configure_event->width, configure_event->height, (float)screenDPI);
+    return true;
+}
+
 void ThumbBrowserBase::Internal::on_style_updated()
 {
     style = get_style_context ();
diff --git a/rtgui/thumbbrowserbase.h b/rtgui/thumbbrowserbase.h
index d4d7e63..dd63f5b 100644
--- a/rtgui/thumbbrowserbase.h
+++ b/rtgui/thumbbrowserbase.h
@@ -51,6 +51,7 @@
         void setParent (ThumbBrowserBase* p);
         void on_realize();
         void on_style_updated();
+        bool on_configure_event(GdkEventConfigure *configure_event);
         bool on_draw(const ::Cairo::RefPtr< Cairo::Context> &cr);

         Gtk::SizeRequestMode get_request_mode_vfunc () const;

What will be interesting is the Scale and DPI values when using the 200% option, and how Gdk will display the window (twice the size normally) and its graphical elements.

@Beep6581 gave me the x2 RT icon set yesterday. I'll try to find a way to load the correct ones at the correct size depending on the screen's DPI parameter. Windows users have to restart their session for the new size to take affect, but I'm not sure for Linux. If that's not mandatory, RT users may have to restart RT.

[TooWaBoo]

Here it comes: https://filebin.net/y7989mgxh3nrynbd/Test.zip?t=entfipl3 btw. Send me the files instead of a patch, please. I've tried this in the past and it didn't work. I changed it by hand.

no scale is mixed, returns always the correct dpi but images are not scaled when < 200%. At >= 200% it returns 96dpi and images are scaled and blurry. scale 1 returns always the correct dpi but images are not scaled scale 2 returns always 96dpi images are scaled and blurry.

Look at the combobox arrow. I think that's a SVG and it's scaled perfect in any setup.

100% no scale 96dpi

150% no scale 144dpi

200% no scale 96dpi

---

100% scale=1 96dpi

150% scale=1 144dpi

200% scale=1 192dpi

---

100% scale=2 96dpi

150% scale=2 96dpi

200% scale=2 96dpi

[Beep6581]

GDK_SCALE only seems to work in Windows from and including GTK+ 3.22. @TooWaBoo please provide your GTK+ and GTKMM versions.

[TooWaBoo]

GTK+ 3.24.0 Gtkmm: V3.22.2

I've an old RT-version where the titlebar is drawn by RT, not a native window. I guess somthing like GTK+ 3.22 and Gtkmm: V3.22.2. It shows the same behavior.

[Hombre57]

@TooWaBoo @Beep6581

So the situation on Windows is clear :

• Force GDK_SCALE=1
• Rely on the DPI
• Use x1 or [x2 and eventually downscale] to match the DPI

I'd like to have the same kind of test on Linux/GNOME, Gtk3.18 (I'll do it) and Gtk >= 3.22

[TooWaBoo]

@Hombre57 Don't forget the Advaita icons eg. PlacesPaned, filechooser, arrows in menus ...

[Hombre57]

@TooWaBoo I've made several test : Gtk still load the same base icon size for any resolution ! I think I'll have to go to the GNOME IRC... That's a bit non sense to upscale everything but the stock icons.

[TooWaBoo]

@Hombre57 I hope you'll find a solution.

TooWaBlueTest-GTK3-20_.css.txt This theme is modified to handle scaling by the theme or from RT. If you want to test with the TWB theme, use this one, please. Best view in font size 9. It's funny, arrows in comboboxes or menus are scaled in high quality by changing the size of the arrowcontainer. They don't become scaled with -gtk-icon-transform:. Checkout the theme. Theme scalling ist active and simulates 144dpi. If you want to turn it off delete the following lines at the end of the dokument.

.view:not(check):not(radio), image:not(check):not(radio), spinbutton button, cellview {
    -gtk-icon-transform: scale(1.5);
}
* {-gtk-dpi: 144;}

[TooWaBoo]

@Hombre57

I've removed all Adwaita bitmaps and kept only the Adwaita-SVGs. RT is using the SVGs but scales it like 16px bitmaps except the combobox arrow which is excluded from theme scaling and scales with or without theme scaling.

btw: @gaaned92 doesn't deliver the SVGs with his builds.

Screenshots 144dpi (150%), Font size 9, theme scaling on.

[TooWaBoo]

@Hombre57

I've made a test with SVGs. I've modified one button in RT to load an SVG and this works fine. But I can't change anything to the SVG. When I scale it it's scaling like a bitmap - blurry. I've found this on the WEB: https://stackoverflow.com/questions/1851862/scaling-an-image-to-its-parent-button-size-in-gtk and https://developer.gnome.org/pygtk/stable/class-gdkpixbuf.html gtk.gdk.pixbuf_new_from_file_at_size(filename, width, height)

[Hombre57]

@TooWaBoo Please wait few days. I've worked on this today and it's 80% done. As explained by @Beep6581, I'll use x1 icons for 96 dpi screens, and x2 icons for anything above, eventually sized down to keep sharpness.

I'll also integrate your css files once done, and see if I can set the critical part (that deals with dpi) in the code. The RawTherapee theme will have to be updated too, and it'd be nice if someone could do that. Maybe wait for the commit and integration of your theme first.

[TooWaBoo]

I'm waiting. 😄 but think about the SVG, it looks like it can be easy scaled in perfekt quality and at any size during reading the file.

[Hombre57]

Well, how much time would it take to render everything ? Once my patch is committed, it might be interesting to handle a cache where you'll store the icons that RT could generate on first lunch. Though I'm not at this stage now...

[Hombre57]

@TooWaBoo @Beep6581

gtk.gdk.pixbuf_new_from_file_at_size(filename, width, height)

Just for the record : are our scalable icons directly usable with this function or are we supposed to tweak the colors for each file before rendering ?

[TooWaBoo]

@Hombre57 I didn't use this funktion for my test. I only changed the file extension in the code from .png to .svg. The blue color of the RT-SVGs is set in the SVG itself.

This is in the SVG file. style="opacity:0.7;fill:#2a7fff....

[Beep6581]

@Hombre57 the PNG files are cooked, ready to use. The SVG files have a gold-standard color #2A7FFF which gets replaced with the theme color. There are currently two themes:

• dark = #CCCCCC
• light = #252525

Note: the GTK+ devs themselves advised against using SVG icons. And this is a discussion for issue 3547.

[TooWaBoo]

@Hombre57 Anything new.

[Hombre57]

I'm quite busy these days but will work on this again starting from tomorrow.

[Hombre57]

Still working on this, just to let you know. I managed to compile my poo (you'll understand soon), I hope something valuable can emerge out of it.

[TooWaBoo]

@Hombre57 I've tested your "hidpi-icons" branch and it looks really good. One thing I'm missing is, that the font size is not contained in the calculation. The "base em" font size is 9pt (9pt = 12px). The "font multiplier" is calculated by font-size / 9 The whole scaling formular then looks like this: dpi-scale-multiplier * (font-size / 9).

[Hombre57]

Hi @TooWaBoo,

This branch is still under development. I wanted to merge dev into it, so had to commit it.

About the scaling formula, GTK gives me the screen's resolution (DPI), which is not a font size. Gtk take care of scaling the point of the font size based on the new resolution, so I guess that my calculation is correct for the icons.

[TooWaBoo]

@Hombre57 What I mean is, that you have to include the user selected font size in the formular, so the the icon size follows the font size. Font size and icon size should be in sync. e.g. if you are on 96dpi and font size 9pt the icon size is 24px if you change the font size to 12pt the icon size should be 24px (12pt / 9pt) = 32px if you change the font size to 8pt the icon size should be 24px (8pt / 9pt) = 21px

[Hombre57]

@TooWaBoo Ok, I understand your point now, but where should I get the base font size from ?

[TooWaBoo]

The base font size is always 9pt. :-)

[gaaned92]

btw: @gaaned92 doesn't deliver the SVGs with his builds.

I didnt paid attention to that! Do you want I copy the Adwaita/scalable? and in that case, do we still need the png?

[TooWaBoo]

@gaaned92 That's all you need.

[Hombre57]

@TooWaBoo I think I misunderstood you again, you were talking about Options::fontSize I guess. I've added this parameter to the formula, but will commit once that damn Gtk warnings will be solved.

[Hombre57]

Looks like I mixed up issue #4803 and #3547 here...

@TooWaBoo I don't know what you mean by having blurry images @ 196dpi. If you set GTK_SCALE to 1, it will restore the initial font size and icon size, which will then be scaled up by your formula and you'll end up with blurry icons anyway, even for Adwaita ones.

Here is a patch that force GTK_SCALE and compensate the font size. You may need to adapt that to what you want (which I don't completely understand). In the mean time, I'll work on my version of HiDPI (i.e. #3547).

diff --git a/rtgui/main.cc b/rtgui/main.cc
index 6ee4940..c983161 100644
--- a/rtgui/main.cc
+++ b/rtgui/main.cc
@@ -65,6 +65,7 @@
 bool simpleEditor = false;
 bool gimpPlugin = false;
 bool remote = false;
+unsigned char scale = 1;
 Glib::RefPtr<Gtk::CssProvider> cssForced;
 Glib::RefPtr<Gtk::CssProvider> cssRT;
 //Glib::Threads::Thread* mainThread;
@@ -320,18 +321,19 @@
         if (options.fontFamily != "default") {
             //GTK318
             #if GTK_MAJOR_VERSION == 3 && GTK_MINOR_VERSION < 20
-            customStyle = Glib::ustring::compose ("* { font-family: %1; font-size: %2px }\n", options.fontFamily, options.fontSize);
+            customStyle = Glib::ustring::compose ("* { font-family: %1; font-size: %2px }\n", options.fontFamily, options.fontSize * scale);
             #else
-            customStyle = Glib::ustring::compose ("* { font-family: %1; font-size: %2pt }\n", options.fontFamily, options.fontSize);
+            customStyle = Glib::ustring::compose ("* { font-family: %1; font-size: %2pt }\n", options.fontFamily, options.fontSize * scale);
             #endif
             //GTK318
         }

-        if (isTWBTheme && (options.fontSize != 9 || (int)screen->get_resolution() != 96)) {
+        if (isTWBTheme && (options.fontSize != 9 || scale == 2 || (int)screen->get_resolution() != 96)) {
             customStyle += Glib::ustring::compose (
                                ".view:not(check):not(radio), image:not(check):not(radio), spinbutton button,"
                                " cellview {-gtk-icon-transform: scale(calc(( %1/96 ) * ( %2/9 )));}\n",
-                               (int)screen->get_resolution(), options.fontSize);
+                               scale == 1 ? (int)screen->get_resolution() : 192, options.fontSize);
+            printf("Resolution = %d, scale = %d -> %d\n", (int)screen->get_resolution(), scale, scale == 1 ? (int)screen->get_resolution() : 192);
         }

         // Set the font face and size
@@ -484,6 +486,15 @@
     Glib::init();  // called by Gtk::Main, but this may be important for thread handling, so we call it ourselves now
     Gio::init ();

+    const gchar *gscale = g_getenv("GDK_SCALE");
+    if (gscale && gscale[0] == '2') {
+        scale = 2;
+        printf("Echelle actuelle : %s\n", gscale);
+        g_setenv("GDK_SCALE", "1", true);
+        gscale = g_getenv("GDK_SCALE");
+        printf("Nouvelle echelle : %s\n", gscale);
+    }
+
 #ifdef WIN32
     if (GetFileType (GetStdHandle (STD_OUTPUT_HANDLE)) == 0x0003) {
         // started from msys2 console => do not buffer stdout

[EDIT] Have to be applied over twb-autoscaled-icons branch, of course

[TooWaBoo]

@Hombre57 Thanks, the only command I've needed is this: g_setenv("GDK_SCALE", "1", true); 😁 The icons are scaled up, OK, they look a bit blurry, but on a HiDPI monitor you can live with that. The important thing is, that the image and thumbnails are sharp also at 200dpi!!!

I would like to know if this will work on Linux too. You will find it in my fork branch: twb-autoscaled-icons

Screenshot at 192dpi (200%), It doesn't look too bad.

[Hombre57]

@TooWaBoo @Beep6581 This issue is a subtopic of issue #3547, so I'd close it and continue discussion in #3547.