Custom UI: Buienradar rain forecast graph

Share your Projects! Dashboards & Frontend
21

Really cool card. Hopefully someone attempts to do something similar with US data sources, like OpenWeatherMap.

22

I have some issue causing this card to visualize incorrectly.

It looks like the card does show up twice when in lovelace edit mode (notice the two icons). The top visualisation looks ok (although sometimes is shows some ‘flickering’):

image
image1062×435 77.1 KB

Once I press save the bottom (empty) visualization is all that remains:

image

Any clue what is wrong here. I’m almost sure I did follow all install instructions properly (just today, so it must be the latest version).

Thanks, Dennis

23

Ah bad design. It’s hard coded there, let me update the limit :slight_smile: I wasn’t considering the crazy amount of rain we are having :open_mouth:

24

Thanks, please let us know when you found some time to update it. It looks like a card that add some useful functionality to my UI.

Dennis

25

Hello,

I’m having the same issue right now; the empty cards only showing the little rainy cloud.
Any idea how to fix it? i really like your UI!

Maybe a creazy tought; can it be because the prediction is all zero?

Thanks

26

Hello,

just found something interesting! On desktop (chrome and firefox) the graph card looks empty. On my iPhone (HA App) the graph is showing correct. Also on a mobile browser (safari) the graph looks good.

Any idea how this is possible/fixable?

27

Related to the issue in Chrome, I see this in the Network log:

SyncMessage.js:293 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
28

Same problem here. Don’t know how to solve it

29

Thx for this !
Could there be a possibility to set the forecast interval ? So not only hours, but days ?

30

I got this:

image
image928×288 1.27 KB

              - type: 'custom:buien-rain-forecast'
                long: 4.8945
                lat: 52.3667
                lineColor: 'rgba(89, 160, 238, 1)'
                fillColor: 'rgba(89, 160, 238, 0.2)'
                icon: 'mdi:weather-rainy'
                style: |
                  ha-card {
                    border-radius: 10px;
                    box-shadow: 5;
                    overflow: hidden;
                    height: 100%;
                  }

Any idea what is wrong (it is placed in a horizontal stack) ?

31

Me too I have is as a separate card

32

Probably caused by the desktop issue mentioned above (works fine on Android).
Card doesn’t scale very well though :frowning:

33

Could there be a possibility to set the forecast interval ?

No, the provided data only covers a fixed time-interval in the future.

If you want to look ahead for days, try my solution: Buienalarm visuals in a Panel Iframe

34

@lukevink

Hi Luke, can you provide a solution for the empty card problem? :slight_smile:

image

35

Following, i have the same issue :wink:
Preview works perfect.

The height of the canvas is set to 0.
Manual changing it to 300 px make the graph visible.

36

Hey all! Sorry have been a bit busy and not on the community lately. Can you guys tell me what version of hass.io you are running? (I havent updated past 0.108.3 yet).

37

0.109.6 (latest)

38

Same issue with 0.110.1. It sometimes shows a graph after refreshing the page, but most of the time, no graph…

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