Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Additional icon request #10

Open
hiljolodewijk opened this issue Jan 5, 2022 · 11 comments
Open

Additional icon request #10

hiljolodewijk opened this issue Jan 5, 2022 · 11 comments

Comments

@hiljolodewijk
Copy link

Hi Bas,

Thanks for your icons! Really liked them. What i did is i used them for all the status codes for the OpenWeatherMap API. So for each status code of the OWM API, i chose an icon to represent it.

If you'd have the time, I'd like three additional icons for the weather statuses:

  • Thunderstorm with light drizzle (Onweersbui met lichte motregen) - a combination of drizzle icon and thunderstorm
  • Sleet/Frozen rain (IJzel): a bit like sleet i think, current sleet icon is more rain and snow?
  • Very thin clouds (Zeer lichte bewolking): Sun with very thin clouds (opacity?)

If you would have the time, please can you add these icons?

Thanks, Bedankt!

@hiljolodewijk
Copy link
Author

For your info, I'm using the following code to translate the OWM API condition codes to an icon (descriptions are in Dutch):
All conditions including descriptions can be found here: https://openweathermap.org/weather-conditions.

array( 200 => array( 'description' => 'onweersbui met lichte regen', 'icon_day' => 'thunderstorms-day-rain.svg', 'icon_night' => 'thunderstorms-night-rain.svg' ), 201 => array( 'description' => 'onweersbui met regen', 'icon_day' => 'thunderstorms-rain.svg', 'icon_night' => 'thunderstorms-rain.svg' ), 202 => array( 'description' => 'onweersbui met zware regenval', 'icon_day' => 'thunderstorms-rain.svg', 'icon_night' => 'thunderstorms-rain.svg' ), 210 => array( 'description' => 'lichte onweersbui', 'icon_day' => 'thunderstorms-day.svg', 'icon_night' => 'thunderstorms-night.svg' ), 211 => array( 'description' => 'onweersbui', 'icon_day' => 'thunderstorms.svg', 'icon_night' => 'thunderstorms.svg' ), 212 => array( 'description' => 'zware onweersbui', 'icon_day' => 'thunderstorms-rain.svg', 'icon_night' => 'thunderstorms-rain.svg' ), 221 => array( 'description' => 'verspreide onweersbui', 'icon_day' => 'thunderstorms-day.svg', 'icon_night' => 'thunderstorms-night.svg' ), 230 => array( 'description' => 'onweersbui met lichte motregen', 'icon_day' => 'thunderstorms-day-rain.svg', 'icon_night' => 'thunderstorms-night-rain.svg' ), 231 => array( 'description' => 'onweersbui met motregen', 'icon_day' => 'thunderstorms-day-rain.svg', 'icon_night' => 'thunderstorms-night-rain.svg' ), 232 => array( 'description' => 'onweersbui met zware motregen', 'icon_day' => 'thunderstorms-rain.svg', 'icon_night' => 'thunderstorms-rain.svg' ), 300 => array( 'description' => 'lichte motregen', 'icon_day' => 'partly-cloudy-day-drizzle.svg', 'icon_night' => 'partly-cloudy-night-drizzle.svg' ), 301 => array( 'description' => 'motregen', 'icon_day' => 'drizzle.svg', 'icon_night' => 'drizzle.svg' ), 302 => array( 'description' => 'zware motregen', 'icon_day' => 'drizzle.svg', 'icon_night' => 'drizzle.svg' ), 310 => array( 'description' => 'lichte motregen/regen', 'icon_day' => 'partly-cloudy-day-drizzle.svg', 'icon_night' => 'partly-cloudy-night-drizzle.svg' ), 311 => array( 'description' => 'motregen', 'icon_day' => 'drizzle.svg', 'icon_night' => 'drizzle.svg' ), 312 => array( 'description' => 'zware motregen/regen', 'icon_day' => 'rain.svg', 'icon_night' => 'rain.svg' ), 313 => array( 'description' => 'stortbuien en motregen', 'icon_day' => 'rain.svg', 'icon_night' => 'rain.svg' ), 314 => array( 'description' => 'hevige stortbuien en motregen', 'icon_day' => 'rain.svg', 'icon_night' => 'rain.svg' ), 321 => array( 'description' => 'zware motregen', 'icon_day' => 'drizzle.svg', 'icon_night' => 'drizzle.svg' ), 500 => array( 'description' => 'lichte regen', 'icon_day' => 'partly-cloudy-day-drizzle.svg', 'icon_night' => 'partly-cloudy-night-drizzle.svg' ), 501 => array( 'description' => 'matige regen', 'icon_day' => 'partly-cloudy-day-rain.svg', 'icon_night' => 'partly-cloudy-night-rain.svg' ), 502 => array( 'description' => 'zware regenval', 'icon_day' => 'rain.svg', 'icon_night' => 'rain.svg' ), 503 => array( 'description' => 'zeer zware regenval', 'icon_day' => 'rain.svg', 'icon_night' => 'rain.svg' ), 504 => array( 'description' => 'extreme regen', 'icon_day' => 'rain.svg', 'icon_night' => 'rain.svg' ), 511 => array( 'description' => 'koude buien', 'icon_day' => 'partly-cloudy-day-hail.svg', 'icon_night' => 'partly-cloudy-night-hail.svg' ), 520 => array( 'description' => 'lichte stortregen', 'icon_day' => 'rain.svg', 'icon_night' => 'rain.svg' ), 521 => array( 'description' => 'stortregen', 'icon_day' => 'rain.svg', 'icon_night' => 'rain.svg' ), 522 => array( 'description' => 'zware stortregen', 'icon_day' => 'rain.svg', 'icon_night' => 'rain.svg' ), 531 => array( 'description' => 'afwisselende stortbuien', 'icon_day' => 'partly-cloudy-day-rain.svg', 'icon_night' => 'partly-cloudy-night-rain.svg' ), 600 => array( 'description' => 'lichte sneeuw', 'icon_day' => 'partly-cloudy-day-snow.svg', 'icon_night' => 'partly-cloudy-night-snow.svg' ), 601 => array( 'description' => 'sneeuw', 'icon_day' => 'snow.svg', 'icon_night' => 'snow.svg' ), 602 => array( 'description' => 'hevige sneeuw', 'icon_day' => 'snow.svg', 'icon_night' => 'snow.svg' ), 611 => array( 'description' => 'ijzel', 'icon_day' => 'hail.svg', 'icon_night' => 'hail.svg' ), 612 => array( 'description' => 'lichte ijzel', 'icon_day' => 'partly-cloudy-day-hail.svg', 'icon_night' => 'partly-cloudy-night-hail.svg' ), 613 => array( 'description' => 'ijzel', 'icon_day' => 'hail.svg', 'icon_night' => 'hail.svg' ), 615 => array( 'description' => 'lichte regen en sneeuw', 'icon_day' => 'partly-cloudy-day-sleet.svg', 'icon_night' => 'partly-cloudy-night-sleet.svg' ), 616 => array( 'description' => 'regen en sneeuw', 'icon_day' => 'sleet.svg', 'icon_night' => 'sleet.svg' ), 620 => array( 'description' => 'lichte sneeuw', 'icon_day' => 'partly-cloudy-day-snow.svg', 'icon_night' => 'partly-cloudy-night-snow.svg' ), 621 => array( 'description' => 'natte sneeuw', 'icon_day' => 'sleet.svg', 'icon_night' => 'sleet.svg' ), 622 => array( 'description' => 'hevige sneeuw', 'icon_day' => 'snow.svg', 'icon_night' => 'snow.svg' ), 701 => array( 'description' => 'mist', 'icon_day' => 'fog.svg', 'icon_night' => 'fog.svg' ), 711 => array( 'description' => 'rook', 'icon_day' => 'partly-cloudy-day-smoke.svg', 'icon_night' => 'partly-cloudy-night-smoke.svg' ), 721 => array( 'description' => 'nevel', 'icon_day' => 'haze-day.svg', 'icon_night' => 'haze-night.svg' ), 731 => array( 'description' => 'zand/stof werveling', 'icon_day' => 'dust-wind.svg', 'icon_night' => 'dust-wind.svg' ), 741 => array( 'description' => 'dichte mist', 'icon_day' => 'mist.svg', 'icon_night' => 'mist.svg' ), 751 => array( 'description' => 'zandstorm', 'icon_day' => 'dust-wind.svg', 'icon_night' => 'dust-wind.svg' ), 761 => array( 'description' => 'stof', 'icon_day' => 'dust.svg', 'icon_night' => 'dust.svg' ), 762 => array( 'description' => 'vulkanische as', 'icon_day' => 'dust-day.svg', 'icon_night' => 'dust-night.svg' ), 771 => array( 'description' => 'rukwinden', 'icon_day' => 'windsock.svg', 'icon_night' => 'windsock.svg' ), 781 => array( 'description' => 'tornado', 'icon_day' => 'tornado.svg', 'icon_night' => 'tornado.svg' ), 800 => array( 'description' => 'onbewolkt', 'icon_day' => 'clear-day.svg', 'icon_night' => 'clear-night.svg' ), 801 => array( 'description' => 'zeer lichte bewolking', 'icon_day' => 'partly-cloudy-day.svg', 'icon_night' => 'partly-cloudy-night.svg' ), 802 => array( 'description' => 'licht bewolkt', 'icon_day' => 'partly-cloudy-day.svg', 'icon_night' => 'partly-cloudy-night.svg' ), 803 => array( 'description' => 'half bewolkt', 'icon_day' => 'overcast-day.svg', 'icon_night' => 'overcast-night.svg' ), 804 => array( 'description' => 'zwaar bewolkt', 'icon_day' => 'overcast.svg', 'icon_night' => 'overcast' ) );

@basmilius
Copy link
Owner

basmilius commented Jan 7, 2022

Hi Hiljo!

Thanks for using my icons and the positive message! I'm currently working on a major overhaul of the icons and will include your requested icons in the new version.

I'm not sure what you mean by another variant of the sleet icon though, currently sleet is a combination of snow and drizzle. Could you elaborate?

For the other requested icons, i'll design them in the coming days and share them here 😄

@hiljolodewijk
Copy link
Author

Thanks for your hard work.
What i mean is that the current sleet icon is perfect. But sleet is more like hail, weather technically spoken. I was thinking of an icon for freezing rain (in Dutch: ijzel). This is rain, but when it hits the ground, it'll freeze and form ice on the ground. Not easy to design i think? I think i'm gonna use the sleet icon for now.

The two other icons would still be nice though:

  • Thunderstorm with light drizzle - a combination of drizzle icon and thunderstorm
  • Very thin/tiny clouds: Sun with very thin clouds (opacity?) or a small cloud with sun

If any questions, let me know.

@bobbyziom
Copy link

From @hiljolodewijk script I made a lookup JSON. Didn't convert to other language:

[ { "id": 200, "description": "onweersbui met lichte regen", "icon_day": "thunderstorms-day-rain.png", "icon_night": "thunderstorms-night-rain.png" }, { "id": 201, "description": "onweersbui met regen", "icon_day": "thunderstorms-rain.png", "icon_night": "thunderstorms-rain.png" }, { "id": 202, "description": "onweersbui met zware regenval", "icon_day": "thunderstorms-rain.png", "icon_night": "thunderstorms-rain.png" }, { "id": 210, "description": "lichte onweersbui", "icon_day": "thunderstorms-day.png", "icon_night": "thunderstorms-night.png" }, { "id": 211, "description": "onweersbui", "icon_day": "thunderstorms.png", "icon_night": "thunderstorms.png" }, { "id": 212, "description": "zware onweersbui", "icon_day": "thunderstorms-rain.png", "icon_night": "thunderstorms-rain.png" }, { "id": 221, "description": "verspreide onweersbui", "icon_day": "thunderstorms-day.png", "icon_night": "thunderstorms-night.png" }, { "id": 230, "description": "onweersbui met lichte motregen", "icon_day": "thunderstorms-day-rain.png", "icon_night": "thunderstorms-night-rain.png" }, { "id": 231, "description": "onweersbui met motregen", "icon_day": "thunderstorms-day-rain.png", "icon_night": "thunderstorms-night-rain.png" }, { "id": 232, "description": "onweersbui met zware motregen", "icon_day": "thunderstorms-rain.png", "icon_night": "thunderstorms-rain.png" }, { "id": 300, "description": "lichte motregen", "icon_day": "partly-cloudy-day-drizzle.png", "icon_night": "partly-cloudy-night-drizzle.png" }, { "id": 301, "description": "motregen", "icon_day": "drizzle.png", "icon_night": "drizzle.png" }, { "id": 302, "description": "zware motregen", "icon_day": "drizzle.png", "icon_night": "drizzle.png" }, { "id": 310, "description": "lichte motregen/regen", "icon_day": "partly-cloudy-day-drizzle.png", "icon_night": "partly-cloudy-night-drizzle.png" }, { "id": 311, "description": "motregen", "icon_day": "drizzle.png", "icon_night": "drizzle.png" }, { "id": 312, "description": "zware motregen/regen", "icon_day": "rain.png", "icon_night": "rain.png" }, { "id": 313, "description": "stortbuien en motregen", "icon_day": "rain.png", "icon_night": "rain.png" }, { "id": 314, "description": "hevige stortbuien en motregen", "icon_day": "rain.png", "icon_night": "rain.png" }, { "id": 321, "description": "zware motregen", "icon_day": "drizzle.png", "icon_night": "drizzle.png" }, { "id": 500, "description": "lichte regen", "icon_day": "partly-cloudy-day-drizzle.png", "icon_night": "partly-cloudy-night-drizzle.png" }, { "id": 501, "description": "matige regen", "icon_day": "partly-cloudy-day-rain.png", "icon_night": "partly-cloudy-night-rain.png" }, { "id": 502, "description": "zware regenval", "icon_day": "rain.png", "icon_night": "rain.png" }, { "id": 503, "description": "zeer zware regenval", "icon_day": "rain.png", "icon_night": "rain.png" }, { "id": 504, "description": "extreme regen", "icon_day": "rain.png", "icon_night": "rain.png" }, { "id": 511, "description": "koude buien", "icon_day": "partly-cloudy-day-hail.png", "icon_night": "partly-cloudy-night-hail.png" }, { "id": 520, "description": "lichte stortregen", "icon_day": "rain.png", "icon_night": "rain.png" }, { "id": 521, "description": "stortregen", "icon_day": "rain.png", "icon_night": "rain.png" }, { "id": 522, "description": "zware stortregen", "icon_day": "rain.png", "icon_night": "rain.png" }, { "id": 531, "description": "afwisselende stortbuien", "icon_day": "partly-cloudy-day-rain.png", "icon_night": "partly-cloudy-night-rain.png" }, { "id": 600, "description": "lichte sneeuw", "icon_day": "partly-cloudy-day-snow.png", "icon_night": "partly-cloudy-night-snow.png" }, { "id": 601, "description": "sneeuw", "icon_day": "snow.png", "icon_night": "snow.png" }, { "id": 602, "description": "hevige sneeuw", "icon_day": "snow.png", "icon_night": "snow.png" }, { "id": 611, "description": "ijzel", "icon_day": "hail.png", "icon_night": "hail.png" }, { "id": 612, "description": "lichte ijzel", "icon_day": "partly-cloudy-day-hail.png", "icon_night": "partly-cloudy-night-hail.png" }, { "id": 613, "description": "ijzel", "icon_day": "hail.png", "icon_night": "hail.png" }, { "id": 615, "description": "lichte regen en sneeuw", "icon_day": "partly-cloudy-day-sleet.png", "icon_night": "partly-cloudy-night-sleet.png" }, { "id": 616, "description": "regen en sneeuw", "icon_day": "sleet.png", "icon_night": "sleet.png" }, { "id": 620, "description": "lichte sneeuw", "icon_day": "partly-cloudy-day-snow.png", "icon_night": "partly-cloudy-night-snow.png" }, { "id": 621, "description": "natte sneeuw", "icon_day": "sleet.png", "icon_night": "sleet.png" }, { "id": 622, "description": "hevige sneeuw", "icon_day": "snow.png", "icon_night": "snow.png" }, { "id": 701, "description": "mist", "icon_day": "fog.png", "icon_night": "fog.png" }, { "id": 711, "description": "rook", "icon_day": "partly-cloudy-day-smoke.png", "icon_night": "partly-cloudy-night-smoke.png" }, { "id": 721, "description": "nevel", "icon_day": "haze-day.png", "icon_night": "haze-night.png" }, { "id": 731, "description": "zand/stof werveling", "icon_day": "dust-wind.png", "icon_night": "dust-wind.png" }, { "id": 741, "description": "dichte mist", "icon_day": "mist.png", "icon_night": "mist.png" }, { "id": 751, "description": "zandstorm", "icon_day": "dust-wind.png", "icon_night": "dust-wind.png" }, { "id": 761, "description": "stof", "icon_day": "dust.png", "icon_night": "dust.png" }, { "id": 762, "description": "vulkanische as", "icon_day": "dust-day.png", "icon_night": "dust-night.png" }, { "id": 771, "description": "rukwinden", "icon_day": "windsock.png", "icon_night": "windsock.png" }, { "id": 781, "description": "tornado", "icon_day": "tornado.png", "icon_night": "tornado.png" }, { "id": 800, "description": "onbewolkt", "icon_day": "clear-day.png", "icon_night": "clear-night.png" }, { "id": 801, "description": "zeer lichte bewolking", "icon_day": "partly-cloudy-day.png", "icon_night": "partly-cloudy-night.png" }, { "id": 802, "description": "licht bewolkt", "icon_day": "partly-cloudy-day.png", "icon_night": "partly-cloudy-night.png" }, { "id": 803, "description": "half bewolkt", "icon_day": "overcast-day.png", "icon_night": "overcast-night.png" }, { "id": 804, "description": "zwaar bewolkt", "icon_day": "overcast.png", "icon_night": "overcast" } ]

@hiljolodewijk
Copy link
Author

Like! :-)

@aes-alienrip
Copy link

aes-alienrip commented Jan 24, 2022

Hi @basmilius ,
Would you mind to create below icons in the new version too? Thanks

  • heavy-rain
  • hot
  • cold
  • dry

@basmilius
Copy link
Owner

Hi @aes-alienrip, i'll take a look at that!

I'm currently almost finished with making 3.0 on par with 2.0, after that I'll design all the icons requested in this issue 🙂

@basmilius
Copy link
Owner

Hi, long time no see :)
A bit late, but I finally found some time to work on this issue. I designed the mostly-clear set and came up with the following (not animated, pure illustrator work):

image

I'm not really sure about the versions without the sun and the moon, but for consistency they should be included. Any tips?

I also designed the thunderstorms + drizzle icons and will look at the rest later!

@hiljolodewijk
Copy link
Author

Hi Bas,
Sorry for my late reply. I'd say that the mostly clear icons look good! I'm using the outlined versions personally, but this looks good already. I'd say continue :)

@Millardiang
Copy link

I

Hi, long time no see :) A bit late, but I finally found some time to work on this issue. I designed the mostly-clear set and came up with the following (not animated, pure illustrator work):

image

I'm not really sure about the versions without the sun and the moon, but for consistency they should be included. Any tips?

I also designed the thunderstorms + drizzle icons and will look at the rest later!

Hello Bas,
I can understand your comment about consistency but logically a description of mostly clear would always contain either a sun or moon depending on the time of day.
Ian

@marcelstoer
Copy link

for consistency they should be included. Any tips?

👍 fully agree. Any chance they will make it to the dev branch soon? I am really looking forward to these (the line variant) as I personally find the current "partly cloudy"-set a bit out of balance.

I interpret "partly cloudy" semantically as "mostly sunny but with a few clouds". Hence, the sun is dominating and at worst it's 50:50. In the current "partly cloudy"-set the clouds are the dominating symbol instead.

-> I will use the new mostly clear/sunny set for partly cloudy conditions

@basmilius basmilius removed this from the v3.0 milestone Jun 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants