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?
1 Like
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
4 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
2 Likes
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
2 Likes
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
