# Avoir ce type d'interface pour Netatmo

**URL:** <https://forum.hacf.fr/t/avoir-ce-type-dinterface-pour-netatmo/28935>\
**Category:** Entraide Home Assistant\
**Tags:** interface-lovelace\
**Created:** [Octobre 5, 2023, 5:41 UTC](https://forum.hacf.fr/t/avoir-ce-type-dinterface-pour-netatmo/28935 "2023-10-05T17:41:27Z")\
**Posts on this page:** 20\
**Page:** 2

<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:** [Octobre 7, 2023, 6:47 UTC](https://forum.hacf.fr/t/avoir-ce-type-dinterface-pour-netatmo/28935/21 "2023-10-07T06:47:25Z")

</div>

> [@Xris](#):
>
> je vois que les couleurs sont des « mots » moi je connais en RGB mais du coup est-ce que tu utilises un site qui te permet de connaître le nom en fonction d’une couleur que tu aimes ?

Pour les couleurs, ta le choix entre nom, rgb ou rgba. Ta plein de site qui propose le nom des couleurs, j’ai mis des noms pour la facilité. A toi de mettre ce que tu veut, nom, rgb ou rgba.  
je vais ici [Color Names — HTML Color Codes](https://htmlcolorcodes.com/color-names/)

> [@Xris](#):
>
> Et est-ce qu’on peut rajouter du gras à certaines polices avec un paramètre (je profite pour apprendre un peu du code) Merci beaucoup.

C’est du CSS, toutes options fonctionnent avec button-card.  
Pour en gras faut rajouter `font-weight: bold`  
exemple pour button-card:

```auto
          name:
            - font-weight: bold
            - font-size: 14px
            - color: grey
            - margin-left: '-10px'
            - white-space: normal

```

> **[font-weight - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)**
>
> The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.

Après, toutes les cartes ne permette pas de modifier directement le CSS. A ce moment la faut passer par card-mod, qui applique du CSS sur n’importe quel carte.  
Ta un sujet dessus [Personnaliser ses cartes avec Card-mod](https://forum.hacf.fr/t/personnaliser-ses-cartes-avec-card-mod/4447)

---

<div class="post-metadata">

**Author:** ![Xris](https://forum.hacf.fr/user_avatar/forum.hacf.fr/xris/32/40087_2.png) [@Xris](https://forum.hacf.fr/u/Xris)\
**Post date:** [Octobre 7, 2023, 6:54 UTC](https://forum.hacf.fr/t/avoir-ce-type-dinterface-pour-netatmo/28935/22 "2023-10-07T06:54:29Z")

</div>

Génial, merci. Je ne vais pas pouvoir regarder ce weekend mais je sais déjà que je vais m’occuper ensuite 👍

---

<div class="post-metadata">

**Author:** ![Xris](https://forum.hacf.fr/user_avatar/forum.hacf.fr/xris/32/40087_2.png) [@Xris](https://forum.hacf.fr/u/Xris)\
**Post date:** [Octobre 7, 2023, 6:55 UTC](https://forum.hacf.fr/t/avoir-ce-type-dinterface-pour-netatmo/28935/23 "2023-10-07T06:55:38Z")

</div>

Merci, j’avais essayé hier mais j’avais pas le bonne écriture 👍 trop bien

---

<div class="post-metadata">

**Author:** ![Xris](https://forum.hacf.fr/user_avatar/forum.hacf.fr/xris/32/40087_2.png) [@Xris](https://forum.hacf.fr/u/Xris)\
**Post date:** [Octobre 10, 2023, 3:20 UTC](https://forum.hacf.fr/t/avoir-ce-type-dinterface-pour-netatmo/28935/24 "2023-10-10T15:20:43Z")

</div>

> [@anon41081891](#):
>
> rgb(255,140,0)

Bonjour,

Enfin de retour 🙂

Je tente :  
if (states[‹&nbsp;sensor.netatmo\_salon\_temperature&nbsp;›].state \>= ‹&nbsp;19&nbsp;›) return rgb(45,209,96);  
mais ça ne fonctionne pas, ça m’indique :

ButtonCardJSTemplateError: ReferenceError: rgb is not defined in 'if (states[‹&nbsp;sensor.netatmo\_salon\_temperature&nbsp;›].state \>= ‹&nbsp;19&nbsp;›) return rgb(45,209,96);

Une idée

---

<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:** [Octobre 10, 2023, 3:25 UTC](https://forum.hacf.fr/t/avoir-ce-type-dinterface-pour-netatmo/28935/25 "2023-10-10T15:25:35Z")

</div>

Bonjour,  
il manque des guillemets .

```auto
if (states['sensor.netatmo_salon_temperature '].state >= '19') return "rgb(45,209,96)";

```

Quand tu met du code , pense a utiliser la balise texte préformaté.

---

<div class="post-metadata">

**Author:** ![Xris](https://forum.hacf.fr/user_avatar/forum.hacf.fr/xris/32/40087_2.png) [@Xris](https://forum.hacf.fr/u/Xris)\
**Post date:** [Octobre 10, 2023, 3:35 UTC](https://forum.hacf.fr/t/avoir-ce-type-dinterface-pour-netatmo/28935/26 "2023-10-10T15:35:09Z")

</div>

> [@WarC0zes](#):
>
> `rgb(45,209,96)`

merci je teste ça, pour le code ok, je viens de voir ce que c'est `Texte préformaté`

---

<div class="post-metadata">

**Author:** ![Xris](https://forum.hacf.fr/user_avatar/forum.hacf.fr/xris/32/40087_2.png) [@Xris](https://forum.hacf.fr/u/Xris)\
**Post date:** [Octobre 10, 2023, 3:37 UTC](https://forum.hacf.fr/t/avoir-ce-type-dinterface-pour-netatmo/28935/27 "2023-10-10T15:37:22Z")

</div>

Je tente de faire changer la couleur de la feuille en même temps que la gauge mais ça ne semble pas fonctionner pour moi, je ne place pas comme il faut ?

```auto
icons:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 40
              icon_size: 5
              styles:
              - color: |
                  [[[
                    if (states['sensor.netatmo_salon_co2'].state >= '600') return "rgb(51,204,102)";             
                    if (states['sensor.netatmo_salon_co2'].state >= '1000') return "gold";
                    if (states['sensor.netatmo_salon_co2'].state >= '1100') return "DarkOrange";
                    if (states['sensor.netatmo_salon_co2'].state >= '1200') return "Crimson";
                    else return "DodgerBlue";
                  ]]]            

```

---

<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:** [Octobre 10, 2023, 3:42 UTC](https://forum.hacf.fr/t/avoir-ce-type-dinterface-pour-netatmo/28935/28 "2023-10-10T15:42:44Z")

</div>

> [@Xris](#):
>
> Je tente de faire changer la couleur de la feuille en même temps que la gauge mais ça ne semble pas fonctionner pour moi, je ne place pas comme il faut ?

Ca fonctionne pas avec la carte flex-horseshoe-card.

---

<div class="post-metadata">

**Author:** ![Xris](https://forum.hacf.fr/user_avatar/forum.hacf.fr/xris/32/40087_2.png) [@Xris](https://forum.hacf.fr/u/Xris)\
**Post date:** [Octobre 10, 2023, 3:50 UTC](https://forum.hacf.fr/t/avoir-ce-type-dinterface-pour-netatmo/28935/29 "2023-10-10T15:50:08Z")

</div>

Ah d’accord, merci de tous tes conseils c’est génial de découvrir avec quelqu’un qui maîtrise.

---

<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:** [Octobre 10, 2023, 3:53 UTC](https://forum.hacf.fr/t/avoir-ce-type-dinterface-pour-netatmo/28935/30 "2023-10-10T15:53:49Z")

</div>

Attends, j’ai trouvé une solution avec card-mod. Je fini les teste et te montre ca.

---

<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:** [Octobre 10, 2023, 4:24 UTC](https://forum.hacf.fr/t/avoir-ce-type-dinterface-pour-netatmo/28935/31 "2023-10-10T16:24:58Z")

</div>

J'ai une solution avec card-mod. Faut rajouter le bout de code dans la carte flex-horseshoe-card.

```auto
            .icon {
              {% if (states['sensor.netatmo_salon_co2'].state >= '600') %}
                color: rgb(51,204,102);
              {% elif (states['sensor.netatmo_salon_co2'].state >= '1000') %}
                color: gold;
              {% elif (states['sensor.netatmo_salon_co2'].state >= '1100') %}
                color: DarkOrange;
              {% elif (states['sensor.netatmo_salon_co2'].state >= '1200') %}
                color: Crimson;
              {% else %}
                color: DodgerBlue;
              {% endif %}
            }

```

code de la carte flex-horseshoe-card final, avec le bout de code du dessus rajouter dans la partie card-mod en dessous de `ha-card`

```auto
  - type: horizontal-stack
    cards:
      - type: custom:flex-horseshoe-card
        entities:
          - entity: sensor.netatmo_salon_co2
            icon: mdi:leaf
            decimals: 0
            area: qualité
        show:
          horseshoe_style: colorstop
        layout:
          states:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 67
              styles:
                - font-size: 3.3em;
                - fill: Teal;
          icons:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 40
              icon_size: 5
              styles:
                - color: Teal;
        horseshoe_scale:
          min: 1
          max: 1400
        color_stops:
          '0': DodgerBlue
          '800': SeaGreen
          '1000': Gold
          '1100': DarkOrange
          '1200': red
        card_mod:
          style: |
            ha-card {
              background: Snow;
              border-radius: 0;
              border:none;
            }
            .icon {
              {% if (states['sensor.netatmo_salon_co2'].state >= '600') %}
                color: rgb(51,204,102);
              {% elif (states['sensor.netatmo_salon_co2'].state >= '1000') %}
                color: gold;
              {% elif (states['sensor.netatmo_salon_co2'].state >= '1100') %}
                color: DarkOrange;
              {% elif (states['sensor.netatmo_salon_co2'].state >= '1200') %}
                color: Crimson;
              {% else %}
                color: DodgerBlue;
              {% endif %}
            }

```

 ![flex horse color icon](https://forum.hacf.fr/uploads/default/original/3X/1/8/185c7abcd31f9423c0eb04b3690d865bc3dae410.png)

Test et dit moi si c'est bon ?

---

<div class="post-metadata">

**Author:** ![Xris](https://forum.hacf.fr/user_avatar/forum.hacf.fr/xris/32/40087_2.png) [@Xris](https://forum.hacf.fr/u/Xris)\
**Post date:** [Octobre 10, 2023, 4:26 UTC](https://forum.hacf.fr/t/avoir-ce-type-dinterface-pour-netatmo/28935/32 "2023-10-10T16:26:41Z")

</div>

Je regarde ça de suite 🙂 c’est marrant moi je n’ai pas la barre noire

---

<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:** [Octobre 10, 2023, 4:28 UTC](https://forum.hacf.fr/t/avoir-ce-type-dinterface-pour-netatmo/28935/33 "2023-10-10T16:28:11Z")

</div>

Ta un thème claire je pense, moi c'est un thème sombre.

 ![thème light](https://forum.hacf.fr/uploads/default/original/3X/5/8/585e05de090a80713dede41f1f988a929269bb01.png)

EDIT:  
dans le code de flex-horseshoe-card, l'option `horseshoe_scale:` rajoute color: black.

```auto
        horseshoe_scale:
          min: 1
          max: 1400
          color: black

```

---

<div class="post-metadata">

**Author:** ![Xris](https://forum.hacf.fr/user_avatar/forum.hacf.fr/xris/32/40087_2.png) [@Xris](https://forum.hacf.fr/u/Xris)\
**Post date:** [Octobre 10, 2023, 4:35 UTC](https://forum.hacf.fr/t/avoir-ce-type-dinterface-pour-netatmo/28935/34 "2023-10-10T16:35:33Z")

</div>

Je crois que j’ai pas placé comme il faut, je n’est pas le résultat du précédent :

```auto
type: custom:stack-in-card
mode: vertical
keep:
  box_shadow: false
  margin: false
  border_radius: false
  background: true
  outer_padding: false
cards:
  - type: custom:meteofrance-weather-card
    entity: weather.forecast_maison
    number_of_forecasts: '5'
    current: true
    details: false
    alert_forecast: false
    animated_icons: true
    wind_forecast_icons: false
    forecast: false
    one_hour_forecast: false
    card_mod:
      style: |
        ha-card {
          background: SteelBlue;
          border-radius: 0;
          border: none;
        }
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: sensor.netatmo_salon_pressure
        name: Pression
        units: mbar
        show_icon: false
        show_state: true
        styles:
          card:
            - background: SteelBlue
            - border-radius: 0
          name:
            - font-size: 14px
          state:
            - font-size: 20px
            - white-space: normal
        card_mod:
          style: |
            ha-card {
              border: none;
            }            
      - type: custom:button-card
        entity: sensor.netatmo_jardin_temperature
        name: Ressentie
        show_icon: false
        show_state: true
        styles:
          card:
            - background: SteelBlue
            - border-radius: 0
          name:
            - font-size: 14px
          state:
            - font-size: 20px
            - white-space: normal
        card_mod:
          style: |
            ha-card {
              border: none;
            }            
      - type: custom:button-card
        entity: sensor.netatmo_jardin_humidity
        name: Humidité
        show_icon: false
        show_state: true
        styles:
          card:
            - background: SteelBlue
            - border-radius: 0
          name:
            - font-size: 14px
          state:
            - font-size: 20px
            - white-space: normal
            - letter-spacing: 0px
        card_mod:
          style: |
            ha-card {
              border: none;
            }            
  - type: vertical-stack
    cards:
      - type: custom:meteofrance-weather-card
        entity: weather.forecast_maison
        number_of_forecasts: '5'
        current: false
        alert_forecast: false
        one_hour_forecast: false
        forecast: true
        wind_forecast_icons: false
        details: false
        card_mod:
          style: |
            ha-card {
              background: SteelBlue;
              border-radius: 0;
              border: none;
            }
            .forecast ul.day .lowTemp {
              color: WhiteSmoke !important;
            }
      - type: custom:mushroom-title-card
        title: Netatmo Salon
        alignment: center
        title_tap_action:
          action: none
        subtitle_tap_action:
          action: none
        card_mod:
          style: |
            ha-card {
              background: Snow;
              border-radius: 0;
              --primary-text-color: black;
              border: none;
            }
  - type: horizontal-stack
    cards:
      - type: custom:flex-horseshoe-card
        entities:
          - entity: sensor.netatmo_salon_co2
            icon: mdi:leaf
            decimals: 0
            area: qualité
        show:
          horseshoe_style: colorstop
        layout:
          states:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 67
              styles:
                - font-size: 3.3em;
                - fill: Teal;
          icons:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 40
              icon_size: 5
              styles:
                - color: Teal
        horseshoe_scale:
          min: 1
          max: 1400
          color: black
        color_stops:
          '0': DodgerBlue
          '800': SeaGreen
          '1000': Gold
          '1100': DarkOrange
          '1200': red
        card_mod:
          style: |
            ha-card {
              background: Snow;
              border-radius: 0;
              border:none;
            }
            .icon {
              {% if (states['sensor.netatmo_salon_co2'].state >= '600') %}
                color: rgb(51,204,102);
              {% elif (states['sensor.netatmo_salon_co2'].state >= '1000') %}
                color: gold;
              {% elif (states['sensor.netatmo_salon_co2'].state >= '1100') %}
                color: DarkOrange;
              {% elif (states['sensor.netatmo_salon_co2'].state >= '1200') %}
                color: Crimson;
              {% else %}
                color: DodgerBlue;
              {% endif %}
            }
      - type: custom:button-card
        entity: sensor.netatmo_salon_temperature
        layout: icon_state
        aspect_ratio: 1.045/1
        icon: mdi:circle
        color: SeaGreen
        size: 25%
        show_icon: true
        show_state: true
        show_name: false
        units: °
        styles:
          card:
            - background: Snow
            - border-radius: 0
          state:
            - color: Black
            - font-size: 57px
            - margin-left: '-20px'
            - justify-self: start
            - white-space: normal
          icon:
            - color: null
        card_mod:
          style: |
            ha-card {
              border: none;
            }            
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: sensor.netatmo_salon_co2
        layout: icon_name_state2nd
        name: CO2
        icon: mdi:circle
        color: SeaGreen
        size: 25%
        units: ppm
        show_icon: true
        show_state: true
        styles:
          card:
            - background: Snow
            - border-radius: 0
          name:
            - font-size: 14px
            - color: grey
            - margin-left: '-10px'
            - white-space: normal
          state:
            - font-size: 14px
            - color: Teal
          icon:
            - left: 10px
            - color: |
                [[[
                  if (states['sensor.netatmo_salon_co2'].state >= '600') return "rgb(51,51,204)";             
                  if (states['sensor.netatmo_salon_co2'].state >= '1000') return "gold";
                  if (states['sensor.netatmo_salon_co2'].state >= '1100') return "DarkOrange";
                  if (states['sensor.netatmo_salon_co2'].state >= '1200') return "Crimson";
                  else return "DodgerBlue";
                ]]]            
        card_mod:
          style: |
            ha-card {
              border: none;
            }            
      - type: custom:button-card
        entity: sensor.netatmo_salon_noise
        name: Silencieux
        icon: mdi:circle
        color: SeaGreen
        size: 25%
        units: dB
        layout: icon_name_state2nd
        show_icon: true
        show_state: true
        styles:
          card:
            - background: Snow
            - border-radius: 0
          name:
            - font-size: 14px
            - color: grey
            - margin-left: '-10px'
            - white-space: normal
          state:
            - font-size: 14px
            - color: Teal
            - white-space: normal
          icon:
            - left: 10px
            - color: |
                [[[
                  if (states['sensor.netatmo_salon_noise'].state >= '40') return "SeaGreen";             
                  if (states['sensor.netatmo_salon_noise'].state >= '50') return "gold";
                  if (states['sensor.netatmo_salon_noise'].state >= '60') return "DarkOrange";
                  if (states['sensor.netatmo_salon_noise'].state >= '70') return "Crimson";
                  else return "DodgerBlue";
                ]]]             
        card_mod:
          style: |
            ha-card {
              border: none;
            }            
      - type: custom:button-card
        entity: sensor.netatmo_salon_humidity
        name: Humidité
        icon: mdi:circle
        color: SeaGreen
        size: 25%
        layout: icon_name_state2nd
        show_icon: true
        show_state: true
        styles:
          card:
            - background: Snow
            - border-radius: 0
          name:
            - font-size: 14px
            - color: grey
            - margin-left: '-10px'
            - white-space: normal
          state:
            - font-size: 14px
            - color: Teal
            - white-space: normal
          icon:
            - left: 10px
            - color: |
                [[[
                  if (states['sensor.netatmo_salon_humidity'].state >= '50') return "SeaGreen";             
                  if (states['sensor.netatmo_salon_humidity'].state >= '60') return "gold";
                  if (states['sensor.netatmo_salon_humidity'].state >= '70') return "DarkOrange";
                  if (states['sensor.netatmo_salon_humidity'].state >= '80') return "Crimson";
                  else return "DodgerBlue";
                ]]]            
        card_mod:
          style: |
            ha-card {
              border: none;
            }            
card_mod:
  style: |
    ha-card {
      background: Snow;
    }

```

---

<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:** [Octobre 10, 2023, 4:36 UTC](https://forum.hacf.fr/t/avoir-ce-type-dinterface-pour-netatmo/28935/35 "2023-10-10T16:36:47Z")

</div>

Pourtant c’est bon, c’est bien caller.  
Ton entité `sensor.netatmo_salon_co2` a des décimales?

---

<div class="post-metadata">

**Author:** ![Xris](https://forum.hacf.fr/user_avatar/forum.hacf.fr/xris/32/40087_2.png) [@Xris](https://forum.hacf.fr/u/Xris)\
**Post date:** [Octobre 10, 2023, 4:41 UTC](https://forum.hacf.fr/t/avoir-ce-type-dinterface-pour-netatmo/28935/36 "2023-10-10T16:41:04Z")

</div>

Non, je ne pense pas, pas dans l'appli du moins.

Je tente aussi de chose sur la couleur des points mais je ne semble pas marcher non plus, je pense que je fais un mauvais usage de \>= car là je recherche pour 2 situations :

```auto
- color: |
                [[[
                  if (states['sensor.netatmo_salon_temperature'].state >= '1') return "Red";
                  if (states['sensor.netatmo_salon_temperature'].state >= '7') return "Yellow";
                  if (states['sensor.netatmo_salon_temperature'].state >= '16') return "Green";             
                  if (states['sensor.netatmo_salon_temperature'].state >= '25') return "Yellow";
                  if (states['sensor.netatmo_salon_temperature'].state >= '30') return "Red";
                  else return "DodgerBlue";
                ]]]   
      

```

 ![image](https://forum.hacf.fr/uploads/default/original/3X/d/9/d9d2ef8eef0e2e86d7f11ae738307cde174bf8d0.png)

---

<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:** [Octobre 10, 2023, 4:49 UTC](https://forum.hacf.fr/t/avoir-ce-type-dinterface-pour-netatmo/28935/37 "2023-10-10T16:49:47Z")

</div>

j’ai fais une connerie. enlève les `'` pour le chiffre

```auto
if (states['sensor.netatmo_salon_temperature'].state >= '1') return "Red";

```

change en:

```auto
if (states['sensor.netatmo_salon_temperature'].state >= 1) return "Red";

```

faut le faire partout.

---

<div class="post-metadata">

**Author:** ![Xris](https://forum.hacf.fr/user_avatar/forum.hacf.fr/xris/32/40087_2.png) [@Xris](https://forum.hacf.fr/u/Xris)\
**Post date:** [Octobre 10, 2023, 4:55 UTC](https://forum.hacf.fr/t/avoir-ce-type-dinterface-pour-netatmo/28935/38 "2023-10-10T16:55:40Z")

</div>

Je pense l'avoir fait partout mais je n'ai pas de changement de mon côté :

```auto
type: custom:stack-in-card
mode: vertical
keep:
  box_shadow: false
  margin: false
  border_radius: false
  background: true
  outer_padding: false
cards:
  - type: custom:meteofrance-weather-card
    entity: weather.forecast_maison
    number_of_forecasts: '5'
    current: true
    details: false
    alert_forecast: false
    animated_icons: true
    wind_forecast_icons: false
    forecast: false
    one_hour_forecast: false
    card_mod:
      style: |
        ha-card {
          background: SteelBlue;
          border-radius: 0;
          border: none;
        }
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: sensor.netatmo_salon_pressure
        name: Pression
        units: mbar
        show_icon: false
        show_state: true
        styles:
          card:
            - background: SteelBlue
            - border-radius: 0
          name:
            - font-size: 14px
          state:
            - font-size: 20px
            - white-space: normal
        card_mod:
          style: |
            ha-card {
              border: none;
            }            
      - type: custom:button-card
        entity: sensor.netatmo_jardin_temperature
        name: Ressentie
        show_icon: false
        show_state: true
        styles:
          card:
            - background: SteelBlue
            - border-radius: 0
          name:
            - font-size: 14px
          state:
            - font-size: 20px
            - white-space: normal
        card_mod:
          style: |
            ha-card {
              border: none;
            }            
      - type: custom:button-card
        entity: sensor.netatmo_jardin_humidity
        name: Humidité
        show_icon: false
        show_state: true
        styles:
          card:
            - background: SteelBlue
            - border-radius: 0
          name:
            - font-size: 14px
          state:
            - font-size: 20px
            - white-space: normal
            - letter-spacing: 0px
        card_mod:
          style: |
            ha-card {
              border: none;
            }            
  - type: vertical-stack
    cards:
      - type: custom:meteofrance-weather-card
        entity: weather.forecast_maison
        number_of_forecasts: '5'
        current: false
        alert_forecast: false
        one_hour_forecast: false
        forecast: true
        wind_forecast_icons: false
        details: false
        card_mod:
          style: |
            ha-card {
              background: SteelBlue;
              border-radius: 0;
              border: none;
            }
            .forecast ul.day .lowTemp {
              color: WhiteSmoke !important;
            }
      - type: custom:mushroom-title-card
        title: Netatmo Salon
        alignment: center
        title_tap_action:
          action: none
        subtitle_tap_action:
          action: none
        card_mod:
          style: |
            ha-card {
              background: Snow;
              border-radius: 0;
              --primary-text-color: black;
              border: none;
            }
  - type: horizontal-stack
    cards:
      - type: custom:flex-horseshoe-card
        entities:
          - entity: sensor.netatmo_salon_co2
            icon: mdi:leaf
            decimals: 0
            area: qualité
        show:
          horseshoe_style: colorstop
        layout:
          states:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 67
              styles:
                - font-size: 3.3em;
                - fill: Teal;
          icons:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 40
              icon_size: 5
              styles:
                - color: Teal
        horseshoe_scale:
          min: 1
          max: 1400
          color: black
        color_stops:
          '0': DodgerBlue
          '800': SeaGreen
          '1000': Gold
          '1100': DarkOrange
          '1200': Red
        card_mod:
          style: |
            ha-card {
              background: Snow;
              border-radius: 0;
              border:none;
            }
            .icon {
              {% if (states['sensor.netatmo_salon_co2'].state >= 600) %}
                color: rgb(51,204,102);
              {% elif (states['sensor.netatmo_salon_co2'].state >= 1000) %}
                color: gold;
              {% elif (states['sensor.netatmo_salon_co2'].state >= 1100) %}
                color: DarkOrange;
              {% elif (states['sensor.netatmo_salon_co2'].state >= 1200) %}
                color: Crimson;
              {% else %}
                color: DodgerBlue;
              {% endif %}
            }
      - type: custom:button-card
        entity: sensor.netatmo_salon_temperature
        layout: icon_state
        aspect_ratio: 1.045/1
        icon: mdi:circle
        color: SeaGreen
        size: 25%
        show_icon: true
        show_state: true
        show_name: false
        units: °
        styles:
          card:
            - background: Snow
            - border-radius: 0
          state:
            - color: Black
            - font-size: 55px
            - margin-left: '-20px'
            - justify-self: start
            - white-space: normal
          icon:
            - color: |
                [[[
                  if (states['sensor.netatmo_salon_temperature'].state >= 1) return "Red";
                  if (states['sensor.netatmo_salon_temperature'].state >= 7) return "Yellow";
                  if (states['sensor.netatmo_salon_temperature'].state >= 16) return "Green";             
                  if (states['sensor.netatmo_salon_temperature'].state >= 25) return "Yellow";
                  if (states['sensor.netatmo_salon_temperature'].state >= 30) return "Red";
                  else return "DodgerBlue";
                ]]]   
        card_mod:
          style: |
            ha-card {
              border: none;
            }            
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: sensor.netatmo_salon_co2
        layout: icon_name_state2nd
        name: CO2
        icon: mdi:circle
        color: SeaGreen
        size: 25%
        units: ppm
        show_icon: true
        show_state: true
        styles:
          card:
            - background: Snow
            - border-radius: 0
          name:
            - font-size: 14px
            - color: grey
            - margin-left: '-10px'
            - white-space: normal
          state:
            - font-size: 14px
            - color: Teal
          icon:
            - left: 10px
            - color: |
                [[[
                  if (states['sensor.netatmo_salon_co2'].state >= 600) return "rgb(51,51,204)";             
                  if (states['sensor.netatmo_salon_co2'].state >= 1000) return "gold";
                  if (states['sensor.netatmo_salon_co2'].state >= 1100) return "DarkOrange";
                  if (states['sensor.netatmo_salon_co2'].state >= 1200) return "Crimson";
                  else return "DodgerBlue";
                ]]]            
        card_mod:
          style: |
            ha-card {
              border: none;
            }            
      - type: custom:button-card
        entity: sensor.netatmo_salon_noise
        name: Silencieux
        icon: mdi:circle
        color: SeaGreen
        size: 25%
        units: dB
        layout: icon_name_state2nd
        show_icon: true
        show_state: true
        styles:
          card:
            - background: Snow
            - border-radius: 0
          name:
            - font-size: 14px
            - color: grey
            - margin-left: '-10px'
            - white-space: normal
          state:
            - font-size: 14px
            - color: Teal
            - white-space: normal
          icon:
            - left: 10px
            - color: |
                [[[
                  if (states['sensor.netatmo_salon_noise'].state >= 30) return "SeaGreen";             
                  if (states['sensor.netatmo_salon_noise'].state >= 50) return "gold";
                  if (states['sensor.netatmo_salon_noise'].state >= 60) return "DarkOrange";
                  if (states['sensor.netatmo_salon_noise'].state >= 70) return "Crimson";
                  else return "DodgerBlue";
                ]]]             
        card_mod:
          style: |
            ha-card {
              border: none;
            }            
      - type: custom:button-card
        entity: sensor.netatmo_salon_humidity
        name: Humidité
        icon: mdi:circle
        color: SeaGreen
        size: 25%
        layout: icon_name_state2nd
        show_icon: true
        show_state: true
        styles:
          card:
            - background: Snow
            - border-radius: 0
          name:
            - font-size: 14px
            - color: grey
            - margin-left: '-10px'
            - white-space: normal
          state:
            - font-size: 14px
            - color: Teal
            - white-space: normal
          icon:
            - left: 10px
            - color: red
        card_mod:
          style: |
            ha-card {
              border: none;
            }            
card_mod:
  style: |
    ha-card {
      background: Snow;
    }

```

Ou alors je l'ai fait à trop d'endroits peut-être,

j'ai l'impression que j'ai retirer trop :

 ![image](https://forum.hacf.fr/uploads/default/original/3X/1/f/1fae9396dcf02e4ebf0e5baea8475918c75ad0af.png)

C'est dommage que HA ne nous place pas en surbrillance, les zones où on travaille

---

<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:** [Octobre 10, 2023, 4:59 UTC](https://forum.hacf.fr/t/avoir-ce-type-dinterface-pour-netatmo/28935/39 "2023-10-10T16:59:44Z")

</div>

Il y a un soucis dans le code des couleurs je pense, faut que je ça. je te tient au courant.

---

<div class="post-metadata">

**Author:** ![Xris](https://forum.hacf.fr/user_avatar/forum.hacf.fr/xris/32/40087_2.png) [@Xris](https://forum.hacf.fr/u/Xris)\
**Post date:** [Octobre 10, 2023, 5:00 UTC](https://forum.hacf.fr/t/avoir-ce-type-dinterface-pour-netatmo/28935/40 "2023-10-10T17:00:39Z")

</div>

ça marche et moi, je vais me coller le code dans un doc et le placer un par un pour voir ce que je contrôle et apprendre.

[Page précédente](https://forum.hacf.fr/t/avoir-ce-type-dinterface-pour-netatmo/28935.md?page=1)

[Page suivante](https://forum.hacf.fr/t/avoir-ce-type-dinterface-pour-netatmo/28935.md?page=3)