Home Assistant dashboard: Weather in The Netherlands

Here you can find dashboard related to the weather in the Netherlands.

There are a lot of weather sites who service weather data on the web or in apps. We can use that data also to show direct on our Home Assistant dashboards.

Animated weather predictions
Weather predictions
Rain expected value
Rain radar animated
- Buienradar with residence marker
- Weeronline
Weather alarm map
Weather alarm
- Conditional weather alarm
Pollen
- image 1
- Image 2
Precipitation surplus (neerslagoverschot)
Bike/BBQ/Terrace weather score upcoming days

Animated weather predictions

Install the HACS clock-weather-card integration via this button

# Sourcecode by vdbrink.github.io
# Dashboard card code
type: custom:clock-weather-card
entity: weather.home
forecast_days: 3
locale: nl
time_format: 24
date_pattern: P
hide_today_section: false
hide_forecast_section: false

Weather predictions

Nice overview of the current weather predictions.

Install the HACS weather-chart-card integration via this button

# Sourcecode by vdbrink.github.io
# Dashboard card code
type: custom:weather-chart-card
entity: weather.home

Rain expected value

Based on the Buienalarm data: a number how much rain is expected.

# Sourcecode by vdbrink.github.io
# Dashboard card code
- platform: template
  sensors:
    buienalarm_rain_expected:
      friendly_name: "rain expected"
      value_template: >-
        {% set rain = state_attr('sensor.neerslag_buienalarm_regen_data', 'data').precip %}
        {% set total_precip = 0 %}
        {% for value in rain %}
          {% set total_precip = total_precip +(value | int) %}
        {% endfor %}
        {{ total_precip }}

Rain radar animated

Buienradar with residence marker

Buienradar has a Home Assistant integration which contains, next to weather entities, also an animation of the rain expectation for The Netherlands.

I added myself an extra residence marker to it !!!!

Result

Installation

You need to install the Buienradar integration with this button

Enable the radar entity

Enable the Buienradar radar entity camera.buienradar, this one is disabled by default.

See how to do this:

Or direct go to all entities and filter on camera.buienradar.

Create the dashboard card

Now all preparations are done, the dashboard card can be created.

Add a new card to your dashboard (or edit your existing) with this content and change the top and left properties to position the marker to your residence. And use scale to change the size of the image.

The marker looks like this:
You can also use any other images you like better.

# Sourcecode by vdbrink.github.io
# Dashboard card code
type: picture-elements
camera_image: camera.buienradar
camera_view: live
aspect_ratio: '1:0.75'
elements:
  - type: image
    image: https://vdbrink.github.io/homeassistant/images_weather/marker_home.svg
    style:
      top: 60%
      left: 50%
      scale: 100%

(The aspect_ratio is needed because by default only half of the image is shown.)

Alternative implementation

Instead of an online file, it’s also possible to use a camera entity or download the file locally.

> Click here to see the other examples with: camera entity / local file >>

Via a camera image

Add a Generic camera integration:

Use the url https://raw.githubusercontent.com/vdbrink/vdbrink.github.io/main/homeassistant/images_weather/marker_home.svg It’s this marker

Rename the sensor to camera.marker_home

# Sourcecode by vdbrink.github.io
# Dashboard card code
type: picture-elements
camera_image: camera.buienradar
camera_view: live
aspect_ratio: '1:0.75'
elements:
  - type: image
    entity: camera.marker_home
    camera_image: camera.marker_home
    style:
      top: 60%
      left: 50%
      scale: 100%

Via a local image

You can also use the image as a local image.
Download the file https://raw.githubusercontent.com/vdbrink/vdbrink.github.io/main/homeassistant/images_weather/marker_home.svg and place if in your local Home Assistant /www/ directory.
And use this script:

# Sourcecode by vdbrink.github.io
# Dashboard card code
type: picture-elements
camera_image: camera.buienradar
camera_view: live
aspect_ratio: '1:0.75'
elements:
  - type: image
    image: /local/marker_home.svg
    style:
      top: 60%
      left: 50%
      scale: 100%

Consider a small donation if you like this blog.

Weeronline

An animated image of 2 hours prediction of the rain in steps of 5 minutes.

# Sourcecode by vdbrink.github.io
# Dashboard card code
type: iframe
url: https://www.weeronline.nl/widget/radar?id=135
aspect_ratio: '1.06'

Weather alarm map

Source: KNMI

Alarm code colors per province.

# Sourcecode by vdbrink.github.io
# Dashboard card code
type: picture-elements
image: https://cdn.knmi.nl/knmi/map/current/weather/warning/waarschuwing_land_0_new.gif
elements:
- type: image
  title: Weercode
  tap_action:
  action: url
  url_path: https://knmi.nl

Weather alarm

Source: KNMI

Read the weather alarm code and description from the KNMI.nl site.

First you need to define a scraper to scrape every 10 minutes the latest alarm code and text.

# Sourcecode by vdbrink.github.io
# configuration.yaml
- platform: scrape
  resource: https://www.knmi.nl/nederland-nu/weer/waarschuwingen/overijssel
  select: "div.alert__heading"
  name: "knmi weercode"
  scan_interval: 600

- platform: scrape
  resource: https://www.knmi.nl/nederland-nu/weer/waarschuwingen/overijssel
  select: "a.alert__description"
  name: "knmi weer waarschuwing"
  scan_interval: 600

This is the corresponding code for the screenshot.

The custom CSS color styling is done with the HACS module lovelace-card-mod Install it via this button

# Sourcecode by vdbrink.github.io
# Dashboard card code
type: entities
title: Weer alarm
entities:
    - entity: sensor.knmi_weercode
      name: KNMI Weercode
      icon: mdi:bell-ring
      card_mod:
          style: |
          :host {
              --card-mod-icon-color:
              {% if is_state('sensor.knmi_weercode', 'Code groen') %}
                #008000;
              {% elif is_state('sensor.knmi_weercode', 'Code geel') %}
                #ffd700;
              {% elif is_state('sensor.knmi_weercode', 'Code oranje') %}
                #ffa500;
              {% elif is_state('sensor.knmi_weercode', 'Code rood') %}
                #ff4500;
              {% else %}
                #44739e
              {% endif %}
          }
    - entity: sensor.knmi_weer_waarschuwing
      icon: mdi:alarm-light
show_header_toggle: true
state_color: true

Check the styling page for more ways to give elements the color of the weather alarm.

Conditional weather alarm

You can add this data also to your Important data panel and only show this information when it’s not code green. The text is also clickable to open the corresponding site with more info.

# Sourcecode by vdbrink.github.io
# Dashboard card code
- type: conditional
  conditions:
    - entity: sensor.knmi_weercode
      state_not: Code groen
  row:
    entity: sensor.knmi_weercode
    tap_action:
      action: url
      url_path: >-
        https://www.knmi.nl/nederland-nu/weer/waarschuwingen/overijssel  
- type: conditional
  conditions:
    - entity: sensor.knmi_weercode
      state_not: Code groen
  row:
    entity: sensor.knmi_weer_waarschuwing
    tap_action:
      action: url
      url_path: >-
        https://www.knmi.nl/nederland-nu/weer/waarschuwingen/overijssel

Pollen

image 1

Source: Pollennieuws

Show the actual pollen intensity image.

This is the basic variant that shows only the image.

# Sourcecode by vdbrink.github.io
# Dashboard card code
type: picture-elements
image: https://pollennieuws.nl/weerkaart/KaartNL_280-website.png

In this version, it’s possible to also click on the image to open the Pollennieuws website.

You have to place the overlay image black.png in the Home Assistant www directory first.

# Sourcecode by vdbrink.github.io
# Dashboard card code
type: picture-elements
image: https://pollennieuws.nl/weerkaart/KaartNL_280-website.png
elements:
- type: image
  title: Pollennieuws
  tap_action:
    action: url
    url_path: https://pollennieuws.nl
  image: /local/black.png
  aspect_ratio: 1x1
  style:
    top: 0%
    left: 0%
    height: 200%
    width: 228%
    opacity: 0%

Image 2

Source: Buienradar

Show the actual pollen intensity image from another source.

Another way to show an image is with the image entity card. Here you can also add some text and an entity, like the current outside temperature.

# Sourcecode by vdbrink.github.io
# Dashboard card code
show_state: false
show_name: true
camera_view: auto
type: picture-entity
image: https://api.buienradar.nl/image/1.0/pollenradarhourlynl?w=500&h=512
entity: sensor.outside_temp_rounded
name: Pollen
tap_action:
  action: url
  url_path: https://www.buienradar.nl/nederland/gezondheid/pollen

Precipitation surplus (neerslagoverschot)

Source: KNMI

Image with the precipitation surplus (neerslagoverschot) for (the last) 3 months.

# Sourcecode by vdbrink.github.io
# Dashboard card code
type: picture-elements
image: >-
  https://cdn.knmi.nl/knmi/map/page/klimatologie/geografische-overzichten/rdev/rdev_geografisch.png
elements:
  - type: image
    title: Neerslagoverschot

Bike/BBQ/Terrace weather score upcoming days

Source: Weerplaza

An iframe with a compact presentation of the weather for the next 3 or 5 days and a score for different type of activities.

Find more widgets at https://www.weerplaza.nl/weerwidgets/

# Sourcecode by vdbrink.github.io
# Dashboard card code
type: iframe
url: https://www.weerplaza.nl/weerwidgets/activiteit/?YT1maWV0cyZnaWQ9NTU3NQ==
aspect_ratio: 60%
title: fietsweer

^^ Top

Top | Homepage | Best Buy Tips

vd Brink Home Automations

Home automations: Home Assistant, ESPHome, Node-RED and more.

Home Assistant dashboard: Weather in The Netherlands

Table of Contents

Animated weather predictions

Weather predictions

Rain expected value

Rain radar animated

Buienradar with residence marker

Result

Installation

Enable the radar entity

Create the dashboard card

Alternative implementation

Via a camera image

Via a local image

Weeronline

Weather alarm map

Weather alarm

Conditional weather alarm

Pollen

image 1

Image 2

Precipitation surplus (neerslagoverschot)

Bike/BBQ/Terrace weather score upcoming days