Alors, tu as les templates pour decluttering-card ( pour les installer):
decluttering_templates:
atmofrance:
card:
type: custom:button-card
entity: '[[sensor]]'
size: 100%
aspect_ratio: 1.4/1
show_state: true
show_label: true
name: >
[[[ return entity.attributes.friendly_name.replace('-xxxxx-xxxx','')
+ ': ' ]]]
label: |
[[[ return entity.state ]]]
state_display: '[[[ return entity.attributes.Libellé ]]]'
styles:
icon:
- color: '[[[return entity.attributes.Couleur]]]'
name:
- font-size: 14px
state:
- font-weight: bold
- font-size: 13px
- color: '[[[return entity.attributes.Couleur]]]'
label:
- font-size: 13px
- color: '[[[return entity.attributes.Couleur]]]'
atmofrancepollens:
card:
type: custom:button-card
entity: '[[sensor]]'
size: 100%
icon: '[[icon]]'
aspect_ratio: 1.4/1
show_state: true
show_label: true
name: >
[[[ return entity.attributes.friendly_name.replace('Niveau','').replace('-xxxx-xxxxx','')
+ ': ' ]]]
label: |
[[[ return states['[[sensor2]]'].state + ' µg/m³'; ]]]
state_display: '[[[ return entity.attributes.Libellé ]]]'
styles:
icon:
- color: '[[[return entity.attributes.Couleur]]]'
name:
- font-size: 14px
state:
- font-weight: bold
- font-size: 12px
- color: '[[[return entity.attributes.Couleur]]]'
label:
- font-size: 12px
il faut remplacer les -xxxxx-xxxx de replace('-xxxxx-xxxx','') par le nom de ta ville dans les sensors.
Pour la carte complète:
type: custom:vertical-stack-in-card
cards:
- type: entities
entities:
- type: custom:text-divider-row
text: Air / Pollens
align: left
card_mod:
style: |
ha-card {
margin-top: -15px;
margin-bottom: -30px;
background: none;
}
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.qualite_globale_xxxx
name: Qualité air
icon: mdi:gauge
height: 35px
min: 0
max: 7
positions:
indicator: "off"
icon: inside
severity:
- color: "#888"
from: 6
to: 7
- color: "#7d2181"
from: 5
to: 6
- color: "#960032"
from: 4
to: 5
- color: "#ff5050"
from: 3
to: 4
- color: "#f0e641"
from: 2
to: 3
- color: "#50ccaa"
from: 1
to: 2
- color: "#50f0e6"
from: 0
to: 1
card_mod:
style: |
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 25px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
font-size: 15px;
font-weight: bold;
color: black;
}
ha-card {
margin-top: -1px;
background: none;
border: none;
}
bar-card-value {
color: black;
font-weight: bold;
}
ha-icon {
color: black;
--mdc-icon-size: 28px;
}
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin: -15px 0px 0px 5px;
}
card:
square: false
type: grid
cards:
- type: custom:decluttering-card
template: atmofrance
variables:
- sensor: sensor.pm10_xxxx
- type: custom:decluttering-card
template: atmofrance
variables:
- sensor: sensor.pm25_xxxx
- type: custom:decluttering-card
template: atmofrance
variables:
- sensor: sensor.dioxyde_d_azote_xxxx
- type: custom:decluttering-card
template: atmofrance
variables:
- sensor: sensor.ozone_xxxx
- type: custom:decluttering-card
template: atmofrance
variables:
- sensor: sensor.dioxyde_de_soufre_xxxx
columns: 2
- type: vertical-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.qualite_globale_pollen_xxxx
name: Qualité pollens
icon: mdi:flower-pollen-outline
height: 35px
min: 0
max: 7
positions:
indicator: "off"
icon: inside
severity:
- color: "#888"
from: 6
to: 7
- color: "#7d2181"
from: 5
to: 6
- color: "#960032"
from: 4
to: 5
- color: "#ff5050"
from: 3
to: 4
- color: "#f0e641"
from: 2
to: 3
- color: "#50ccaa"
from: 1
to: 2
- color: "#50f0e6"
from: 0
to: 1
card_mod:
style: |
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 25px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
font-size: 15px;
font-weight: bold;
color: black;
}
ha-card {
margin-top: -1px;
background: none;
border: none;
}
bar-card-value {
color: black;
font-weight: bold;
}
ha-icon {
color: black;
--mdc-icon-size: 28px;
}
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin: -15px 0px 0px 0px;
}
card:
square: false
type: grid
cards:
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_ambroisie_xxxx
- sensor2: sensor.concentration_ambroisie_xxxx
- icon: mdi:grass
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_armoise_xxxx
- sensor2: sensor.concentration_armoise_xxxx
- icon: mdi:grass
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_aulne_xxxx
- sensor2: sensor.concentration_aulne_xxxx
- icon: mdi:tree
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_bouleau_xxxx
- sensor2: sensor.concentration_bouleau_xxxx
- icon: mdi:tree
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_gramine_xxxx
- sensor2: sensor.concentration_gramine_xxxx
- icon: mdi:flower-pollen
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_olivier_xxxx
- sensor2: sensor.concentration_olivier_xxxx
- icon: mdi:tree
columns: 2
Il faut les cartes decluttering-card et button-card.
edit:
ajout d’icône pour les pollens.
edit2:
supprime le mot niveau.
edit3:
Ajout des entités J+1 avec swipe-card
type: custom:vertical-stack-in-card
cards:
- type: entities
entities:
- type: custom:text-divider-row
text: Air / Pollens
align: left
card_mod:
style: |
ha-card {
margin-top: -10px;
margin-bottom: -30px;
background: none;
}
- type: custom:swipe-card
start_card: 1
reset_after: 30
parameters:
pagination:
type: bullets
cards:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.qualite_globale_xxxx
name: Qualité air
icon: mdi:gauge
height: 35px
min: 0
max: 7
positions:
indicator: "off"
icon: inside
severity:
- color: "#888"
from: 6
to: 7
- color: "#7d2181"
from: 5
to: 6
- color: "#960032"
from: 4
to: 5
- color: "#ff5050"
from: 3
to: 4
- color: "#f0e641"
from: 2
to: 3
- color: "#50ccaa"
from: 1
to: 2
- color: "#50f0e6"
from: 0
to: 1
card_mod:
style: |
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 25px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
font-size: 15px;
font-weight: bold;
color: black;
}
ha-card {
margin-top: -1px;
background: none;
border: none;
}
bar-card-value {
color: black;
font-weight: bold;
}
ha-icon {
color: black;
--mdc-icon-size: 28px;
}
- type: custom:mod-card
card_mod:
style:
hui-grid-card $: |
#root {
gap: 0px !important;
}
.: |
ha-card {
margin: -15px 0px -5px 5px;
}
card:
square: false
type: grid
cards:
- type: custom:decluttering-card
template: atmofrance
variables:
- sensor: sensor.pm10_xxxx
- type: custom:decluttering-card
template: atmofrance
variables:
- sensor: sensor.pm25_xxxx
- type: custom:decluttering-card
template: atmofrance
variables:
- sensor: sensor.dioxyde_d_azote_xxxx
- type: custom:decluttering-card
template: atmofrance
variables:
- sensor: sensor.ozone_xxxx
- type: custom:decluttering-card
template: atmofrance
variables:
- sensor: sensor.dioxyde_de_soufre_xxxx
columns: 2
- type: vertical-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.qualite_globale_pollen_xxxx
name: Qualité pollens
icon: mdi:flower-pollen-outline
height: 35px
min: 0
max: 7
positions:
indicator: "off"
icon: inside
severity:
- color: "#888"
from: 6
to: 7
- color: "#7d2181"
from: 5
to: 6
- color: "#960032"
from: 4
to: 5
- color: "#ff5050"
from: 3
to: 4
- color: "#f0e641"
from: 2
to: 3
- color: "#50ccaa"
from: 1
to: 2
- color: "#50f0e6"
from: 0
to: 1
card_mod:
style: |
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 25px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
font-size: 15px;
font-weight: bold;
color: black;
}
ha-card {
margin-top: -1px;
background: none;
border: none;
}
bar-card-value {
color: black;
font-weight: bold;
}
ha-icon {
color: black;
--mdc-icon-size: 28px;
}
- type: custom:mod-card
card_mod:
style:
hui-grid-card $: |
#root {
gap: 0px !important;
}
.: |
ha-card {
margin: -15px 0px -5px 5px;
}
card:
square: false
type: grid
cards:
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_ambroisie_xxxx
- sensor2: sensor.concentration_ambroisie_xxxx
- icon: mdi:grass
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_armoise_xxxx
- sensor2: sensor.concentration_armoise_xxxx
- icon: mdi:grass
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_aulne_xxxx
- sensor2: sensor.concentration_aulne_xxxx
- icon: mdi:tree
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_bouleau_xxxx
- sensor2: sensor.concentration_bouleau_xxxx
- icon: mdi:tree
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_gramine_xxxx
- sensor2: sensor.concentration_gramine_xxxx
- icon: mdi:flower-pollen
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_olivier_xxxx
- sensor2: sensor.concentration_olivier_xxxx
- icon: mdi:tree
columns: 2
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.qualite_globale_xxxx_j_1
name: Qualité air J+1
icon: mdi:gauge
height: 35px
min: 0
max: 7
positions:
indicator: "off"
icon: inside
severity:
- color: "#888"
from: 6
to: 7
- color: "#7d2181"
from: 5
to: 6
- color: "#960032"
from: 4
to: 5
- color: "#ff5050"
from: 3
to: 4
- color: "#f0e641"
from: 2
to: 3
- color: "#50ccaa"
from: 1
to: 2
- color: "#50f0e6"
from: 0
to: 1
card_mod:
style: |
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 25px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
font-size: 15px;
font-weight: bold;
color: black;
}
ha-card {
margin-top: -1px;
background: none;
border: none;
}
bar-card-value {
color: black;
font-weight: bold;
}
ha-icon {
color: black;
--mdc-icon-size: 28px;
}
- type: custom:mod-card
card_mod:
style:
hui-grid-card $: |
#root {
gap: 0px !important;
}
.: |
ha-card {
margin: -15px 0px -5px 5px;
}
card:
square: false
type: grid
cards:
- type: custom:decluttering-card
template: atmofrance
variables:
- sensor: sensor.pm10_xxxx_j_1
- type: custom:decluttering-card
template: atmofrance
variables:
- sensor: sensor.pm25_xxxx_j_1
- type: custom:decluttering-card
template: atmofrance
variables:
- sensor: sensor.dioxyde_d_azote_xxxx_j_1
- type: custom:decluttering-card
template: atmofrance
variables:
- sensor: sensor.ozone_xxxx_j_1
- type: custom:decluttering-card
template: atmofrance
variables:
- sensor: sensor.dioxyde_de_soufre_xxxx_j_1
columns: 2
- type: vertical-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.qualite_globale_pollen_xxxx_j_1
name: Qualité pollens J+1
icon: mdi:flower-pollen-outline
height: 35px
min: 0
max: 7
positions:
indicator: "off"
icon: inside
severity:
- color: "#888"
from: 6
to: 7
- color: "#7d2181"
from: 5
to: 6
- color: "#960032"
from: 4
to: 5
- color: "#ff5050"
from: 3
to: 4
- color: "#f0e641"
from: 2
to: 3
- color: "#50ccaa"
from: 1
to: 2
- color: "#50f0e6"
from: 0
to: 1
card_mod:
style: |
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 25px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
font-size: 15px;
font-weight: bold;
color: black;
}
ha-card {
margin-top: -1px;
background: none;
border: none;
}
bar-card-value {
color: black;
font-weight: bold;
}
ha-icon {
color: black;
--mdc-icon-size: 28px;
}
- type: custom:mod-card
card_mod:
style:
hui-grid-card $: |
#root {
gap: 0px !important;
}
.: |
ha-card {
margin: -15px 0px -5px 5px;
}
card:
square: false
type: grid
cards:
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_ambroisie_xxxx_j_1
- sensor2: sensor.concentration_ambroisie_xxxx_j_1
- icon: mdi:grass
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_armoise_xxxx_j_1
- sensor2: sensor.concentration_armoise_xxxx_j_1
- icon: mdi:grass
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_aulne_xxxx_j_1
- sensor2: sensor.concentration_aulne_xxxx_j_1
- icon: mdi:tree
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_bouleau_xxxx_j_1
- sensor2: sensor.concentration_bouleau_xxxx_j_1
- icon: mdi:tree
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_gramine_xxxx_j_1
- sensor2: sensor.concentration_gramine_xxxx_j_1
- icon: mdi:flower-pollen
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_olivier_xxxx_j_1
- sensor2: sensor.concentration_olivier_xxxx_j_1
- icon: mdi:tree
columns: 2