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!).
But I can’t manage to arrange the cards according to the screenshot. I think I have tried all the possibilities already.
The first and the last column I created with “Vertical stack”, but I can’t get the middle part right.
This is what I already tried:
– 4 grids with one vertical stack each
– 2 grids with two vertical stacks each
– 1 grid with four vertical stacks
(with square cards)
The middle cards are always squeezed together.
What I’m doing wrong? Any suggestions?
Is it possibly dependent on the screen size?
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 ,
even though this post is a bit old. Could you share the code for your Dashboard? I just got my self a weather station and I would love to use the board you’ve shown in your screenshot
Kind Regards
Dasgen
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
(D. Phillips)
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?