Modify

Opened 16 months ago

Last modified 6 months ago

#15240 new enhancement

transform gui icons to svg

Reported by: Klumbumbus Owned by: team
Priority: major Milestone:
Component: Core Version:
Keywords: svg png icon Cc:

Description (last modified by Klumbumbus)

Since we have an icon scaling on hidpi screens now (ticket:9995#comment:110) it would be nice to transform all icons to svg. Preset icons are already all svg (#13357)

Here are the current numbers: 60 svg icons and 270 png icons. This statistic excludes the folders images/presets, images/icons (only potlatch icons), our logo (which exists 6 times as png versions additionally to svg) and two special cases (lambert maps).

svg:

png:

I think we could ask the osm community for help on this subject.

There are two possibilities:

  • transform the 270 png to svg
  • create a whole new icon set with an consistent look

For the second, there was already such an (not fully complete) dataset, see JOSM themes:






progress since creation of this ticket:

https://docs.google.com/spreadsheets/d/e/2PACX-1vTerX1bI5UhTzyxaK3NyyvnaQp6YvaqjFcn6AbvhMUFfjrEUnEjyYetQMAYtQ0SQ5_GipVbMucQ0tVn/pubchart

Attachments (45)

png_icons.png (161.2 KB) - added by Klumbumbus 16 months ago.
svg_icons.png (22.8 KB) - added by Klumbumbus 16 months ago.
black-red.jpg (5.6 KB) - added by Don-vip 16 months ago.
blue-red.jpg (6.4 KB) - added by Don-vip 16 months ago.
monochrome.jpg (4.9 KB) - added by Don-vip 16 months ago.
standart.jpg (5.1 KB) - added by Don-vip 16 months ago.
statusline-svg.patch (2.2 KB) - added by floscher 11 months ago.
Proposal for SVG icons for the status line
statusline.gif (53.3 KB) - added by floscher 11 months ago.
Animated comparison between the statusline icons (current and proposed)
statusline-before.png (1.4 KB) - added by floscher 11 months ago.
Current appearance of the statusline icons
statusline-after.png (1.2 KB) - added by floscher 11 months ago.
Proposed appearance of the statusline icons
anglesnap.svg (552 bytes) - added by floscher 8 months ago.
alignline.svg (443 bytes) - added by floscher 8 months ago.
black_x.svg (200 bytes) - added by floscher 8 months ago.
Replacement for misc/black_x.png
green_check.svg (477 bytes) - added by floscher 8 months ago.
Replacement for misc/green_check.png
green_check.2.svg (484 bytes) - added by floscher 8 months ago.
Replacement for misc/green_check.png
246png.png (152.2 KB) - added by Klumbumbus 8 months ago.
separator.svg (218 bytes) - added by floscher 8 months ago.
Replacement for preferences/separator.png
closedway.svg (311 bytes) - added by anonymous 8 months ago.
Replacement for data/closedway.png
multipolygon.svg (527 bytes) - added by floscher 8 months ago.
Replacement for data/multipolygon.png
node.svg (246 bytes) - added by floscher 8 months ago.
Replacement for data/node.png
sequence.svg (876 bytes) - added by floscher 8 months ago.
Replacement for data/sequence.png
way.svg (287 bytes) - added by floscher 8 months ago.
Replacement for data/way.png
separator.2.svg (225 bytes) - added by floscher 8 months ago.
Replacement for data/sequence.png
aligncircle.svg (326 bytes) - added by floscher 8 months ago.
Replacement for aligncircle.png
taginfo.svg (292 bytes) - added by floscher 8 months ago.
Replacement for dialogs/taginfo.png
aligncircle.2.svg (327 bytes) - added by floscher 8 months ago.
New version for aligncircle.png
apply.svg (485 bytes) - added by floscher 8 months ago.
Replacement for apply.png
gray_check.svg (485 bytes) - added by floscher 8 months ago.
Replacement for misc/gray_check.png
ti_jochen.png (101.2 KB) - added by stoecker 7 months ago.
TagInfo image from Jochen Topf
taginfo_preview.png (2.1 KB) - added by Don-vip 7 months ago.
taginfo.2.svg (615 bytes) - added by floscher 7 months ago.
Updated TagInfo logo with more contrast
taginfo_preview2.png (3.9 KB) - added by floscher 7 months ago.
Preview of the context menu with TagInfo logo
rectangle.svg (211 bytes) - added by floscher 7 months ago.
normal.svg (243 bytes) - added by floscher 7 months ago.
crosshair.2.svg (221 bytes) - added by floscher 7 months ago.
crosshair.svg (221 bytes) - added by floscher 7 months ago.
select_add.svg (446 bytes) - added by floscher 7 months ago.
selection.svg (384 bytes) - added by floscher 7 months ago.
select_node.svg (443 bytes) - added by floscher 7 months ago.
select_node_add.svg (505 bytes) - added by floscher 7 months ago.
select_node_remove.svg (487 bytes) - added by floscher 7 months ago.
select_remove.svg (428 bytes) - added by floscher 7 months ago.
select_way.svg (512 bytes) - added by floscher 7 months ago.
select_way_add.svg (574 bytes) - added by floscher 7 months ago.
select_way_remove.svg (556 bytes) - added by floscher 7 months ago.

Download all attachments as: .zip

Change History (120)

Changed 16 months ago by Klumbumbus

Attachment: png_icons.png added

Changed 16 months ago by Klumbumbus

Attachment: svg_icons.png added

comment:1 Changed 16 months ago by Don-vip

Keywords: svg png icon added
Priority: normalmajor

comment:2 Changed 16 months ago by Klumbumbus

Description: modified (diff)

comment:3 in reply to:  description Changed 16 months ago by Don-vip

Replying to Klumbumbus:

For the second, there was already such an (not fully complete) dataset, see JOSM themes. Sadly the links and screenshoots in the forum are no longer available. Maybe we could recover them.

I remember very well. Felis was one of the finalists for the LogoContest and he almost won. It was really a hard thing to choose between the two final designs. I love what he did, too bad we can't have two logos :D

I just sent him an e-mail to let it know about this ticket.

comment:4 Changed 16 months ago by Felis Pimeja

FYI, as long as Dropbox has changed sharing mechanics, theme files are now available at:

https://drive.google.com/file/d/0BzTaubB85qV2cEFPcnA2UTBZbG8/view?usp=sharing

And I'm searching for the source files now.

comment:5 Changed 16 months ago by bastiK

Our current icons are partly based on the Tango icon theme, which has an svg set. See also GNOME set (based on Tango) with icons for download, delete and others.

comment:6 in reply to:  4 Changed 16 months ago by bastiK

Replying to Felis Pimeja:

FYI, as long as Dropbox has changed sharing mechanics, theme files are now available at:

https://drive.google.com/file/d/0BzTaubB85qV2cEFPcnA2UTBZbG8/view?usp=sharing

And I'm searching for the source files now.

Wow, it's pretty good! I like the black-red color scheme.

Changed 16 months ago by Don-vip

Attachment: black-red.jpg added

Changed 16 months ago by Don-vip

Attachment: blue-red.jpg added

Changed 16 months ago by Don-vip

Attachment: monochrome.jpg added

Changed 16 months ago by Don-vip

Attachment: standart.jpg added

comment:7 Changed 16 months ago by Don-vip

Description: modified (diff)

comment:8 Changed 16 months ago by Don-vip

See also new default theme for Gnome 3: https://git.gnome.org/browse/adwaita-icon-theme/

comment:9 Changed 16 months ago by stoecker

The colorschemes like black-red do look good, but in my eyes they aren't good as the standard design. This should still be colorful (when possible with a bit more unified style :-).

comment:10 Changed 15 months ago by bastiK

How to move forward?

I noticed that some of the vector icons don't scale well down to very small sizes:

Current download icon (24x24px):
https://josm.openstreetmap.de/export/7668/josm/trunk/images/download.png
Scalable image, rendered at 48x48 px:
https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Gnome-document-save.svg/48px-Gnome-document-save.svg.png
Scalable image, rendered at 24x24 px
https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Gnome-document-save.svg/24px-Gnome-document-save.svg.png

Just replacing the current download.png by download.svg would be nice for HiDPI users, but clearly is a loss in image quality for everyone else. My conclusion so far is that some scalable images are designed with a certain minimum size in mind and will just look bad when scaled below that limit. This affects some icons more than others, the undo/redo image scales fine for example.

Possible solutions:

  • Find svg icons that scale well to 24x24 px (and decently well to 16x16 px for the menus).
  • Ship both the 24x24px "pixel art" and the .svg and use whatever image is better suited.

comment:11 in reply to:  10 ; Changed 11 months ago by Don-vip

Replying to bastiK:

Possible solutions:

  • Find svg icons that scale well to 24x24 px (and decently well to 16x16 px for the menus).
  • Ship both the 24x24px "pixel art" and the .svg and use whatever image is better suited.

I don't think we will succeed to find good SVG icons scalable to small sizes. It's already difficult enough to find a SVG version. This leaves only the second option.

comment:12 in reply to:  11 ; Changed 11 months ago by stoecker

Replying to Don-vip:

Replying to bastiK:

Possible solutions:

  • Find svg icons that scale well to 24x24 px (and decently well to 16x16 px for the menus).
  • Ship both the 24x24px "pixel art" and the .svg and use whatever image is better suited.

I don't think we will succeed to find good SVG icons scalable to small sizes. It's already difficult enough to find a SVG version. This leaves only the second option.

  • Change the icons, so that the vanishing elements (usually some sort of boundaries) are wider, so they don't vanish.

E.g. see point 7 here: ​https://www.creativebloq.com/how-to/10-golden-rules-for-responsive-svgs

comment:13 in reply to:  12 ; Changed 11 months ago by bastiK

Replying to stoecker:

Replying to Don-vip:

Replying to bastiK:

Possible solutions:

  • Find svg icons that scale well to 24x24 px (and decently well to 16x16 px for the menus).
  • Ship both the 24x24px "pixel art" and the .svg and use whatever image is better suited.

I don't think we will succeed to find good SVG icons scalable to small sizes. It's already difficult enough to find a SVG version. This leaves only the second option.

  • Change the icons, so that the vanishing elements (usually some sort of boundaries) are wider, so they don't vanish.

E.g. see point 7 here: ​https://www.creativebloq.com/how-to/10-golden-rules-for-responsive-svgs

This is more the job of a graphics designer that that of a programmer. Take the download icon posted above as an example: How can you modify the SVG without loss of quality in either the 24 px (top) or the 48 px rendering?

Anyway, if we implement option 2, it is still possible to improve the SVGs one by one, as suggested.

comment:14 in reply to:  13 Changed 11 months ago by stoecker

This is more the job of a graphics designer that that of a programmer. Take the download icon posted above as an example: How can you modify the SVG without loss of quality in either the 24 px (top) or the 48 px rendering?

Anyway, if we implement option 2, it is still possible to improve the SVGs one by one, as suggested.

Sure.

But the option 2 means a workaround which again will live MANY years. I personally would rather accept slightly worse low-zoom icons than another workaround.

comment:15 Changed 11 months ago by stoecker

P.S. We already had 24x24 menu icons. Maybe default simply should be 30x30 nowadays even for normal screens?

Changed 11 months ago by floscher

Attachment: statusline-svg.patch added

Proposal for SVG icons for the status line

Changed 11 months ago by floscher

Attachment: statusline.gif added

Animated comparison between the statusline icons (current and proposed)

comment:16 Changed 11 months ago by floscher

I propose to replace the icons in the statusline with SVG versions.
Below you see a comparison between the current icons (PNG, 18×18 pixels, scaled to 180×180), then how my proposed SVG icons look when converted to a 18×18 raster image scaled up to 180×180 pixels. And finally how the SVG icons look as 180×180 pixel image.
Animated comparison between the statusline icons (current and proposed)
(https://josm.openstreetmap.de/attachment/ticket/15240/statusline-svg.patch is the corresponding patch)

Changed 11 months ago by floscher

Attachment: statusline-before.png added

Current appearance of the statusline icons

Changed 11 months ago by floscher

Attachment: statusline-after.png added

Proposed appearance of the statusline icons

comment:17 Changed 11 months ago by floscher

Before:
Current appearance of the statusline icons
After:
Proposed appearance of the statusline icons

comment:18 Changed 11 months ago by stoecker

In 13363/josm:

see #15240 replace statusline png icons with svg variants by floscher, set mime-types for many images

comment:19 Changed 11 months ago by stoecker

No need to do such a impressive presentation. :) The new images and a before/after is enough. We plan to replace all PNG images anyway.

comment:20 Changed 11 months ago by Don-vip

Nice! thank you :)

comment:21 Changed 11 months ago by Hb---

References to the old PNG-files are still used in the wiki, please see https://josm.openstreetmap.de/wiki/Help/StatusBar
Wiki has been updated.

Last edited 11 months ago by Hb--- (previous) (diff)

comment:22 Changed 11 months ago by bastiK

In 13375/josm:

see #15240 - replace image for geoimage layer with svg version (from Tango icon project)

comment:23 Changed 11 months ago by stoecker

In 13376/josm:

see #15240 - set proper mime-type

comment:24 Changed 8 months ago by Klumbumbus

some icons replaced in #16159

Changed 8 months ago by floscher

Attachment: anglesnap.svg added

Changed 8 months ago by floscher

Attachment: alignline.svg added

Changed 8 months ago by floscher

Attachment: black_x.svg added

Replacement for misc/black_x.png

Changed 8 months ago by floscher

Attachment: green_check.svg added

Replacement for misc/green_check.png

Changed 8 months ago by floscher

Attachment: green_check.2.svg added

Replacement for misc/green_check.png

comment:25 Changed 8 months ago by floscher

Here are four more:
https://josm.openstreetmap.de/export/13612/josm/trunk/images/anglesnap.png
https://josm.openstreetmap.de/export/13612/josm/trunk/images/alignline.png
https://josm.openstreetmap.de/export/13612/josm/trunk/images/misc/black_x.png Replacement for misc/black_x.png
https://josm.openstreetmap.de/export/13612/josm/trunk/images/misc/green_check.png Replacement for misc/green_check.png

By the way: Can the icons dialogs/valid https://josm.openstreetmap.de/export/13612/josm/trunk/images/dialogs/valid.png and misc/check_large https://josm.openstreetmap.de/export/13612/josm/trunk/images/misc/check_large.png also be replaced by the checkmark above or is there a need for three different green checkmarks?

comment:26 Changed 8 months ago by stoecker

In 13613/josm:

see #15240 - new SVG icons

comment:27 Changed 8 months ago by stoecker

I didn't replace misc/check_large. It is used in the upload dialog and I'd say it looks better there than the boxy green_check.

comment:28 Changed 8 months ago by Klumbumbus

interim result: 246 png icons left :)

Changed 8 months ago by Klumbumbus

Attachment: 246png.png added

comment:29 Changed 8 months ago by stoecker

Hmm, are sure that's right? The green check is svg and the large is missing and some icons are in two sizes and 3 blue checkmarks?

comment:30 Changed 8 months ago by stoecker

BTW The WMS/TMS related icons are all ugly.

Better ones would be fine.

comment:31 Changed 8 months ago by Klumbumbus

It seems you accidently moved the large green check to nodist instead of source:trunk/images/misc/green_check.png.

comment:32 Changed 8 months ago by Klumbumbus

in the screenshot I scaled all icons to 24px. multiple icons appear when there are different sizes available, e.g. source:trunk/images/imagery_menu.pngsource:trunk/images/imagery_small.pngsource:trunk/images/preferences/imagery.png source:trunk/images/dialogs/validator.pngsource:trunk/images/layer/validator_small.pngsource:trunk/images/preferences/validator.png

should be unified when replayed by svg

comment:33 Changed 8 months ago by Klumbumbus

Code of the screenshot. Can be used here in wiki with comment preview feature. (But takes a bit to load all images which is why I made the screenshot)

[[Image(source:trunk/images/addmarkers.png,24)]][[Image(source:trunk/images/aligncircle.png,24)]][[Image(source:trunk/images/apply.png,24)]][[Image(source:trunk/images/bug.png,24)]][[Image(source:trunk/images/cancel.png,24)]][[Image(source:trunk/images/clock.png,24)]][[Image(source:trunk/images/closechangeset.png,24)]][[Image(source:trunk/images/colorchooser.png,24)]][[Image(source:trunk/images/combineway.png,24)]][[Image(source:trunk/images/converttogpx.png,24)]][[Image(source:trunk/images/converttoosm.png,24)]][[Image(source:trunk/images/copy.png,24)]][[Image(source:trunk/images/distribute.png,24)]][[Image(source:trunk/images/download-overpass.png,24)]][[Image(source:trunk/images/download.png,24)]][[Image(source:trunk/images/downloadalongtrack.png,24)]][[Image(source:trunk/images/downloadprimitive.png,24)]][[Image(source:trunk/images/download_in_view.png,24)]][[Image(source:trunk/images/duplicate.png,24)]][[Image(source:trunk/images/exit.png,24)]][[Image(source:trunk/images/expert.png,24)]][[Image(source:trunk/images/exportgpx.png,24)]][[Image(source:trunk/images/eye.png,24)]][[Image(source:trunk/images/help.png,24)]][[Image(source:trunk/images/imagery_menu.png,24)]][[Image(source:trunk/images/imagery_small.png,24)]][[Image(source:trunk/images/importaudio.png,24)]][[Image(source:trunk/images/info.png,24)]][[Image(source:trunk/images/java.png,24)]][[Image(source:trunk/images/joinnodeway.png,24)]][[Image(source:trunk/images/movenode.png,24)]][[Image(source:trunk/images/movenodeontoway.png,24)]][[Image(source:trunk/images/new.png,24)]][[Image(source:trunk/images/note_search.png,24)]][[Image(source:trunk/images/ok.png,24)]][[Image(source:trunk/images/open.png,24)]][[Image(source:trunk/images/openlocation.png,24)]][[Image(source:trunk/images/openrecent.png,24)]][[Image(source:trunk/images/paste.png,24)]][[Image(source:trunk/images/pastetags.png,24)]][[Image(source:trunk/images/preference.png,24)]][[Image(source:trunk/images/purge.png,24)]][[Image(source:trunk/images/redo.png,24)]][[Image(source:trunk/images/reorder.png,24)]][[Image(source:trunk/images/restart.png,24)]][[Image(source:trunk/images/save.png,24)]][[Image(source:trunk/images/save_as.png,24)]][[Image(source:trunk/images/simplify.png,24)]][[Image(source:trunk/images/splitway.png,24)]][[Image(source:trunk/images/undo.png,24)]][[Image(source:trunk/images/unglueways.png,24)]][[Image(source:trunk/images/updatedata.png,24)]][[Image(source:trunk/images/upload.png,24)]][[Image(source:trunk/images/uploadselection.png,24)]][[Image(source:trunk/images/view-fullscreen-revert.png,24)]][[Image(source:trunk/images/view-fullscreen.png,24)]][[Image(source:trunk/images/warning-small.png,24)]][[Image(source:trunk/images/wayflip.png,24)]][[Image(source:trunk/images/cursor/crosshair.png,24)]][[Image(source:trunk/images/cursor/hand.png,24)]][[Image(source:trunk/images/cursor/normal.png,24)]][[Image(source:trunk/images/cursor/rotate.png,24)]][[Image(source:trunk/images/cursor/scale.png,24)]][[Image(source:trunk/images/cursor/modifier/addnode.png,24)]][[Image(source:trunk/images/cursor/modifier/add_node_lock.png,24)]][[Image(source:trunk/images/cursor/modifier/create_note.png,24)]][[Image(source:trunk/images/cursor/modifier/delete.png,24)]][[Image(source:trunk/images/cursor/modifier/delete_node.png,24)]][[Image(source:trunk/images/cursor/modifier/delete_segment.png,24)]][[Image(source:trunk/images/cursor/modifier/delete_way_node_only.png,24)]][[Image(source:trunk/images/cursor/modifier/delete_way_normal.png,24)]][[Image(source:trunk/images/cursor/modifier/delete_way_only.png,24)]][[Image(source:trunk/images/cursor/modifier/joinnode.png,24)]][[Image(source:trunk/images/cursor/modifier/joinway.png,24)]][[Image(source:trunk/images/cursor/modifier/lock.png,24)]][[Image(source:trunk/images/cursor/modifier/mode.png,24)]][[Image(source:trunk/images/cursor/modifier/move.png,24)]][[Image(source:trunk/images/cursor/modifier/parallel.png,24)]][[Image(source:trunk/images/cursor/modifier/parallel_add.png,24)]][[Image(source:trunk/images/cursor/modifier/parallel_remove.png,24)]][[Image(source:trunk/images/cursor/modifier/rectangle.png,24)]][[Image(source:trunk/images/cursor/modifier/rectangle_move.png,24)]][[Image(source:trunk/images/cursor/modifier/rectangle_plus.png,24)]][[Image(source:trunk/images/cursor/modifier/rectangle_plussmall.png,24)]][[Image(source:trunk/images/cursor/modifier/rope.png,24)]][[Image(source:trunk/images/cursor/modifier/selection.png,24)]][[Image(source:trunk/images/cursor/modifier/select_add.png,24)]][[Image(source:trunk/images/cursor/modifier/select_node.png,24)]][[Image(source:trunk/images/cursor/modifier/select_node_add.png,24)]][[Image(source:trunk/images/cursor/modifier/select_node_remove.png,24)]][[Image(source:trunk/images/cursor/modifier/select_remove.png,24)]][[Image(source:trunk/images/cursor/modifier/select_way.png,24)]][[Image(source:trunk/images/cursor/modifier/select_way_add.png,24)]][[Image(source:trunk/images/cursor/modifier/select_way_remove.png,24)]][[Image(source:trunk/images/cursor/modifier/zoom.png,24)]][[Image(source:trunk/images/data/closedway.png,24)]][[Image(source:trunk/images/data/error.png,24)]][[Image(source:trunk/images/data/key.png,24)]][[Image(source:trunk/images/data/multipolygon.png,24)]][[Image(source:trunk/images/data/node.png,24)]][[Image(source:trunk/images/data/object.png,24)]][[Image(source:trunk/images/data/other.png,24)]][[Image(source:trunk/images/data/purge.png,24)]][[Image(source:trunk/images/data/relation.png,24)]][[Image(source:trunk/images/data/sequence.png,24)]][[Image(source:trunk/images/data/user.png,24)]][[Image(source:trunk/images/data/warning.png,24)]][[Image(source:trunk/images/data/way.png,24)]][[Image(source:trunk/images/dialogs/add.png,24)]][[Image(source:trunk/images/dialogs/addrelation.png,24)]][[Image(source:trunk/images/dialogs/add_tms.png,24)]][[Image(source:trunk/images/dialogs/add_wms.png,24)]][[Image(source:trunk/images/dialogs/add_wmts.png,24)]][[Image(source:trunk/images/dialogs/bookmark-new.png,24)]][[Image(source:trunk/images/dialogs/bookmark.png,24)]][[Image(source:trunk/images/dialogs/centreview.png,24)]][[Image(source:trunk/images/dialogs/commandstack.png,24)]][[Image(source:trunk/images/dialogs/conflict.png,24)]][[Image(source:trunk/images/dialogs/delete.png,24)]][[Image(source:trunk/images/dialogs/down.png,24)]][[Image(source:trunk/images/dialogs/downloadincomplete.png,24)]][[Image(source:trunk/images/dialogs/duplicatelayer.png,24)]][[Image(source:trunk/images/dialogs/edit.png,24)]][[Image(source:trunk/images/dialogs/filter.png,24)]][[Image(source:trunk/images/dialogs/fix.png,24)]][[Image(source:trunk/images/dialogs/history.png,24)]][[Image(source:trunk/images/dialogs/layerlist.png,24)]][[Image(source:trunk/images/dialogs/mappaintpreference.png,24)]][[Image(source:trunk/images/dialogs/mergedown.png,24)]][[Image(source:trunk/images/dialogs/minimap.png,24)]][[Image(source:trunk/images/dialogs/movedown.png,24)]][[Image(source:trunk/images/dialogs/moveup.png,24)]][[Image(source:trunk/images/dialogs/next.png,24)]][[Image(source:trunk/images/dialogs/pin.png,24)]][[Image(source:trunk/images/dialogs/previous.png,24)]][[Image(source:trunk/images/dialogs/refresh.png,24)]][[Image(source:trunk/images/dialogs/relationlist.png,24)]][[Image(source:trunk/images/dialogs/search.png,24)]][[Image(source:trunk/images/dialogs/select.png,24)]][[Image(source:trunk/images/dialogs/selectionlist.png,24)]][[Image(source:trunk/images/dialogs/settings.png,24)]][[Image(source:trunk/images/dialogs/showhide.png,24)]][[Image(source:trunk/images/dialogs/sort.png,24)]][[Image(source:trunk/images/dialogs/sort_below.png,24)]][[Image(source:trunk/images/dialogs/taginfo.png,24)]][[Image(source:trunk/images/dialogs/up.png,24)]][[Image(source:trunk/images/dialogs/uploadproperties.png,24)]][[Image(source:trunk/images/dialogs/userlist.png,24)]][[Image(source:trunk/images/dialogs/validator.png,24)]][[Image(source:trunk/images/dialogs/zoom-best-fit.png,24)]][[Image(source:trunk/images/dialogs/zoomin.png,24)]][[Image(source:trunk/images/dialogs/zoomout.png,24)]][[Image(source:trunk/images/dialogs/autoscale/conflict.png,24)]][[Image(source:trunk/images/dialogs/autoscale/data.png,24)]][[Image(source:trunk/images/dialogs/autoscale/download.png,24)]][[Image(source:trunk/images/dialogs/autoscale/layer.png,24)]][[Image(source:trunk/images/dialogs/autoscale/next.png,24)]][[Image(source:trunk/images/dialogs/autoscale/previous.png,24)]][[Image(source:trunk/images/dialogs/autoscale/problem.png,24)]][[Image(source:trunk/images/dialogs/autoscale/selection.png,24)]][[Image(source:trunk/images/dialogs/conflict/useallleft.png,24)]][[Image(source:trunk/images/dialogs/conflict/useallright.png,24)]][[Image(source:trunk/images/dialogs/geoimage/deletefromdisk.png,24)]][[Image(source:trunk/images/dialogs/geoimage/gpx2img.png,24)]][[Image(source:trunk/images/dialogs/geoimage/photo-marker-selected.png,24)]][[Image(source:trunk/images/dialogs/geoimage/photo-marker.png,24)]][[Image(source:trunk/images/dialogs/geoimage/togglegit.png,24)]][[Image(source:trunk/images/dialogs/layerlist/active-pressed.png,24)]][[Image(source:trunk/images/dialogs/layerlist/active.png,24)]][[Image(source:trunk/images/dialogs/layerlist/blank.png,24)]][[Image(source:trunk/images/dialogs/layerlist/colorfulness.png,24)]][[Image(source:trunk/images/dialogs/layerlist/eye-off.png,24)]][[Image(source:trunk/images/dialogs/layerlist/eye-pressed.png,24)]][[Image(source:trunk/images/dialogs/layerlist/eye-translucent.png,24)]][[Image(source:trunk/images/dialogs/layerlist/eye.png,24)]][[Image(source:trunk/images/dialogs/layerlist/gamma.png,24)]][[Image(source:trunk/images/dialogs/layerlist/offset.png,24)]][[Image(source:trunk/images/dialogs/layerlist/sharpness.png,24)]][[Image(source:trunk/images/dialogs/layerlist/transparency.png,24)]][[Image(source:trunk/images/dialogs/layerlist/visibility.png,24)]][[Image(source:trunk/images/dialogs/mappaint/pencil.png,24)]][[Image(source:trunk/images/dialogs/mappaint/pl2_small.png,24)]][[Image(source:trunk/images/dialogs/notes/note_closed.png,24)]][[Image(source:trunk/images/dialogs/notes/note_comment.png,24)]][[Image(source:trunk/images/dialogs/notes/note_new.png,24)]][[Image(source:trunk/images/dialogs/notes/note_open.png,24)]][[Image(source:trunk/images/dialogs/relation/arrowdown.png,24)]][[Image(source:trunk/images/dialogs/relation/arrowup.png,24)]][[Image(source:trunk/images/dialogs/relation/downloadincomplete.png,24)]][[Image(source:trunk/images/dialogs/relation/downloadincompleteselected.png,24)]][[Image(source:trunk/images/dialogs/relation/reverse.png,24)]][[Image(source:trunk/images/dialogs/relation/roundabout_left_tiny.png,24)]][[Image(source:trunk/images/dialogs/relation/roundabout_right_tiny.png,24)]][[Image(source:trunk/images/dialogs/relation/roundedcorners.png,24)]][[Image(source:trunk/images/help/home.png,24)]][[Image(source:trunk/images/help/internet.png,24)]][[Image(source:trunk/images/help/next.png,24)]][[Image(source:trunk/images/help/previous.png,24)]][[Image(source:trunk/images/layer/gpx_small.png,24)]][[Image(source:trunk/images/layer/marker_small.png,24)]][[Image(source:trunk/images/layer/osmdata_small.png,24)]][[Image(source:trunk/images/layer/validator_small.png,24)]][[Image(source:trunk/images/mapmode/addnote.png,24)]][[Image(source:trunk/images/mapmode/addsegment.png,24)]][[Image(source:trunk/images/mapmode/adjustimg.png,24)]][[Image(source:trunk/images/mapmode/delete.png,24)]][[Image(source:trunk/images/mapmode/improvewayaccuracy.png,24)]][[Image(source:trunk/images/mapmode/playheaddrag.png,24)]][[Image(source:trunk/images/mapmode/rope.png,24)]][[Image(source:trunk/images/mapmode/zoom.png,24)]][[Image(source:trunk/images/mapmode/extrude/dualalign.png,24)]][[Image(source:trunk/images/mapmode/extrude/extrude.png,24)]][[Image(source:trunk/images/mapmode/move/move.png,24)]][[Image(source:trunk/images/mapmode/node/autonode.png,24)]][[Image(source:trunk/images/markers/audio-tracer.png,24)]][[Image(source:trunk/images/markers/Bridge.png,24)]][[Image(source:trunk/images/markers/Crossing.png,24)]][[Image(source:trunk/images/markers/photo.png,24)]][[Image(source:trunk/images/markers/speech.png,24)]][[Image(source:trunk/images/markers/web.png,24)]][[Image(source:trunk/images/misc/buttonhide.png,24)]][[Image(source:trunk/images/misc/buttonshow.png,24)]][[Image(source:trunk/images/misc/close.png,24)]][[Image(source:trunk/images/misc/gray_check.png,24)]][[Image(source:trunk/images/misc/green_check.png,24)]][[Image(source:trunk/images/misc/grey_x.png,24)]][[Image(source:trunk/images/misc/minimized.png,24)]][[Image(source:trunk/images/misc/normal.png,24)]][[Image(source:trunk/images/misc/rectangle.png,24)]][[Image(source:trunk/images/misc/sticky.png,24)]][[Image(source:trunk/images/preferences/activate-down.png,24)]][[Image(source:trunk/images/preferences/activate-right.png,24)]][[Image(source:trunk/images/preferences/advanced.png,24)]][[Image(source:trunk/images/preferences/audio.png,24)]][[Image(source:trunk/images/preferences/connection.png,24)]][[Image(source:trunk/images/preferences/display.png,24)]][[Image(source:trunk/images/preferences/imagery.png,24)]][[Image(source:trunk/images/preferences/map.png,24)]][[Image(source:trunk/images/preferences/plugin.png,24)]][[Image(source:trunk/images/preferences/remotecontrol.png,24)]][[Image(source:trunk/images/preferences/reset.png,24)]][[Image(source:trunk/images/preferences/separator.png,24)]][[Image(source:trunk/images/preferences/shortcuts.png,24)]][[Image(source:trunk/images/preferences/toolbar.png,24)]][[Image(source:trunk/images/preferences/validator.png,24)]][[Image(source:trunk/images/statusline/name.png,24)]]

comment:34 in reply to:  31 Changed 8 months ago by stoecker

Replying to Klumbumbus:

It seems you accidently moved the large green check to nodist instead of source:trunk/images/misc/green_check.png.

Ooops. Can someone please fix this before next build?

comment:35 Changed 8 months ago by Klumbumbus

could be a meme: JOSM user level expert: knows the difference between the upload icon and the upload selection icon
source:trunk/images/upload.pngsource:trunk/images/uploadselection.png

Last edited 8 months ago by Klumbumbus (previous) (diff)

comment:36 Changed 8 months ago by Klumbumbus

In 13615/josm:

see #15240 - fix moved icons

comment:37 in reply to:  35 Changed 8 months ago by Don-vip

Replying to Klumbumbus:

could be a meme: JOSM user level expert: knows the difference between the upload icon and the upload selection icon
source:trunk/images/upload.pngsource:trunk/images/uploadselection.png

hahaha :D

Changed 8 months ago by floscher

Attachment: separator.svg added

Replacement for preferences/separator.png

Changed 8 months ago by anonymous

Attachment: closedway.svg added

Replacement for data/closedway.png

Changed 8 months ago by floscher

Attachment: multipolygon.svg added

Replacement for data/multipolygon.png

Changed 8 months ago by floscher

Attachment: node.svg added

Replacement for data/node.png

Changed 8 months ago by floscher

Attachment: sequence.svg added

Replacement for data/sequence.png

Changed 8 months ago by floscher

Attachment: way.svg added

Replacement for data/way.png

Changed 8 months ago by floscher

Attachment: separator.2.svg added

Replacement for data/sequence.png

Changed 8 months ago by floscher

Attachment: aligncircle.svg added

Replacement for aligncircle.png

Changed 8 months ago by floscher

Attachment: taginfo.svg added

Replacement for dialogs/taginfo.png

comment:38 Changed 8 months ago by floscher

And some more:
https://josm.openstreetmap.de/export/13612/josm/trunk/images/preferences/separator.pngReplacement for data/sequence.png
https://josm.openstreetmap.de/export/13612/josm/trunk/images/data/closedway.pngReplacement for data/closedway.png
https://josm.openstreetmap.de/export/13612/josm/trunk/images/data/multipolygon.pngReplacement for data/multipolygon.png
https://josm.openstreetmap.de/export/13612/josm/trunk/images/data/node.pngReplacement for data/node.png
https://josm.openstreetmap.de/export/13612/josm/trunk/images/data/sequence.pngReplacement for data/sequence.png
https://josm.openstreetmap.de/export/13612/josm/trunk/images/data/way.pngReplacement for data/way.png
https://josm.openstreetmap.de/export/13612/josm/trunk/images/dialogs/taginfo.pngReplacement for dialogs/taginfo.png
https://josm.openstreetmap.de/export/13612/josm/trunk/images/aligncircle.pngReplacement for aligncircle.png

The last one I changed, because the line around really should be the circle (I think), not the ways connecting the nodes. So I changed the color (if you want some other color, we could change it). And I made the points more irregular to emphasize that the nodes are not evenly distributed around a circle, but only moved to the closest point on a circle.

comment:39 Changed 8 months ago by stoecker

Hmm. taginfo does still not look nice. It's the website favicon, but looks ugly. Adding the world logo from the website behind the ti?

comment:40 in reply to:  39 Changed 8 months ago by anonymous

Replying to stoecker:

Hmm. taginfo does still not look nice. It's the website favicon, but looks ugly. Adding the world logo from the website behind the ti?

Don't know if that would work at this resolution (16x16). Probably has to be something simpler.

comment:41 Changed 8 months ago by Don-vip

Maybe just frame it with something like https://png.icons8.com/metro/50/000000/note.png

comment:42 Changed 8 months ago by stoecker

Or let the t look a bit like a "tag"?

comment:43 Changed 8 months ago by stoecker

https://www.google.de/search?q=icon+tag
They all have a hole inside.
Or simply such a tag with an i or ti inside. When we have something better we'd need to ask Jochen if he likes it.

comment:44 Changed 8 months ago by Klumbumbus

Or we pixel align the current taginfo icon a bit to make it look a bit sharper.

Regarding https://josm.openstreetmap.de/export/13612/josm/trunk/images/aligncircle.pngReplacement for aligncircle.png I agree that there should be a circle in the icon instead of a pentagon to better illustrate the align in circle action. However the irregular pattern destroys this illustration again a bit in my opinion. And if you select a way and hit O then the nodes are indeed evenly distributed. The thin light green is pretty hard to recognize on a light background too.

Currently Help/Action/AlignInCircle and Help/Action/CreateCircle use the same icon. While the align action works on single nodes too, the create action always creates a way, so probably the black way lines shouldn't be removed from the create action icon.

My suggestion (but I didn't test how it looks): a circle and even distributed nodes for both icons; for the create action the circle is black and for the align action grey or another color (but a bit darker than the light green).

Changed 8 months ago by floscher

Attachment: aligncircle.2.svg added

New version for aligncircle.png

comment:45 Changed 8 months ago by floscher

Here's my draft for an alternative TagInfo logo:
Updated TagInfo logo with more contrast

And another version of aligncircle: New version for aligncircle.png.

@Klumbumbus: Actually it depends on what you select if the nodes distribute equally around the circle: When selecting a way, they do. When selecting only the nodes, they do not distribute evenly around the circle. I thought they were always only jumping to their nearest position on the circle, but it seems to be more complicated.
Anyway, I now changed the icon to show evenly distributed nodes, also for aesthetic reasons. Also the color is now grey. I think a second version in black would be too much, especially because they are too similar… Not that in the end your joke about the download icons really becomes a meme 😉

comment:46 in reply to:  45 ; Changed 8 months ago by stoecker

Replying to floscher:

Here's my draft for an alternative TagInfo logo:

I contacted Jochen and asked for his opinion.

comment:47 Changed 8 months ago by stoecker

In 13630/josm:

see #15240 - new SVG icons made by floscher

Changed 8 months ago by floscher

Attachment: apply.svg added

Replacement for apply.png

comment:48 Changed 8 months ago by Klumbumbus

(replacement for gray_check.png source:trunk/images/misc/gray_check.png can be derived from the green and blue one too)

Changed 8 months ago by floscher

Attachment: gray_check.svg added

Replacement for misc/gray_check.png

comment:49 Changed 8 months ago by floscher

You might consider renaming gray_check.svg to grey_check.svg. Next to it there is the file grey_x.png, which uses the other spelling.

comment:50 Changed 7 months ago by Hb---

On Plugins the images /browser/trunk/images/misc/black_x.png and ../green_check.png are missing now.

They are placed by a script in the last column to indicate if a plugin needs a restart. The alt parameters for the images are localized. This script needs to be modified.

Replacing the former PNG images with their SVG counterparts will make the page display in the Help Browser worse, because that Browser can't properly resize images currently. Simple characters like ✓ and ✕ may give the same information.

comment:51 in reply to:  50 ; Changed 7 months ago by Klumbumbus

Did someone fix this already? The icons are displayed fine for me. (I remember that i fixed wiki:JavaBugs and wiki:OldJavaBugs 5 weeks ago and I think that the Plugins page was already working fine a that point.)

Replying to Hb---:

Replacing the former PNG images with their SVG counterparts will make the page display in the Help Browser worse, because that Browser can't properly resize images currently.

That shouldn't be a problem anyway in this case as these two icons have a small base size and shouldn't be resized.

Last edited 7 months ago by Klumbumbus (previous) (diff)

comment:52 in reply to:  51 Changed 7 months ago by stoecker

Replying to Klumbumbus:

Did someone fix this already?

Yes.

comment:53 Changed 7 months ago by Don-vip

In 13832/josm:

fix #5603, see #5256, see #15240 - add first/last buttons for geoimage dialog. Fixed shortcuts. Switch to SVG icons taken from https://commons.wikimedia.org/wiki/GNOME_Desktop_icons#Navigation

comment:54 Changed 7 months ago by Don-vip

In 13837/josm:

see #15240 - convert more GNOME icons to SVG versions. Taken from https://commons.wikimedia.org/wiki/Category:GNOME_Desktop_icons

comment:55 Changed 7 months ago by Klumbumbus

duplicate icons:
source:trunk/images/help/previous.svgsource:trunk/images/dialogs/previous.svg
source:trunk/images/help/next.svgsource:trunk/images/dialogs/next.svg

Last edited 7 months ago by Klumbumbus (previous) (diff)

comment:56 Changed 7 months ago by Don-vip

In 13844/josm:

see #15240 - remove duplicated icons

comment:57 in reply to:  46 Changed 7 months ago by Don-vip

Replying to stoecker:

I contacted Jochen and asked for his opinion.

any news?

comment:58 Changed 7 months ago by Don-vip

Another thing: the icon warnings scripts says bookmark.svg is not used, but it is:

        static ImageIcon getDefaultIcon() {
            return ImageProvider.get("dialogs", "bookmark", ImageSizes.SMALLICON);
        }

Changed 7 months ago by stoecker

Attachment: ti_jochen.png added

TagInfo image from Jochen Topf

comment:59 Changed 7 months ago by stoecker

TagInfo image from Jochen Topf

Jochen sent me this image which he also uses (which is to large for our purpose), but didn't answer whether he likes or does not like the small icon.

I'd say we simply use floscher's icon in JOSM.

comment:60 Changed 7 months ago by stoecker

In 13857/josm:

see #15240 - detect another type of ImageProvider calls for in image check script

Changed 7 months ago by Don-vip

Attachment: taginfo_preview.png added

comment:61 Changed 7 months ago by Don-vip

It's nice but the contrast should be increased, it's hard to view the tag on grey background:


Changed 7 months ago by floscher

Attachment: taginfo.2.svg added

Updated TagInfo logo with more contrast

Changed 7 months ago by floscher

Attachment: taginfo_preview2.png added

Preview of the context menu with TagInfo logo

comment:62 Changed 7 months ago by floscher

Should now be better:
Updated TagInfo logo with more contrast
Preview of the context menu with TagInfo logo

comment:63 Changed 7 months ago by Don-vip

In 13860/josm:

see #15240 - use new taginfo icon (by floscher)

comment:64 Changed 7 months ago by Klumbumbus

In 13862/josm:

see #15240 - new SVG icons made by floscher

comment:65 Changed 7 months ago by Klumbumbus

In 13863/josm:

see #15240 - add svg mime type

Changed 7 months ago by floscher

Attachment: rectangle.svg added

Changed 7 months ago by floscher

Attachment: normal.svg added

comment:66 Changed 7 months ago by floscher

Replacements for some icons in the directory images/cursor/modifier:
https://josm.openstreetmap.de/export/13870/josm/trunk/images/cursor/modifier/rectangle.png
https://josm.openstreetmap.de/export/13870/josm/trunk/images/cursor/modifier/select_add.png
https://josm.openstreetmap.de/export/13870/josm/trunk/images/cursor/modifier/selection.png
https://josm.openstreetmap.de/export/13870/josm/trunk/images/cursor/modifier/select_node.png
https://josm.openstreetmap.de/export/13870/josm/trunk/images/cursor/modifier/select_node_add.png
https://josm.openstreetmap.de/export/13870/josm/trunk/images/cursor/modifier/select_node_remove.png
https://josm.openstreetmap.de/export/13870/josm/trunk/images/cursor/modifier/select_remove.png
https://josm.openstreetmap.de/export/13870/josm/trunk/images/cursor/modifier/select_way.png
https://josm.openstreetmap.de/export/13870/josm/trunk/images/cursor/modifier/select_way_add.png
https://josm.openstreetmap.de/export/13870/josm/trunk/images/cursor/modifier/select_way_remove.png

As well as these two in images/cursor:
https://josm.openstreetmap.de/export/13870/josm/trunk/images/cursor/crosshair.png
https://josm.openstreetmap.de/export/13870/josm/trunk/images/cursor/normal.png

Last edited 7 months ago by Don-vip (previous) (diff)

Changed 7 months ago by floscher

Attachment: crosshair.2.svg added

Changed 7 months ago by floscher

Attachment: crosshair.svg added

comment:67 Changed 7 months ago by Don-vip

In 13871/josm:

see #15240 - switch 12 cursor icons to SVG (by floscher)

comment:68 Changed 7 months ago by Klumbumbus

Did you accidently not pixel align the red node symbols at these three icons?

https://josm.openstreetmap.de/export/13870/josm/trunk/images/cursor/modifier/select_node.png
https://josm.openstreetmap.de/export/13870/josm/trunk/images/cursor/modifier/select_node_add.png
https://josm.openstreetmap.de/export/13870/josm/trunk/images/cursor/modifier/select_node_remove.png

Changed 7 months ago by floscher

Attachment: select_add.svg added

Changed 7 months ago by floscher

Attachment: selection.svg added

Changed 7 months ago by floscher

Attachment: select_node.svg added

Changed 7 months ago by floscher

Attachment: select_node_add.svg added

Changed 7 months ago by floscher

Attachment: select_node_remove.svg added

Changed 7 months ago by floscher

Attachment: select_remove.svg added

Changed 7 months ago by floscher

Attachment: select_way.svg added

Changed 7 months ago by floscher

Attachment: select_way_add.svg added

Changed 7 months ago by floscher

Attachment: select_way_remove.svg added

comment:69 in reply to:  68 Changed 7 months ago by floscher

Replying to Klumbumbus:

Did you accidently not pixel align the red node symbols at these three icons?

https://josm.openstreetmap.de/export/13870/josm/trunk/images/cursor/modifier/select_node.png
https://josm.openstreetmap.de/export/13870/josm/trunk/images/cursor/modifier/select_node_add.png
https://josm.openstreetmap.de/export/13870/josm/trunk/images/cursor/modifier/select_node_remove.png

Yes, good catch, thank you! I corrected the icons. And I also made a small modification to the other select-modifiers, which shouldn't change the appearance in JOSM, but in some image viewing programs (e.g. Gimp) the dashed line should display correctly.

comment:70 Changed 7 months ago by Klumbumbus

In 13874/josm:

see #15240 - update 9 SVG icons made by floscher, add svg mime type

comment:71 Changed 7 months ago by Don-vip

@bastiK @michael2402 The test MapCSSRendererTest.testRender[area-fill-image] is both failing and slower on Jenkins since r13862, could you please have a look? Surprisingly the test is OK on my machine.

comment:72 Changed 7 months ago by Klumbumbus

Description: modified (diff)

add progress chart to ticket description, little motivation ;)

comment:73 in reply to:  71 Changed 6 months ago by Don-vip

@bastiK @michael2402

up? Is the test failing for you?

comment:74 Changed 6 months ago by Don-vip

In 13904/josm:

see #15240 - drop png suffix in renderer unit tests

comment:75 Changed 6 months ago by Don-vip

In 13909/josm:

see #15240 - update renderer unit test reference image

Modify Ticket

Change Properties
Set your email in Preferences
Action
as new The owner will remain team.
as The resolution will be set.
to The owner will be changed from team to the specified user.
The owner will change to Klumbumbus
as duplicate The resolution will be set to duplicate.The specified ticket will be cross-referenced with this ticket
The owner will be changed from team to anonymous.

Add Comment


E-mail address and name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.