Pourquoi ne pas utiliser les couleurs officielles Atmo ?
(Les codes hexa sont dans la notice : https://www.atmo-france.org/sites/federation/files/medias/documents/2024-03/notice_didon_fevrier_2024.pdf)
1 « J'aime »
Je viens de tester de mon coté, validation du compte en 5min ! Je vais maintenant jeter un oeil sur vos carte et integrer tout ca! 
Merci !
1 « J'aime »
Me revoilà, ca ne fonctionne plus chez moi…je suis dans les hauts de France et je vois que sur le site Atmo France les données ne sont plus dispo…Vous avez aussi ce soucis sur les autres régions ?
Bonne journée !
Bonsoir,
De mon côté (grand-est) pas de soucis, les données sont dispo.
A voir dans le temps si ça persiste, malheureusement pas plus de solution,
Bonjour,
L’intégration ne fonctionne plus chez moi depuis hier et apparemment j’ai une erreur 404 sur le site.
Bonjour,
Pas de donnée de mon coté non plus que ce soit via l’intégration, le site web ou appel direct à l’API.
Peut être une maintenance de fin d’année ?
Pour le moment à part attendre la remise en service / une info sur d’éventuel chgt, pas grd chose à faire…
Bonjour,
Hauts de france. idem ne fonctionne plus
Cordialement
A Paname non plus…
sur la carte de France, il n’y a plus que la région PACA où on voit de l’activité…
https://www.atmo-france.org/indiceatmo?bbox=3.815002,42.859860,9.055481,44.656932
C’est reparti, probablement un octet coinsé sur le serveur 
3 « J'aime »
Un petit peu de pub pour annoncer la V2 qui prend en charge les informations sur les pollens en plus des info sur la qualité de l’air
1 « J'aime »
Mise à jour faite et RAS parfait beau travail
Bonjour @WarC0zes , tu saurais partager ta carte, s’il te plait ?
Merci.
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
2 « J'aime »
Hé Msieur @WarC0zes
je sais bien que je suis pas doué, mais ton histoire de decluttermachin, ca coince chez moi…
j’ai copié le javascript:
[core-ssh /]$ ls -l /config/www/decluttering-card.js
-rwxr--r-- 1 root root 38511 Apr 7 16:47 /config/www/decluttering-card.js
je l’ai enregistré comme il faut (enfin, plutôt comme je le pensais)
collé ta prose dans -rw-r--r-- 1 root root 1545 Apr 7 19:40 www/custom-lovelace/decluttering_templates.yaml
et mis la carte dans un dashboard, mais ca veux pas !!!
c’est où que ca coince ???
Cannot read properties of undefined (reading 'atmofrancepollens')
type: custom:decluttering-card
template: atmofrancepollens
variables:
- sensor: sensor.niveau_armoise_boulogne_billancourt
- sensor2: sensor.concentration_armoise_boulogne_billancourt
vu que les sensors et sensors2 correspondent et existent bien, il ne doit pas s’agir d’un probleme de xxx-xxx ou xxxx_xxx mal transformé…
Via HACS … c’est tellement plus simple rapide et efficace que de la faire à la main !
1 « J'aime »
Comme le dit @Pulpy-Luke , il faut installer declutering card a partir de HACS .
je l’ai pas trouvé dans hacs… ???
je devais pas avoir les yeux devant les trous…
c’est installé, mais c’est pas mieux.
1 « J'aime »
Merci @WarC0zes , j’ai galéré pour trouver où mettre la partie template, en fait Éditer le tableau de bord => 3 petits points en haut à droite => Éditeur de configuration et coller le code au tout début (avant la partie views) en modifiant les xxxx.xxxx.
Edit : je viens de voir ton message au dessus 
1 « J'aime »