'Buienradar' icon set - Githubissues

Borrel88 commented 3 years ago

Would it be possible to enhance this component with icons linked to the Dutch 'Buienradar' integration? I am using sensors from Buienradar, which works well after some tweaking and finding out which sensor to use. Only the icons aren't working well enough. Some icons do, but thats because they happen to have the same name as one of the other 3 integrate icon sets (openweathermap, climacell, darksky).

I know a lot of Dutch people use Home-Assistant, and it would be great that we can use the dutch information provided by Buienradar.

While searching thru the files on this repo, I saw the 3 files where the right names for the different integrations where put. I am willing to help finding the correct names for the different weather conditions.

I am using this integration: https://www.home-assistant.io/integrations/sensor.buienradar/

r-renato commented 3 years ago

Of course it's possible. Give me some time to implement it.

Thanks Renato

Borrel88 commented 3 years ago

Of course, take the time. In the meantime, I found the names used by the 'buienradar' integration. I tried linking a possible icon used by your integration to most of the conditions. Couldn't find a matching icon for 'hail' and 'exceptional'. Also couldn't find one for lighting-rain, might aswell be 'thunder' icon too.

I hope it's usefull for you and saves you some hard-earned free time to look it up.

Name used by Buienradar integration -- Possible icon

cloudy -- cloudy
fog -- fog
hail -- ?? Could be: 'rain-and-sleet-mix' or 'sleet'
lightning -- thunder
lightning-rainy -- https://cdn.buienradar.nl/resources/images/icons/weather/116x116/S.png
partlycloudy -- cloudy-day-3
pouring -- rainy-6
rainy -- rainy-3
snowy -- snowy-4
snowy-rainy -- rain-and-snow-mix
sunny -- day
windy -- wind
windy-variant -- wind
exceptional -- ?? Could be: 'severe-thunderstorm' or 'tropical-storm'

r-renato commented 3 years ago

Hi, what do you think about the following map?

// Buienradar -> icon name
export const cwcBuienradarDayIcons: { [key: string]: string; } = {
  // freezing_rain_heavy: "rainy-3",
  // freezing_rain: "rainy-2",
  // freezing_rain_light: "rainy-1",
  // freezing_drizzle: "rain-and-sleet-mix",
  // ice_pellets_heavy: "rain-and-snow-mix",
  // ice_pellets: "rain-and-snow-mix",
  // ice_pellets_light: "rain-and-snow-mix",
  snowy: "snowy-3",
  "light-snow": "snowy-2",
  "snowy-rainy": "snowy-1",
  "partlycloudy-light-snow": "snowy-1",
  "artlycloudy-snow": "snowy-1",
  // flurries: "wind",
  // tstorm: "tropical-storm",
  // rain_heavy: "rainy-3",
  "partlycloudy-light-rain": "rainy-1",
  "light-rain": "rainy-1",
  "rainy": "rainy-2",
  "partlycloudy-rain": "rainy-1",
  // fog_light: "haze",
  "partlycloudy-fog": "fog",
  cloudy: "cloudy-original",
  // mostly_cloudy: "cloudy-day-3",
  partlycloudy: "cloudy-day-2",
  "partlycloudy-lightning": "cloudy-day-1",
  lightning: "cloudy-day-1",
  // mostly_clear: "cloudy-day-1",
  clear: "day",
};

export const cwcBuienradarNightIcons: { [key: string]: string; } = {
  ...cwcBuienradarDayIcons,
  // freezing_rain_heavy: "rainy-6",
  // freezing_rain: "rainy-5",
  // freezing_rain_light: "rainy-4",
  // freezing_drizzle: "rain-and-sleet-mix",
  // ice_pellets_heavy: "rain-and-snow-mix",
  // ice_pellets: "rain-and-snow-mix",
  // ice_pellets_light: "rain-and-snow-mix",
  // snow_heavy: "snowy-6",
  // snow: "nowy-5",
  // snow_light: "nowy-4",
  // flurries: "wind",
  // tstorm: "tropical-storm",
  // rain_heavy: "rainy-6",
  // rain_light: "rainy-4",
  // rain: "rainy-5",
  // drizzle: "rainy-4",
  // fog_light: "haze",
  // fog: "fog",
  // cloudy: "cloudy",
  // mostly_cloudy: "cloudy-night-3",
  // partly_cloudy: "cloudy-night-2",
  // mostly_clear: "cloudy-night-1",
  // clear: "night"
};

Borrel88 commented 3 years ago

I'm not sure how to look at this mapping. Seems like every line is starting with the name used by the 'Buienradar' integration, and then followed by the icon name? Is that right? If so, I am not sure if all names you used are also provided by the 'Buienradar' integration, but could be me.

I am not skilled enough to understand everything what is happening in the code, but it looks to me that the below code would be better suited and will provide icons for all conditions provided by 'Buienradar'

`// Buienradar -> icon name export const cwcBuienradarDayIcons: { [key: string]: string; } = { cloudy: "cloud-original", fog: "fog", hail: "rain-and-sleet-mix", lightning: "thunder", lightning-rainy: "thunder", partlycloudy: "cloudy-day-2", pouring: "rainy-6", rainy: "rainy-2", snowy: "snowy-4", snowy-rainy: "rain-and-snow-mix", sunny: "day", windy: "wind", windy-variant: "wind", exceptional: "severe-thunderstorm" };

export const cwcBuienradarNightIcons: { [key: string]: string; } = { ...cwcBuienradarDayIcons, // freezing_rain_heavy: "rainy-6", // freezing_rain: "rainy-5", // freezing_rain_light: "rainy-4", // freezing_drizzle: "rain-and-sleet-mix", // ice_pellets_heavy: "rain-and-snow-mix", // ice_pellets: "rain-and-snow-mix", // ice_pellets_light: "rain-and-snow-mix", // snow_heavy: "snowy-6", // snow: "nowy-5", // snow_light: "nowy-4", // flurries: "wind", // tstorm: "tropical-storm", // rain_heavy: "rainy-6", // rain_light: "rainy-4", // rain: "rainy-5", // drizzle: "rainy-4", // fog_light: "haze", // fog: "fog", // cloudy: "cloudy", // mostly_cloudy: "cloudy-night-3", // partly_cloudy: "cloudy-night-2", // mostly_clear: "cloudy-night-1", // clear: "night" };`

r-renato commented 3 years ago

I used the conditions name found here: https://www.home-assistant.io/integrations/sensor.buienradar/ It is right?

Borrel88 commented 3 years ago

Didn't see that the conditions where stated on that page, I got them from a part of the code from the github repo of that integration.

Guess your code looks good then, small type error (listed below). I think it's worth a try, the next couple of days are mixed weather conditions of sun, rain, heavy rain, thunderstorms etc. So good to test it out.

Corrected the small type error in below code: (You missed the P in partlycloudy-snow


// Buienradar -> icon name
export const cwcBuienradarDayIcons: { [key: string]: string; } = {
  // freezing_rain_heavy: "rainy-3",
  // freezing_rain: "rainy-2",
  // freezing_rain_light: "rainy-1",
  // freezing_drizzle: "rain-and-sleet-mix",
  // ice_pellets_heavy: "rain-and-snow-mix",
  // ice_pellets: "rain-and-snow-mix",
  // ice_pellets_light: "rain-and-snow-mix",
  "snowy": "snowy-3",
  "light-snow": "snowy-2",
  "snowy-rainy": "snowy-1",
  "partlycloudy-light-snow": "snowy-1",
  "partlycloudy-snow": "snowy-1",
  // flurries: "wind",
  // tstorm: "tropical-storm",
  // rain_heavy: "rainy-3",
  "partlycloudy-light-rain": "rainy-1",
  "light-rain": "rainy-1",
  "rainy": "rainy-2",
  "partlycloudy-rain": "rainy-1",
  // fog_light: "haze",
  "partlycloudy-fog": "fog",
  "cloudy": "cloudy-original",
  // mostly_cloudy: "cloudy-day-3",
  "partlycloudy": "cloudy-day-2",
  "partlycloudy-lightning": "cloudy-day-1",
  "lightning": "cloudy-day-1",
  // mostly_clear: "cloudy-day-1",
  "clear": "day",
};

export const cwcBuienradarNightIcons: { [key: string]: string; } = {
  ...cwcBuienradarDayIcons,
  // freezing_rain_heavy: "rainy-6",
  // freezing_rain: "rainy-5",
  // freezing_rain_light: "rainy-4",
  // freezing_drizzle: "rain-and-sleet-mix",
  // ice_pellets_heavy: "rain-and-snow-mix",
  // ice_pellets: "rain-and-snow-mix",
  // ice_pellets_light: "rain-and-snow-mix",
  // snow_heavy: "snowy-6",
  // snow: "nowy-5",
  // snow_light: "nowy-4",
  // flurries: "wind",
  // tstorm: "tropical-storm",
  // rain_heavy: "rainy-6",
  // rain_light: "rainy-4",
  // rain: "rainy-5",
  // drizzle: "rainy-4",
  // fog_light: "haze",
  // fog: "fog",
  // cloudy: "cloudy",
  // mostly_cloudy: "cloudy-night-3",
  // partly_cloudy: "cloudy-night-2",
  // mostly_clear: "cloudy-night-1",
  // clear: "night"
};```

r-renato commented 3 years ago

Done. It's in the version just released. Try if it works.

Thanks, Renato

Borrel88 commented 3 years ago

Thank you. Seems all the time I was answering in the wrong issue thread :/ So, just trying it again.

The icons are working for the forercast. But the icon for the current condition is not showing up. I am getting these errors in browser console:

ha-card-weather-conditions.js:381 {card_config: {…}}
3:1 GET https://<PRIVATE_URL>/local/community/ha-card-weather-conditions/icons/static/undefined.svg 404
ha-card-weather-conditions.js:270 Icons issue. States: icons_model=buienradar - isDay=true - condition: na.

The last line is popping up multiple time a second and keeps going on

EDIT: Did some searching in the browsers devtools. The current condition provided by the sensor now is 'partlycloudy', and it looks like the script is not searching for the 'partlycloudy' set icon, but for 'partly_cloudy' set icon. It cannot find this one because it is not set in the buienradar file, so it now looks for 'Undefined.svg' , which obviously doesn't exist.

narfel commented 3 years ago

I'm having the exact same problem. It started after i had to switch the base url. There's also a warning in the devtools "use HACS path to retrieve icons". I don't know who this is adressed at. It's for all icons, not only partly cloudy. Funny enough the glyphs for moon phase work fine and didn't before.

r-renato / ha-card-weather-conditions

'Buienradar' icon set #41