Custom UI: Buienradar rain forecast graph

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.


1 Like

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.

Screenshot_2021-01-23 Übersicht - Home Assistant

1 Like

Looks good, is it a bit accurate? can you share your card details?

yes, for me it is accurate. Here are the details. You need custom mini graph and climate cell integration. Both available over hacs:

type: 'custom:mini-graph-card'
name: Regen
bar_spacing: 25
decimals: 2
height: 200
hours_to_show: 2
icon: 'mdi:rain'
entities:
  - entity: sensor.cc_daily_precipitation_00m
    name: jetzt
    color: 'rgb(204, 229, 255)'
  - entity: sensor.cc_daily_precipitation_30m
    name: '0:30'
    color: 'rgb(153, 204, 255)'
  - entity: sensor.cc_daily_precipitation_60m
    name: '1:00'
    color: 'rgb(102, 178, 255)'
  - entity: sensor.cc_daily_precipitation_90m
    name: '1:30'
    color: 'rgb(51, 153, 255)'
  - entity: sensor.cc_daily_precipitation_120m
    name: '2:00'
    color: 'rgb(0, 128, 255)'
  - entity: sensor.cc_daily_precipitation_150m
    name: '2:30'
    color: 'rgb(0, 102, 204)'
  - entity: sensor.cc_daily_precipitation_180m
    name: '3:00'
    color: 'rgb(0, 76, 153)'
  - entity: sensor.cc_daily_precipitation_210m
    name: '3:30'
    color: 'rgb(0, 51, 102)'
show:
  labels: true
  graph: bar
  hour24: false
  extrema: false
  average: false
  state: true

1 Like

Can you also send the config og your sensors? I get stuck somewhere

sure:

- platform: climacell
  api_key: !secret climacell_api_key
  name: YOURNAMEHERE
  latitude: !secret latitude
  longitude: !secret longitude
  units: metric
  timelines:
    - name: "Daily"
      fields:
        - precipitation
        - precipitation_type
      start_time: 0
      forecast_observations: 8
      timestep: "30m"
      update: auto
      scan_interval:
        # At least one of these must be specified:
        days: 0
        hours: 0
        minutes: 20
        seconds: 0
        milliseconds: 0
      exclude_interval:
        1:
          - "20:00"
          - "07:00"
1 Like

That helps, I have other sensors, going to try this also…

The Buienradar graph is also working so far I can judge, so going to put them next to each other.

is there a possibility to use the card in germany? the source does not support my longitude and latitude. ?

I’m afraid this one will only work in the Netherlands…

what is here wrong?

install via hacs

image

I had that too. I had to do a Ctrl-F5 refresh of my browser to get that part to work.

Unfortunately the card itself didn’t work at all here. I got only a white rectangular space, without any data.

hm, after a refresh i get this here:

You need to use this one: Custom UI: Buienradar rain forecast graph this is a modified one that is working

thx, is that right?

looks correct, just read up for the instructions:

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.

thx for your reply.

yes, i ve access to your github page. i had copy all files to my /local/ folder

image

but will not works. should i see a template here (?), like custom: Rpi Monitor Card?

i added the code in a custom card, hope this is right

You must be in the Netherlands as it’s a Dutch only card.

Use this config to test if you’re in the Netherlands.


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

i live in germany, on the border of the netherlands (10km). normaly the forecast works here.

the script:
image