Hi @Mariusthvdb,
I saw a screenshot of your weather dashboard, and I was curious how you got the text for short- and longterm predictions?
Can you share how you did this? 
sure, it’s based on a rest sensor to the Buienradar resource url:
rest:
# {"$id":"53","stationid":6340,
# "stationname":"Meetstation Woensdrecht",
# "lat":51.45,"lon":4.33,
# "regio":"Woensdrecht","timestamp":"2025-02-18T07:30:00",
# "weatherdescription":"Zwaar bewolkt",
# "iconurl":"https://www.buienradar.nl/resources/images/icons/weather/30x30/cc.png",
# "fullIconUrl":"https://www.buienradar.nl/resources/images/icons/weather/96x96/CC.png",
# "graphUrl":"https://www.buienradar.nl/nederland/weerbericht/weergrafieken/cc",
# "winddirection":"O","airpressure":1024.7,"temperature":-5.0,
# "groundtemperature":-6.7,"feeltemperature":-9.5,
# "visibility":12300.0,"windgusts":3.8,
# "windspeed":3.0,"windspeedBft":2,
# "humidity":86.0,"precipitation":0.0,
# "rainFallLast24Hour":0.0,"rainFallLastHour":0.0,
# "winddirectiondegrees":80}
- resource: https://data.buienradar.nl/2.0/feed/json
scan_interval: 86400
sensor:
- unique_id: rest_sensor_buienradar_weatherreport
value_template: >
{{value_json.forecast.weatherreport.title}}
json_attributes_path: '$.forecast.weatherreport'
json_attributes:
- summary
- text
- published
- unique_id: rest_sensor_buienradar_shortterm
value_template: >
{{value_json.forecast.shortterm.startdate}}
json_attributes_path: '$.forecast.shortterm'
json_attributes:
- forecast
- startdate
- enddate
- unique_id: rest_sensor_buienradar_longterm
value_template: >
{{value_json.forecast.longterm.startdate}}
json_attributes_path: '$.forecast.longterm'
json_attributes:
- forecast
- startdate
- enddate
- unique_id: rest_sensor_buienradar_forecast_0
name: Buienradar forecast 0
value_template: >
{{value_json.forecast.fivedayforecast.0.weatherdescription}}
json_attributes_path: '$.forecast.fivedayforecast.0'
<<: &json_attributes
json_attributes:
- day
- mintemperature
- maxtemperature
- mintemperatureMin
- maxtemperatureMin
- mintemperatureMax
- maxtemperatureMax
- rainChance
- sunChance
- windDirection
- wind
- mmRainMin
- mmRainMax
- iconurl
- fullIconUrl
- unique_id: rest_sensor_buienradar_forecast_1
name: Buienradar forecast 1
value_template: >
{{value_json.forecast.fivedayforecast.1.weatherdescription}}
json_attributes_path: '$.forecast.fivedayforecast.1'
<<: *json_attributes
- unique_id: rest_sensor_buienradar_forecast_2
name: Buienradar forecast 2
value_template: >
{{value_json.forecast.fivedayforecast.2.weatherdescription}}
json_attributes_path: '$.forecast.fivedayforecast.2'
<<: *json_attributes
- unique_id: rest_sensor_buienradar_forecast_3
name: Buienradar forecast 3
value_template: >
{{value_json.forecast.fivedayforecast.3.weatherdescription}}
json_attributes_path: '$.forecast.fivedayforecast.3'
<<: *json_attributes
- unique_id: rest_sensor_buienradar_forecast_4
name: Buienradar forecast 4
value_template: >
{{value_json.forecast.fivedayforecast.4.weatherdescription}}
json_attributes_path: '$.forecast.fivedayforecast.4'
<<: *json_attributes
## This is the sensor you need to set your correct Station ID ##
- unique_id: rest_sensor_buienradar_woensdrecht
name: Buienradar Woensdrecht
value_template: >
{{(value_json.actual.stationmeasurements|selectattr('stationid','==',6340)
|first)['regio']}}
json_attributes_path: '$.actual.stationmeasurements[?(@.stationid == 6340)]'
json_attributes:
- timestamp
- weatherdescription
- winddirection
- $id
- stationid
- stationname
- winddirection
- winddirectiondegrees
- airpressure
- temperature
- groundtemperature
- feeltemperature
- visibility
- windgusts
- windspeed
- windspeedBft
- humidity
- precipitation
- rainFallLastHour
- rainFallLast24Hour
- iconurl
- fullIconUrl
- graphUrl
the card is a Markdown using the resulting sensor entities like this:
- type: markdown
<<: &style
card_mod:
style:
.: |
ha-card {
margin: 0 0 -8px 0;
}
ha-markdown $: |
{% set kleur = states('sensor.buienradar_contrast_kleur') %}
h3 {color: {{kleur}};}h2 {color: {{kleur}};}
b {color: {{kleur}};}
# things like h4 { font-family: “Helvetica, sans-serif”; font-size: 24px; color: #152b81; }
content: >
<h3>Weerbericht:</hr>
<h2>{{states('sensor.buienradar_weerbericht')}}</h2>
<h3>Korte termijn</h3>
<p>{{state_attr('sensor.buienradar_korte_termijn','forecast')}}</p>
{% from 'easy_time.jinja' import month %}
{% set kort = 'sensor.buienradar_korte_termijn' %}
{% set van = state_attr(kort,'startdate')|as_datetime %}
{% set tot = state_attr(kort,'enddate')|as_datetime %}
Geldig van <b>{{van.day}} {{month(van)}}</b> tot <b>{{tot.day}} {{month(tot)}}</b>
<h3>Lange termijn</h3>
<p>{{state_attr('sensor.buienradar_lange_termijn','forecast')}}</p>
{% from 'easy_time.jinja' import month %}
{% set lang = 'sensor.buienradar_lange_termijn' %}
{% set van = state_attr(lang,'startdate')|as_datetime %}
{% set tot = state_attr(lang,'enddate')|as_datetime %}
Geldig van <b>{{van.day}} {{month(van)}}</b> tot <b>{{tot.day}} {{month(tot)}}</b>
{% set datum =
state_attr('sensor.buienradar_weerbericht','published')|as_datetime %}
{% from 'easy_time.jinja' import weekday, month %}
{% set gepubliceerd =
weekday(datum) ~' '~datum.day~' '~month(datum)~' om '~datum.strftime('%H:%M') %}
<h3>Samenvatting:</h3>
<p>{{state_attr('sensor.buienradar_weerbericht','summary')}}</p>
van <b>{{gepubliceerd}}</b>
Ive also added that to a more detailed frontend card and then there are some additional fold entity rows 
type: vertical-stack
card_mod: !include /config/dashboard/card_mods/stack_card_gap_shadow.yaml
cards:
- type: custom:button-card
template: button_default_title
name: Vooruitzichten
styles:
card:
- background: rgb(226,239,248)
- color: rgb(21,43,129)
- type: markdown
<<: &style
card_mod:
style:
.: |
ha-card {
margin: 0 0 -8px 0;
}
ha-markdown $: |
{% set kleur = states('sensor.buienradar_contrast_kleur') %}
h3 {color: {{kleur}};}h2 {color: {{kleur}};}
b {color: {{kleur}};}
# things like h4 { font-family: “Helvetica, sans-serif”; font-size: 24px; color: #152b81; }
content: >
<h3>Weerbericht:</hr>
<h2>{{states('sensor.buienradar_weerbericht')}}</h2>
<h3>Korte termijn</h3>
<p>{{state_attr('sensor.buienradar_korte_termijn','forecast')}}</p>
{% from 'easy_time.jinja' import month %}
{% set kort = 'sensor.buienradar_korte_termijn' %}
{% set van = state_attr(kort,'startdate')|as_datetime %}
{% set tot = state_attr(kort,'enddate')|as_datetime %}
Geldig van <b>{{van.day}} {{month(van)}}</b> tot <b>{{tot.day}} {{month(tot)}}</b>
<h3>Lange termijn</h3>
<p>{{state_attr('sensor.buienradar_lange_termijn','forecast')}}</p>
{% from 'easy_time.jinja' import month %}
{% set lang = 'sensor.buienradar_lange_termijn' %}
{% set van = state_attr(lang,'startdate')|as_datetime %}
{% set tot = state_attr(lang,'enddate')|as_datetime %}
Geldig van <b>{{van.day}} {{month(van)}}</b> tot <b>{{tot.day}} {{month(tot)}}</b>
{% set datum =
state_attr('sensor.buienradar_weerbericht','published')|as_datetime %}
{% from 'easy_time.jinja' import weekday, month %}
{% set gepubliceerd =
weekday(datum) ~' '~datum.day~' '~month(datum)~' om '~datum.strftime('%H:%M') %}
<h3>Samenvatting:</h3>
<p>{{state_attr('sensor.buienradar_weerbericht','summary')}}</p>
van <b>{{gepubliceerd}}</b>
- type: entities
entities:
- type: custom:fold-entity-row
card_mod: !include /config/dashboard/card_mods/scroll_fold_margin_top.yaml
head:
type: section
label: Uitgebreid
card_mod: #mimic html font <h3>
style: |
.label {
{% set kleur = states('sensor.buienradar_contrast_kleur')%}
color: {{kleur}} !important;
font-size: 1.17em;
font-weight: 700 !important;
margin-left: 0px !important;
}
entities:
- type: custom:hui-element
card_type: markdown
<<: *style
content: >
{% set datum =
state_attr('sensor.buienradar_weerbericht','published')|as_datetime %}
{% from 'easy_time.jinja' import weekday, month %}
{% set gepubliceerd =
weekday(datum) ~' '~datum.day~' '~month(datum)~' om '~datum.strftime('%H:%M') %}
<!--- <h3>Uitgebreid:</h3> -->
<p>{{state_attr('sensor.buienradar_weerbericht','text')}}</p>
Gepubliceerd op: <b>{{gepubliceerd}}</b>
if you want those individual forecast sensors, create a template like this:
- sensor:
- unique_id: buienradar_sunchance_0
state: >
{{state_attr('sensor.buienradar_forecast_0','sunChance')|int(0)}}
<<: &config
unit_of_measurement: '%'
icon: mdi:weather-partly-cloudy
attributes:
dag: >
{{state_attr('sensor.buienradar_forecast_0','day')}}
- unique_id: buienradar_sunchance_1
state: >
{{state_attr('sensor.buienradar_forecast_1','sunChance')|int(0)}}
<<: *config
attributes:
dag: >
{{state_attr('sensor.buienradar_forecast_1','day')}}
- unique_id: buienradar_sunchance_2
state: >
{{state_attr('sensor.buienradar_forecast_2','sunChance')|int(0)}}
<<: *config
attributes:
dag: >
{{state_attr('sensor.buienradar_forecast_2','day')}}
- unique_id: buienradar_sunchance_3
state: >
{{state_attr('sensor.buienradar_forecast_3','sunChance')|int(0)}}
<<: *config
attributes:
dag: >
{{state_attr('sensor.buienradar_forecast_3','day')}}
- unique_id: buienradar_sunchance_4
state: >
{{state_attr('sensor.buienradar_forecast_4','sunChance')|int(0)}}
<<: *config
attributes:
dag: >
{{state_attr('sensor.buienradar_forecast_4','day')}}
Lastly, you asked bout the background.
I set it via a theme:
title: Buienradar
path: buienradar
theme: weather-background
subview: true
top_margin: true
max_columns: 1
which itself is a card-mod theme created as follows:
weather-background:
card-mod-theme: weather-background
card-mod-view: |
hui-view {
{% if is_state('input_boolean.weer_view_background','on') %}
background: repeat url({{state_attr('camera.buienradar','entity_picture')}}) fixed;
{% endif %}
}
Thank you very much!! It’s working very good!
1 Like