Since some people seem to work on this project again, I would like to ask this question again:
@bouwew, @spudje I used your new/maintained code, but I still expierence, that the graph will not show up, as soon as I edit the latitude below 49.000. I also deleted the browser cach (firefox v83) and restarted HA + Browser. My code from my original post has not changed - it seems to work for Amsterdam.
@snelu I’ve quickly looked at what is happening. I’ve tried using this URL: https://gpsgadget.buienradar.nl/data/raintext/?lat=49.5&lon=5.0
With lat=49.5 it provides valid output, with lat=49.49 the output is blank.
So this a something that is related to the above URL/website. There’s nothing we can do to fix this. I would suggest using the lowest lat-number that works for you.
Also, I’ve noticed the lat and long numbers are rounded to two decimals.
I played around a bit with the graphics side of things, and came up with something as shown below. Problem with the original version is that it only looks good in dark mode, but with a white background the line labels are still shown in black and it looks terrible. I’ve tried to make the labels transparent, but that does not work well when the label is positioned over the line, so I moved it to just above the line. Maybe someone else can have a go at this if the current position is not good.
The “Licht”, “Matig” and “Zwaar” marking lines are now configurable as card parameters, allowing each user to apply his own criteria for light, moderate or heavy rain.
If the parameters are not set, then no lines are displayed.
Below are the current parameters, with their default behavior/values if the parameter is not configured:
| Parameter | Description | Required | Default | ` |
|---|---|---|---|---|
| Title | Title of card | Optional | - - no title - - | (blank) |
| long | Longitude | Required | 4.899431 | Amsterdam |
| lat | Latitude | Required | 52.377956 | Amsterdam |
| heavyRain | Heavy rainfall value | Optional | - - no line - - | |
| moderateRain | Moderate rainfall value | Optional | - - no line - - | |
| lightRain | Light rainfall value | Optional | - - no line - - | |
| lineColor | Color of Graph line | Optional | rgba(89, 160, 238, 1) | (blue) |
| fillColor | Color under graph line | Optional | rgba(89, 160, 238, 0.2) | (blue, with 0.2 opacity) |
| update_interval | Interval between each refresh | Optional | 20 | |
| icon | HA Card icon | Optional | mdi:weather-rainy |
Below is an example of the card configuration for the graph shown above:
type: 'custom: 'buien-rain-forecast'
title: 2-Hr Rain Forecast
long: 4.899431
lat: 52.377956
heavyRain: 1.7
moderateRain: 1.1
lightRain: 0.5
lineColor: 'rgba(89, 160, 238, 1)'
fillColor: 'rgba(89, 160, 238, 0.2)'
update_interval: 300
icon: 'mdi:weather-rainy'
style: |
.chartjs-render-monitor {
height: 200px;
}
top: 58%
left: 12%
width: 24%
opacity: 0
Hi,
I used your example but my scaling is different?
And i do not see the Licht, Matig and Zwaar.
Can you point me in the richt direction?
- type: "custom:buien-rain-forecast"
long: 6.16
lat: 53.1
heavyRain: 1.7
moderateRain: 1.1
lightRain: 0.5
lineColor: "rgba(89, 160, 238, 1)"
fillColor: "rgba(89, 160, 238, 0.2)"
update_interval: 120
icon: "mdi:weather-rainy"
style: |
.chartjs-render-monitor {
height: 200px;
}
top: 58%
left: 12%
width: 24%
title: "2 uren regen verwachting"
Thanks for your help. I just now understood, that buienradar semms to only offer data for the netherlands and not Germany, which is a real pitty. I liked this integration.
@f.welvering Can you access my Github fork of the original project? The “buien-rain-card.js” should have changes marked “v0.0.6”. If yes, then deploy this file to your environment as described earlier in this thread. Make sure that the new code is used, and not a previously cached version. Easiest is to add or increase the version number of your HA Resource definition, then refresh (F5) the Lovelace Overview page where you added the card:
/local/buien-rain-card.js?v=0.0.6
The versions in the resource definition and in the file does not need to match, but it may help troubleshooting if you try different versions over time, because the resource version is actually shown in the HA error logs if something goes wrong.
Just for the record, v.0.0.6 also includes the update improvements made by @bouwew.
That helps al lot, it now works like it should.
@f.welvering, @sn33ky… great!
If you have any comments or wishes, please shout. Maybe the coloured dotted lines would look better solid and grey. Etc. This is my first go at .js, and custom cards, so everything is a challenge. But there are smart guys out there who should be able to help us.
Well i have a Wish, but that is kinda hard to make i guess. On my android phone i have a widget called “Meteogram Widget” where it is possible to set a “sunshine” radar for the next 24u or 48u. it basically looks at the percentage of cloudiness but translates it to a sunshine % (or clear sky at night).
Is that possible to make? A shunshine Radar. This helps me to get walking/running/sporting outside in the winter period, where the buienradar keeps me inside in the summer 
The middle widget where you see the yellow line
Have a look here to see if there is anything useful: REST API command/platform fails on POST to external URL (solcast)
Update: I’m looking at the SolarGIS website now https://solargis.com/
I think that is more oriented at solar panel users. and it seems you need to have a solar system to use “solcast”. But it would be cool to have a simple radar for sun% (reverse cloudines) as buienradar has for rain. something like: Zonradar (buienradar.nl) but then in a graph in HA like the buienradar Custom UI.
Nice find! I see there is one for NL as well: https://www.buienradar.nl/nederland/zon-en-wolken/zonradar/3uurs
But, in the end we need to be able to fetch numerical data, the solargis-api can provide irradiance data, which is what is needed for your wish. If the buienradar website can provide this numerical data as well, then we are golden.
Have you had a look at the OpenWeather integration?
Not sure what information is shown in HA, but in e.g. the One Call API there is a Cloudiness value that may give you an idea of how cloudy it will be.
Yes, that’s another option. Combining Uvi and Cloudiness should provide the wanted result.
is there some bug? my home is at the red dot. north of belgium.
All information on the screenshot is coming from buienradar data. but the buienradar rain forecast tells me there is no rain now and the next 2 hours. On my android widget from buienradar itself there is the entire 2 hours buien on the widget.
I use this card for a while now, but it is only showing up half the time, if I refresh the page it appears again.
Is there a solution for this problem?
good see some movement here and also good improvements, so time to try it again as it looks like, also wondering if it keeps visible?
I liked this integration, so I tried to rebuild it with data from clima cell (they offer precipitation forecast for every minute, 10, 15, 30… Minute) and visualization by mini graph card.
Its far from perfect but does the job. I was just wandering, if it would be possible to add climacell data to the buienradar integration, as it is in a better design and shape and would it make accessible to almost to proably users worldwide.
Unfortunately I do not know any js and therefore can not help out - its just an idea.
Looks good, is it a bit accurate? can you share your card details?
