organicmaps/organicmaps-tmp

Archived

Fork 1

Improve icons graphical consistency #3940

New issue

Open

opened 2022-11-21 15:39:57 +00:00 by dvdmrtnz · 10 comments

dvdmrtnz commented

2022-11-21 15:39:57 +00:00

Contributor

Some things that I noticed that could be improved:

Hairdresser could get a purple background instead of grey
Taxi icon is currently using a grey background, instead of the squared blue of the rest of the transport icons
Camping should get a brown icon, the same as the rest of the accommodations
Dentist should be red, same as other health icons
Outdoors icons have a mix of grey round backgrounds and icons without background
Most of the icons use a "filled in" style, however, some of them are just "outlines" without fill (for example stationery or sweets)

I think we can improve the graphical consistency of the POI icons in Organic Maps. So I created a wiki page to look at all the icons on a single view (https://github.com/organicmaps/organicmaps/wiki/Icons). I have tried to group the icons by type to get a better sense of all the styles used. Some things that I noticed that could be improved: - [x] Hairdresser could get a purple background instead of grey - [x] Taxi icon is currently using a grey background, instead of the squared blue of the rest of the transport icons - [x] Camping should get a brown icon, the same as the rest of the accommodations - [x] Dentist should be red, same as other health icons - [x] Outdoors icons have a mix of grey round backgrounds and icons without background - [ ] Most of the icons use a "filled in" style, however, some of them are just "outlines" without fill (for example stationery or sweets)

👍 13

not-available-username commented

2022-12-02 20:32:19 +00:00

(Migrated from github.com)

~~I tried to create two alternatives for the pay parking wich is unclear imho, but I'm not sure that the icons are big enough to be noticed, I must make the coins bigger if this design could work.~~

new icon below

~~I tried to create two alternatives for the pay parking wich is unclear imho, but I'm not sure that the icons are big enough to be noticed, I must make the coins bigger if this design could work.~~ new icon below

biodranik commented

2022-12-02 21:03:47 +00:00

(Migrated from github.com)

It's easy to test: render 18x18 pixels icon and recognize it.

euf commented

2022-12-02 21:33:08 +00:00

(Migrated from github.com)

Actually, its a little bit more complicated. SVG size in px gets scaled 0.75 to become mdpi (@1 on iOS), 0.75×1.5=1.125 to become hdpi, 0.75×2=1.5 to become xhdpi (@2 on iOS). So it goes like this:

sixe in px		1x	1.5x	2x	3x
	svg	mdpi	hdpi	xhdpi	xxhdpi
small (e.g. `airport-s`)	16	12	18	24	36
regular (e.g. `airport-m`)	24	18	27	36	54

Actually, its a little bit more complicated. SVG size in px gets scaled 0.75 to become mdpi (@1 on iOS), 0.75×1.5=1.125 to become hdpi, 0.75×2=1.5 to become xhdpi (@2 on iOS). So it goes like this: | sixe in px | | 1x | 1.5x | 2x | 3x | |---|---|---|---|---|---| | | svg | mdpi | hdpi | xhdpi | xxhdpi | | small (e.g. `airport-s`) | 16 | 12 | 18 | 24 | 36 | | regular (e.g. `airport-m`) | 24 | 18 | 27 | 36 | 54 |

👍 1

not-available-username commented

2022-12-04 16:39:11 +00:00

(Migrated from github.com)

Actually, its a little bit more complicated. SVG size in px gets scaled 0.75 to become mdpi (@1 on iOS), 0.75×1.5=1.125 to become hdpi, 0.75×2=1.5 to become xhdpi (@2 on iOS). So it goes like this:
sixe in px 1x 1.5x 2x 3x
svg mdpi hdpi xhdpi xxhdpi
small 16 12 18 24 36
medium 20 15 23 30 45
large 24 18 27 36 54
test 32 24 36 48 72

Every icon should be tested at 16x16 pixel? I guess that most of the current icons are not much readable at that size. It would be nice to be able to resize the icons, like it's currently possible with fonts.

> Actually, its a little bit more complicated. SVG size in px gets scaled 0.75 to become mdpi (@1 on iOS), 0.75×1.5=1.125 to become hdpi, 0.75×2=1.5 to become xhdpi (@2 on iOS). So it goes like this: > sixe in px 1x 1.5x 2x 3x > svg mdpi hdpi xhdpi xxhdpi > small 16 12 18 24 36 > medium 20 15 23 30 45 > large 24 18 27 36 54 > test 32 24 36 48 72 Every icon should be tested at 16x16 pixel? I guess that most of the current icons are not much readable at that size. It would be nice to be able to resize the icons, like it's currently possible with fonts.

euf commented

2022-12-05 08:13:06 +00:00

(Migrated from github.com)

Sorry, my initial comment had a mistake. I updated it to avoid further misleading. What I meant was that your icon is supposed to be on 24x24 SVG canvas. Then it would be correctly rendered as 18x18px for mdpi, 27x27px for hdpi and so on.

not-available-username commented

2022-12-05 14:05:08 +00:00

(Migrated from github.com)

I think that nothing with a P and a symbol can be big enough to be clearly visible, but a different icon can hint that is a different parking and tapping on the icon will clarify.

I think that nothing with a P and a symbol can be big enough to be clearly visible, but a different icon can hint that is a different parking and tapping on the icon will clarify. ![parking_pay-m](https://user-images.githubusercontent.com/92886370/205656293-70b96cde-a78a-461a-bbb1-380fd015759d.svg)

dvdmrtnz commented

2022-12-05 18:05:41 +00:00

Author

Contributor

I think cave, mountain-pass, peak and volcano symbols should use the same color as the rest of the outdoors icons.

👍 3

dvdmrtnz commented

2022-12-05 18:30:43 +00:00

Author

Contributor

Also, I noticed that there are some icons that are in the symbols folder but are not used in the app. Should we delete them?

convenience-m.svg

hardware-m.svg

heliport-m.svg

npark-m.svg

tire-repair-m.svg

travel_agency_shop-m.svg

Also, I noticed that there are some icons that are in the symbols folder but are not used in the app. Should we delete them? convenience-m.svg <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/clear/style-clear/symbols/convenience-m.svg" width="35" /> hardware-m.svg <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/clear/style-clear/symbols/hardware-m.svg" width="35" /> heliport-m.svg <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/clear/style-clear/symbols/heliport-m.svg" width="35" /> npark-m.svg <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/clear/style-clear/symbols/npark-m.svg" width="35" /> tire-repair-m.svg <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/clear/style-clear/symbols/tire-repair-m.svg" width="35" /> travel_agency_shop-m.svg <img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/clear/style-clear/symbols/travel_agency_shop-m.svg" width="35" />

biodranik commented

2022-12-05 22:43:01 +00:00

(Migrated from github.com)

Can't we add these types instead?
It would be great to show hints on icons in the wiki about which types are matched: ![](url "type_name")

Can't we add these types instead? It would be great to show hints on icons in the wiki about which types are matched: `![](url "type_name")`