# Nouvelle intégration : AtmoFrance - Qualité de l'air

**URL:** <https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147>\
**Category:** Dev\
**Tags:** integration\
**Created:** [Mai 22, 2023, 4:16 UTC](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147 "2023-05-22T16:16:55Z")\
**Posts on this page:** 20\
**Page:** 4

<div class="post-metadata">

**Author:** ![Martini](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/m/bc79bd/32.png) [@Martini](https://forum.hacf.fr/u/Martini)\
**Post date:** [Octobre 8, 2024, 2:18 UTC](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147/61 "2024-10-08T14:18:21Z")

</div>

> [@bentou](#):
>
> moi j’ai fait ca:
> 
> ![image](https://forum.hacf.fr/uploads/default/original/3X/a/6/a699e04dc2f5f58d31b0d6f973c6e6a592c18d5b.png)

Pourquoi ne pas utiliser les couleurs officielles Atmo ?

 ![image](https://forum.hacf.fr/uploads/default/original/3X/b/4/b4ed0035f8c722f382e13716386d9486b207f6d0.png)

(Les codes hexa sont dans la notice : [https://www.atmo-france.org/sites/federation/files/medias/documents/2024-03/notice\_didon\_fevrier\_2024.pdf](https://www.atmo-france.org/sites/federation/files/medias/documents/2024-03/notice_didon_fevrier_2024.pdf))

---

<div class="post-metadata">

**Author:** ![Tonejay](https://forum.hacf.fr/user_avatar/forum.hacf.fr/tonejay/32/31686_2.png) [@Tonejay](https://forum.hacf.fr/u/Tonejay)\
**Post date:** [Octobre 21, 2024, 3:04 UTC](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147/62 "2024-10-21T15:04:46Z")

</div>

> [@Jeffodilo](#):
>
> ```auto
> type: custom:stack-in-card
> keep:
> box_shadow: true
> margin: true
> border_radius: true
> background: true
> outer_padding: true
> cards:
> - type: custom:mod-card
> card_mod:
> style:
> .: |
> :host {
> --text-divider-color: white;
> --text-divider-line-size: 1px;
> }
> card:
> type: custom:text-divider-row
> text: Risque Pollens Ille et Vilaine
> align: left
> - type: custom:mod-card
> card_mod:
> style: |
> ha-card {
> margin: -15px -5px 0px -5px;
> }  
> card:
> type: horizontal-stack
> cards:
> - type: custom:button-card
> entity: sensor.pollens_35
> name: Bain de Bretagne
> icon: mdi:flower-pollen
> layout: icon_name_state2nd
> color_type: icon
> show_name: true
> show_state: true
> state_display: |
> [[[
> if (entity.state === 'très faible')
> return 'Très faible';
> else if (entity.state === 'faible')
> return 'Faible';
> else if (entity.state === 'moyen')
> return 'Moyen';
> else if (entity.state === 'élevé')
> return 'Elevé';
> else if (entity.state === 'très élevé')
> return 'Très élevé';                
> else
> return 'Indisponible'; 
> ]]]
> state:
> - value: indisponible
> styles:
> icon:
> - color: '#ddd'
> state:
> - color: '#ddd'
> card:
> - color: '#ddd'
> name:
> - color: white
> - value: très faible
> styles:
> icon:
> - color: '#50f0e6'
> state:
> - color: '#50f0e6'
> card:
> - color: '#50f0e6'
> name:
> - color: white
> - value: faible
> styles:
> icon:
> - color: '#50ccaa'
> state:
> - color: '#50ccaa'
> card:
> - color: '#50ccaa'
> name:
> - color: white
> - value: moyen
> styles:
> icon:
> - color: '#f0e641'
> state:
> - color: '#f0e641'
> card:
> - color: '#f0e641'
> name:
> - color: white
> - value: élevé
> styles:
> icon:
> - color: '#ff5050'
> state:
> - color: '#ff5050'
> card:
> - color: '#ff5050'
> name:
> - color: white
> - value: très élevé
> styles:
> icon:
> - color: '#960032'
> state:
> - color: '#960032'
> card:
> - color: '#960032'
> name:
> - color: white
> size: 55%
> styles:
> card:
> - '--mdc-ripple-color': rgb(68, 115, 158)
> - '--mdc-ripple-press-opacity': 0.5
> name:
> - font-size: 13px
> state:
> - font-weight: bold
> - font-size: 13px
> card_mod:
> style: |
> ha-card {
> top: 1px !important;
> border: none;
> }            
> - type: custom:bar-card
> entities:
> - entity: sensor.pollens_35_risklevel
> icon: mdi:alert-circle
> name: Niveau
> height: 30px
> min: 0
> max: 4
> positions:
> indicator: 'off'
> icon: 'off'
> severity:
> - color: '#960032'
> from: 3
> to: 4
> - color: '#ff5050'
> from: 2
> to: 3
> - color: '#f0e641'
> from: 1
> to: 2
> - color: '#50ccaa'
> from: 0
> to: 1
> card_mod:
> style: >
> bar-card-currentbar, bar-card-backgroundbar {
> border-radius: 15px;
> }
> 
> #states > bar-card-row > bar-card-card > bar-card-background >
> bar-card-contentbar > bar-card-name {
> font-size: 12px;
> font-weight: bold;
> color: black;
> margin-left: 15px;
> } bar-card-contentbar > bar-card-value {
> font-size: 16px;
> margin-right: 25px;
> {% if is_state('sensor.pollens_35_risklevel', '0') %}
> color: #ddd;
> font-weight: bold;
> {% elif is_state('sensor.pollens_35_risklevel', '1') %}
> color: #50ccaa;
> font-weight: bold;
> {% elif is_state('sensor.pollens_35_risklevel', '2') %}
> color: #f0e641;
> font-weight: bold;
> {% elif is_state('sensor.pollens_35_risklevel', '3') %}
> color: #ff5050;
> font-weight: bold;
> {% elif is_state('sensor.pollens_35_risklevel', '4') %}
> color: #960032;
> font-weight: bold;              
> {% endif %}
> } ha-card {
> margin-top: -2px;
> background: none;
> border: none;
> }
> - type: custom:auto-entities
> card:
> type: grid
> columns: 4
> square: true
> card_param: cards
> filter:
> include:
> - entity_id: sensor.pollens_35*
> options:
> type: custom:button-card
> color_type: icon
> show_name: true
> show_state: true
> state_display: |
> [[[
> if (entity.state === 'très faible')
> return 'Très faible';
> else if (entity.state === 'faible')
> return 'Faible';
> else if (entity.state === 'moyen')
> return 'Moyen';
> else if (entity.state === 'élevé')
> return 'Elevé';
> else if (entity.state === 'très élevé')
> return 'Très élevé';                
> else
> return 'Indisponible'; 
> ]]]
> state:
> - value: indisponible
> styles:
> icon:
> - color: '#ddd'
> state:
> - color: '#ddd'
> card:
> - color: '#ddd'
> name:
> - color: white
> - value: très faible
> styles:
> icon:
> - color: '#50f0e6'
> state:
> - color: '#50f0e6'
> card:
> - color: '#50f0e6'
> name:
> - color: white
> - value: faible
> styles:
> icon:
> - color: '#50ccaa'
> state:
> - color: '#50ccaa'
> card:
> - color: '#50ccaa'
> name:
> - color: white
> - value: moyen
> styles:
> icon:
> - color: '#f0e641'
> state:
> - color: '#f0e641'
> card:
> - color: '#f0e641'
> name:
> - color: white
> - value: élevé
> styles:
> icon:
> - color: '#ff5050'
> state:
> - color: '#ff5050'
> card:
> - color: '#ff5050'
> name:
> - color: white
> - value: très élevé
> styles:
> icon:
> - color: '#960032'
> state:
> - color: '#960032'
> card:
> - color: '#960032'
> name:
> - color: white
> size: 55%
> styles:
> card:
> - '--mdc-ripple-color': rgb(68, 115, 158)
> - '--mdc-ripple-press-opacity': 0.5
> name:
> - font-size: 13px
> state:
> - font-weight: bold
> - font-size: 13px
> card_mod:
> style: |
> ha-card {
> border: solid 2px;
> box-shadow: none;
> }
> exclude:
> - entity_id: sensor.pollens_35_risklevel
> - entity_id: sensor.pollens_35
> - state: nul
> sort:
> method: state
> reverse: true
> first: très élevé
> method: friendly_name
> ignore_case: true
> numeric: false
> 
> ```

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 !

---

<div class="post-metadata">

**Author:** ![Tonejay](https://forum.hacf.fr/user_avatar/forum.hacf.fr/tonejay/32/31686_2.png) [@Tonejay](https://forum.hacf.fr/u/Tonejay)\
**Post date:** [Décembre 2, 2024, 10:41 UTC](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147/63 "2024-12-02T10:41:17Z")

</div>

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 !

---

<div class="post-metadata">

**Author:** ![SebCaps](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/s/f14d63/32.png) [@SebCaps](https://forum.hacf.fr/u/SebCaps)\
**Post date:** [Décembre 2, 2024, 6:05 UTC](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147/64 "2024-12-02T18:05:24Z")

</div>

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,😞

---

<div class="post-metadata">

**Author:** ![Ubik75](https://forum.hacf.fr/user_avatar/forum.hacf.fr/ubik75/32/30297_2.png) [@Ubik75](https://forum.hacf.fr/u/Ubik75)\
**Post date:** [Décembre 30, 2024, 10:10 UTC](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147/65 "2024-12-30T10:10:13Z")

</div>

Bonjour,

L’intégration ne fonctionne plus chez moi depuis hier et apparemment j’ai une erreur 404 sur le site.

---

<div class="post-metadata">

**Author:** ![SebCaps](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/s/f14d63/32.png) [@SebCaps](https://forum.hacf.fr/u/SebCaps)\
**Post date:** [Décembre 30, 2024, 10:24 UTC](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147/66 "2024-12-30T10:24:04Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![morinxav](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/m/e68b1a/32.png) [@morinxav](https://forum.hacf.fr/u/morinxav)\
**Post date:** [Décembre 30, 2024, 10:31 UTC](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147/67 "2024-12-30T10:31:13Z")

</div>

Bonjour,  
Hauts de france. idem ne fonctionne plus  
Cordialement

---

<div class="post-metadata">

**Author:** ![bentou](https://forum.hacf.fr/user_avatar/forum.hacf.fr/bentou/32/13874_2.png) [@bentou](https://forum.hacf.fr/u/bentou)\
**Post date:** [Décembre 30, 2024, 1:38 UTC](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147/68 "2024-12-30T13:38:30Z")

</div>

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](https://www.atmo-france.org/indiceatmo?bbox=3.815002,42.859860,9.055481,44.656932)

---

<div class="post-metadata">

**Author:** ![bentou](https://forum.hacf.fr/user_avatar/forum.hacf.fr/bentou/32/13874_2.png) [@bentou](https://forum.hacf.fr/u/bentou)\
**Post date:** [Décembre 30, 2024, 6:30 UTC](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147/69 "2024-12-30T18:30:04Z")

</div>

C’est reparti, probablement un octet coinsé sur le serveur 👍

---

<div class="post-metadata">

**Author:** ![SebCaps](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/s/f14d63/32.png) [@SebCaps](https://forum.hacf.fr/u/SebCaps)\
**Post date:** [Avril 6, 2025, 1:37 UTC](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147/70 "2025-04-06T13:37:42Z")

</div>

Un petit peu de pub pour annoncer la [V2](https://github.com/sebcaps/atmofrance) qui prend en charge les informations sur les pollens en plus des info sur la qualité de l’air

---

<div class="post-metadata">

**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\
**Post date:** [Avril 6, 2025, 4:00 UTC](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147/71 "2025-04-06T16:00:32Z")

</div>

Bonjour,  
merci pour cette mise à jour avec l'ajout des pollens.  
Ça fonctionne au top.

 ![image](https://forum.hacf.fr/uploads/default/original/3X/3/7/377a6350df02e5d544c6e9f8d1981f66c5ccfbd2.png)

---

<div class="post-metadata">

**Author:** ![jerome6994](https://forum.hacf.fr/user_avatar/forum.hacf.fr/jerome6994/32/13064_2.png) [@jerome6994](https://forum.hacf.fr/u/jerome6994)\
**Post date:** [Avril 6, 2025, 7:26 UTC](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147/72 "2025-04-06T19:26:55Z")

</div>

Mise à jour faite et RAS parfait beau travail

---

<div class="post-metadata">

**Author:** ![Ludoc](https://forum.hacf.fr/user_avatar/forum.hacf.fr/ludoc/32/79819_2.png) [@Ludoc](https://forum.hacf.fr/u/Ludoc)\
**Post date:** [Avril 7, 2025, 12:33 UTC](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147/73 "2025-04-07T12:33:56Z")

</div>

Bonjour @WarC0zes , tu saurais partager ta carte, s’il te plait ?  
Merci.

---

<div class="post-metadata">

**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\
**Post date:** [Avril 7, 2025, 1:27 UTC](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147/74 "2025-04-07T13:27:39Z")

</div>

Alors, tu as les templates pour decluttering-card ( [pour les installer](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147/79)):

```yaml
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:

```yaml
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: 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-border-radius: 15px;
                } 
                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: 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-border-radius: 15px;
                } 
                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](https://github.com/custom-cards/decluttering-card) et [button-card](https://github.com/custom-cards/button-card).

 ![image](https://forum.hacf.fr/uploads/default/original/3X/4/2/42a3b89f4db11c69c24e4af289551d7dbf01def2.png)

edit:  
ajout d'icône pour les pollens.

edit2:  
supprime le mot niveau.

 ![image](https://forum.hacf.fr/uploads/default/original/3X/2/8/280f2a61a3d77a5ee9b778fd1bcf626c23242673.png)

edit3:  
Ajout des entités J+1 avec [swipe-card](https://github.com/bramkragten/swipe-card)

 ![image](https://forum.hacf.fr/uploads/default/original/3X/5/4/549e042f20985c7fb4ee4ed4876249680dc1e083.png)

```yaml
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: 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-border-radius: 15px;
                    } 
                    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: 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-border-radius: 15px;
                    } 
                    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: 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-border-radius: 15px;
                    } 
                    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: 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-border-radius: 15px;
                    } 
                    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

```

---

<div class="post-metadata">

**Author:** ![bentou](https://forum.hacf.fr/user_avatar/forum.hacf.fr/bentou/32/13874_2.png) [@bentou](https://forum.hacf.fr/u/bentou)\
**Post date:** [Avril 7, 2025, 5:59 UTC](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147/75 "2025-04-07T17:59:29Z")

</div>

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:

```auto
[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)

 ![image](https://forum.hacf.fr/uploads/default/original/3X/5/e/5efc70dc9c3a8cfa64d84ff43a8cb29e6ce33a60.png)

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 !!!

 ![image](https://forum.hacf.fr/uploads/default/original/3X/b/6/b6f82d9008316d633f3e00ca2c6cd34118dc82af.png)

c'est où que ca coince ???

```auto
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é...

---

<div class="post-metadata">

**Author:** ![Pulpy-Luke](https://forum.hacf.fr/user_avatar/forum.hacf.fr/pulpy-luke/32/137426_2.png) [@Pulpy-Luke](https://forum.hacf.fr/u/Pulpy-Luke)\
**Post date:** [Avril 7, 2025, 6:35 UTC](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147/76 "2025-04-07T18:35:42Z")

</div>

> [@bentou](#):
>
> je sais bien que je suis pas doué, mais ton histoire de decluttermachin, ca coince chez moi…
> 
> j’ai copié le javascript:
> 
> ```auto
> [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)

Via HACS … c’est tellement plus simple rapide et efficace que de la faire à la main !

---

<div class="post-metadata">

**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\
**Post date:** [Avril 7, 2025, 6:43 UTC](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147/77 "2025-04-07T18:43:23Z")

</div>

Comme le dit @Pulpy-Luke , il faut installer declutering card a partir de HACS .

---

<div class="post-metadata">

**Author:** ![bentou](https://forum.hacf.fr/user_avatar/forum.hacf.fr/bentou/32/13874_2.png) [@bentou](https://forum.hacf.fr/u/bentou)\
**Post date:** [Avril 7, 2025, 6:53 UTC](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147/78 "2025-04-07T18:53:03Z")

</div>

je l’ai pas trouvé dans hacs… ???

je devais pas avoir les yeux devant les trous…  
c’est installé, mais c’est pas mieux.

---

<div class="post-metadata">

**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\
**Post date:** [Avril 8, 2025, 1:42 UTC](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147/79 "2025-04-08T01:42:22Z")

</div>

les templates decluttering se mettent dans l'éditeur de configuration

 ![image](https://forum.hacf.fr/uploads/default/original/3X/d/0/d0a154d0ab7704d48503b1c7997911de603c0539.png)  
 ![image](https://forum.hacf.fr/uploads/default/original/3X/6/c/6c6cf0a19bb0ab823823b5a0ec0c85143399a6b1.png)

avant le `views:`

 ![image](https://forum.hacf.fr/uploads/default/original/3X/b/0/b000027e61ea0707896675791d6d7bb7c772ba55.png)

---

<div class="post-metadata">

**Author:** ![Ludoc](https://forum.hacf.fr/user_avatar/forum.hacf.fr/ludoc/32/79819_2.png) [@Ludoc](https://forum.hacf.fr/u/Ludoc)\
**Post date:** [Avril 8, 2025, 4:46 UTC](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147/80 "2025-04-08T04:46:14Z")

</div>

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 😉

[Page précédente](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147.md?page=3)

[Page suivante](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147.md?page=5)