Substation icon shouldn't have a circle #3427

Closed
opened 2022-09-16 23:29:35 +00:00 by lunarna-gh · 23 comments
lunarna-gh commented 2022-09-16 23:29:35 +00:00 (Migrated from github.com)

Power=substation icon shouldn't have a circle as it is currently very confusing when looking for POIs on high zoom, I would assume it's an amenity since all unimportant POIs are rendered without a circle. Screenshot_2022-09-16-22-12-20-311_lockscreen.jpg

Power=substation icon shouldn't have a circle as it is currently very confusing when looking for POIs on high zoom, I would assume it's an amenity since all unimportant POIs are rendered without a circle. ![Screenshot_2022-09-16-22-12-20-311_lockscreen.jpg](https://user-images.githubusercontent.com/113068485/190830222-40b510ec-4436-4159-8ad0-acf1e9524922.jpg)
biodranik commented 2022-09-24 22:20:48 +00:00 (Migrated from github.com)

You're right! @endim8 can you please remove circles from these icons?

You're right! @endim8 can you please remove circles from these icons?
Member

just removing the circle make it quite hard to read:
Screenshot 2022-10-12 at 10 55 33

maybe an outline like this would be better?":
Screenshot 2022-10-12 at 10 58 22

also need to remove circle from chimney-m.svg

just removing the circle make it quite hard to read: <img width="511" alt="Screenshot 2022-10-12 at 10 55 33" src="https://user-images.githubusercontent.com/26939824/195312954-1e89df0e-7c9d-4202-a0a6-d849d310b654.png"> maybe an outline like this would be better?": <img width="511" alt="Screenshot 2022-10-12 at 10 58 22" src="https://user-images.githubusercontent.com/26939824/195313164-6d9c13c4-0e7b-4eea-b0e5-22d75948d158.png"> also need to remove circle from chimney-m.svg
biodranik commented 2022-10-12 11:07:42 +00:00 (Migrated from github.com)

Of course, the icon should be colored like other icons. It shouldn't be too attractive and different from others visually.

Of course, the icon should be colored like other icons. It shouldn't be too attractive and different from others visually.
lunarna-gh commented 2022-10-13 01:55:44 +00:00 (Migrated from github.com)

I think having it as just an outline in the color of other icons this type would be fitting, that's the way the fire hydrant is done. Something like this (recolored example from Material Design Icons - if needed I can upload this elsewhere, not sure if github compresses images here)
power-m-2

I think having it as just an outline in the color of other icons this type would be fitting, that's the way the fire hydrant is done. Something like this (recolored example from Material Design Icons - if needed I can upload this elsewhere, not sure if github compresses images here) ![power-m-2](https://user-images.githubusercontent.com/113068485/195480099-3bca139c-b0bf-457c-b7c0-95d615040bc8.svg)
lunarna-gh commented 2022-10-13 14:55:56 +00:00 (Migrated from github.com)

I made these icons based off of the ones currently used, they fit other icons used in the app, however I'm not sure how to add them to the desktop app or what to do to contribute them
chimney-m-2
power-m-2

I made these icons based off of the ones currently used, they fit other icons used in the app, however I'm not sure how to add them to the desktop app or what to do to contribute them ![chimney-m-2](https://user-images.githubusercontent.com/113068485/195631794-90807395-4fe6-4301-a1bc-e48eb3f0b5f5.svg) ![power-m-2](https://user-images.githubusercontent.com/113068485/195631815-388783d8-efa2-474f-9fc9-d2df3c032754.svg)
lunarna-gh commented 2022-10-18 21:55:19 +00:00 (Migrated from github.com)

I made dark mode versions of the above icons too. If I were to PR these, would I still have to build everything and regenerate styles if I'm not adding any new icons, just replacing old ones? @biodranik
power-m-dark
chimney-m-dark
(not sure why they vary in size on github, they're both 24x24 svgs)

I made dark mode versions of the above icons too. If I were to PR these, would I still have to build everything and regenerate styles if I'm not adding any new icons, just replacing old ones? @biodranik ![power-m-dark](https://user-images.githubusercontent.com/113068485/196552260-d778253d-25de-412c-ad52-8c37af4dc191.svg) ![chimney-m-dark](https://user-images.githubusercontent.com/113068485/196552273-3b739250-8087-4727-bbfe-12ae1ff37cff.svg) (not sure why they vary in size on github, they're both 24x24 svgs)
biodranik commented 2022-10-19 06:13:34 +00:00 (Migrated from github.com)

It is necessary to test/see how new icons are looking on the map before merging them. If you can't do it yourself, maybe someone else can help you?

It is necessary to test/see how new icons are looking on the map before merging them. If you can't do it yourself, maybe someone else can help you?
Contributor

I tested the icons modified by @lunarna-gh. Here they are:

B1A28BD5-CFFC-4714-BD52-FEEB124C22C3_1_201_a CD35F8C6-3232-4304-BD72-18813F1A2042_1_201_a

I also tested a modified power symbol with fill inside using the same color.

6FBE070C-7A2A-425F-A72F-44294268910D_1_201_a

What do you think?

I tested the icons modified by @lunarna-gh. Here they are: ![B1A28BD5-CFFC-4714-BD52-FEEB124C22C3_1_201_a](https://user-images.githubusercontent.com/47610359/197356971-25a73a3b-b0eb-4e4e-a302-1aa4775ad286.jpeg) ![CD35F8C6-3232-4304-BD72-18813F1A2042_1_201_a](https://user-images.githubusercontent.com/47610359/197356969-7cf39f11-51ac-428b-ba7b-25afcb4fdc43.jpeg) I also tested a modified power symbol with fill inside using the same color. ![6FBE070C-7A2A-425F-A72F-44294268910D_1_201_a](https://user-images.githubusercontent.com/47610359/197356973-aba07729-188d-47dd-b70e-d9f6b0f356af.jpeg) What do you think?
biodranik commented 2022-10-23 12:24:50 +00:00 (Migrated from github.com)

A contoured one looks good. What about the dark mode? Can you please share a screenshot of how it looks there?

A contoured one looks good. What about the dark mode? Can you please share a screenshot of how it looks there?
Contributor

Here they are in dark mode:

Here they are in dark mode: ![](https://user-images.githubusercontent.com/47610359/197396059-136bc6dd-9ef8-40be-ac78-b80df1dcbe0e.png) ![](https://user-images.githubusercontent.com/47610359/197396062-cdf80a3f-16ff-49a7-8aab-70ed523dc876.png) ![](https://user-images.githubusercontent.com/47610359/197396068-b16e6668-6a69-42a0-8ac2-76d559f9f773.png)
biodranik commented 2022-10-23 21:40:48 +00:00 (Migrated from github.com)

Thanks!

  1. Can you make the central horizontal part of the electricity symbol a bit thinner?
  2. Just to confirm, the dark style icon color is the same as most of the other dark style icons, right?
  3. I would choose the less attractive icon from both (filled or not filled), but it requires seeing some other icons nearby. Power substations should not attract much attention when users are looking at the map.
Thanks! 1. Can you make the central horizontal part of the electricity symbol a bit thinner? 2. Just to confirm, the dark style icon color is the same as most of the other dark style icons, right? 3. I would choose the less attractive icon from both (filled or not filled), but it requires seeing some other icons nearby. Power substations should not attract much attention when users are looking at the map.
Contributor

Can you make the central horizontal part of the electricity symbol a bit thinner?

I'm not sure what you mean by this. Can you explain a bit more?

Just to confirm, the dark style icon color is the same as most of the other dark style icons, right?

Yes, it's the same.

I would choose the less attractive icon from both (filled or not filled), but it requires seeing some other icons nearby. Power substations should not attract much attention when users are looking at the map.

Here are the images with some other icons around:


> Can you make the central horizontal part of the electricity symbol a bit thinner? I'm not sure what you mean by this. Can you explain a bit more? > Just to confirm, the dark style icon color is the same as most of the other dark style icons, right? Yes, it's the same. > I would choose the less attractive icon from both (filled or not filled), but it requires seeing some other icons nearby. Power substations should not attract much attention when users are looking at the map. Here are the images with some other icons around: ![](https://user-images.githubusercontent.com/47610359/197420626-88e79948-fb57-4a51-a843-e8fab5fdde68.png) ![](https://user-images.githubusercontent.com/47610359/197420628-2e1c909d-0f5f-4405-8170-858b46a3c969.png)
lunarna-gh commented 2022-10-23 22:19:23 +00:00 (Migrated from github.com)

Can you make the central horizontal part of the electricity symbol a bit thinner?

Is this what you mean? I moved the nodes slightly closer together, can make it thinner if wanted
power-m-2
power-m-dark
power-m-3
power-m-dark-2

> Can you make the central horizontal part of the electricity symbol a bit thinner? Is this what you mean? I moved the nodes slightly closer together, can make it thinner if wanted ![power-m-2](https://user-images.githubusercontent.com/113068485/197420664-d235590a-2a60-4793-a1bf-ba2fabecba9a.svg) ![power-m-dark](https://user-images.githubusercontent.com/113068485/197420673-08e6c929-0e4f-4eb8-9cfe-e5192493cfbb.svg) ![power-m-3](https://user-images.githubusercontent.com/113068485/197420668-194e0fc9-1d0d-45c5-b938-8eacc94e79c6.svg) ![power-m-dark-2](https://user-images.githubusercontent.com/113068485/197420681-f9cbcced-d8ed-46f2-9a0e-8be013593a13.svg)
biodranik commented 2022-10-23 23:08:27 +00:00 (Migrated from github.com)

Is this what you mean? I moved the nodes slightly closer together, can make it thinner if wanted

Yes, thanks! These look a bit better, maybe try even thinner?

What do you think about filled vs non-filled?

> Is this what you mean? I moved the nodes slightly closer together, can make it thinner if wanted Yes, thanks! These look a bit better, maybe try even thinner? What do you think about filled vs non-filled?
lunarna-gh commented 2022-10-24 00:24:45 +00:00 (Migrated from github.com)

I'm not sure about filled vs non-filled because I've spent so long looking at these icons that they both stand out to me. I originally proposed non-filled because it would fit the fire hydrant icon, but it seems like a lot of gray icons are filled. You can choose which one you think is less eye-catching.
I've made it thinner in the center again and slightly thinner on the sides to make the filled version look less thick.
power-m-2
power-m-dark
power-m-3
power-m-dark-2

I'm not sure about filled vs non-filled because I've spent so long looking at these icons that they both stand out to me. I originally proposed non-filled because it would fit the fire hydrant icon, but it seems like a lot of gray icons are filled. You can choose which one you think is less eye-catching. I've made it thinner in the center again and slightly thinner on the sides to make the filled version look less thick. ![power-m-2](https://user-images.githubusercontent.com/113068485/197425688-130d6d69-c64b-4e4c-8abc-5d24ce14beec.svg) ![power-m-dark](https://user-images.githubusercontent.com/113068485/197425697-2208213b-62ab-4921-8b15-0647fb0fca2a.svg) ![power-m-3](https://user-images.githubusercontent.com/113068485/197425701-cf40f0d3-bcae-4195-a003-e4772f60c819.svg) ![power-m-dark-2](https://user-images.githubusercontent.com/113068485/197425703-2b25c58d-aefc-474b-b097-2c07780e34fd.svg)
lunarna-gh commented 2022-10-24 00:38:04 +00:00 (Migrated from github.com)

Apparently these aren't good for use in-app because they feature Inkscape artefacts, I saved them instead of exporting. I can export these tomorrow.

Apparently these aren't good for use in-app because they feature Inkscape artefacts, I saved them instead of exporting. I can export these tomorrow.
lunarna-gh commented 2022-10-24 23:01:31 +00:00 (Migrated from github.com)

I saved these as optimized .svgs which fit the structure of other svgs used in OM. Unfortunately GitHub issues don't support uploading optimized .svgs, GitHub can't process these files without tidy formatting, so I uploaded these to filen (can upload to a github repo if necessary) https://filen.io/f/6d74e21c-f307-49bb-8c97-6f11b35e3502#!KrJMW8Ip8FQIbJwIXSwqjbYWJaqiIaaB
@dvdmrtnz Do you prefer filled or unfilled?

I saved these as optimized .svgs which fit the structure of other svgs used in OM. Unfortunately GitHub issues don't support uploading optimized .svgs, GitHub can't process these files without tidy formatting, so I uploaded these to filen (can upload to a github repo if necessary) https://filen.io/f/6d74e21c-f307-49bb-8c97-6f11b35e3502#!KrJMW8Ip8FQIbJwIXSwqjbYWJaqiIaaB @dvdmrtnz Do you prefer filled or unfilled?
biodranik commented 2022-10-25 06:34:13 +00:00 (Migrated from github.com)
  1. SVGs should be compatible, with the easy-to-render format, so we can later render them on the device directly. If some non-common mechanisms are used to draw curves/elements, then it's better to replace them with more common ones.
  2. You can try this tool: #3426
  3. Let's try the filled one. You can also upload unfilled in the data folder, there are some svgs there.
1. SVGs should be compatible, with the easy-to-render format, so we can later render them on the device directly. If some non-common mechanisms are used to draw curves/elements, then it's better to replace them with more common ones. 2. You can try this tool: #3426 3. Let's try the filled one. You can also upload unfilled in the data folder, there are some svgs there.
Contributor

I saved these as optimized .svgs which fit the structure of other svgs used in OM. Unfortunately GitHub issues don't support uploading optimized .svgs, GitHub can't process these files without tidy formatting, so I uploaded these to filen (can upload to a github repo if necessary) https://filen.io/f/6d74e21c-f307-49bb-8c97-6f11b35e3502#!KrJMW8Ip8FQIbJwIXSwqjbYWJaqiIaaB
@dvdmrtnz Do you prefer filled or unfilled?

I would prefer filled as it matches with the rest of the icons on OrganicMaps.

@lunarna-gh Do you want me to make a PR with these icons or will you make it yourself?

> I saved these as optimized .svgs which fit the structure of other svgs used in OM. Unfortunately GitHub issues don't support uploading optimized .svgs, GitHub can't process these files without tidy formatting, so I uploaded these to filen (can upload to a github repo if necessary) https://filen.io/f/6d74e21c-f307-49bb-8c97-6f11b35e3502#!KrJMW8Ip8FQIbJwIXSwqjbYWJaqiIaaB > @dvdmrtnz Do you prefer filled or unfilled? I would prefer filled as it matches with the rest of the icons on OrganicMaps. @lunarna-gh Do you want me to make a PR with these icons or will you make it yourself?
lunarna-gh commented 2022-10-25 22:00:25 +00:00 (Migrated from github.com)

You can make the PR with the filled icons, please check if these work though. I'll try to see if the tool @biodranik mentioned changes the code in a second.

You can make the PR with the filled icons, please check if these work though. I'll try to see if the tool @biodranik mentioned changes the code in a second.
lunarna-gh commented 2022-10-25 22:39:21 +00:00 (Migrated from github.com)

It seems the changes, while minor, have made it uploadable to GitHub since the tool was made with file preview support in mind. The optimization process is pretty similar to mine, I didn't realize there was one built in with OM, I'll use it from now on.

@dvdmrtnz Feel free to PR these
power-m
power-m

It seems the changes, while minor, have made it uploadable to GitHub since the tool was made with file preview support in mind. The optimization process is pretty similar to mine, I didn't realize there was one built in with OM, I'll use it from now on. @dvdmrtnz Feel free to PR these ![power-m](https://user-images.githubusercontent.com/113068485/197894781-53d9806f-8ee1-4f38-ac58-ac1bd76295d2.svg) ![power-m](https://user-images.githubusercontent.com/113068485/197895227-efb1d0ff-86d4-4d3d-aba2-b2588d8f1b22.svg)
Contributor

I will make the PR now.

I had to modify the power symbol because the transparent border on the dark mode was mixing with the transparent fill and creating a different shade of white. See:

Original Modified
I will make the PR now. I had to modify the power symbol because the transparent border on the dark mode was mixing with the transparent fill and creating a different shade of white. See: | Original | Modified | |-|-| | ![](https://user-images.githubusercontent.com/47610359/198092642-507d4f2c-5e4d-4a3c-9055-92a3b25b0eba.png) | ![](https://user-images.githubusercontent.com/47610359/198092645-021fb6e2-5c4e-4854-bac9-45db04dcaf6f.png) |
lunarna-gh commented 2022-10-26 20:41:19 +00:00 (Migrated from github.com)

Thanks for testing, it's interesting that OM treats borders this way, will keep it in mind. I'll close the issue now

Thanks for testing, it's interesting that OM treats borders this way, will keep it in mind. I'll close the issue now
This repo is archived. You cannot comment on issues.
No labels
Accessibility
Accessibility
Address
Address
Android
Android
Android Auto
Android Auto
Android Automotive (AAOS)
Android Automotive (AAOS)
API
API
AppGallery
AppGallery
AppStore
AppStore
Battery and Performance
Battery and Performance
Blocker
Blocker
Bookmarks and Tracks
Bookmarks and Tracks
Borders
Borders
Bug
Bug
Build
Build
CarPlay
CarPlay
Classificator
Classificator
Community
Community
Core
Core
CrashReports
CrashReports
Cycling
Cycling
Desktop
Desktop
DevEx
DevEx
DevOps
DevOps
dev_sandbox
dev_sandbox
Directions
Directions
Documentation
Documentation
Downloader
Downloader
Drape
Drape
Driving
Driving
Duplicate
Duplicate
Editor
Editor
Elevation
Elevation
Enhancement
Enhancement
Epic
Epic
External Map Datasets
External Map Datasets
F-Droid
F-Droid
Fonts
Fonts
Frequently User Reported
Frequently User Reported
Fund
Fund
Generator
Generator
Good first issue
Good first issue
Google Play
Google Play
GPS
GPS
GSoC
GSoC
iCloud
iCloud
Icons
Icons
iOS
iOS
Legal
Legal
Linux Desktop
Linux Desktop
Linux packaging
Linux packaging
Linux Phone
Linux Phone
Mac OS
Mac OS
Map Data
Map Data
Metro
Metro
Navigation
Navigation
Need Feedback
Need Feedback
Night Mode
Night Mode
NLnet 2024-06-281
NLnet 2024-06-281
No Feature Parity
No Feature Parity
Opening Hours
Opening Hours
Outdoors
Outdoors
POI Info
POI Info
Privacy
Privacy
Public Transport
Public Transport
Raw Idea
Raw Idea
Refactoring
Refactoring
Regional
Regional
Regression
Regression
Releases
Releases
RoboTest
RoboTest
Route Planning
Route Planning
Routing
Routing
Ruler
Ruler
Search
Search
Security
Security
Styles
Styles
Tests
Tests
Track Recording
Track Recording
Translations
Translations
TTS
TTS
UI
UI
UX
UX
Walk Navigation
Walk Navigation
Watches
Watches
Web
Web
Wikipedia
Wikipedia
Windows
Windows
Won't fix
Won't fix
World Map
World Map
No milestone
No project
No assignees
3 participants
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: organicmaps/organicmaps-tmp#3427
No description provided.