Pictures element animation d'un icone appelant un browser popup

Entraide Home Assistant
1

Bonjour,
sur ma picture élément j’ai bien réussi à animer en jaune ou blanc un icone regroupant tous mes éclairages.
J’essaye de faire la même chose avec mon icone des volets mdi:windows-shutter-settings qui appelle lui aussi un pop up.
Je voudrais qu’il soit bleu si tous ouvert, gris si tous fermés et jaune si au moins 1 est en position intermédiaire.
J’ai réussi à le faire pour un icone basique sur un seul volet, mais je m’arrache les cheveux sur celui-ci.
Voici comment j’ai fait pour 1 seul volet sur une autre picture-element :

  - type: custom:mushroom-template-card
    entity: cover.volet_salon_cover_0
    icon: mdi:window-shutter-alert
    icon_color: >-
      {% if state_attr('cover.volet_salon_cover_0', 'current_position') | int ==
      0 %}
        #404040
      {% elif state_attr('cover.volet_salon_cover_0', 'current_position') | int
      == 100 %}
        blue
      {% else %}
        yellow
      {% endif %}
    style:
      top: 79%
      left: 90%
    tap_action:
      action: more-info
    card_mod:
      style: |
        ha-card {
          {% if state_attr('cover.volet_salon_cover_0', 'current_position') | int == 0 %}
            background: rgba(96, 96, 96, 0.5) !important;  /* Gris clair */
          {% elif state_attr('cover.volet_salon_cover_0', 'current_position') | int == 100 %}
            background: rgba(0, 191, 255, 0.2) !important;  /* Bleu clair */
          {% else %}
            background: rgba(255, 255, 0, 0.2) !important;  /* Jaune clair */
          {% endif %}
          backdrop-filter: blur(4px);
          border-radius: 50%;
          width: 40px !important;
          height: 40px !important;
          display: flex;
          align-items: center;
          justify-content: center;
        }

Et voici celui dans lequel je souhaite faire la même chose mais avec un group.volets_maison (par exemple)

2

Bonjour,
mais quelle carte tu utilises pour le group.volets_maison ?
Tu mets un long code, il faut le trouver. Pas plus simple de nous mettre le code de la carte group.volets_maison, sans devoir chercher la partie à modifier ?

3

Vu la longueur de son code, il vaut mieux faire une seule custom:button-card plutôt que de mélanger 36 cartes différentes :joy:

4

Ça faisait longtemps tient :grin:

5

Oui, je travaille sur une carte pour alarme pour ma publication

image
image477×361 30.3 KB

3 « J'aime »
6

désolé, je bidouille. Je suis pas programmeur, je cherche je lis et j’essaye. C’est peut être pas super propre mais dans l’ensemble ça marche. C’est peut être facile pour vous … on est pas tous né avec un ordi sous l’oreiller donc un peu d’indulgence serait sympa :wink:

J’ai avancé un peu. J’utilise custom button card :
l’icone s’affiche bien mais derrière le rond reste toujours gris dans le background et je ne comprends pas pourquoi.

  - type: custom:button-card
    entity: switch.volet_maison
    icon: mdi:window-shutter-settings
    show_name: false
    style:
      top: 79%
      left: 90%
    styles:
      icon:
        - color: |
            [[[ 
              let volets = [
                'cover.volet_bureau_cover_0',
                'cover.volet_salon_cover_0',
                'cover.volet_cuisine_cover_0',
                'cover.volet_parents_cover_0',
                'cover.volet_salle_a_manger_cover_0',
                'cover.volet_teo_cover_0',
                'cover.volet_laly_cover_0'
              ];
              let positions = volets.map(e => states[e]?.attributes?.current_position);
              if (positions.every(p => p === 0)) {
                return "#404040";  // Fermé (gris)
              } else if (positions.every(p => p === 100)) {
                return "blue";  // Ouvert (bleu)
              } else {
                return "yellow";  // Intermédiaire (jaune)
              }
            ]]]
        - width: 25px
        - height: 25px
    card_mod:
      style: |
        ha-card {
          background: >
            [[[ 
              let volets = [
                'cover.volet_bureau_cover_0',
                'cover.volet_salon_cover_0',
                'cover.volet_cuisine_cover_0',
                'cover.volet_chambre_cover_0',
                'cover.volet_sdb_cover_0',
                'cover.volet_garage_cover_0',
                'cover.volet_buanderie_cover_0'
              ];
              let positions = volets.map(e => states[e]?.attributes?.current_position);
              if (positions.every(p => p === 0)) {
                return "rgba(64, 64, 64, 0.5)";  // Fermé (gris foncé)
              } else if (positions.every(p => p === 100)) {
                return "rgba(0, 191, 255, 0.5)";  // Ouvert (bleu)
              } else {
                return "rgba(255, 255, 0, 0.5)";  // Intermédiaire (jaune)
              }
            ]]]
          border-radius: 50% !important;  /* Cercle */
          width: 40px !important;  /* Taille du cercle ajustée */
          height: 40px !important;  /* Taille du cercle ajustée */
          display: flex;
          align-items: center;
          justify-content: center;
          backdrop-filter: blur(4px);  /* Flou léger autour du cercle */
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  /* Ombre légère */
        }
7

Je ne me moquais pas de toi. Pour commencer, il est inutile d’utiliser card-mod avec custom:button-card.

De la même manière que tu utilises

  styles:
    icon:
      - color:

tu devrais utiliser

  styles:
    icon:
      - color: .....
    card:
      - background-color: .....

C’est le problème de chatGPT, il a tendance a mélanger card-mod et custom:button-card.
Je jeterai un oeil à ton code demain si tu veux. Ce soir je ne peux pas

2 « J'aime »
8

@Cleya je veux bien oui merci !!

Alors j’avoue que celle là je l’ai pas fait avec ChatGPT :rofl:
J’avais la picture élément de base avec des icônes basiques. Puis j’ee asi vu un tuto avec le code et j’ai essayé d’adapter :unamused:et je me suis un peu embrouillé. J’ai essayé avec cardmod puis d’autres….pfeuuu

Merci

9

Quand tu seras présent, dis-moi exactement ce que tu attends et où tu coinces. Postes une copie d’écran de ta carte actuelle. Tu voudrais que la couleur de fond de l’icône change ou la couleur de fond de la carte ?

10

Hello,
Alors ça coince sur le fond autour de l’icône du volet. Il reste toujours gris alors que je voudrais qu’il passe soit jaune, soit bleu, soit gris en fonction de l’état des volets.

IMG_3418
IMG_3418627×517 282 KB

Comme sur cette carte dont j’ai posté le code tout au début

IMG_3419
IMG_3419594×488 222 KB

11

Teste ça :

type: custom:button-card
entity: switch.volet_maison
icon: mdi:window-shutter-settings
show_name: false
styles:
  icon:
    - color: |
        [[[ 
          let volets = [
            'cover.volet_bureau_cover_0',
            'cover.volet_salon_cover_0',
            'cover.volet_cuisine_cover_0',
            'cover.volet_parents_cover_0',
            'cover.volet_salle_a_manger_cover_0',
            'cover.volet_teo_cover_0',
            'cover.volet_laly_cover_0'
          ];
          let positions = volets.map(e => states[e]?.attributes?.current_position);
          if (positions.every(p => p === 0)) {
            return "#404040";  // Fermé (gris)
          } else if (positions.every(p => p === 100)) {
            return "blue";  // Ouvert (bleu)
          } else {
            return "yellow";  // Intermédiaire (jaune)
          }
        ]]]
    - width: 25px
    - height: 25px
  card:
    - background-color: |
        [[[ 
          let volets = [
            'cover.volet_bureau_cover_0',
            'cover.volet_salon_cover_0',
            'cover.volet_cuisine_cover_0',
            'cover.volet_chambre_cover_0',
            'cover.volet_sdb_cover_0',
            'cover.volet_garage_cover_0',
            'cover.volet_buanderie_cover_0'
          ];
          let positions = volets.map(e => states[e]?.attributes?.current_position);
          if (positions.every(p => p === 0)) {
            return "rgba(64, 64, 64, 0.5)";  // Fermé (gris foncé)
          } else if (positions.every(p => p === 100)) {
            return "rgba(0, 191, 255, 0.5)";  // Ouvert (bleu)
          } else {
            return "rgba(255, 255, 0, 0.5)";  // Intermédiaire (jaune)
          }
        ]]]
    - border-radius: 50%
    - width: 40px
    - height: 40px
    - display: flex
    - align-items: center
    - justify-content: center
    - backdrop-filter: blur(4px)
    - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)

Essaye avec une nouvelle carte, sélectionne « Manuel » et copie le code tel quel.

1 « J'aime »
12

Il est bien jaune et devient gris lorsque l’icône des volets devient gris quand ils sont tous fermés.
On dirait que ça marche.

Faut que j’essaye tous les volets ouverts, mais là la petite dort :grimacing:

Je réessaierai demain tout ouvert !

Peux tu me dire où je me plantais ?

Merci

13

Bonjour,

Je me suis contenté de reprendre ton code en remplacant les appels à card-mod par les styles natifs de custom:button-card. Toutes les modifications de styles CSS peuvent être faites directement sans utilisation de card-mod.

1 « J'aime »
14

Ok super merci pour les explications !!!

15

Si tu veux que je t’explique comment faire ta carte avec uniquement une custom:button-card (pas de vertical-stack, horizontal-stack ou autres card-mod) n’hésites pas…

1 « J'aime »
16

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