Cards Machine a laver

[WarC0zes]

@Cleya

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.

[Cleya]

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

[bricodim]

@Cleya 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!

[Cleya]

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

[bricodim]

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

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

[Cleya]

Salut,

Voilà ce que ça pourrait donner :

Y’en a qui vont dire qu’il manque l’eau…

[Tochy]

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

[freetronic]

Hello,

et les afficheurs ?

cdt

[bricodim]

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

[Cleya]

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

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) :

(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 :

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éé :

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 :

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 :

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 :

      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 :

      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 » :

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 :

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 :

      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 :

      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é) :

- 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) :

      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 :

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.

[bricodim]

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.

[bricodim]

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 !

[bricodim]

@Cleya 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.

[Patrick44fr]

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 @Cleya , 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...

je viens de faire un gif pour le seche linge

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

[bricodim]

@Cleya 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

[Ludoc]

@Cleya 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.

[bricodim]

voici la mienne

[Cleya]

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.

[bricodim]

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.

[Cleya]

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.