# Carte de désencombrement

**URL:** <https://forum.hacf.fr/t/carte-de-desencombrement/63279>\
**Category:** Entraide Home Assistant\
**Tags:** interface-lovelace\
**Created:** [Juin 1, 2025, 8:56 UTC](https://forum.hacf.fr/t/carte-de-desencombrement/63279 "2025-06-01T08:56:06Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![voyagers21](https://forum.hacf.fr/user_avatar/forum.hacf.fr/voyagers21/32/23254_2.png) [@voyagers21](https://forum.hacf.fr/u/voyagers21)\
**Post date:** [Juin 1, 2025, 8:56 UTC](https://forum.hacf.fr/t/carte-de-desencombrement/63279/1 "2025-06-01T08:56:06Z")

</div>

Bonjour

je cherche a comprendre l'utilité et la mise en place d'une carte de désemcombrement pour mon modèle.

Quelqu'un peut 'il m'aider par un exemple et m'expliquer l'interet?

merci a vous

```auto
type: custom:button-card
aspect_ratio: 4/3
name: Cuisine
entity: light.cuisine
show_state: true
state_display: >
  [[[ return
  `${parseFloat(states['sensor.temperature_radiateur_cuisine'].state).toFixed(0)}`
  + ' °C' 

  + ` |
  ${parseFloat(states['sensor.sonde_salle_a_manger_humidite'].state).toFixed(0)}`
  + ' %' 

  ]]]
show_entity_picture: true
size: 40%
state:
  - value: "on"
    styles:
      card:
        - "-webkit-box-shadow": 0 0 0.95rem 0.2rem var(--button-card-light-color)
        - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
        - transition: all 2s ease
    color: yellow
  - value: "off"
    color: "#318CE7"
styles:
  icon:
    - left: 5%
    - top: 25%
  name:
    - color: white
    - top: 5%
    - left: 6%
    - font-size: 19px
    - font-weight: bold
    - position: absolute
  state:
    - color: "#87CEFA"
    - top: 27%
    - left: 5%
    - font-size: 12px
    - position: absolute
  custom_fields:
    radiateur:
      - top: 20%
      - left: 75%
      - width: 35px
      - position: absolute
    fenetre:
      - top: 45%
      - left: 55%
      - width: 35px
      - position: absolute
    media:
      - top: 70%
      - left: 75%
      - width: 35px
      - position: absolute
    store:
      - top: 45%
      - left: 75%
      - width: 35px
      - position: absolute
    volet:
      - top: 70%
      - left: 55%
      - width: 35px
      - position: absolute
tap_action:
  action: navigate
  navigation_path: /lovelace/4
hold_action:
  action: toggle
custom_fields:
  store:
    card:
      type: custom:button-card
      aspect_ratio: 1/1
      entity: cover.store_cuisine
      show_name: false
      show_entity_picture: true
      size: 50%
      styles:
        card:
          - background-color: transparent
      state:
        - value: open
          icon: mdi:awning
          color: red
        - value: closed
          icon: mdi:awning-outline
          color: "#318CE7"
      tap_action:
        action: more-info
  volet:
    card:
      type: custom:button-card
      aspect_ratio: 1/1
      entity: cover.volet_cuisine
      show_name: false
      show_entity_picture: true
      size: 50%
      icon: |
        [[[
          if (states['cover.volet_cuisine'].attributes.current_position >= 16)
          return "mdi:window-shutter-open"; else return "mdi:window-shutter";
        ]]]
      styles:
        icon:
          - color: |
              [[[
                if (states['cover.volet_cuisine'].attributes.current_position >= 16)
                return "#318CE7"; else return "red";
              ]]]
        card:
          - background-color: transparent
      tap_action:
        action: more-info
  media:
    card:
      type: custom:button-card
      aspect_ratio: 1/1
      entity: media_player.enceinte_cuisine
      show_name: false
      show_entity_picture: false
      size: 50%
      state:
        - value: playing
          color: yellow
        - value: "off"
          color: "#318CE7"
      styles:
        card:
          - background-color: transparent
      tap_action:
        action: more-info
  radiateur:
    card:
      type: custom:button-card
      aspect_ratio: 1/1
      entity: climate.radiateur_cuisine
      show_name: false
      size: 50%
      state:
        - operator: template
          value: >-
            [[[ return
            states['climate.radiateur_cuisine'].attributes.hvac_action == 'idle'
            ]]]
          icon: mdi:radiator-off
          color: "#318CE7"
        - operator: template
          value: >-
            [[[ return
            states['climate.radiateur_cuisine'].attributes.hvac_action ==
            'heating' ]]]
          icon: mdi:radiator
          color: red
        - operator: template
          value: >-
            [[[ return
            states['climate.radiateur_cuisine'].attributes.hvac_action == 'off'
            ]]]
          icon: mdi:radiator-disabled
          color: "#318CE7"
      styles:
        card:
          - background-color: transparent
  fenetre:
    card:
      type: custom:button-card
      aspect_ratio: 1/1
      entity: binary_sensor.fenetre_cuisine_contact
      show_name: false
      size: 50%
      styles:
        card:
          - background-color: transparent
      state:
        - value: "on"
          icon: mdi:window-open-variant
          color: yellow

```

j'ai mis que le code 1 piece

 ![Screenshot 2025-06-01 10.55.00](https://forum.hacf.fr/uploads/default/original/3X/1/2/1211a3f2e2eea10a53eb58255ae37f94f17bb48d.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:** [Juin 1, 2025, 8:58 UTC](https://forum.hacf.fr/t/carte-de-desencombrement/63279/2 "2025-06-01T08:58:48Z")

</div>

Bonjour,  
qu’est-ce que tu appelles une carte de désemcombrement ?

---

<div class="post-metadata">

**Author:** ![voyagers21](https://forum.hacf.fr/user_avatar/forum.hacf.fr/voyagers21/32/23254_2.png) [@voyagers21](https://forum.hacf.fr/u/voyagers21)\
**Post date:** [Juin 1, 2025, 9:03 UTC](https://forum.hacf.fr/t/carte-de-desencombrement/63279/3 "2025-06-01T09:03:35Z")

</div>

# Decluttering Card

> [@Nouvelle intégration : AtmoFrance - Qualité de l'air](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147/125):
>
> Je pense à un souci avec la carte swipe-card. @Stef_42 a eu le même problème et je n’ai pas trouvé de solution. J’utilise la carte depuis 2 ans et peut-être pour les nouveaux qui l’installent de HACS 2.0, ça pose un problème. tenter un vidage du cache du navigateur. Au pire, changer swipe-card par tabbed-card quand j’ai 5min, je ferais un exemple avec tabbed-card et les cartes j0 et j+1.

on a un exemple ici.

en faite je cherche a comprendre si je peux pas épurer tout ce code dans la partie carte.

---

<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:** [Juin 1, 2025, 9:07 UTC](https://forum.hacf.fr/t/carte-de-desencombrement/63279/4 "2025-06-01T09:07:19Z")

</div>

> [@voyagers21](#):
>
> Decluttering

AH !! tu as écris la traduction de la carte decluterring. Il fallait suivre 😅

Après comme tu utilises button-card, tu as le button-card template qui ressemble au decluterring.

> **[GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant](https://github.com/custom-cards/button-card?tab=readme-ov-file#configuration-templates)**
>
> ❇️ Lovelace button-card for home assistant

Tu as un sujet qui donne pas mal d’information :

> [@\[CARTE\] Decluttering-card (reduire ses lignes de code lovelace)](https://forum.hacf.fr/t/carte-decluttering-card-reduire-ses-lignes-de-code-lovelace/4580):
>
> Bonjour à tous, Je suis nouveau depuis quelques jours sur ce forum et lors d’un échange on m’a invité à partager une astuce pour organiser ou dépoussiérer fichier lovelace.yaml. Nous sommes beaucoup à vouloir découper notre configuration et à repartir proprement dans un dossier a part. exemple: #configuration.yaml group: !include\_dir\_merge\_named group/ automation: !include automations.yaml scene: !include\_dir\_merge\_list scene/ sensor: !include\_dir\_merge\_list sensor/ zone: !include zone/zones.…

Et même une nouvelle carte qui reprend les bases de decluttering-card et améliorer :

> **[GitHub - brunosabot/streamline-card: Streamline your Lovelace configuration with with a...](https://github.com/brunosabot/streamline-card)**
>
> Streamline your Lovelace configuration with with a card template system.

---

<div class="post-metadata">

**Author:** ![voyagers21](https://forum.hacf.fr/user_avatar/forum.hacf.fr/voyagers21/32/23254_2.png) [@voyagers21](https://forum.hacf.fr/u/voyagers21)\
**Post date:** [Juin 1, 2025, 9:21 UTC](https://forum.hacf.fr/t/carte-de-desencombrement/63279/5 "2025-06-01T09:21:26Z")

</div>

en gros je pense qu’il dois y avoir un intérêt mais j’arrive pas a visualiser cette intérêt dans mon cas précis. surtout ça mise en place

---

<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:** [Juin 1, 2025, 9:48 UTC](https://forum.hacf.fr/t/carte-de-desencombrement/63279/6 "2025-06-01T09:48:22Z")

</div>

L’intérêt est de minimiser les codes de carte , quand tu utilises les mêmes modèles de carte.

un exemple, sur ton dashboard tu utilises 10 cartes button-card avec le même code. Au lieu de faire dix fois le même code, tu fais une carte decluterring et utilise le template de la carte decluterring sur ton dashboard. Tu auras juste les entités à changer.

C’est le même principe avec les button-card template.

---

<div class="post-metadata">

**Author:** ![voyagers21](https://forum.hacf.fr/user_avatar/forum.hacf.fr/voyagers21/32/23254_2.png) [@voyagers21](https://forum.hacf.fr/u/voyagers21)\
**Post date:** [Juin 1, 2025, 12:54 UTC](https://forum.hacf.fr/t/carte-de-desencombrement/63279/7 "2025-06-01T12:54:56Z")

</div>

ok ca me parait compliqué a mettre en place

---

<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:** [Juin 1, 2025, 1:15 UTC](https://forum.hacf.fr/t/carte-de-desencombrement/63279/8 "2025-06-01T13:15:50Z")

</div>

Ou placer le decluterring template:

> [@Nouvelle intégration : AtmoFrance - Qualité de l'air](https://forum.hacf.fr/t/nouvelle-integration-atmofrance-qualite-de-lair/24147/79):
>
> les templates decluttering se mettent dans l’éditeur de configuration avant le views:

un exemple de decluterring template.

Le template ( 24 lignes de code ):

```auto
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]]]'

```

le code de la carte a utiliser dans le dashboard ( 4 lignes de code ) :

```auto
type: custom:decluttering-card
template: atmofrance
variables:
  - sensor: sensor.pm10_xxxx

```

Voila l'intérêt du decluttering .

---

<div class="post-metadata">

**Author:** ![team18fr](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/t/e47c2d/32.png) [@team18fr](https://forum.hacf.fr/u/team18fr)\
**Post date:** [Juin 2, 2025, 2:34 UTC](https://forum.hacf.fr/t/carte-de-desencombrement/63279/9 "2025-06-02T14:34:57Z")

</div>

Bonjour à tous,

Je sais que je sors du sujet initial, mais vous faite comment pour avoir ce dashboard. J'ai copier le code et l'ai dupliqué mais cela ne reste pas sur 3 colonnes et cela prends toute la page.

 ![image](https://forum.hacf.fr/uploads/default/original/3X/0/4/0493c752fac084f1c5aa5ae49dbc6cab307a5601.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:** [Juin 2, 2025, 2:53 UTC](https://forum.hacf.fr/t/carte-de-desencombrement/63279/10 "2025-06-02T14:53:29Z")

</div>

tu es en vue section ?  
son code est utilisé dans une colonne, on dirais que tu utilise un button par colonne.  
Dans une colonne utilise la carte pile horizontal et ajoute 3 button-card.

---

<div class="post-metadata">

**Author:** ![voyagers21](https://forum.hacf.fr/user_avatar/forum.hacf.fr/voyagers21/32/23254_2.png) [@voyagers21](https://forum.hacf.fr/u/voyagers21)\
**Post date:** [Juin 2, 2025, 2:57 UTC](https://forum.hacf.fr/t/carte-de-desencombrement/63279/11 "2025-06-02T14:57:51Z")

</div>

oui j’ai bien compris mais j’arrive pas a visualiser ce que je peux mettre dans le template  
et ce que je dois laisser dans la carte.

en faite il est la mon problème

---

<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:** [Juin 2, 2025, 3:02 UTC](https://forum.hacf.fr/t/carte-de-desencombrement/63279/12 "2025-06-02T15:02:51Z")

</div>

tu met dans le template le code d'un button-card avec les styles ou autre que tu as besoin.  
puis tu modifie les entité a utilise par une variable.

> [@WarC0zes](#):
>
> `entity: '[[sensor]]'`

dans ta carte decluterring, tu n'auras que la variable a renseigné avec l'entité

un autre exemple, au lieu de mettre ta couleur ou taille de police, tu utilise une variable

```auto
      styles:
        icon:
          - color: '[[color]]'
        name:
          - font-size: '[[size]]'

```

```auto
type: custom:decluttering-card
template: atmofrance
variables:
  - sensor: sensor.pm10_xxxx
  - color: green
  - size: 16px

```

> [@voyagers21](#):
>
> ![Screenshot 2025-06-01 10.55.00](https://forum.hacf.fr/uploads/default/original/3X/1/2/1211a3f2e2eea10a53eb58255ae37f94f17bb48d.png)

exemple, tu as chambre et bureau qui sont les mêmes code. Tu as juste les entités qui changent. Au lieu d'utiliser deux fois le code complet. Tu fais un template avec decluterring et utilise decluterring-card a la place dans ton dashboard. tu aura moins de ligne de code.

---

<div class="post-metadata">

**Author:** ![team18fr](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/t/e47c2d/32.png) [@team18fr](https://forum.hacf.fr/u/team18fr)\
**Post date:** [Juin 2, 2025, 4:27 UTC](https://forum.hacf.fr/t/carte-de-desencombrement/63279/13 "2025-06-02T16:27:33Z")

</div>

Ok je n’avais pas pensé à la pile horizontal 👍

---

<div class="post-metadata">

**Author:** ![system](https://forum.hacf.fr/uploads/default/original/1X/f21bfb78c8ffe5e68d8964c0a162197808faff17.png) [@system](https://forum.hacf.fr/u/system)\
**Post date:** [Août 1, 2025, 4:28 UTC](https://forum.hacf.fr/t/carte-de-desencombrement/63279/14 "2025-08-01T16:28:32Z")

</div>

Ce sujet a été automatiquement fermé après 60 jours. Aucune réponse n’est permise dorénavant.