Custom UI: Buienradar rain forecast graph

Share your Projects! Dashboards & Frontend
39

Got the same issue when look on my laptop/dekstop.

But when looking on my mobile the graph shows properly.

40

Hey all taking a look into all of this. I will probably update the graph system. Side note: I also figured out how to scrape BuienAlarm (better forecast!). So im working on this too. Will keep you posted

2 Likes
41

I almost always see it being drawn, but then lovelace starts laying out the cards (on an old ipad with the homeassistant app, you can really see this happening) and then the graph disappears…

42

This looked like a nice component, but broken here as well :frowning:

Fixed it by using a suggestion in one of the github issues:

  - type: 'custom:buien-rain-forecast'
    long: 4.8945
    lat: 52.3667
    lineColor: 'rgba(89, 160, 238, 1)'
    fillColor: 'rgba(89, 160, 238, 0.2)'
    update_interval: 10
    icon: 'mdi:weather-rainy'
    style: |
      .chartjs-render-monitor {
        height: 200px;
      }

It may be you need something like card-mod. I have a couple of these custom components installed.

So how can I make this only appear under the condition there is indeed rain coming?

43

Is there also a possiblity to hide the time frames or make the amount of rain dynamic in height (so that if 0.3 falls the graphic doesn’t go up till 12 or something :slight_smile: ) t

thanks!

44

Hey everyone sorry for being off and on the community here - I don’t always get time to mess around with these things. I’m going to check what’s going on with the current card and fix the things mentioned here.

Im also looking at scraping data from buien alarm (I find their data to be more accurate). So will keep you all posted. Cheers!

2 Likes
45

Maybe it would be possible to provide just some sensors which we can feed into something like mini-graph. That makes more UI tweaking possible and less work for you?

1 Like
46

Sorry for not doing it the proper Github way (no time to study how it works currently), but I added a tweaked version as issue: https://github.com/lukevink/lovelace-buien-rain-card/issues/12

This version contains annotations (and the plugin included) to make it look more like buienalarm and I tried something else to scale the y-axis a bit better.

47

I installed using HACS and I can access the .js file from the browser correctly.
It does report “Custom element doesn’t exist: buien-rain-forecast” however.
What can I do to fix this?
One other thing I saw is that the description in hacs shows information about another plugin about a swiping function (no info about the buien-rain-forecast)

48

Do you have a example how te lovelace card is configured?

49

Have you added it to Configuration -> Lovelace Dashboards -> Resources?

50 
                fillColor: 'rgba(89, 160, 238, 0.2)'
                icon: 'mdi:weather-rainy'
                lat: <lat>
                long: <long>
                lineColor: 'rgba(89, 160, 238, 1)'
                style:
                  top: 58%
                  left: 12%
                  width: 24%
                  opacity: 0.75
                type: custom:buien-rain-forecast
                update_interval: 150

And I put that extra style somewhere.

.chartjs-render-monitor {
                height: 170px;
51

Now I did… did not have to do that for other HACS installs, thought I could ignore that… :blush:
Thanks

52

Thanks for the fix spudje, by copying your modified JS file this card works.

For reference info:
I installed the original one first via HACS, no need to update lovelace resource configuration. The HACS installation works but the description is indeed wrong (it’s about a swipe card). Just ignore and install.
Then afterwards, overwrite with the adjusted file from spudje. Seems to work now!

53

How did you do this?
I did the exact same thing as you, but mine doesn’t work.
Can you share your config?
i did this:

Naamloos

54

Hmm, maybe I was too early. It’s not stable at least.
This is my card config:

type: 'custom:buien-rain-forecast'
icon: 'mdi:weather-rainy'
long: 1.2345
lat: 12.3456
lineColor: 'rgba(89, 160, 238, 1)'
fillColor: 'rgba(89, 160, 238, 0.2)'
update_interval: 300
style:
  top: 58%
  left: 12%
  width: 24%
  opacity: 0.75

And do not forget to replace the JS file with the one from Spudje.
It works, however after a while (update_interval?) it stops working and the graph is empty. A page refresh or app restart does the trick again…

55

doesn’t do anything for me.
Thanks for the config though!

Hope this gets fixed, it was so nice!

56

@spudje thanks for the code, I could also get it working by overwriting the HACS file with the one you pointed. Just one strange thing : the Y-AXIS remains always set at 10. If I look at the code with the .js file, it’s supposed to scale related to the level of expected rain. I saw there was also some scaleMax paramter which I tried to you in the card config, but no effect.
Any idea why the Y-AXIS doesn’t scale properly ? Could this be a unit definition issue (like . versus , for decimal separator ?)

Here is how my card is configured:

type: 'custom:buien-rain-forecast'
long: 4.xxxx
lat: 50.xxxx
lineColor: 'rgba(89, 160, 238, 1)'
fillColor: 'rgba(89, 160, 238, 0.2)'
update_interval: 10
icon: 'mdi:weather-rainy'
style: |
  .chartjs-render-monitor {
    height: 200px;
  }
57

Iirc it uses scaleMax as Y-axis max, unless it is not set or smaller than 2,5. Then it will use 2,5. In my code I use a . (dot) for decimals, so maybe using a , (comma) it works for you? line 88, 333 & 336.

Should’ve been a reply to @littlbee

58

EDIT: Deleted my question.

It is working now, only it shows the graphics on my phone and not on my PC with Chrome browser, as mentioned above by other users. But not big issue for me.