Blurred icons

[crojack]

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,

[Photon89]

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]

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]

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]

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]

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]

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]

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]

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

[Photon89]

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]

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.

[crojack]

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

[Photon89]

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

[crojack]

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.

1. 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.

2. 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.

3. 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]

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: #700 (comment) ?

[crojack]

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.

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]

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. 😄

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]

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

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

Something like this maybe:

[Photon89]

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]

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]

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]

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]

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]

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]

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

1. 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.
2. 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.
3. Annotator/DrawingTool loads images centered now. It looks much better, especially when we zoom in/out images.
4. Implementing now the polygon drawing function.
5. Need to add Fill color, Stroke color, Line width and Font to the Drawing Toolbar. Temporarily implemented Select Drawing Color.

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

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

[Photon89]

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

Things I like a lot about the new prototype:

1. It's a standalone app, a long requested feature. This allows to address Add command line option to start editor directly (was: How to start shutter editor from CLI?) #542, How to invoke the shutter drawing tool directly from command line #579 and [request] Opening from command line straight into edit mode in a maximized Shutter #682.
2. The image is centered.
3. The icons look fantastic and many of them should be visible on high res screens and dark backgrounds as well, which allows to address Edit window's toolbar with dark system theme is indiscernible  #367, In Edit, can't make out most icons on dark theme and high res screen #382, Shutter editor icons are almost invisible in dark theme Desktop Environment #578 and Toolbars too small on my screen. #674.
4. The "Zoom Fit Best" button, very useful!

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

1. 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).
2. 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.
3. 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.
4. 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]

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.

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]

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

[crojack]

1. Added menus
2. Implemented draw_double_arrow (double-headed arrow)
3. Still thinking about the toolbars' layout

[crojack]

Different themes:

[Photon89]

This looks damn nice! 😃 👍

[crojack]

This looks damn nice! 😃 👍

Thanks :)

Implemented bended/curved/arched lines & arrows. Apart from polygons this is what I use a lot for my football analysis.

[crojack]

arrowsandlines.mp4

[crojack]

This Perl application is 86.3 Kb. Perl rocks. Polygon drawing not perfect yet but usable.

polygon.mp4

[crojack]

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

1. 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 implemented both. Default is with all toolbars at the top:

In the View menu you can chose to hide the main toolbar and to move the drawing toolbar to the left:

And here is how it looks like with the drawing toolbar on the left (like the original Shutter's DrawingTool). The difference is that all toolbar icons can be replaced with the clear and crisp svg icons (no more blurriness), we have now dashed and dotted lines arrows etc., bended/curved lines and arrows, polygons, text written/drawn and edited directly on the image, custom icon themes for the toolbars, position changing for the drawing toolbar and hiding for the main toolbar, semitransparency and blurriness that reflect loaded images' color (if possible):

---

What's new:

• dashed and dotted lines for all primitives
• resizable numbered circle (I think it shouldn't be an ellipse) with the same selection handles like the other primitives
• polygons (triangles and tetragons)

This is how I like the UI most (with the main toolbar hidden):

---

To do:

• text almost done, it's now drawn and edited directly on the image
• pentagon, freehand, highlighter, pixelize, censor/erase and crop
• keyboard shortcuts
• importing any svg image on top of the loaded image
• implementing semi-transparency, bluriness and color reflection from the loaded image via custom css (I hope all of this is possible, lmao)
• resolution dependent optimization like scaling down images when editing and display-resolution-aware rendering
• custom icon themes for toolbars

---

The application is now huge and has 107.3 Kb. ;)