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

[jerome6994]

Voici un début de contribution :

Il y a juste sous MA VILLE que je voudrais afficher Mauvais l’attibut libellé du sensor mais je ne trouve pas comment faire là

Merci de votre aide

type: custom:stack-in-card
mode: vertical
keep:
  box_shadow: true
  margin: false
  border_radius: true
  background: false
  outer_padding: false
cards:
  - type: custom:mod-card
    card_mod:
      style:
        .: |
          :host {
            --text-divider-color: rgb(68, 115, 158);
            --text-divider-line-size: 1px;
          }
    card:
      type: custom:text-divider-row
      text: Qualité d'air
      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.qualite_globale_saint_genis_laval
          name: 'MA VILLE'
          icon: mdi:molecule
          layout: icon_name_state2nd
          color_type: icon
          show_name: true
          show_state: true
          state:
            - value: 1
              operator: '=='
              color: '#7FFF00'
              styles:
                state:
                  - color: '#7FFF00'
            - value: 2
              operator: '=='
              color: '#FE9A2E'
              styles:
                state:
                  - color: '#FE9A2E'
            - value: 3
              operator: '=='
              color: '#E74C3C'
              styles:
                state:
                  - color: '#E74C3C'
            - value: 4
              operator: '=='
              color: '#E74C3C'
              styles:
                state:
                  - color: '#E74C3C'
          size: 55%
          styles:
            card:
              - '--mdc-ripple-color': rgb(68, 115, 158)
              - '--mdc-ripple-press-opacity': 0.5
            name:
              - font-size: 16px
            state:
              - font-weight: bold
              - font-size: 16px
        - type: custom:bar-card
          entities:
            - entity: sensor.qualite_globale_saint_genis_laval
              name: Niveau
              icon: mdi:alert-circle
              height: 30px
              color: red
              min: 0
              max: 3
              positions:
                indicator: 'off'
                icon: 'off'
              severity:
                - color: '#E74C3C'
                  from: 3
                  to: 4
                - color: '#E74C3C'
                  from: 2
                  to: 3
                - color: '#FE9A2E'
                  from: 1
                  to: 2
                - color: '#7FFF00'
                  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: 16px;
                font-weight: bold;
                color: black;
                margin-left: 15px;
              }  bar-card-contentbar > bar-card-value {
                font-size: 16px;
                margin-right: 25px;
                {% if is_state('sensor.qualite_globale_saint_genis_laval', '1') %}
                  color: #7FFF00;
                  font-weight: bold;
                {% elif is_state('sensor.qualite_globale_saint_genis_laval', '2') %}
                  color: #FE9A2E;
                  font-weight: bold;
                {% elif is_state('sensor.qualite_globale_saint_genis_laval', '3') %}
                  color: black;
                  font-weight: bold;
                {% elif is_state('sensor.qualite_globale_saint_genis_laval', '4') %}
                  color: black;
                  font-weight: bold;
                {% endif %}
              } ha-card {
                margin-top: -2px;
                background: none;
                border: none;
              }
  - type: vertical-stack
    cards:
      - type: grid
        columns: 5
        square: false
        cards:
          - type: custom:button-card
            entity: sensor.dioxyde_d_azote_saint_genis_laval
            name: NO2
            aspect_ratio: 4/3
            show_state: false
            show_icon: true
            icon: mdi:molecule
            size: 100%
            styles:
              card:
                - '--mdc-ripple-color': rgb(68, 115, 158)
                - '--mdc-ripple-press-opacity': 0.5
              name:
                - font-size: 0.84em
              state:
                - font-size: 0.7em
            state:
              - value: 1
                color: lightgreen
              - value: 2
                color: green
              - value: 3
                color: yellow
              - value: 4
                color: red
              - value: 5
                color: darkred
              - value: 6
                color: darkviolet
            card_mod:
              style: |
                ha-card {
                  top: 1px !important;
                  border: none;
                }
          - type: custom:button-card
            entity: sensor.dioxyde_de_soufre_saint_genis_laval
            name: SO2
            aspect_ratio: 4/3
            show_state: false
            show_icon: true
            icon: mdi:molecule
            size: 100%
            styles:
              card:
                - '--mdc-ripple-color': rgb(68, 115, 158)
                - '--mdc-ripple-press-opacity': 0.5
              name:
                - font-size: 0.84em
              state:
                - font-size: 0.7em
            state:
              - value: 1
                color: lightgreen
              - value: 2
                color: green
              - value: 3
                color: yellow
              - value: 4
                color: red
              - value: 5
                color: darkred
              - value: 6
                color: darkviolet
          - type: custom:button-card
            entity: sensor.ozone_saint_genis_laval
            name: Ozone
            aspect_ratio: 4/3
            show_state: false
            show_icon: true
            icon: mdi:molecule
            size: 100%
            styles:
              card:
                - '--mdc-ripple-color': rgb(68, 115, 158)
                - '--mdc-ripple-press-opacity': 0.5
              name:
                - font-size: 0.84em
              state:
                - font-size: 0.7em
            state:
              - value: 1
                color: lightgreen
              - value: 2
                color: green
              - value: 3
                color: yellow
              - value: 4
                color: red
              - value: 5
                color: darkred
              - value: 6
                color: darkviolet
          - type: custom:button-card
            entity: sensor.pm10_saint_genis_laval
            name: PM10
            aspect_ratio: 4/3
            show_state: false
            show_icon: true
            icon: mdi:blur
            size: 100%
            styles:
              card:
                - '--mdc-ripple-color': rgb(68, 115, 158)
                - '--mdc-ripple-press-opacity': 0.5
              name:
                - font-size: 0.84em
              state:
                - font-size: 0.7em
            state:
              - value: 1
                color: lightgreen
              - value: 2
                color: green
              - value: 3
                color: yellow
              - value: 4
                color: red
              - value: 5
                color: darkred
              - value: 6
                color: darkviolet
          - type: custom:button-card
            entity: sensor.pm25_saint_genis_laval
            name: PM2.5
            aspect_ratio: 4/3
            show_state: false
            show_icon: true
            icon: mdi:blur
            size: 100%
            styles:
              card:
                - '--mdc-ripple-color': rgb(68, 115, 158)
                - '--mdc-ripple-press-opacity': 0.5
              name:
                - font-size: 0.84em
              state:
                - font-size: 0.7em
            state:
              - value: 1
                color: lightgreen
              - value: 2
                color: green
              - value: 3
                color: yellow
              - value: 4
                color: red
              - value: 5
                color: darkred
              - value: 6
                color: darkviolet
card_mod:
  style: |
    ha-card {
      box-shadow: 0 0 0 1px gray;
    }      

[SebCaps]

Salut,
Je ne connais pas particulièrement le composant custom_button_card , mais pour récupérer la valeur d’un attribut : c’est state_attr('device_tracker.paulus', 'battery')
Dans le cas présent :state_attr('sensor.qualite_globale_saint_genis_laval', 'Libellé') pour obtenir le libellé.

[jerome6994]

Merci pour le retour @SebCaps je vais tenté une incorporation dans ma carte du coup

[EgainMoney]

salut je rentre juste
je vais aller regarder les log pour voir si j’ai toujours les infos a te donner.

J’ai testé sur tout le département 82 31 et il semble avoir un souci pour récupérer les infos de https://www.atmo-france.org/indiceatmo?geoloc vers l’API j’ai testé la ville de jérome et ça fonctionne

[EgainMoney]

après plusieurs tests je vois que c’est ma région Occitanie qui ne renvoie pas d’infos sur L’API soucis sur atmo ?

[Emile31]

Hello
Je suis de Toulouse et pareil je n’ai pas de données qui ressortent…
Une idée de comment débloquer cette situation ?
Merci

[LeLapinFou]

Aucun problème en Seine et Marne

[SebCaps]

Salut @Emile31,
@EgainMoney a pris l’initiative de demander à atmo France la raison de l’absence de données pour votre région. ( cf ici , mais je ne sais pas si il y a une réponse quelconque…
Éventuellement partage les logs, mais je suppose que tu es dans le même cas , c’est a dire l’absence de données fournies par atmo France.

[EgainMoney]

Salut à tout.

Je suis toujours en attente d’une réponse de leur part qui je pense ne viendras jamais.
En regardant de plus près les Haut de France sont aussi pénaliser aucune donnée sur la carte.
Aprés c’est une association à but non lucratif je ne connais pas leurs moyens ni leur façon de faire.
je vais les relancer sur X pour voir

[Jeffonline]

Bonjour a tous, et bravo pour cette belle intégration. Juste une remarque, je trouve qu’il y a un petit manque de cohérence dans les couleurs. Exemple, le niveau 1 c’est vert clair, le niveau 2 c’est vert foncé sauf pour le niveau global qui lui est orange. Par contre, j’y connais pas grand chose en css

[SebCaps]

Salut à tous,
Nouvelle version du composant disponible (v1.0.4). En plus de corrections de bugs, cette version ajoute un attribut ‹ couleur › qui peut être utilisé dans le dashboard.
Plus d’info par ici.

[GuiGui2]

J’ai le meme problème que toi, meme message ds les logs
Aucunes données ne remontent via l’intégration pour Montpellier et sa région, alors que le site affiche des infos, au moins pour Montpell et Béziers.
Tu as eu une réponse ? Je vais leur poser la question aussi…

[SebCaps]

Salut,
@GuiGui2 la nouvelle version ( toute fraîche de 20 min) devrait résoudre le problème. En fait pour les régions Bretagne et Occitanie les données ne sont pas au niveau de la commune mais de la communauté de communes (EPCI pour être exact)
Ce fonctionnement est maintenant supporté et Montpellier a fait partie de mes villes de tests
N’hésite pas à revenir vers moi en ça de soucis.

[GuiGui2]

Salut!
En effet, j’avais remarqué la nouvelle version, sans trop creuser ce qu’elle apportait.
Réinstallée, j’ai bien les infos qui remontent comme il faut.

Merci!

[EgainMoney]

Salut à tous et bonne année avant tout.

Je te confirme qu’avec ta nouvelle monture cela fonctionne et j’ai bien toutes les infos qui remonte.
Je tente de mettre en place le Template pour le tester et l’intégré dans mon menu
Mais comme d’habitude rien n’est simple sur HA je vais regarder cela dans la journée

Merci encore de la correction.

[Fred55]

Salut,

Merci pour cette mise à jour.

La nuance de couleur des icons n’est pas évidente à distinguer en utilisant l’attribut couleur.
Tous les icons sont niveau 1 excepté Ozone niveau 2 sur les screenshots ci-dessous.

Fred

[SebCaps]

Salut,
Effectivement la nuance, n’est pas facile à voir notamment sur le thème sombre.
De plus je trouve que la couleur du niveau 2 fait plus niveau 1 que le niveau 1 (ie plus vert).
Mon parti pris était de reprendre les couleurs telles qu’appliquées / envoyées par AtmoData. Rien n’empêche de modifier et personnaliser plus (cf par exemple #11 )

[EgainMoney]

Salut de mon cotés le lovelace refuse de fonctionner je dois faire une bêtise ou oublier un truc que je n’ai pas du comprendre.
« Cannot read properties of undefined (reading ‹ atmofrance ›) »

type: custom:decluttering-card
template: atmofrance
variables :
  - sensor: sensor.pm10_paris

Je dois mal placer cette partie

decluttering_templates:
    atmofrance:
        card:
        type: custom:button-card
        entity: '[[sensor]]'
        name: |
            [[[
            return entity.attributes.friendly_name +' : ' + entity.attributes.Libellé
            ]]]
        styles:
            icon:
            - color: '[[[return entity.attributes.Couleur]]]'

ont le place dans template ?

merci

[SebCaps]

Salut,
Le nom du sensor ‹ sensor.pm10_paris › est donné a titre indicatif et a remplacer par le nom de ton sensor qui est ‹ sensor.pm10_(nomdelaville) ›. Idem pour tout les sensor.
La config decluttering dans ‹ editeur de configuration ›. Cf ici par ex

[EgainMoney]

Ok merci de ta réponse
J’ai donc placer le code dans avec éditeur de configuration
Et j’ai un nouveau message

You shoud define either a card or an element in the template

je doit définir l’objet ?

J’ai bien mis les bon sensors