# Cards Machine a laver

**URL:** <https://forum.hacf.fr/t/cards-machine-a-laver/57062>\
**Category:** Entraide Home Assistant\
**Tags:** interface-lovelace, aide\
**Created:** [Janvier 30, 2025, 9:50 UTC](https://forum.hacf.fr/t/cards-machine-a-laver/57062 "2025-01-30T09:50:48Z")\
**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:** [Janvier 30, 2025, 6:11 UTC](https://forum.hacf.fr/t/cards-machine-a-laver/57062/21 "2025-01-30T18:11:53Z")

</div>

> [@anon51798830](#):
>
> Après, il est vrai qu’il y a des personnes qui n’enregistrent rien (si tu vois à qui je fais allusion) 😂

oui, c’est pour ça que je te disais ça 🤣  
allez , je te laisse prendre l’apéro, bonne soirée.

---

<div class="post-metadata">

**Author:** ![anon51798830](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/a/ce7236/32.png) [@anon51798830](https://forum.hacf.fr/u/anon51798830)\
**Post date:** [Janvier 30, 2025, 6:13 UTC](https://forum.hacf.fr/t/cards-machine-a-laver/57062/22 "2025-01-30T18:13:24Z")

</div>

Bonne soirée également (et bon apéro, moi je suis passé au coca light 😕)

---

<div class="post-metadata">

**Author:** ![bricodim](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/b/7bcc69/32.png) [@bricodim](https://forum.hacf.fr/u/bricodim)\
**Post date:** [Janvier 30, 2025, 6:18 UTC](https://forum.hacf.fr/t/cards-machine-a-laver/57062/23 "2025-01-30T18:18:30Z")

</div>

@anon51798830 pas de soucis a ta santé et bonne soirée 🙂 j’ apprend tout les jours avec le code mais je ne suis pas un pro sa ces certain!

---

<div class="post-metadata">

**Author:** ![anon51798830](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/a/ce7236/32.png) [@anon51798830](https://forum.hacf.fr/u/anon51798830)\
**Post date:** [Janvier 30, 2025, 6:23 UTC](https://forum.hacf.fr/t/cards-machine-a-laver/57062/24 "2025-01-30T18:23:53Z")

</div>

Tu n’étais pas concerné par mes échanges avec @WarC0zes 😉  
Tu n’as pas répondu à ma question au sujet de ta machine à laver et plus

---

<div class="post-metadata">

**Author:** ![bricodim](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/b/7bcc69/32.png) [@bricodim](https://forum.hacf.fr/u/bricodim)\
**Post date:** [Janvier 30, 2025, 6:55 UTC](https://forum.hacf.fr/t/cards-machine-a-laver/57062/25 "2025-01-30T18:55:47Z")

</div>

Alors oui desoler je n'avais pas vu, je ne me sentais pas visé donc tout va bien 😄je faut ce que je peut je suis electricien comme tout le monde ici on fait au mieux.

Pour ma machine ces une samsung noir

 ![1000050099](https://forum.hacf.fr/uploads/default/original/3X/8/f/8f435cbc466d409111b969e3f206392059bb25b9.jpeg)

Je prefere l'image de ma machine a laver et j'aimerais que l'effet soit le meme que celui montrer plus haut sur le tableau de bord.

Je te remercie et au besoin si tu a d'autre question n'hesite pas 😊

---

<div class="post-metadata">

**Author:** ![anon51798830](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/a/ce7236/32.png) [@anon51798830](https://forum.hacf.fr/u/anon51798830)\
**Post date:** [Janvier 31, 2025, 4:51 UTC](https://forum.hacf.fr/t/cards-machine-a-laver/57062/26 "2025-01-31T16:51:28Z")

</div>

Salut,

Voilà ce que ça pourrait donner :  
 ![essai](https://forum.hacf.fr/uploads/default/original/3X/f/c/fce77be7318cda398ae24eaf710cee0bc9c79a4f.gif)

Y'en a qui vont dire qu'il manque l'eau... 😁

---

<div class="post-metadata">

**Author:** ![Tochy](https://forum.hacf.fr/user_avatar/forum.hacf.fr/tochy/32/41667_2.png) [@Tochy](https://forum.hacf.fr/u/Tochy)\
**Post date:** [Janvier 31, 2025, 4:53 UTC](https://forum.hacf.fr/t/cards-machine-a-laver/57062/27 "2025-01-31T16:53:54Z")

</div>

Tu aurais pu remettre la vitre après le linge 😁  
Et aussi integrer le bouton sur le bouton de la machine.

---

<div class="post-metadata">

**Author:** ![freetronic](https://forum.hacf.fr/user_avatar/forum.hacf.fr/freetronic/32/88342_2.png) [@freetronic](https://forum.hacf.fr/u/freetronic)\
**Post date:** [Janvier 31, 2025, 4:54 UTC](https://forum.hacf.fr/t/cards-machine-a-laver/57062/28 "2025-01-31T16:54:34Z")

</div>

Hello,

et les afficheurs ? 😉

cdt

---

<div class="post-metadata">

**Author:** ![bricodim](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/b/7bcc69/32.png) [@bricodim](https://forum.hacf.fr/u/bricodim)\
**Post date:** [Janvier 31, 2025, 4:55 UTC](https://forum.hacf.fr/t/cards-machine-a-laver/57062/29 "2025-01-31T16:55:48Z")

</div>

Ho ouiiii trop fort 😀 !!! Purrer mais tu fait sa comment ces cela qui m’interresse ? En tout cas merci beaucoup pour ton temps 😊

---

<div class="post-metadata">

**Author:** ![anon51798830](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/a/ce7236/32.png) [@anon51798830](https://forum.hacf.fr/u/anon51798830)\
**Post date:** [Janvier 31, 2025, 5:00 UTC](https://forum.hacf.fr/t/cards-machine-a-laver/57062/30 "2025-01-31T17:00:51Z")

</div>

Je vais te mettre le code commenté de façon à ce que tu comprennes le fonctionnement.  
Tout d'abord, c'est fait à partir de custom:button-card : [GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant · GitHub](https://github.com/custom-cards/button-card)

Il faudra donc installer cette carte depuis HACS ou manuellement (tu as la procédure d'installation décrite dans le lien ci-dessus ainsi que la documentation de la carte).

Je vais éditer plusieures fois ce message pour tout expliquer, donc soit patient.

Les images utilisées (à mettre dans le répertoire : "`www/images`" par File Editor par exemple) :

 ![image](https://forum.hacf.fr/uploads/default/original/3X/1/5/15e198f90fa67a0634a48cddfd4b5f29de6253bb.jpeg)

 ![image](https://forum.hacf.fr/uploads/default/original/3X/a/f/afda97e9c43344dd26a0ad49a816145a30a55617.jpeg)

(je ne sais pas comment insérer une image .png de façon à conserver la transparence, il faudra donc éditer les images avec un logiciel de retouche de façon à remplacer le blanc par de la transparence...)

Nous allons commencer par le fond, c'est à dire la carte avec l'image du lave-linge. Il faudra donc ajouter une nouvelle carte "`custom:button-card`" sur un tableau de bord quelconque.
  

(je pars du principe que ces notions sont acquises).

Le code :

```auto
type: custom:button-card
styles:
  card:
    - background-image: url(/local/images/lave-linge.png)
    - width: 480px
    - height: 480px
    - background-size: cover
    - background-position: center
    - border-radius: 0px
    - border: none
    - background-color: rgba(250,250,250,1.0)

```

Nous ajoutons donc la carte ("type: custom:button-card") puis nous allons définir les attributs de celle-ci :
  

`- background-image: url((/local/images/lave-linge.png)` : nous indiquons le chemin d'accès à l'image de fond (/local correspond au répertoire www)
  

`- width` et `- height` : nous déterminons la taille de la carte en pixels.
  

`- background-size: cover` : j'indique que l'image doit couvrir l'ensemble de la carte 
  

`- background-position: center` : j'indique que le fond part du centre de la carte
  

`- border-radius: 0px` et `- border: none` : j'indique de ne pas arrondir les coins de la carte et de ne pas mettre de bordure autour
  

`- background-color: rgba(250,250,250,1.0)` : j'indique la couleur de fond de la carte (cette couleur sera visible car le fond de l'image utilisée est transparente) - rgb sont les composantes Rouge (Red), Verte (Green) et Bleue (Blue) de la couleur de fond (de 0 à 255 pour chacune des composantes) et a représente la composante Alpha, c'est à dire la transparence (de 0 à 1 avec un pas de 0,1 - 0 correspondant à une transparence totale et 1.0 une opacité totale).

Pour montrer le fonctionnement, j'ai créé une entrée de type "Interrupteur" que j'utilise pour afficher l'image du tambour plein et lancer la rotation (l'entrée s'appelle `input_boolean.lave_linge`)

Pour le tambour plein, nous allons utiliser un "custom\_fields", c'est à dire un champ personnalisé permettant d'afficher n'importe quelle carte sur la carte "support" que nous venons de créer. Pour cela, nous allons appeler et définir ce "custom\_fields". L'appel se fait simplement en ajoutant `custom_fields:` au code de la carte support puis en lui attribuant un nom (ici je l'ai appelé "tambour"). Puis nous allons définir ce que doit afficher ce custom\_fields, ici, une autre carte custom:button-card. Nous allons donc ajouter (en respectant l'indentation de deux espaces pour chaque niveau) `card:` puis `type: custom:button-card`

Nous allons pouvoir déterminer les attributs de cette nouvelle custom:button-card avec la propriété `styles:` de la même manière que nous avons déterminé les styles de la carte support.

Le code avec le custom\_fields nouvellement créé :

```auto
type: custom:button-card
custom_fields:
  tambour:
    card:
      type: custom:button-card
      entity: input_boolean.lave_linge
      show_icon: false
      show_name: false
      styles:
        card:
          - width: 160px
          - height: 160px
          - border-radius: 50%
          - background-image: none
          - background-size: cover
          - background-position: center
          - background-color: rgba(28,28,28,0.2)
styles:
  card:
    - background-image: url(/local/images/lave-linge.png)
    - width: 480px
    - height: 480px
    - background-size: cover
    - background-position: center
    - border-radius: 0px
    - border: none
    - background-color: rgba(250,250,250,1.0)

```

Ce custom\_fields créé va apparaitre en bas à droite de la carte support. Il va donc falloir le positionner au bon endroit. Pour le faire, nous allons définir sa position en ajoutant aux styles de la carte support les attributs permettant de mettre le custom\_fields à sa place :

```auto
type: custom:button-card
custom_fields:
  tambour:
    card:
      type: custom:button-card
      entity: input_boolean.lave_linge
      show_icon: false
      show_name: false
      styles:
        card:
          - width: 160px
          - height: 160px
          - border-radius: 50%
          - background-image: none
          - background-size: cover
          - background-position: center
          - background-color: rgba(28,28,28,0.2)
styles:
  card:
    - background-image: url(/local/images/lave-linge.png)
    - width: 480px
    - height: 480px
    - background-size: cover
    - background-position: center
    - border-radius: 0px
    - border: none
    - background-color: rgba(250,250,250,1.0)
  custom_fields:
    tambour:
      - position: absolute
      - top: 140px
      - left: 103px

```

J'ai donc ajouté aux styles de la carte support des attributs pour le custom\_fields "tambour".
  

Le premier attribut `- position: absolute` indique que la position du custom\_fields sera fixée. `- top:` et `-left:` permettent de donner la position du coin supérieur gauche du custom\_fields.
  

J'ai ajouté à la carte une proprieté `entity` qui va la lier à mon entrée de type "Interrupteur" de façon à ce que le passage de l'entrée de "on" à "off" et inversement, sera automatiquement pris en compte dans la propriété `state` (état) du custom\_fields.
  

Avec `show_icon: false` et `show_name: false`, j'indique de ne pas afficher l'icône et le nom de l'entité `input_boolean.lave_linge`.

Nous allons ensuite déterminer les attributs variables en fonction de l'état de l'entité ("on" ou "off") et donc afficher une image de tambour plain quand l'état de l'entité est sur "on".

Le code à ce stade :

```auto
type: custom:button-card
custom_fields:
  tambour:
    card:
      type: custom:button-card
      entity: input_boolean.lave_linge
      show_icon: false
      show_name: false
      styles:
        card:
          - width: 160px
          - height: 160px
          - border-radius: 50%
          - background-image: none
          - background-size: cover
          - background-position: center
          - background-color: rgba(28,28,28,0.2)
      state:
        - value: "on"
          styles:
            card:
              - background-image: url(/local/images/tambour-plein.png)
styles:
  card:
    - background-image: url(/local/images/lave-linge.png)
    - width: 480px
    - height: 480px
    - background-size: cover
    - background-position: center
    - border-radius: 0px
    - border: none
    - background-color: rgba(250,250,250,1.0)
  custom_fields:
    tambour:
      - position: absolute
      - top: 140px
      - left: 103px

```

J'ai donc ajouté les lignes suivantes pour dire que quand l'état (`state`) de l'entité est égal à "on", j'affiche l'image du tambour plein :

```auto
      state:
        - value: "on"
          styles:
            card:
              - background-image: url(/local/images/tambour-plein.png)

```

Quand l'état n'est pas "on", on revient sur l'attribut `- background-image: none`

Nous allons voir maintenant les lignes permettant la rotation du tambour plein :

Pour définir l'animation, nous allons ajouter cette ligne dans les styles du custom\_fields quand l'état de l'entité est sur "on" : `- animation: rotate 2s linear infinite`
  

`rotate` : nous voulons une animation de type rotation ;
  

`2s` : la rotation se fera en 2 secondes (plus la durée de roation est petite, plus le custom\_fields tournera vite et inversement) ;
  

`linear` : la rotation sera linéaire ;
  

`infinite` : la rotation se fera de manière permanente.

Nous allons devoir ensuite spécifier que le custom\_fields doit tourner sur lui-même dans le sens des aiguilles d'une montre. Nous allons ajouter donc ces lignes sous la ligne de l'attribut `animation` :

```auto
      extra_styles: |
        @keyframes rotate {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }

```

Attention à bien respecter les indentations : 2 espaces par niveau.

Le code avec la rotation quand l'entité input\_boolean.lave\_linge est sur "on" :

```auto
type: custom:button-card
custom_fields:
  tambour:
    card:
      type: custom:button-card
      entity: input_boolean.lave_linge
      show_icon: false
      show_name: false
      styles:
        card:
          - width: 160px
          - height: 160px
          - border-radius: 50%
          - background-image: none
          - background-size: cover
          - background-position: center
          - background-color: rgba(28,28,28,0.2)
      state:
        - value: "on"
          styles:
            card:
              - background-image: url(/local/images/tambour-plein.png)
              - animation: rotate 2s linear infinite
      extra_styles: |
        @keyframes rotate {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
styles:
  card:
    - background-image: url(/local/images/lave-linge.png)
    - width: 480px
    - height: 480px
    - background-size: cover
    - background-position: center
    - border-radius: 0px
    - border: none
    - background-color: rgba(250,250,250,1.0)
  custom_fields:
    tambour:
      - position: absolute
      - top: 140px
      - left: 103px

```

Pour le bouton, il s'agit là encore d'ajouter un custom\_fields et de le positionner à l'endroit voulu :

```auto
type: custom:button-card
custom_fields:
  tambour:
    card:
      type: custom:button-card
      entity: input_boolean.lave_linge
      show_icon: false
      show_name: false
      styles:
        card:
          - width: 160px
          - height: 160px
          - border-radius: 50%
          - background-image: none
          - background-size: cover
          - background-position: center
          - background-color: rgba(28,28,28,0.2)
      state:
        - value: "on"
          styles:
            card:
              - background-image: url(/local/images/tambour-plein.png)
              - animation: rotate 2s linear infinite
      extra_styles: |
        @keyframes rotate {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
  bouton_marche_arret:
    card:
      type: custom:button-card
      icon: mdi:power
      entity: input_boolean.lave_linge
styles:
  card:
    - background-image: url(/local/images/lave-linge.png)
    - width: 480px
    - height: 480px
    - background-size: cover
    - background-position: center
    - border-radius: 0px
    - border: none
    - background-color: rgba(250,250,250,1.0)
  custom_fields:
    tambour:
      - position: absolute
      - top: 140px
      - left: 103px
    bouton_marche_arret:
      - position: absolute
      - top: 25px
      - left: 370px

```

La différence avec le custom\_fields du tambour est l'ajout de l'icône (`icon: mdi:power`). Je définis l'entité du custom\_fields avec mon entrée `input_boolean.lave-linge` de façon à pouvoir gérer directement l'action lors du clic sur le bouton et les modifications graphiques en fonction de l'état de l'entité ("on" ou "off").

L'entité étant de type Interrupteur, je vais utiliser directement une action "toggle" (basculer) lors du clic, ce qui passera l'entité de "on" à "off" ou inversement à cahque clic.
  

Pour ce faire, j'ajoute donc le code pour définir l'action sur le clic et en même temps l'absence d'action sur un clic maintenu :

```auto
      tap_action:
        action: toggle
      hold_action:
        action: none

```

Comme d'habitude, il faut veiller à respecter l'indentation, `tap_action` devant être au même niveau que `type: custom:button-card` du custom\_fields `bouton_marche_arret`.

Nous allons ensuite définir les attributs de styles de la carte (card) et l'icône (icon) du custom\_fields :

```auto
      styles:
        card:
          - aspect-ratio: 1/1
          - width: 100%
          - height: 70px
          - border-radius: 50%
          - background: >-
              conic-gradient(rgba(211, 211, 211, 0.8) 100deg, rgba(255, 255,
              255, 1) 130deg, rgba(211, 211, 211, 0.8) 170deg, rgba(211, 211, 211,
              0.8) 190deg)
        icon:
          - width: 70%

```

Nous utilisons ici un nouvel attribut qui est le rapport entre la largeur et la hauteur de la carte (`- aspect-ratio:`) que nous définissons à 1/1 : hauteur et largeur identiques. Un `aspect-ratio` de 2/1 signifie que la carte est deux fois plus large que haute et inversement pour un `aspect-ratio` de 1/2.
  

Nous définissons une largeur de 100% et une hauteur de 70 pixels (donc la largeur sera elle aussi de 70 pixels de part l'`aspect-ratio`) et un `border-radius` de 50%. Sur une carte ayant un `aspect-ratio` de 1/1, un `border-radius` de 50% va générer une carte ronde. Avec un `aspect-ratio` de 2/1 avec une hauteur de 70 pixels, pour avoir une carte ayant une forme de "gelule", il aurait fallu mettre le `border-radius` à 35 pixels.

Pour donner un aspect brillant au bouton, nous allons ajouter un dégradé conique au fond du bouton avec le code suivant (je te laisse jouer avec les différentes valeurs d'angle pour voir les possibilités de ce type de dégradé) :

```auto
- background: >-
              conic-gradient(rgba(211, 211, 211, 0.8) 100deg, rgba(255, 255,
              255, 1) 130deg, rgba(211, 211, 211, 0.8) 170deg, rgba(211, 211, 211,
              0.8) 190deg)

```

Nous fixons ensuite un attribut de l'icône : sa largeur avec `- width: 70%`. C'est donc dans les styles que nous allons pouvoir définir les attributs des éléments constitutifs de custom:button-card ("card", "icon", "name", "label", etc.).

Nous allons finir avec le comportement (aspect graphique) du custom\_fields en fonction de l'état de son entité (`input_boolean.lave_linge`).

Nous allons donc ajouter les lignes suivantes (au même niveau que `type: custom:button-card` du custom\_fields `bouton_marche_arret`) :

```auto
      state:
        - value: "on"
          styles:
            card:
              - box-shadow: 0px 0px 8px 4px rgba(64,192,64,0.8)
              - border: 2px rgba(128,128,128,1.0) outset
            icon:
              - color: green
        - value: "off"
          styles:
            card:
              - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
              - border: 3px rgba(128,128,128,1.0) outset
            icon:
              - color: black

```

Dans l'état "off", nous ajoutons tout d'abord un effet d'ombre (`box-shadow`) avec un décalage à droite et vers le bas de 2 pixels et un flou de 4 pixel (le quatrième paramètre est l'épaisseur de l'ombre autour de la carte) avec une couleur grise avec 50% d'opacité. Nous ajoutons ensuite une bordure extérieure (`outset`) de 3 pixels d'épaisseur ayant une couleur grise moyenne avec une opacité de 100% (`rgba(128,128,128,1.0)`). C'est la mention `outset` qui va donner un effet 3D au bouton. Nous définissons la couleur de l'icône (`- color: black`, couleur que nous aurions pu écrire `rgb(0,0,0)` ou `rgba(0,0,0,1.0)` ou `#000000` qui est le code HTML pour le noir) 

Pour l'état "on", nous changeons la couleur de l'icône que nous passons au vert (green), nous modifions l'ombrage de façon à obtenir un halo vert autour du bouton en supprimant le décalage vers la droite et le bas, en modifiant le flou à 8 pixels et en définissant une étendue de 4 pixels et en appliquant une nuance de vert ayant une opacité de 80% (`- box-shadow: 0px 0px 8px 4px rgba(64,192,64,0.8)`). Nous modifions enuite l'épaisseur de la bordure du bouton d'un pixel pour donner un léger effet enfoncé par rapport à l'état "off".

Le code complet :

```auto
type: custom:button-card
custom_fields:
  tambour:
    card:
      type: custom:button-card
      entity: input_boolean.lave_linge
      show_icon: false
      show_name: false
      styles:
        card:
          - width: 160px
          - height: 160px
          - border-radius: 50%
          - background-image: none
          - background-size: cover
          - background-position: center
          - background-color: rgba(28,28,28,0.2)
      state:
        - value: "on"
          styles:
            card:
              - background-image: url(/local/images/tambour-plein.png)
              - animation: rotate 2s linear infinite
      extra_styles: |
        @keyframes rotate {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
  bouton_marche_arret:
    card:
      type: custom:button-card
      name: Power
      icon: mdi:power
      entity: input_boolean.lave_linge
      show_name: false
      state:
        - value: "on"
          styles:
            card:
              - box-shadow: 0px 0px 8px 4px rgba(64,192,64,0.8)
              - border: 2px rgba(128,128,128,1.0) outset
            icon:
              - color: green
        - value: "off"
          styles:
            card:
              - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
              - border: 3px rgba(128,128,128,1.0) outset
            icon:
              - color: black
      styles:
        card:
          - aspect-ratio: 1/1
          - width: 100%
          - height: 70px
          - border-radius: 50%
          - background: >-
              conic-gradient(rgba(211, 211, 211, 0.8) 100deg, rgba(255, 255,
              255, 1) 130deg, rgba(211, 211, 211, 0.8) 170deg, rgba(211, 211, 211,
              0.8) 190deg)
        icon:
          - width: 70%
      tap_action:
        action: toggle
      hold_action:
        action: none
styles:
  card:
    - background-image: url(/local/images/lave-linge.png)
    - width: 480px
    - height: 480px
    - background-size: cover
    - background-position: center
    - border-radius: 0px
    - border: none
    - background-color: rgba(250,250,250,1.0)
  custom_fields:
    tambour:
      - position: absolute
      - top: 140px
      - left: 103px
    bouton_marche_arret:
      - position: absolute
      - top: 25px
      - left: 370px

```

Voilà, c'est fini 😉 N'hésites pas si tu as des questions où si des points te paraissent pas très clairs.

---

<div class="post-metadata">

**Author:** ![bricodim](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/b/7bcc69/32.png) [@bricodim](https://forum.hacf.fr/u/bricodim)\
**Post date:** [Janvier 31, 2025, 5:09 UTC](https://forum.hacf.fr/t/cards-machine-a-laver/57062/31 "2025-01-31T17:09:36Z")

</div>

Je ne peut que te dire une grand merci, il est vrais que le fait de commenté le code aide beaucoup car il est difficile de s’y retrouver. J’ai deja charger la carte sur mon home assistant. Ne tant fait pas prend tout le temps qu’il te faudra. Par rapport au fait de commenter, je pense que ce serais super si tout le monde le fesais sa aiderais les nouveau comme moi qui patauge un peut voir beaucoup. Car quand tu veux quelque chose de precis sous home assistant tes obligé de passer par du code. Mais vraiment merci beaucoup.

---

<div class="post-metadata">

**Author:** ![bricodim](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/b/7bcc69/32.png) [@bricodim](https://forum.hacf.fr/u/bricodim)\
**Post date:** [Janvier 31, 2025, 6:03 UTC](https://forum.hacf.fr/t/cards-machine-a-laver/57062/32 "2025-01-31T18:03:23Z")

</div>

je suis hyper reconnaissant pour toutes t’es explications super claire je n’est pas de mot franchement ces vraiment bien fait ! ces du tuto personnalisé la chapeau !

---

<div class="post-metadata">

**Author:** ![bricodim](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/b/7bcc69/32.png) [@bricodim](https://forum.hacf.fr/u/bricodim)\
**Post date:** [Janvier 31, 2025, 6:13 UTC](https://forum.hacf.fr/t/cards-machine-a-laver/57062/33 "2025-01-31T18:13:33Z")

</div>

@anon51798830 super merci je vais potasser cela ce soir quand la petite sera coucher. Je lis et j’essaie de bien comprendre tout avant de commencer. Je te remercie bcp, pour le travail et le temps que tu me consacre ! Passe une tres bonne soirée.

---

<div class="post-metadata">

**Author:** ![Patrick44fr](https://forum.hacf.fr/user_avatar/forum.hacf.fr/patrick44fr/32/108630_2.png) [@Patrick44fr](https://forum.hacf.fr/u/Patrick44fr)\
**Post date:** [Février 1, 2025, 9:11 UTC](https://forum.hacf.fr/t/cards-machine-a-laver/57062/34 "2025-02-01T09:11:41Z")

</div>

Bonjour je viens de lire tout le post et d'autres sur button card , ouah bravo et quelle puissance de la carte quand on maitrise, en tout cas avec les exemples de @anon51798830 , cest vraiment top pour comprendre.

j'utilises une picture element inspiré de ça

> **[GitHub - phrz/lg-washer-dryer-card: Lovelace cards for use with the Home Assistant LG...](https://github.com/phrz/lg-washer-dryer-card)**
>
> Lovelace cards for use with the Home Assistant LG ThinQ Integration

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

je viens de faire un gif pour le seche linge  
 ![seche_linge](https://forum.hacf.fr/uploads/default/original/3X/2/f/2f1a5911ee3505352f32287aeeacd01e3b60b9e2.gif)

Je me dis que je vais bientot tester la button card pour mes machines.  
merci pour le travail

---

<div class="post-metadata">

**Author:** ![bricodim](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/b/7bcc69/32.png) [@bricodim](https://forum.hacf.fr/u/bricodim)\
**Post date:** [Février 1, 2025, 9:51 UTC](https://forum.hacf.fr/t/cards-machine-a-laver/57062/35 "2025-02-01T09:51:49Z")

</div>

@anon51798830 je suis ok pour la partie photo et code, je doit juste regarder pour essayer de faire la carte plus petite car elle est très grande et je vais attendre aussi pour le bouton. sinon le code marche nikel je suis vraiment fan du travail accompli. et j’ai beaucoup appris grâce a toi ! cette darte c’est de la bombe 🙂

---

<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:** [Février 1, 2025, 9:57 UTC](https://forum.hacf.fr/t/cards-machine-a-laver/57062/36 "2025-02-01T09:57:30Z")

</div>

@anon51798830 et @bricodim : excellente cette carte et les explications pédagogiques, je viens de faire le lave\_linge et le séche\_linge, ça claque,

merci.

 ![Capture d'écran 2025-02-01 105657](https://forum.hacf.fr/uploads/default/original/3X/b/9/b9483dd64384c3e036c4049b9195dee051365747.png)

---

<div class="post-metadata">

**Author:** ![bricodim](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/b/7bcc69/32.png) [@bricodim](https://forum.hacf.fr/u/bricodim)\
**Post date:** [Février 1, 2025, 10:03 UTC](https://forum.hacf.fr/t/cards-machine-a-laver/57062/37 "2025-02-01T10:03:00Z")

</div>

voici la mienne

 ![Capture d'écran 2025-02-01 110118](https://forum.hacf.fr/uploads/default/original/3X/d/9/d9bcabbc1e4533e92a3bded8bd26b66906ba13f2.png)

---

<div class="post-metadata">

**Author:** ![anon51798830](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/a/ce7236/32.png) [@anon51798830](https://forum.hacf.fr/u/anon51798830)\
**Post date:** [Février 1, 2025, 11:56 UTC](https://forum.hacf.fr/t/cards-machine-a-laver/57062/38 "2025-02-01T11:56:23Z")

</div>

Bonjour,

Pour réduire la taille de la carte, il suffit de modifier `- width:` et `- height:` dans les styles de la carte support et du custom\_fields. Il faudra revoir le positionnement en revanche pour le custom\_fields retombe bien au bon endroit. Je vais finir le message explicatif avec le code du bouton.

---

<div class="post-metadata">

**Author:** ![bricodim](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/b/7bcc69/32.png) [@bricodim](https://forum.hacf.fr/u/bricodim)\
**Post date:** [Février 1, 2025, 12:06 UTC](https://forum.hacf.fr/t/cards-machine-a-laver/57062/39 "2025-02-01T12:06:40Z")

</div>

Bonjour,

@Cleya Oui super j’ai trouver par moi même avec tes explications d’hier 😉😊

Part contre si je veux ajouter une entité sur la meme carte je peut l’ajouter ?

Comme par exemple mettre les watts et le on /off

Ps: jai deja modifier pour l’interrupeteur avec l’entitée de ma machine en stop et run.

---

<div class="post-metadata">

**Author:** ![anon51798830](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/a/ce7236/32.png) [@anon51798830](https://forum.hacf.fr/u/anon51798830)\
**Post date:** [Février 1, 2025, 1:10 UTC](https://forum.hacf.fr/t/cards-machine-a-laver/57062/40 "2025-02-01T13:10:28Z")

</div>

Tu peux ajouter ce que tu veux, sur le même principe des custom\_fields. Chaque custom\_field est une carte que tu viens ajouter à la carte support. Ca peut être une custom:button-card, une custom:mini-graph-card, une carte entité, etc. Tu peux donc ajouter sans problème la consommation en cours par exemple ainsi que toute autre entité donnée par ton lave-linge.

[Page précédente](https://forum.hacf.fr/t/cards-machine-a-laver/57062.md?page=1)

[Page suivante](https://forum.hacf.fr/t/cards-machine-a-laver/57062.md?page=3)