# Icon suivant etat: actif/inactif

**URL:** <https://forum.hacf.fr/t/icon-suivant-etat-actif-inactif/48662>\
**Category:** Entraide Home Assistant\
**Tags:** custom-card, card-mod\
**Created:** [Octobre 2, 2024, 10:02 UTC](https://forum.hacf.fr/t/icon-suivant-etat-actif-inactif/48662 "2024-10-02T10:02:19Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dardevil30](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/d/ea666f/32.png) [@Dardevil30](https://forum.hacf.fr/u/Dardevil30)\
**Post date:** [Octobre 2, 2024, 10:02 UTC](https://forum.hacf.fr/t/icon-suivant-etat-actif-inactif/48662/1 "2024-10-02T10:02:19Z")

</div>

Bonjour,

## Mon problème

j'ai une carte swipe avec une vue thermostat  
Je souhaiterai avoir un icon quand le thermostat est actif ou non style petite flamme rouge au lieu de état : idle/heat dans la carte thermostat  
mais je ne parviens pas a trouver la ligne a modifier  
Si une personne aurait une piste 😉 je le remercie d'avance

 ![Capture d’écran 2024-10-02 115615](https://forum.hacf.fr/uploads/default/original/3X/a/a/aaa777ce527f9f1b3f3dbf9ea6daa70c9e060ea3.png)

```auto
type: custom:swipe-card
parameters:
  spaceBetween: 8
navigation: null
cards:
  - type: custom:mini-graph-card
    name: Chambre Rdc
    height: 30
    line_width: 2
    hours_to_show: 24
    points_per_hour: 1
    animate: true
    hour24: true
    decimals: 1
    lower_bound: 10
    uper_bound: 35
    entities:
      - entity: sensor.capteur_temperature_chambre_rdc_temperature
        smoothing: true
  - type: custom:mini-graph-card
    name: Chambre Rdc
    height: 30
    line_width: 2
    hours_to_show: 24
    points_per_hour: 1
    animate: true
    hour24: true
    lower_bound: 0
    uper_bound: 100
    decimals: 0
    line_color: blue
    entities:
      - entity: sensor.capteur_temperature_chambre_rdc_humidite
        smoothing: true
  - type: custom:simple-thermostat
    entity: climate.thermostat_chambre_rdc_consigne
    height: 30
    layout:
      step: row
      mode:
        icons: true
        headings: false
        names: true
    label:
      temperature: T°
      state: Etat
    hide:
      state: false
    state:
      - value: idle
        icon: mdi:radioactive-circle
        styles:
          icon:
            - color: green
            - animation: rotating 3s infinite
          name:
            - color: grey
      - value: 'off'
        icon: mdi:radioactive-circle
        styles:
          card:
            - border: 1px solid grey
          icon:
            - color: grey
      - value: unavailable
        icon: mdi:radioactive-circle
        styles:
          card:
            - border: 2px solid orange
          icon:
            - color: orange
    state_display: |
      [[[
        if (entity.state == 'heat')
          return "Eteint";
        else
          if (entity.state == 'heating')
            return "En chauffe";
          else  
            return "Non disponibile";
      ]]]
    styles:
      icon:
        - align-self: stretch
        - text-align: stretch
        - position: absolute
        - left: 100px
        - top: '-10px'
        - padding: 10px
        - width: 100%
        - height: 100%
      state:
        - align-self: stretch
        - text-align: stretch
        - position: absolute
        - right: 100px
        - top: 50%
        - padding: 10px
        - width: 100%
        - height: 100%
      name:
        - align-self: stretch
        - text-align: stretch
        - position: absolute
        - right: 90px
        - top: 40px
        - padding: 10px
        - width: 100%
        - height: 100%
    control:
      hvac:
        _name: Mode
        heat:
          icon: mdi:fire
          name: null
        'off':
          icon: mdi:power
          name: null
      preset:
        _hide_when_off: true
        home: false
        activity: true
        none: false
        eco:
          name: Eco
        comfort:
          name: Confort
        boost:
          name: Boost
          sleep: false
    header: false
    card_mod:
      style: |
        ha-card {
          --st-font-size-xl: 20px;
          --st-font-size-m: 20px;
          --st-font-size-title: 22px;
          --st-font-size-sensors: 20px;
          --st-spacing:1px;
        }
        .modes > .mode-item {
          border-radius: 10px;
          width: 180px;
          margin-left: 10px
        }
        ha-card > section > div.sensors.with-labels.as-table {
        position: left;
        margin-top: 10px;
        margin-left: 20px;
        }
        ha-card > section > div.current-wrapper.row {
        position: right;
        margin-top: 0px;
        margin-right: -40px;
        }
  - type: custom:button-card
    entity: switch.circuit_chambre
    name: Circuit Chambre Rdc
    aspect_ratio: 3.2/1
    tap_action:
      action: toggle
    show_state: true
    show_last_changed: false
    styles:
      icon:
        - align-self: stretch
        - text-align: stretch
        - position: absolute
        - left: 100px
        - top: '-10px'
        - padding: 10px
        - width: 100%
        - height: 100%
      state:
        - align-self: stretch
        - text-align: stretch
        - position: absolute
        - right: 100px
        - top: 50%
        - padding: 10px
        - width: 100%
        - height: 100%
      name:
        - align-self: stretch
        - text-align: stretch
        - position: absolute
        - right: 90px
        - top: 40px
        - padding: 10px
        - width: 100%
        - height: 100%
      last_changed:
        - align-self: stretch
        - text-align: right
        - position: absolute
        - left: '-25%'
        - top: 20%
        - padding: 10px
        - width: 100%
        - height: 100%
    state_display: |
      [[[
        if (entity.state == 'off')
          return "Eteint";
        else
          if (entity.state == 'on')
            return "En chauffe";
          else  
            return "Non disponibile";
      ]]]
    state:
      - value: 'on'
        icon: mdi:radioactive-circle
        styles:
          icon:
            - color: green
            - animation: rotating 3s infinite
          name:
            - color: grey
      - value: 'off'
        icon: mdi:radioactive-circle
        styles:
          card:
            - border: 1px solid grey
          icon:
            - color: grey
      - value: unavailable
        icon: mdi:radioactive-circle
        styles:
          card:
            - border: 2px solid orange
          icon:
            - color: orange
    lock:
      enabled:
        - - - return entity.state === 'on';
      duration: 3
      unlock: double_tap

```

## Ma configuration

## System Information

| version | core-2024.9.2 |
| --- | --- |
| installation\_type | Home Assistant OS |
| dev | false |
| hassio | true |
| docker | true |
| user | root |
| virtualenv | false |
| python\_version | 3.12.4 |
| os\_name | Linux |
| os\_version | 6.6.46-haos |
| arch | x86\_64 |
| timezone | Europe/Paris |
| config\_dir | /config |

> **Home Assistant Community Store**
>
> | GitHub API | ok |
> | --- | --- |
> | GitHub Content | ok |
> | GitHub Web | ok |
> | HACS Data | ok |
> | GitHub API Calls Remaining | 5000 |
> | Installed Version | 2.0.1 |
> | Stage | running |
> | Available Repositories | 1425 |
> | Downloaded Repositories | 11 |

> **Home Assistant Cloud**
>
> | logged\_in | false |
> | --- | --- |
> | can\_reach\_cert\_server | ok |
> | can\_reach\_cloud\_auth | ok |
> | can\_reach\_cloud | ok |

> **Home Assistant Supervisor**
>
> | host\_os | Home Assistant OS 13.1 |
> | --- | --- |
> | update\_channel | stable |
> | supervisor\_version | supervisor-2024.09.1 |
> | agent\_version | 1.6.0 |
> | docker\_version | 26.1.4 |
> | disk\_total | 30.8 GB |
> | disk\_used | 10.2 GB |
> | healthy | true |
> | supported | true |
> | host\_connectivity | true |
> | supervisor\_connectivity | true |
> | ntp\_synchronized | true |
> | virtualization | kvm |
> | board | ova |
> | supervisor\_api | ok |
> | version\_api | ok |
> | installed\_addons | Node-RED (18.1.1), Get HACS (1.3.1), Linky (1.5.0), Studio Code Server (5.16.0) |

> **Dashboards**
>
> | dashboards | 10 |
> | --- | --- |
> | resources | 9 |
> | views | 35 |
> | mode | storage |

> **Recorder**
>
> | oldest\_recorder\_run | 23 septembre 2024 à 10:47 |
> | --- | --- |
> | current\_recorder\_run | 1 octobre 2024 à 15:35 |
> | estimated\_db\_size | 1574.71 MiB |
> | database\_engine | sqlite |
> | database\_version | 3.45.3 |

---

<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 2, 2024, 10:19 UTC](https://forum.hacf.fr/t/icon-suivant-etat-actif-inactif/48662/2 "2024-10-02T10:19:00Z")

</div>

Salut,  
tu as finalement trouvé pour centrer t’est bouton. 👍

---

<div class="post-metadata">

**Author:** ![Dardevil30](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/d/ea666f/32.png) [@Dardevil30](https://forum.hacf.fr/u/Dardevil30)\
**Post date:** [Octobre 2, 2024, 12:40 UTC](https://forum.hacf.fr/t/icon-suivant-etat-actif-inactif/48662/3 "2024-10-02T12:40:18Z")

</div>

oui et sur mobile le texte est également centrer mais pas sur pc je ne ses pas pk

 ![Screenshot_20241002_123016_Home Assistant](https://forum.hacf.fr/uploads/default/original/3X/9/e/9e4d012844bcd0ad106c8aa7f808ca90c7e88f93.jpeg)

---

<div class="post-metadata">

**Author:** ![Dardevil30](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/d/ea666f/32.png) [@Dardevil30](https://forum.hacf.fr/u/Dardevil30)\
**Post date:** [Octobre 2, 2024, 12:41 UTC](https://forum.hacf.fr/t/icon-suivant-etat-actif-inactif/48662/4 "2024-10-02T12:41:26Z")

</div>

et c’est a gauche de la température que je souhaiterai avoir une petite flamme si le thermostat est en chauffe

---

<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 2, 2024, 3:35 UTC](https://forum.hacf.fr/t/icon-suivant-etat-actif-inactif/48662/5 "2024-10-02T15:35:32Z")

</div>

Je ne sais pas à quoi te sers ce code pour la carte simple thermostat, c’est du code pour la carte button-card.  
Il n’y a pas d’option `state` `state_display` et `styles` pour la carte simple thermostat.

> **[GitHub - nervetattoo/simple-thermostat: A different take on the thermostat card for Home...](https://github.com/nervetattoo/simple-thermostat#available-configuration-options)**
>
> A different take on the thermostat card for Home Assistant ♨️

> [@Dardevil30](#):
>
> ```auto
> state:
> - value: idle
> icon: mdi:radioactive-circle
> styles:
> icon:
> - color: green
> - animation: rotating 3s infinite
> name:
> - color: grey
> - value: 'off'
> icon: mdi:radioactive-circle
> styles:
> card:
> - border: 1px solid grey
> icon:
> - color: grey
> - value: unavailable
> icon: mdi:radioactive-circle
> styles:
> card:
> - border: 2px solid orange
> icon:
> - color: orange
> state_display: |
> [[[
> if (entity.state == 'heat')
> return "Eteint";
> else
> if (entity.state == 'heating')
> return "En chauffe";
> else  
> return "Non disponibile";
> ]]]
> styles:
> icon:
> - align-self: stretch
> - text-align: stretch
> - position: absolute
> - left: 100px
> - top: '-10px'
> - padding: 10px
> - width: 100%
> - height: 100%
> state:
> - align-self: stretch
> - text-align: stretch
> - position: absolute
> - right: 100px
> - top: 50%
> - padding: 10px
> - width: 100%
> - height: 100%
> name:
> - align-self: stretch
> - text-align: stretch
> - position: absolute
> - right: 90px
> - top: 40px
> - padding: 10px
> - width: 100%
> - height: 100%
> 
> ```

---

<div class="post-metadata">

**Author:** ![Dardevil30](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/d/ea666f/32.png) [@Dardevil30](https://forum.hacf.fr/u/Dardevil30)\
**Post date:** [Octobre 4, 2024, 9:31 UTC](https://forum.hacf.fr/t/icon-suivant-etat-actif-inactif/48662/6 "2024-10-04T21:31:27Z")

</div>

c’est du code que j’ai tester mais qui n’a pas fonctionner effectivement c’est pour une autre carte mais j’ai réussi a faire ce que je souhaitai avec card-mod , j’ai également purger le code inutile sur ma carte

---

<div class="post-metadata">

**Author:** ![Dardevil30](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/d/ea666f/32.png) [@Dardevil30](https://forum.hacf.fr/u/Dardevil30)\
**Post date:** [Octobre 4, 2024, 9:49 UTC](https://forum.hacf.fr/t/icon-suivant-etat-actif-inactif/48662/7 "2024-10-04T21:49:46Z")

</div>

Je vous partage le code de la carte si des personne sont intéresser  
C'est une carte swipe par pièce avec la température, humidité et thermostat  
voici ce que cela donne avec demande de chauffage

 ![1000006167](https://forum.hacf.fr/uploads/default/original/3X/8/7/87ff890973a170f49f112e7ba9bba2cd18f538c3.jpeg)

```auto
type: custom:swipe-card
parameters:
  spaceBetween: 8
navigation: null
cards:
  - type: custom:mini-graph-card
    name: Hall
    height: 30
    line_width: 2
    hours_to_show: 24
    points_per_hour: 1
    animate: true
    hour24: true
    decimals: 1
    entities:
      - entity: sensor.capteur_temperature_hall_temperature
        smoothing: true
  - type: custom:mini-graph-card
    name: Hall
    height: 30
    line_width: 2
    hours_to_show: 24
    points_per_hour: 1
    animate: true
    hour24: true
    decimals: 0
    line_color: blue
    entities:
      - entity: sensor.capteur_temperature_hall_humidite
        smoothing: true
  - type: custom:simple-thermostat
    entity: climate.thermostat_hall_consigne
    layout:
      step: row
      mode:
        icons: true
        headings: false
        names: true
    label:
      temperature: T°
    hide:
      state: true
    control:
      hvac:
        _name: Mode
        heat:
          icon: mdi:fire
          name: null
        "off":
          icon: mdi:power
          name: null
      preset:
        _hide_when_off: true
        home: false
        activity: true
        none: false
        eco:
          name: Eco
        comfort:
          name: Confort
    header:
      name: Hall
      icon:
        heating: mdi:fire
    card_mod:
      style: |
        ha-card {
          --st-font-size-xl: 20px;
          --st-font-size-m: 20px;
          --st-font-size-title: 16px;
          --st-font-size-sensors: 20px;
          --st-spacing:1.5px;
        }
        .modes > .mode-item {
          border-radius: 10px;
          width: 180px;
          margin-left: 10px
        }
        ha-card > section > div.sensors.with-labels.as-table {
        position: left;
        margin-top: 10px;
        margin-left: 20px;
        }
        ha-card > section > div.current-wrapper.row {
        position: right;
        margin-top: 3px;
        margin-right: -40px;
        }
        ha-card > header > div {
        position: absolute;
        margin-top: 0px;
        margin-right: 0px;
        top: 0px;
        left: 0px;
        --mdc-icon-size: 30px;
        --card-mod-icon-color: red;
        }
        ha-card > header > div > h2 {
        position: absolute;
        top: 10px;
        left: 185px;
        white-space: nowrap;
        }

```