Custom UI: Buienradar rain forecast graph

Share your Projects! Dashboards & Frontend
1

Hey everyone! So I’m building a pretty custom Lovelace UI over here. One thing that was really bugging me, I couldn’t graph forecasted rain in a history graph. This is a quick little card designed purely for Buienradar (Netherlands) rain forecast data.

buien-card-screenshot1
buien-card-screenshot11028×398 24.4 KB

I admit, its incredibly rough - I used chartjs to display the graph. That being said, if you know a little javascript you can probably easily modify this to graph anything non historic. You can customize the color, icon and location that it sources rain data from (Netherlands only):

      - type: 'custom:buien-rain-forecast'
        long: xx.xxx
        lat: xx.xxx
        lineColor: 'rgba(89, 160, 238, 1)'
        fillColor: 'rgba(89, 160, 238, 0.2)'
        icon: 'mdi:weather-rainy'
8 Likes
2

Nice, but i have to use the type “buien-rain-forecast” in the card

Can’t wait 'til the next rain :slight_smile:

- type: 'custom:buien-rain-forecast'
        long: 4.93423
        lat: 52.36515
        lineColor: 'rgba(89, 160, 238, 1)'
        fillColor: 'rgba(89, 160, 238, 0.2)'
        icon: 'mdi:weather-rainy'
3

Indeed! Edited the post - forgot I changed it on my own config, cheers

4

Hmm, can’t get it to work.

Placed the buien-rain-card.js file into the www directory, added the reference to Lovelace, rebooted and added the code below in an Lovelace manual card:

type: 'custom:buien-rain-forecast'
lat: 52.3667
long: 4.8945
fillColor: 'rgba(89, 160, 238, 0.2)'
lineColor: 'rgba(89, 160, 238, 1)'
icon: 'mdi:weather-rainy'

Getting this error:

Custom_Buien_Forecast
Custom_Buien_Forecast744×246 9.12 KB

5

Looks like you either haven’t put it into the correct folder or you didn’t get the raw script.

6

Copied and paste the raw script into the js file did the trick, thanx Gluwc !

7

Is there a way to change the frequency of the graph update ?
Now it flickers on the screen constantly.

1 Like
8

Actually, I was wondering the same thing. Right now this is a problem with the rough way I have written the code. I sort of had to pick whether to draw the card once, or keep drawing it so it updates. Problem is, it updates alot…

Does anyone know how to reduce the refreshrate of a card? It’s not usually necessary as other graphs work from the built in history graph. I’ll keep looking into it and let you know what I find / update

9

Thanx in advance to take a look at it…

1 Like
10

Looks great this add-on! Great job!

I do have 1 question, the card is flikkering on my MacBook Air, is this a known issue?

1 Like
11

Updated! Let me know if this fixes it!

12

Updated! Let me know if this fixes it?

13

Well, the frequency is definitely less.

After a refresh of the page the expected rain is displayed, after a couple of seconds it starts to reload itself unregulated , sometimes a couple times fast, and sometimes a few seconds in between.

14

Yep just noticed its still flickering damn! Very odd. Plan B…

15

My programming skills are very basic :roll_eyes:, otherwise I would help you with it

1 Like
16

It’s to do with the update frequency and how I’m setting it. I really want it fixed as I want to use the method for some other graph cards!

1 Like
17

Ok, just let me know to test it.

18

FINALLY! I think I nailed it. Take two! Try this update:

19

This should fix it!

20

That seems to be working !
Watt’s the update frequency now?

Other question, this week the expected rain exceeded the level of 5, but the graph will only display 5 at maximum, can that be true?