'Buienradar' icon set

[Borrel88]

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]

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

Thanks Renato

[Borrel88]

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]

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]

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]

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

[Borrel88]

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]

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

Thanks, Renato

[Borrel88]

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]

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.