The pollen card is based on data I get from Tado, based on a variation of this post:
I converted the values for today, tomorrow and the day after to values ranging 0-100. For the popup I use the original one with textual states, but you yould also put the percentage one there:
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: card_pollen
entity: sensor.air_pollen_level_grass
variables:
ulm_card_pollen_entity: sensor.air_pollen_value_grass
ulm_card_pollen_tomorrow_entity: sensor.air_pollen_value_grass_tomorrow
ulm_card_pollen_d_a_tomorrow_entity: sensor.air_pollen_value_grass_d_a_tomorrow
- type: "custom:button-card"
template: card_pollen
entity: sensor.air_pollen_level_weed
variables:
ulm_card_pollen_entity: sensor.air_pollen_value_weed
ulm_card_pollen_tomorrow_entity: sensor.air_pollen_value_weed_tomorrow
ulm_card_pollen_d_a_tomorrow_entity: sensor.air_pollen_value_weed_d_a_tomorrow
- type: "custom:button-card"
template: card_pollen
entity: sensor.air_pollen_level_tree
variables:
ulm_card_pollen_entity: sensor.air_pollen_value_tree
ulm_card_pollen_tomorrow_entity: sensor.air_pollen_value_tree_tomorrow
ulm_card_pollen_d_a_tomorrow_entity: sensor.air_pollen_value_tree_d_a_tomorrow
card_pollen:
show_icon: false
show_entity: false
show_label: false
show_name: false
triggers_update: "all"
styles:
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "0px"
grid:
- grid-template-areas: "'item1 item2'"
- grid-template-columns: "min-content auto"
- grid-template-rows: "1fr"
custom_fields:
item1:
card:
entity: "[[[ return entity == null ? variables.ulm_card_pollen_entity : entity.entity_id ]]]"
show_label: false
template:
- "icon_only"
styles:
icon:
- color: "rgba(var(--color-theme),0.9)"
card:
- box-shadow: none
- padding: "0 12px"
type: "custom:button-card"
item2:
card:
type: "custom:button-card"
template: "list_3_items"
styles:
card:
- border-radius: "14px"
- padding: "12px 12px 12px 0"
grid:
- column-gap: "0px"
custom_fields:
item1:
card:
type: "custom:bar-card"
direction: "up"
height: "44px"
positions:
name: off
value: off
icon: off
indicator: off
minmax: off
severity:
- color: "#28950088"
from: 0
to: 20
- color: "#f7d90088"
from: 20
to: 40
- color: "#f89a0088"
from: 40
to: 60
- color: "#ff990088"
from: 60
to: 80
- color: "#d81700aa"
from: 80
to: 100
entities:
- entity: "[[[ return variables.ulm_card_pollen_entity == null ? entity.entity_id : variables.ulm_card_pollen_entity ]]]"
name: "-"
style: |
bar-card-background{
margin: 0px 0 0px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 7px 0 0 7px;
border-radius: 0 7px 7px 0;
box-shadow: none;
}
#states{
padding: 0;
}
item2:
card:
type: "custom:bar-card"
direction: "up"
height: "44px"
positions:
name: off
value: off
icon: off
indicator: off
minmax: off
severity:
- color: "#28950088"
from: -1
to: 20
- color: "#f7d90088"
from: 20
to: 40
- color: "#f89a0088"
from: 40
to: 60
- color: "#ff990088"
from: 60
to: 80
- color: "#d81700aa"
from: 80
to: 101
entities:
- entity: "[[[ return variables.ulm_card_pollen_tomorrow_entity ]]]"
style: |
bar-card-background{
margin: 0px 0 0px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 0;
border-radius: 0;
box-shadow: none;
}
#states{
padding: 0;
}
item3:
card:
type: "custom:bar-card"
direction: "up"
height: "44px"
positions:
name: off
value: off
icon: off
indicator: off
minmax: off
severity:
- color: "#28950088"
from: 0
to: 20
- color: "#f7d90088"
from: 20
to: 40
- color: "#f89a0088"
from: 40
to: 60
- color: "#ff990088"
from: 60
to: 80
- color: "#d81700aa"
from: 80
to: 100
entities:
- entity: "[[[ return variables.ulm_card_pollen_d_a_tomorrow_entity ]]]"
style: |
bar-card-background{
margin: 0px 0 0px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 0 7px 7px 0;
border-radius: 0 7px 7px 0;
box-shadow: none;
}
#states{
padding: 0;
}