Well, not so simple… I created very much nested card from these individual sensors, that resembles somehow typical weather card:
Please note that some of displayed data (current temperature, everything below Outside Conditions divider are not from Wethaerbit component, but from my Neatmo Weather Satation. Also below Weather Forecast there is a section, hidden now, that displays weather alert, if there is any.
Here is the full code for this card:
cards:
- cards:
- cards:
- cards:
- content: >-
## {{ (as_timestamp(now()) ) | timestamp_custom('%b %-d, %Y')
}}
# <font color="#ffffff">{{ states('sensor.temp') }} °C</font>
## <font color="#ffffff">{{ states('sensor.condition')
}}</font>
style: |
ha-card {
text-align: left;
margin-right:5px
}
type: markdown
- aspect_ration: 1/1
entity: sensor.condition
show_name: false
show_state: false
size: 110px
tap_action:
action: none
type: 'custom:button-card'
- content: >-
<font color="#9193ab"><ha-icon
icon="mdi:map"></ha-icon></font> Zielonka
<font color="#9193ab"><ha-icon
icon="mdi:thermometer-high"></ha-icon><font color="#ffaa2e">{{
states('sensor.temp_max_0') }} °C</font>
<font color="#9193ab"><ha-icon
icon="mdi:thermometer-low"></ha-icon><font color="#ffffff">{{
states('sensor.temp_min_0') }} °C</font>
<font color="#9193ab"><ha-icon
icon="mdi:water-outline"></ha-icon><font color="#1bbfff">{{
states('sensor.precip_0') }} mm</font>
style: |
ha-card {
text-align: left;
margin-left:35px
}
type: markdown
horizontal: true
type: 'custom:vertical-stack-in-card'
- card:
cards:
- text: Weather Alert
type: 'custom:text-divider-row'
- content: >
## <font color={{ state_attr('sensor.weather_alert','color')
}}><ha-icon icon="mdi:alert"></ha-icon> {{
states('sensor.weather_alert') }}
{{ state_attr('sensor.weather_alert','alert') }}</font>
type: markdown
type: 'custom:vertical-stack-in-card'
conditions:
- entity: sensor.weather_alert
state_not: No Weather Alerts
type: conditional
- cards:
- content: >
<font color="#9193ab"><ha-icon
icon="mdi:water-percent"></ha-icon></font> {{
states('sensor.netatmo_pogodynka_ogrod_humidity') }} %
<font color="#9193ab"><ha-icon
icon="mdi:gauge"></ha-icon></font> {{
states('sensor.netatmo_pogodynka_parter_pressure') }} mbar
style: |
ha-card {
padding-left: 10px;
}
type: markdown
- content: >
<font color="#9193ab"><ha-icon
icon="mdi:weather-sunset-up"></ha-icon></font> {{
as_timestamp(state_attr('sensor.weatherbit_solar_radiation',
'sunrise')) | timestamp_custom('%H:%M')}}
<font color="#9193ab"><ha-icon
icon="mdi:weather-sunset-down"></ha-icon></font> {{
as_timestamp(state_attr('sensor.weatherbit_solar_radiation',
'sunset')) | timestamp_custom('%H:%M')}}
style: |
ha-card {
padding-left: 35px;
}
type: markdown
- content: >
<font color="#9193ab"><ha-icon icon=" {% set dir =
states('sensor.weatherbit_wind_bearing') | float %} {% if dir
< 22.5 %} mdi:arrow-down {% elif dir < 67.5 %}
mdi:arrow-bottom-left {% elif dir < 112.5 %} mdi:arrow-left {%
elif dir < 157.5 %} mdi:arrow-top-left {% elif dir < 202.5 %}
mdi:arrow-up {% elif dir < 247.5 %} mdi:arrow-top-right {%
elif dir < 292.5 %} mdi:arrow-right {% elif dir < 337.5 %}
mdi:arrow-bottom-right {% else %} mdi:arrow-down {% endif %}
"></ha-icon></font> {{
states('sensor.weatherbit_wind_direction') }}
<font color="#9193ab"><ha-icon
icon="mdi:gauge"></ha-icon></font> {{
states('sensor.weatherbit_wind_speed') }} m/s
style: |
ha-card {
padding-left: 35px;
}
type: markdown
horizontal: true
type: 'custom:vertical-stack-in-card'
- text: Weather Forecast
type: 'custom:text-divider-row'
- cards:
- cards:
- cards:
- content: >-
### <center>{{ (as_timestamp(now()) + 1*86400) |
timestamp_custom('%a') }}</center>
style: |
ha-card {
height: 50px;
}
type: markdown
- entity: sensor.condition_1
show_name: false
show_state: false
size: 50px
style: |
ha-card {
height: 50px;
}
tap_action:
action: none
type: 'custom:button-card'
- content: >-
<font color="#9193ab"><ha-icon
icon="mdi:thermometer-high"></ha-icon><font
color="#ffaa2e">{{ states('sensor.temp_max_1') }}
°C</font>
<font color="#9193ab"><ha-icon
icon="mdi:thermometer-low"></ha-icon><font
color="#ffffff">{{ states('sensor.temp_min_1') }}
°C</font>
<font color="#9193ab"><ha-icon
icon="mdi:water-outline"></ha-icon><font
color="#1bbfff">{{ states('sensor.precip_1')
}} mm</font>
style: |
ha-card {
height: 100px;
width: 120px
}
type: markdown
type: 'custom:vertical-stack-in-card'
- cards:
- content: >-
### <center>{{ (as_timestamp(now()) + 2*86400) |
timestamp_custom('%a') }}</center>
style: |
ha-card {
height: 50px;
}
type: markdown
- entity: sensor.condition_2
show_name: false
show_state: false
size: 50px
style: |
ha-card {
height: 50px;
}
tap_action:
action: none
type: 'custom:button-card'
- content: >-
<font color="#9193ab"><ha-icon
icon="mdi:thermometer-high"></ha-icon><font
color="#ffaa2e">{{ states('sensor.temp_max_2') }}
°C</font>
<font color="#9193ab"><ha-icon
icon="mdi:thermometer-low"></ha-icon><font
color="#ffffff">{{ states('sensor.temp_min_2') }}
°C</font>
<font color="#9193ab"><ha-icon
icon="mdi:water-outline"></ha-icon><font
color="#1bbfff">{{ states('sensor.precip_2')
}} mm</font>
style: |
ha-card {
height: 100px;
width: 120px
}
type: markdown
type: 'custom:vertical-stack-in-card'
- cards:
- content: >-
### <center>{{ (as_timestamp(now()) + 3*86400) |
timestamp_custom('%a') }}</center>
style: |
ha-card {
height: 50px;
}
type: markdown
- entity: sensor.condition_3
show_name: false
show_state: false
size: 50px
style: |
ha-card {
height: 50px;
}
tap_action:
action: none
type: 'custom:button-card'
- content: >-
<font color="#9193ab"><ha-icon
icon="mdi:thermometer-high"></ha-icon><font
color="#ffaa2e">{{ states('sensor.temp_max_3') }}
°C</font>
<font color="#9193ab"><ha-icon
icon="mdi:thermometer-low"></ha-icon><font
color="#ffffff">{{ states('sensor.temp_min_3') }}
°C</font>
<font color="#9193ab"><ha-icon
icon="mdi:water-outline"></ha-icon><font
color="#1bbfff">{{ states('sensor.precip_3')
}} mm</font>
style: |
ha-card {
height: 100px;
width: 120px
}
type: markdown
type: 'custom:vertical-stack-in-card'
- cards:
- content: >-
### <center>{{ (as_timestamp(now()) + 4*86400) |
timestamp_custom('%a') }}</center>
style: |
ha-card {
height: 50px;
}
type: markdown
- entity: sensor.condition_4
show_name: false
show_state: false
size: 50px
style: |
ha-card {
height: 50px;
}
tap_action:
action: none
type: 'custom:button-card'
- content: >-
<font color="#9193ab"><ha-icon
icon="mdi:thermometer-high"></ha-icon><font
color="#ffaa2e">{{ states('sensor.temp_max_4') }}
°C</font>
<font color="#9193ab"><ha-icon
icon="mdi:thermometer-low"></ha-icon><font
color="#ffffff">{{ states('sensor.temp_min_4') }}
°C</font>
<font color="#9193ab"><ha-icon
icon="mdi:water-outline"></ha-icon><font
color="#1bbfff">{{ states('sensor.precip_4')
}} mm</font>
style: |
ha-card {
height: 100px;
width: 120px
}
type: markdown
type: 'custom:vertical-stack-in-card'
- cards:
- content: >-
### <center>{{ (as_timestamp(now()) + 5*86400) |
timestamp_custom('%a') }}</center>
style: |
ha-card {
height: 50px;
}
type: markdown
- entity: sensor.condition_5
show_name: false
show_state: false
size: 50px
style: |
ha-card {
height: 50px;
}
tap_action:
action: none
type: 'custom:button-card'
- content: >-
<font color="#9193ab"><ha-icon
icon="mdi:thermometer-high"></ha-icon><font
color="#ffaa2e">{{ states('sensor.temp_max_5') }}
°C</font>
<font color="#9193ab"><ha-icon
icon="mdi:thermometer-low"></ha-icon><font
color="#ffffff">{{ states('sensor.temp_min_5') }}
°C</font>
<font color="#9193ab"><ha-icon
icon="mdi:water-outline"></ha-icon><font
color="#1bbfff">{{ states('sensor.precip_5')
}} mm</font>
style: |
ha-card {
height: 100px;
width: 120px;
}
type: markdown
type: 'custom:vertical-stack-in-card'
horizontal: true
type: 'custom:vertical-stack-in-card'
horizontal: true
type: 'custom:vertical-stack-in-card'
type: 'custom:vertical-stack-in-card'
- text: Outside conditions
type: 'custom:text-divider-row'
- cards:
- align_icon: left
animate: true
entities:
- entity: sensor.netatmo_pogodynka_ogrod_temperature
index: 0
font_size: 75
hour24: true
hours_to_show: 24
line_color: var(--greenish)
line_width: 3
name: Temperature
show:
extrema: true
fill: fade
icon: false
name: false
type: 'custom:mini-graph-card'
- align_icon: left
animate: true
entities:
- entity: sensor.netatmo_pogodynka_ogrod_humidity
index: 0
font_size: 75
hour24: true
hours_to_show: 24
line_color: var(--cyanish)
line_width: 3
name: Humidity
show:
extrema: true
fill: fade
icon: false
name: false
type: 'custom:mini-graph-card'
- align_icon: left
animate: true
entities:
- entity: sensor.netatmo_pogodynka_parter_pressure
index: 0
font_size: 75
hour24: true
hours_to_show: 24
line_color: var(--light-magenta)
line_width: 3
name: Presure
show:
extrema: true
fill: fade
icon: false
name: false
type: 'custom:mini-graph-card'
type: horizontal-stack
title: ''
type: 'custom:vertical-stack-in-card'
- cards:
- text: Outside vs. Inside Temperature
type: 'custom:text-divider-row'
- align_icon: left
animate: true
entities:
- color: var(--greenish)
entity: sensor.netatmo_pogodynka_ogrod_temperature
- color: var(--light-magenta)
entity: sensor.netatmo_pogodynka_parter_temperature
- color: var(--cyanish)
entity: sensor.day_night
show_line: false
y_axis: secondary
hour24: true
hours_to_show: 120
line_width: 1
name: Temperature
show:
extrema: false
fill: fade
icon: false
legend: false
name: false
points: false
state: false
type: 'custom:mini-graph-card'
- cards:
- content: >
<center><font color = magenta>Inside: {{
states('sensor.netatmo_pogodynka_parter_temperature') }}
°C</center>
type: markdown
- content: >
<center><font color = var(--greenish)cyan>Outside: {{
states('sensor.netatmo_pogodynka_ogrod_temperature') }}
°C</center>
type: markdown
mode: horizontal
type: 'custom:stack-in-card'
type: 'custom:vertical-stack-in-card'
- break
- cards:
- cards:
- text: Attic
type: 'custom:text-divider-row'
- cards:
- align_icon: left
animate: true
entities:
- entity: sensor.netatmo_pogodynka_tv_room_temperature
index: 0
font_size: 75
hour24: true
hours_to_show: 24
line_color: var(--greenish)
line_width: 3
name: Temperature
show:
extrema: true
fill: fade
icon: false
name: false
type: 'custom:mini-graph-card'
- align_icon: left
animate: true
entities:
- entity: sensor.netatmo_pogodynka_tv_room_humidity
index: 0
font_size: 75
hour24: true
hours_to_show: 24
line_color: var(--cyanish)
line_width: 3
name: Humidity
show:
extrema: true
fill: fade
icon: false
name: false
type: 'custom:mini-graph-card'
- align_icon: left
animate: true
entities:
- entity: sensor.netatmo_pogodynka_tv_room_co2
index: 0
font_size: 75
hour24: true
hours_to_show: 24
line_color: var(--light-magenta)
line_width: 3
name: CO2
show:
extrema: true
fill: fade
icon: false
name: false
type: 'custom:mini-graph-card'
horizontal: true
type: 'custom:vertical-stack-in-card'
type: 'custom:vertical-stack-in-card'
- cards:
- text: Bedroom
type: 'custom:text-divider-row'
- cards:
- align_icon: left
animate: true
entities:
- entity: sensor.netatmo_pogodynka_sypialnia_temperature
index: 0
font_size: 75
hour24: true
hours_to_show: 24
line_color: var(--greenish)
line_width: 3
name: Temperature
show:
extrema: true
fill: fade
icon: false
name: false
type: 'custom:mini-graph-card'
- align_icon: left
animate: true
entities:
- entity: sensor.netatmo_pogodynka_sypialnia_humidity
index: 0
font_size: 75
hour24: true
hours_to_show: 24
line_color: var(--cyanish)
line_width: 3
name: Humidity
show:
extrema: true
fill: fade
icon: false
name: false
type: 'custom:mini-graph-card'
- align_icon: left
animate: true
entities:
- entity: sensor.netatmo_pogodynka_sypialnia_co2
index: 0
font_size: 75
hour24: true
hours_to_show: 24
line_color: var(--light-magenta)
line_width: 3
name: CO2
show:
extrema: true
fill: fade
icon: false
name: false
type: 'custom:mini-graph-card'
horizontal: true
type: 'custom:vertical-stack-in-card'
type: 'custom:vertical-stack-in-card'
- cards:
- text: Ground Floor
type: 'custom:text-divider-row'
- cards:
- align_icon: left
animate: true
entities:
- entity: sensor.netatmo_pogodynka_parter_temperature
index: 0
font_size: 75
hour24: true
hours_to_show: 24
line_color: var(--greenish)
line_width: 3
name: Temperature
show:
extrema: true
fill: fade
icon: false
name: false
type: 'custom:mini-graph-card'
- align_icon: left
animate: true
entities:
- entity: sensor.netatmo_pogodynka_parter_humidity
index: 0
font_size: 75
hour24: true
hours_to_show: 24
line_color: var(--cyanish)
line_width: 3
name: Humidity
show:
extrema: true
fill: fade
icon: false
name: false
type: 'custom:mini-graph-card'
- align_icon: left
animate: true
entities:
- entity: sensor.netatmo_pogodynka_parter_co2
index: 0
font_size: 75
hour24: true
hours_to_show: 24
line_color: var(--light-magenta)
line_width: 3
name: CO2
show:
extrema: true
fill: fade
icon: false
name: false
type: 'custom:mini-graph-card'
horizontal: true
type: 'custom:vertical-stack-in-card'
type: 'custom:vertical-stack-in-card'
type: 'custom:vertical-stack-in-card'
column-width: 100%
layout: vertical
max_columns: 3
max_width: 600px
min_columns: 1
min_width: 425px
type: 'custom:layout-card'
