In this topic this very nice dashboard was created and postet by @tom_l :
Except for the card “Daily Rainfall” in the upper right corner, I have installed and also configured all other cards (many thanks to tom!).
The middle cards are always squeezed together.
What I’m doing wrong? Any suggestions?
The shape of the cards actually has something to do with the screen size or the zoom setting of the browser. The middle cards are a bit more compressed. In addition, only 5 days and 5 hours are shown in the forecast, while you have 8.
(Zoomfaktor 75 %)
But it still looks very nice and I am happy with it. Thanks again!
Dasgen
November 14, 2022, 1:31pm
4
Hi @Fantross ,
Kind Regards
Here you are…
First vertical stack:
type: vertical-stack
cards:
- title: Tagesprognose
type: custom:weather-chart-card
entity: weather.weatherflow_day_based_forecast
show_main: false
show_attributes: false
- title: Stundenprognose
type: custom:weather-chart-card
entity: weather.weatherflow_hourly_based_forecast
show_main: false
show_attributes: false
- color_thresholds:
- color: '#ae0c00'
value: 2,8
- color: '#66b032'
value: 2,455
- color: '#ed9121'
value: 2,415
- color: '#00B7eb'
value: 2,39
- color: '#008000'
value: 2,355
color_thresholds_transition: hard
entities:
- entity: sensor.weatherflow_voltage_tempest
name: Energiemodus
group: false
hour24: true
line_width: 4
points_per_hour: 2
show:
graph: bar
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: custom:mini-graph-card
Second vertical stack:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- color_thresholds:
- color: '#fe2712'
value: 30
- color: '#fefe33'
value: 20
- color: '#66b032'
value: 10
- color: '#0000cd'
value: -10
color_thresholds_transition: smooth
entities:
- entity: sensor.weatherflow_air_temperature
name: Temperatur
group: false
hour24: true
line_width: 2
points_per_hour: 4
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: custom:mini-graph-card
- color_thresholds:
- color: '#fe2712'
value: 30
- color: '#fefe33'
value: 20
- color: '#66b032'
value: 10
- color: '#0000cd'
value: -10
color_thresholds_transition: smooth
entities:
- entity: sensor.weatherflow_feels_like_temperature
name: Gefühlte Temperatur
group: false
hour24: true
line_width: 2
points_per_hour: 4
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: custom:mini-graph-card
- type: horizontal-stack
cards:
- color_thresholds:
- color: '#0000cd'
value: 100
- color: '#00BFFF'
value: 0
color_thresholds_transition: smooth
entities:
- entity: sensor.weatherflow_relative_humidity
name: Relative Luftfeuchtigkeit
group: false
hour24: true
line_width: 2
points_per_hour: 4
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: custom:mini-graph-card
- color_thresholds:
- color: '#0000cd'
value: 20
- color: '#00BFFF'
value: 0
color_thresholds_transition: smooth
entities:
- entity: sensor.weatherflow_precipitation_today
name: Regen letzte 24 h
group: false
hour24: true
line_width: 2
points_per_hour: 1
show:
graph: bar
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: custom:mini-graph-card
- type: horizontal-stack
cards:
- color_thresholds:
- color: '#0000cd'
value: 20
- color: '#00BFFF'
value: 0
color_thresholds_transition: smooth
entities:
- entity: sensor.weatherflow_precipitation_last_hour
name: Regen letzte Stunde
group: false
hour24: false
line_width: 2
points_per_hour: 1
show:
graph: bar
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: custom:mini-graph-card
- color_thresholds:
- color: '#0000cd'
value: 20
- color: '#00BFFF'
value: 0
color_thresholds_transition: smooth
entities:
- entity: sensor.weatherflow_precipitation_rate
name: Niederschlagsmenge
group: false
hour24: true
line_width: 2
points_per_hour: 1
show:
graph: bar
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: custom:mini-graph-card
Third vertical stack:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- color_thresholds:
- color: '#fa00ff'
value: 117
- color: '#fdb5aa'
value: 89
- color: '#fdb5aa'
value: 62
- color: '#ffffbb'
value: 29
- color: '#82c93f'
value: 0
color_thresholds_transition: hard
entities:
- entity: sensor.weatherflow_wind_speed_km_h
name: Windgeschwindigkeit
group: false
hour24: true
line_width: 2
points_per_hour: 4
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: custom:mini-graph-card
- color_thresholds:
- color: '#fa00ff'
value: 117
- color: '#fdb5aa'
value: 89
- color: '#fdb5aa'
value: 62
- color: '#ffffbb'
value: 29
- color: '#82c93f'
value: 0
color_thresholds_transition: hard
entities:
- entity: sensor.weatherflow_wind_gust_km_h
name: Windböen
group: false
hour24: true
line_width: 2
points_per_hour: 4
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: custom:mini-graph-card
- type: horizontal-stack
cards:
- type: custom:compass-card
header:
title:
value: Windrichtung
indicator_sensors:
- sensor: sensor.weatherflow_wind_direction
indicator:
type: arrow_inward
value_sensors:
- sensor: sensor.weatherflow_wind_speed
- color_thresholds:
- color: '#e1011b'
value: 11
- color: '#e94153'
value: 8
- color: '#ffa304'
value: 6
- color: '#ffb636'
value: 3
- color: '#72c900'
value: 0
color_thresholds_transition: hard
entities:
- entity: sensor.weatherflow_uv_index
name: UV Index
group: false
hour24: true
line_width: 2
points_per_hour: 4
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: custom:mini-graph-card
- type: horizontal-stack
cards:
- color_thresholds:
- color: '#0000cd'
value: 25
- color: '#00BFFF'
value: 0
color_thresholds_transition: smooth
entities:
- entity: sensor.weatherflow_dewpoint
name: Taupunkt
group: false
hour24: true
line_width: 2
points_per_hour: 4
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: custom:mini-graph-card
- color_thresholds:
- color: '#ffcc33'
value: 1025
- color: '#00B7eb'
value: 975
color_thresholds_transition: smooth
entities:
- entity: sensor.weatherflow_station_pressure
name: Luftdruck
group: false
hour24: true
line_width: 2
points_per_hour: 4
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: custom:mini-graph-card
Fourth vertical stack:
type: vertical-stack
cards:
- type: entities
entities:
- entity: binary_sensor.weatherflow_is_lightning
- entity: sensor.weatherflow_lightning_strike_count
- entity: sensor.weatherflow_lightning_strike_count_last_hour
- entity: sensor.weatherflow_lightning_strike_count_last_3_hours
- entity: sensor.weatherflow_last_lightning_strike
- entity: sensor.weatherflow_last_lightning_strike_distance
title: Lightning
show_header_toggle: true
state_color: true
- type: custom:weather-radar-card
data_source: RainViewer-TWC
map_style: Dark
zoom_level: 9
show_marker: true
show_scale: true
show_playback: false
show_zoom: true
show_range: true
static_map: true
square_map: true
show_recenter: true
extra_labels: true
3 Likes
Mutley
September 6, 2023, 10:57pm
7
What are you using to call the date?
Which date? All entities are from the WeatherFlow integration.
Mutley
September 7, 2023, 4:20pm
9
I’m using the basic met Office integration right now, but loving the looks of these cards
d.lee
December 9, 2023, 3:18am
11
Hate to dust off a relatively old thread but what theme was used?
I took the amazing work that everyone has done thus far, and made this:
Thanks again for the collaboration and sharing which ultimately benefits each other.
2 Likes
What type of weather forecast cards do you use?
weather-chart-card
1 Like
Hi mark
Sure
cards:
- type: vertical-stack
cards:
- title: Daily Forecast
type: custom:weather-chart-card
entity: weather.forecast_home
show_main: false
show_attributes: false
forecast:
precipitation_color: "#0cc1c1"
labels_font_size: 12
precipitation_type: rainfall
type: daily
style: style2
number_of_forecasts: "7"
show_wind_forecast: false
disable_animation: false
precip_bar_size: "70"
units:
pressure: ""
speed: ""
animated_icons: true
show_wind_speed: false
animated_icons: true
show_wind_direction: false
show_pressure: false
icons: ""
icons_size: "40"
- title: Hourly Forecast
type: custom:weather-chart-card
entity: weather.forecast_home
forecast:
precipitation_color: "#0cc1c1"
labels_font_size: 12
type: hourly
style: style2
precipitation_type: ""
disable_animation: false
number_of_forecasts: "6"
show_main: false
show_attributes: false
units:
pressure: ""
speed: ""
animated_icons: true
icons_size: "30"
current_temp_size: "22"
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
color_thresholds:
- color: "#fe2712"
value: 29
- color: "#fefe33"
value: 23
- color: "#66b032"
value: 4
- color: "#0000cd"
value: -10
color_thresholds_transition: smooth
entities:
- entity: sensor.outdoor_temperature
name: Temperature
- entity: sensor.nightstate
color: gray
name: Night
show_legend: false
show_line: false
show_points: false
y_axis: secondary
font_size: 85
font_weight: null
group: false
hour24: false
line_width: 2
points_per_hour: 4
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
- type: custom:mini-graph-card
color_thresholds:
- color: "#0000cd"
value: 25
- color: "#00BFFF"
value: 0
color_thresholds_transition: smooth
entities:
- entity: sensor.dewpoint
name: Dewpoint
- entity: sensor.nightstate
color: gray
name: Night
show_legend: false
show_line: false
show_points: false
y_axis: secondary
font_size: 85
group: false
hour24: false
line_width: 2
points_per_hour: 4
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
height: 95
name: Rain (current/daily/week)
hours_to_show: 168
points_per_hour: 4
animate: true
decimals: 1
entities:
- entity: sensor.rain_rate
name: Rain
show_state: false
color: "#0cc1c1"
state_adaptive_color: true
- entity: sensor.daily_rain_rate
name: Rain
show_state: true
show_graph: false
state_adaptive_color: true
font_size: 85
show:
labels: true
icon: true
state: true
graph: bar
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
color_thresholds:
- color: "#0000cd"
value: 100
- color: "#00BFFF"
value: 0
color_thresholds_transition: smooth
entities:
- entity: sensor.humidity
name: Rel. Humidity
- entity: sensor.nightstate
color: gray
name: Night
show_legend: false
show_line: false
show_points: false
y_axis: secondary
font_size: 85
group: false
hour24: false
line_width: 2
points_per_hour: 4
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
- type: custom:mini-graph-card
color_thresholds:
- color: "#ffcc33"
value: 1020
- color: "#00B7eb"
value: 975
color_thresholds_transition: smooth
entities:
- entity: sensor.absolute_pressure
name: Pressure
- entity: sensor.nightstate
color: gray
name: Night
show_legend: false
show_line: false
show_points: false
y_axis: secondary
font_size: 85
group: false
hour24: false
animate: true
line_width: 2
points_per_hour: 4
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
- type: vertical-stack
cards:
- type: custom:mini-graph-card
name: Wind /24hrs
icon: mdi:weather-windy
hours_to_show: 24
points_per_hour: 15
animate: true
hour24: false
height: 104
font_size: 85
line_width: 2
decimals: 1
entities:
- entity: sensorwind_gust
name: Gust
show_state: true
color: "#bf8bff"
- entity: sensor.wind_speed
name: Speed
color: "#e5d0ff"
show_state: true
- entity: sensor.nightstate
color: gray
name: Night
show_legend: false
show_line: false
show_points: false
y_axis: secondary
show:
labels: false
icon: true
state: true
extrema: false
points: false
- type: horizontal-stack
cards:
- type: custom:rain-gauge-card
Name: Rain Today
full_drop_colour: "#0cc1c1"
entity: sensor.daily_rain_rate
name: Rain Today
language: en
border_colour: gray
show_warning: false
card_mod:
style: |
ha-card {
border: none;
transform: scale(1.0,1.0) translate(0%,0%);
aspect-ratio: 1 / 1;
}
div {
transform: scale(1.0,1.0) translate(0%,0%);;
}
- type: custom:compass-card
header:
title:
value: Wind Direction
compass:
circle:
color: "#efd0ff"
indicator_sensors:
- sensor: sensor.wind_direction
indicator:
type: arrow_inward
color: "#bf8bff"
- sensor: sun.sun
attribute: azimuth
indicator:
type: circle
decimals: 2
value_sensors:
- sensor: sensor.wind_speed
decimals: 1
card_mod:
style: |
ha-card {
transform: scale(1.0,1.0) translate(0%,0%);
aspect-ratio: 1 / 1;
}
div {
transform: scale(1.0,1.0) translate(0%,-12%);;
}
- type: custom:horizon-card
height: 8055
moon: true
refresh_period: 60
fields:
sunrise: true
sunset: true
dawn: false
noon: false
dusk: false
moonrise: false
moonset: false
moon_phase: false
southern_flip: false
moon_phase_rotation: -10
language: en
elevation: 30
time_zone: Australia/Sydney
debug_level: 0
card_mod:
style: |
ha-card {
transform: scale(1.0,1.0) translate(0%,0%);
aspect-ratio: 1 / -0.4;
}
div {
transform: scale(1.0 , 1.0) translate(0%,0%);;
}
- type: vertical-stack
cards:
- type: custom:weather-radar-card
data_source: RainViewer-UniversalBlue
map_style: Dark
zoom_level: 6
show_marker: true
show_scale: false
show_playback: false
show_zoom: false
show_range: false
static_map: false
square_map: true
show_recenter: false
extra_labels: false
marker_latitude: -XXXXXX
marker_longitude: XXXXX
frame_count: 50
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
color_thresholds_transition: smooth
group: false
hour24: false
line_width: 4
points_per_hour: 2
font_size: 85
show:
graph: bar
extrema: true
fill: fade
icon: true
labels: false
labels_secondary: false
name: true
state: true
entities:
- entity: sensor.solar_radiation
name: Solar
show_state: true
state_adaptive_color: true
color_thresholds_transition: smooth
severity:
- color: yellow
from: -20
to: 100
- color: orange
from: 101
to: 550
- color: red
from: 551
to: 1500
card_mod:
style: |
ha-card {
height: 200px!important;
}
- type: custom:uv-index-card
name: UV Index
entity: _uv_index
- type: iframe
url: >-
https://embed.windy.com/embed.html?<URLSTRING>
aspect_ratio: 70%
view_layout:
place-self: center stretch
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(24,23,53,1) 10%)
icon: mdi:weather-lightning-rainy
theme: noctis
1 Like
pepeEL
July 31, 2024, 10:38am
19
What is a name theme ?
gregoinc
August 29, 2024, 5:52am
20
Hi @tom_l
That weather dashboard you created looks amazing, is there any opportunity for me to get hold of the yaml code?
Thanks, Mark
