Custom UI: Buienradar rain forecast graph

JoFie · January 2, 2021, 9:45am

When you update a plugin, you may have a problem actually implementing the changes because the old version may be cached by your browser. There is a convenient workaround, namely to put a version behind the resource declaration, in the format ?v=xx (where “xx” can basically be anything to make a new version different from the previous).
In Configuration -> Lovelace Dashboards, under Resources, you can specify the plugin file with a version as shown below, then all you have to do to make a new change effective in Lovelace is to update this Resource by increasing the “version”, and then refresh the Overview page where the plugin is used.

/local/rain-card-buien.js?v=1.0

And perhaps you may want to swap the legends “licht” and “matig” around. To me “matig” (moderate) sits between “licht” (light) and “zwaar” (heavy).

Fabian_V · January 2, 2021, 7:55pm

thanks, the card has also update issues, so for now I park this one…

bouwew · January 3, 2021, 11:48am

I think I’ve managed to fix (at least improve) the update issues, please test with this file: https://raw.githubusercontent.com/bouwew/lovelace-buien-rain-card/master/buien-rain-card.js

This file also contains the proposed changes w.r.t. to the licht, matig and zwaar indicators.

spudje · January 3, 2021, 12:35pm

I based my licht, matig & zwaar on buienalarm, not on buienradar. So, indeed change this the way you want.

I don’t have the experience and time to turn my/our changes into a updated or separate version of this custom component. Ideally you want all these things configurable there.

bouwew · January 3, 2021, 1:02pm

Ok clear.

I’m happy to maintain the code in my github https://github.com/bouwew/lovelace-buien-rain-card until @lukevink is ready to pick this up again.

snelu · January 4, 2021, 4:15pm

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.

bouwew · January 4, 2021, 5:59pm

@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.

JoFie · January 4, 2021, 9:25pm

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.

RainCard-Dark2
RainCard-Light

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

(mdi icon repository)

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

f.welvering · January 5, 2021, 12:40pm

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?

afbeelding

      - 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"

snelu · January 5, 2021, 12:51pm

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.

JoFie · January 5, 2021, 1:29pm

@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:

URL: /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.

sn33ky · January 5, 2021, 1:36pm

Here it works,

As i just integrated it to my Lovelace.

f.welvering · January 5, 2021, 1:49pm

That helps al lot, it now works like it should.

afbeelding

JoFie · January 5, 2021, 1:58pm

@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.

sn33ky · January 5, 2021, 7:00pm

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

bouwew · January 6, 2021, 7:25am

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/

sn33ky · January 6, 2021, 10:09am

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.

bouwew · January 6, 2021, 10:31am

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.

JoFie · January 6, 2021, 11:05am

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.

bouwew · January 6, 2021, 11:10am

Yes, that’s another option. Combining Uvi and Cloudiness should provide the wanted result.