La version 2.1.0 est disponible et inclus les prévisions pollution & pollens à J+1.
N’hésitez pas en cas de soucis
PS : je n’ai mis que les prévision à J+1 car les données sont rafraichies vers 12h00 => entre minuit et 12h00 les données à J+2 ne sont pas disponibles (comme sur le site atmo d’ailleurs). Je ne trouve pas cela terrible et n’ai donc pas implémenté les capteurs à J+2.
6 « J'aime »
lilp
Avril 24, 2025, 8:07
43
Voici mon adaptation avec kleenex pollen.
- type: custom:mod-card
card_mod:
style:
.: |
:host {
--text-divider-color: rgb(68, 115, 158);
--text-divider-line-size: 1px;
}
ha-card {
margin-top: -25px;
}
card:
type: custom:text-divider-row
text: Pollen
align: left
- type: horizontal-stack
cards:
- entity: sensor.kleenex_pollen_radar_home_weeds
name: Mauvaises herbes
type: tile
vertical: true
tap_action:
action: more-info
card_mod:
style: |
ha-tile-icon {
{% set level = states('sensor.kleenex_pollen_radar_home_weeds_level') %}
{% set color = {'low':'green','moderate':'orange','high':'red','very-high':'maroon'} %}
{% set level_color = color.get(level,'gray') %}
{% set circle = {'low':'25','moderate':'50','high':'75','very-high':'100'} %}
{% set percentage = circle.get(level,'25') %}
border-radius: 24px;
background: radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
conic-gradient({{level_color}} {{percentage}}% 0%,
var(--card-background-color) 0% 100%);
--tile-color: {{level_color}};
}
- entity: sensor.kleenex_pollen_radar_home_grass
name: Herbes
type: tile
vertical: true
tap_action:
action: more-info
card_mod:
style: |
ha-tile-icon {
{% set level = states('sensor.kleenex_pollen_radar_home_grass_level') %}
{% set color = {'low':'green','moderate':'orange','high':'red','very-high':'maroon'} %}
{% set level_color = color.get(level,'gray') %}
{% set circle = {'low':'25','moderate':'50','high':'75','very-high':'100'} %}
{% set percentage = circle.get(level,'25') %}
border-radius: 24px;
background: radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
conic-gradient({{level_color}} {{percentage}}% 0%,
var(--card-background-color) 0% 100%);
--tile-color: {{level_color}};
}
- entity: sensor.kleenex_pollen_radar_home_trees
name: Arbres
type: tile
vertical: true
tap_action:
action: more-info
card_mod:
style: |
ha-tile-icon {
{% set level = states('sensor.kleenex_pollen_radar_home_trees_level') %}
{% set color = {'low':'green','moderate':'orange','high':'red','very-high':'maroon'} %}
{% set level_color = color.get(level,'gray') %}
{% set circle = {'low':'25','moderate':'50','high':'75','very-high':'100'} %}
{% set percentage = circle.get(level,'25') %}
border-radius: 24px;
background: radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
conic-gradient({{level_color}} {{percentage}}% 0%,
var(--card-background-color) 0% 100%);
--tile-color: {{level_color}};
}
Je n’ai pas encore réussi à intégrer « proprement » le détails des alertes.
1 « J'aime »
Pour ceux que ça intéresse, la chaîne Youtube SCILABUS a fait un article qui explique comment sont mesurées les pollens et les prévisions qui vont avec. Je vous mets en lien l’article qui donne des données complémentaires en plus de la vidéo.
Cela permet de mieux comprendre les changements entre le RNSA et Atmos, et cela donne une meilleure compréhension du sujet de façon générale.
3 « J'aime »
Je viens de voir qu’il fallait basculer sur Atmo France. J’ai mon compte c’est ok.
A tout hasard, @WarC0zes aurais tu remplacer la partie « Pollens » dans ta carte Méteo ? Aurais tu le code à me faire passer pour remplacer tout ça ?
Merci
Avec swipe-card
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é ]]…
Avec tabbed-card, il te faudra les template de decluttering-card qui se trouve dans la version swipe-card. C’est juste le code avec tabbed-card qui change le reste est idem.
@Gilles2 , voila avec tabbed-card
[image]
[image]
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: -20px;
background: none;
}
- type: custom:tabbed-card
tabs:
- card:
type: horizontal-stack
cards:
- type: vertical-stack
…
Tu peux m’aider à avoir cela sans fond « noir » et sans « Villerest » ?
- type: entities
entities:
- type: custom:text-divider-row
text: AIR/POLLENS
align: left
card_mod:
style: |
.text-divider {
border-bottom: 0px dotted cyan !important;
margin-top: -50px !important;
padding-bottom: 10px !important;
}
.text-divider span {
color: white !important;
background: none !important;
margin-left: -15px !important;
font-size: 16px !important;
}
- 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_villerest
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_villerest
- type: custom:decluttering-card
template: atmofrance
variables:
- sensor: sensor.pm25_villerest
- type: custom:decluttering-card
template: atmofrance
variables:
- sensor: sensor.dioxyde_d_azote_villerest
- type: custom:decluttering-card
template: atmofrance
variables:
- sensor: sensor.ozone_villerest
- type: custom:decluttering-card
template: atmofrance
variables:
- sensor: sensor.dioxyde_de_soufre_villerest
columns: 2
- type: vertical-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.qualite_globale_pollen_villerest
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_villerest
- sensor2: sensor.concentration_ambroisie_villerest
- icon: mdi:grass
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_armoise_villerest
- sensor2: sensor.concentration_armoise_villerest
- icon: mdi:grass
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_aulne_villerest
- sensor2: sensor.concentration_aulne_villerest
- icon: mdi:tree
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_bouleau_villerest
- sensor2: sensor.concentration_bouleau_villerest
- icon: mdi:tree
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_gramine_villerest
- sensor2: sensor.concentration_gramine_villerest
- icon: mdi:flower-pollen
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_olivier_villerest
- sensor2: sensor.concentration_olivier_villerest
- icon: mdi:tree
columns: 2
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.qualite_globale_villerest_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_villerest_j_1
- type: custom:decluttering-card
template: atmofrance
variables:
- sensor: sensor.pm25_villerest_j_1
- type: custom:decluttering-card
template: atmofrance
variables:
- sensor: sensor.dioxyde_d_azote_villerest_j_1
- type: custom:decluttering-card
template: atmofrance
variables:
- sensor: sensor.ozone_villerest_j_1
- type: custom:decluttering-card
template: atmofrance
variables:
- sensor: sensor.dioxyde_de_soufre_villerest_j_1
columns: 2
- type: vertical-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.qualite_globale_pollen_villerest_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_villerest_j_1
- sensor2: sensor.concentration_ambroisie_villerest_j_1
- icon: mdi:grass
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_armoise_villerest_j_1
- sensor2: sensor.concentration_armoise_villerest_j_1
- icon: mdi:grass
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_aulne_villerest_j_1
- sensor2: sensor.concentration_aulne_villerest_j_1
- icon: mdi:tree
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_bouleau_villerest_j_1
- sensor2: sensor.concentration_bouleau_villerest_j_1
- icon: mdi:tree
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_gramine_villerest_j_1
- sensor2: sensor.concentration_gramine_villerest_j_1
- icon: mdi:flower-pollen
- type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_olivier_villerest_j_1
- sensor2: sensor.concentration_olivier_villerest_j_1
- icon: mdi:tree
columns: 2
Merci !
Stef_42:
sans « Villerest » ?
c’étais expliquer pourtant. Dans les template de decluttering-card tu as les lignes
name: >
[[[ return entity.attributes.friendly_name.replace('-xxxxx-xxxx','')
+ ': ' ]]]
il faut remplacer les -xxxxx-xxxx
de replace('-xxxxx-xxxx','')
par le nom de ta ville dans les sensors. Pour toi remplace le -xxxxxxx
pas -Villerest
.
name: >
[[[ return entity.attributes.friendly_name.replace('-Villerest','')
+ ': ' ]]]
Stef_42:
sans fond « noir »
Pareil dans les templates de decluterring pour la carte button-card ajoute dans styles:
styles:
card:
- background: none
@WarC0zes c’est ok merci.
Il me manque à trouver comment réduire la hauteur à cet endroit :
Sur la carte text-divider-row
dans card-mod ajoute ha-card et utilise margin-bottom
1 « J'aime »
WarC0zes
A fermé ce sujet ()
Avril 28, 2025, 2:43
51
Ce sujet a été automatiquement fermé après 2 jours. Aucune réponse n’est permise dorénavant.