Blurred icons - Githubissues

crojack commented 2 months ago

Some of the Shutter icons are crisp and clear and some are blurred. Can you please tell me what I need to change (in the source code?) to fix this problem?

Cheers,

Screenshot_2024-09-09_22-50-51

Photon89 commented 2 months ago

The icons on the left panel are very small pixel graphics (22x22px), those in the menu on the right are vector graphics with 48x48px which could be set to a higher resolution. On the top panel are icons from your icon theme, which obviously have a higher resolution already. We'd need bigger icons for the left panel, I guess. Maybe other icons because the ones we currently have also behave badly on dark GTK themes.

crojack commented 2 months ago

The icons on the left panel are very small pixel graphics (22x22px), those in the menu on the right are vector graphics with 48x48px which could be set to a higher resolution. On the top panel are icons from your icon theme, which obviously have a higher resolution already. We'd need bigger icons for the left panel, I guess. Maybe other icons because the ones we currently have also behave badly on dark GTK themes.

The icons you see on the left panel are 48X48 vector graphics I created for Shutter just to see if the problem was related to the pixel graphics icons.

The icons on the right panel are original Shutter 48x48 vector graphics icons which should be clear and crisp. And why wouldn't they be when the icons on the top panel from the system theme are also vector icons and have the same 48x48 resolution?

I seems to me that Shutter's annotation editor has a problem with icon resizing.

crojack commented 2 months ago

Anyone? Any idea why the ToolBarDrawing icons in the Shutter's built in annotation tool are blurred/pixelated? I've tried to replace them with vector icons (svg) and even with high quality png icons but nothing's changed.

Photon89 commented 2 months ago

It's all in /usr/share/shutter/resources/modules/Shutter/Draw/UIManager.pm. We are using this class in line 62: https://docs.gtk.org/gtk3/class.IconFactory.html No idea where the blurriness comes from yet, though...

Photon89 commented 2 months ago

Actually, it says

Creates a new GtkIconSet with pixbuf as the default/fallback source image. If you don’t add any additional GtkIconSource to the icon set, all variants of the icon will be created from pixbuf, using scaling, pixelation, etc. as required to adjust the icon size or make the icon look insensitive/prelighted.

at https://docs.gtk.org/gtk3/ctor.IconSet.new_from_pixbuf.html Possibly this pixelation and scaling adjustments make the icons blurry.

Photon89 commented 2 months ago

Since this class is deprecated, maybe we can switch to https://docs.gtk.org/gtk3/class.IconTheme.html and use add_resource_path to add our custom icons which are not part of GTK themes.

crojack commented 2 months ago

Would it be possible to make Shutter annotation tool use system icon theme instead by replacing this:

sub _create_factory {
my $self = shift;

my $factory = Gtk3::IconFactory->new;

$factory->add( 'shutter-ellipse',
    Gtk3::IconSet->new_from_pixbuf( Gtk3::Gdk::Pixbuf->new_from_file( $self->dicons . '/draw-ellipse.png' ) ) );

etc.

with

sub _create_factory {
my $self = shift;

my $factory = Gtk3::IconFactory->new;

$factory->add('shutter-ellipse',
    Gtk3::Image->new_from_icon_name('draw-ellipse', 'large-toolbar'));

etc.

in UIManager.pm ?

crojack commented 2 months ago

So, everything is in UIManager.pm. Thanks for your help. :)

Photon89 commented 2 months ago

I think, this won't work for all icons because some of them just aren't available from GTK themes. Like the pixelation or the numbering buttons.

crojack commented 2 months ago

Doing some progress. Fixed main toolbar. Replaced the pixelated pointer icon with a vector (svg) one.

Changed the code in Toolbar.pm to this:

#button selection
#--------------------------------------
my $image_select;
if ($icontheme->has_icon('select-area')) {
    $image_select = Gtk3::Image->new_from_icon_name('select-area', 'large-toolbar');
} else {
    $image_select = Gtk3::Image->new_from_pixbuf(Gtk3::Gdk::Pixbuf->new_from_file_at_size("$shutter_root/share/shutter/resources/icons/select-area.svg", $self->{_shf}->icon_size('large-toolbar')));
}
$self->{_select} = Gtk3::ToolButton->new($image_select, $d->get("Selection"));
$self->{_select}->set_is_important(TRUE);
$self->{_select}->set_tooltip_text($d->get("Draw a rectangular capture area with your mouse\nto select a specified screen area"));

#--------------------------------------

And now the selection icon looks crisp and clear.

Screenshot_2024-09-13_14-24-19

crojack commented 2 months ago

ToolBarDrawing with some random vector icons. It looks much better than the old one with the pixelated png ones.

toolbar_drawing_with-vector_icons

Photon89 commented 2 months ago

Nice! Now we just need to find some highres or vector icons for the various buttons!

crojack commented 1 month ago

Nice! Now we just need to find some highres or vector icons for the various buttons!

Creating some nice icons is not a problem at all. I'll do that. The problem is that I am not able to load custom svg (vector) icons, so I'll need your help.

Here is what I've found out so far.

Icons on the Shutter's main toolbar (loaded via /shutter-master/share/shutter/resources/modules/Shutter/App/Toolbar.pm) can be easily changed to different custom vector (svg icons). No need to use only gtk- ones.

maintoolbar

Icons on the Shutter Drawing Tool main toolbar are all gtk- stock vector (svg) icons, so no problem here as long as we don't want to use custom vector icons.

drawingtool-maintoolbar

The problem is still with the Shutter Drawing Tool vertical drawing toolbar icons.

If I use create_factory method in UIManager.pm it's possible to load custom vector (svg) icons but they are as blurred as the png ones.

If I remove completely create_factory from the UIManager.pm and change the name of the icons in the _create_drawing_actions to gtk- stock ones, then the gtk- vector icons show up crisp and clear. The problem is that there aren't any gtk- stock icons we can use for our drawing actions.

If I change the name of the icons in the create_drawing_actions (UIManager.pm) to any other icons than gtk- stock icons then the icons don't show up at all and the buttons are completely blank.

If I use:

sub _load_custom_icons { my $self = shift;

my $icon_theme = Gtk3::IconTheme::get_default();
$icon_theme->append_search_path('~/.local/share/icons');
$icon_theme->append_search_path('/usr/share/icons');

$icon_theme->rescan_if_needed();

}

and this:

sub _create_drawing_actions { my $self = shift; my $icon_theme = Gtk3::IconTheme::get_default();

my @drawing_actions = (
    [   "Select",
        $icon_theme->has_icon('shutter-select') ? 'shutter-select' : 'gtk-ok',
        $self->gettext->get("Select"),
        "<alt>0",
        $self->gettext->get("Select item to move or resize it"),
        10
    ],
    # ... repeat for other actions ...
);

return \@drawing_actions;

}

then only gtk-ok icon shows up, and all other buttons are blank.

What am I doing wrong?

Photon89 commented 1 month ago

Creating some nice icons is not a problem at all. I'll do that.

That would be great! In case, you really tackle this, please have a look at #382 first, people have problems with our currently used icons and it would be great, if they could be solved!

The problem is that I am not able to load custom svg (vector) icons, so I'll need your help.

Unfortunately, I'll be super busy at work for at least another week, so I cannot do any research on this topic immediately, but did you try this: https://github.com/shutter-project/shutter/issues/700#issuecomment-2344992579 ?

crojack commented 1 month ago

So frustrating. I wrote a small simple-test.pl script to test whether the custom icons would load or not. As you can see it they load perfectly sharp.

simple-test

But when I compile Shutter with the modified UIManager.pl the custom svg icons don't show up.

That's why I need your help. I am not a programmer and I am pretty clueless when it comes to perl programming.

Photon89 commented 1 month ago

I am not a programmer and I am pretty clueless when it comes to perl programming.

Sounds familiar, that's how I ended up in the Shutter team. :smile:

But when I compile Shutter with the modified UIManager.pl the custom svg icons don't show up.

You could try to add debug output to the line where the icons should be loaded in UIManager.pl, then see if there are any useful warnings or errors around. Something like

print "\n\n\n Here we are trying to load the icons but it does not work. \n\n\n"

But that's just an idea from a person who is clueless when it comes to perl prorgramming himself. Maybe @DarthGandalf has further ideas!

Thanks for spending so much time and effort trying to fix this issue!

P.S.: Really nice icons you created there!

crojack commented 1 month ago

P.S.: Really nice icons you created there!

They have to be more consistent and also useful in dark themes.

Something like this maybe:

Screenshot from 2024-10-17 05-22-54

Screenshot from 2024-10-17 05-22-26

Photon89 commented 1 month ago

To be honest, I liked the colorful icons more, they are visible on both light and dark GTK themes and don't include a white background which looks a bit ugly on dark GTK themes.

Maybe just make the icons for shapes like arrow, ellipse or rectangle red (since this is the default color for them as well) to make the icons well visible on light and dark GTK themes?

crojack commented 1 month ago

Again, the icons are not the problem, the problem is that we can't load svg icons into the toolbar_drawing without them being blurry and pixelated.

Photon89 commented 1 month ago

Absolutely, I just wanted to comment on the icons as you posted some screenshots!

Regarding the actual issue, did you try adding print lines to find the output lines of interest among the hundreds of irrelevant lines that Shutter prints easier?

DarthGandalf commented 1 month ago

Looking at this code, I noticed that it uses lots of outdated Gtk functions: GtkUIManager, GtkActionGroup.

Basically, the whole UI of the draw tool need to be replumbed to either GtkBuilder or creating the objects directly in perl. That would remove the limitation you found with svgs

crojack commented 1 month ago

So, if I understand correctly, that would mean that UIManager.pl is obsolete as well and the whole UI code should be moved...where? DrawingTool.pl?

Why not create a whole new annotation application based on the Shutter's DrawingTool? We really don't have a real annotation tool for Linux. Neither Shutter's DrawingTool nor Ksnip can draw polygons and bent/arched arrows and lines. MacOS' Preview can do that. Now I have to do more complex annotations in Inkscape, which sucks for many reasons.

DarthGandalf commented 1 month ago

So, if I understand correctly, that would mean that UIManager.pl is obsolete as well and the whole UI code should be moved...where? DrawingTool.pl?

For example, yes.

In the prototype I started for Rust/Gtk4 port a while ago (and never finished), I've put that to a separate xml file: https://github.com/shutter-project/shutter-rust/blob/master/resources/editorwindow.ui but this XML is a different format from GtkUIManager's one.

Why not create a whole new annotation application based on the Shutter's DrawingTool?

That would be nice

crojack commented 3 weeks ago

So, if I understand correctly, that would mean that UIManager.pl is obsolete as well and the whole UI code should be moved...where? DrawingTool.pl?

For example, yes.

In the prototype I started for Rust/Gtk4 port a while ago (and never finished), I've put that to a separate xml file: https://github.com/shutter-project/shutter-rust/blob/master/resources/editorwindow.ui but this XML is a different format from GtkUIManager's one.

Why not create a whole new annotation application based on the Shutter's DrawingTool?

That would be nice

The UI code has been moved to the Annotator.pl (DrawingTool), which should be a separate application. No need to open Shutter screenshot application/tool in order to make annotations on some images. Not all images are screenshots.
All the Annotator (DrawingTool) toolbar icons are now custom svg vector icons, they don't depend anymore on GTK stock icons. Users can now have their Annotator/DrawingTool custom icons wherever they want them to be.
Annotator/DrawingTool loads images centered now. It looks much better, especially when we zoom in/out images.
Implementing now the polygon drawing function.
Need to add Fill color, Stroke color, Line width and Font to the Drawing Toolbar. Temporarily implemented Select Drawing Color.

Screenshot from 2024-10-31 05-00-20

The new Annotator/DrawingTool should have only two toolbars, both horizontal:

Screenshot from 2024-10-31 05-04-17

This is the old one with the vertical Drawing Toolbar, blurred png icons, and image loaded at the left side:

Screenshot from 2024-10-31 05-26-19

Photon89 commented 3 weeks ago

Woah, nice! I'd like to open the discussion with some feedback from my perspective.

Things I like a lot about the new prototype:

It's a standalone app, a long requested feature. This allows to address #542, #579 and #682.
The image is centered.
The icons look fantastic and many of them should be visible on high res screens and dark backgrounds as well, which allows to address #367, #382, #578 and #674.
The "Zoom Fit Best" button, very useful!

Things that I'd like to mention to possibly reconsider:

I liked the old toolbar placement more. It clearly separates the three different toolbars (file actions on the top, tool selection on the left, tool customization on the bottom) while in the new prototype tool selection and customization are grouped in one toolbar. The old toolbar placement also saves vertical space (which might be more valuable than horizontal space on wide screen monitors). Finally, currently the two horizontal toolbars have different total widths (the upper one is wider than the lower one).
I liked the fact that the old file actions toolbar used stock GTK icons, because this way the look better integrates into the rest of the desktop. Of course, for actions that don't have suiting stock icons it is necessary to use custom icons, but for common actions I'd rather stick to the stock icons for consistency reasons.
The icon for the automatic numbering tool is currently just a "1" which might be misleading. When I first saw it, I thought that you added a new tool for number fields (similar to text fields). A "1" inside a circle (otherwise keeping the icon's style) would better represent what the tool is doing, in my opinion.
Some of the icons might still be a bit tricky to discern on dark backgrounds, in particular the five tools for drawing (arrow, line etc.). I don't have a good solution though. Maybe make them red instead of black?

Also, a question: the menu bar (File, Edit, Tools, View) is gone now. This removes some export options and the copy/cut/paste options. Also, if it will be a standalone app, it'd need a Help/Info menu, I think. Is it intended or did you just not take care of it so far?

Overall, I really like the new prototype! Thanks for spending so much time and effort working on it!

crojack commented 3 weeks ago

I'm glad you like some of the suggested solutions. I'm mostly looking forward to finally having an annotation application in Linux that can draw polygons, curved/arched & dotted lines and arrows.

annotation

Here are my thoughts:

1. Toolbars placement & width

We should let users to decide where to place the toolbars. Top, bottom, right or left. One or all of the toolbars. Also, we should let users decide how wide the toolbars are. I have a 32" monitor, I use HiDPI and my toolbars will always be wider and bigger than for users who use small laptop screens with a 1366 x 768 pixel resolution.

I disagree about the three separate toolbars but I understand that the third one is probably necessary when your drawing toolbar is placed on the left or right side. From a usability point of view, it's better to have the Fill colour, Stroke colour, Line width and Font settings buttons on the drawing toolbar rather than at the bottom on the status bar. Whether you use the keyboard or the mouse pointer. It's all up there and you don't have to jump from toolbar to toolbar.

2. Main toolbar and stock GTK icons

Yeah, GTK should be default, but let users decide what kind of icons they want

3. Numbering tool

I agree that the icon in the screenshot is not optimal, but that's only temporary.

4. Dark themes

Agreed. The icons should be designed so that they are all equally visible when dark themes are used. They should be either all coloured or all grey (symbolic).

5. Menu bar

There will be a menu bar.

DarthGandalf commented 3 weeks ago

With lots of tools being added, please don't fall into a feature creep mode

crojack commented 1 week ago