Custom UI: Buienradar rain forecast graph

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.

sn33ky · January 7, 2021, 7:24am

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.

TheMystery · January 22, 2021, 6:32pm

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?

Fabian_V · January 22, 2021, 6:38pm

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?

snelu · January 23, 2021, 8:36am

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

Fabian_V · January 23, 2021, 1:18pm

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

snelu · January 28, 2021, 10:38am

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

Fabian_V · January 29, 2021, 2:19pm

snelu:

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

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

snelu · February 1, 2021, 3:15pm

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"

Fabian_V · February 1, 2021, 3:33pm

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.

sorz212 · February 4, 2021, 7:22am

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