4 entités tassées dans une ligne de faible hauteur

[WarC0zes]

@juu

Les icones local: c'est juste une tuerie, c'est custom_icons qui permet de mettre toutes les icônes de iconify et si ça ne suffit pas on créer ses propres icônes et on les insère avec local:

Ah, j'avais pas fais attention au local:, mais j'utilise déjà hass-custom_icons

@juu

1ère ligne a une icône mdi et la 2ème ligne une icône local:. J'ai peut-être un problème lors de la création de mes icônes

Ça doit être au souci de marge des icônes différentes des MDI et local, il faudrait utiliser l'option transform pour régler l'axe X Y (ex: transform: translateY(2px) translateX(2px)).

Exemple à tester et à modifier suivant l'icône utilisée.

styles:
  icon:
    - width: 20px
    - transform: |
        [[[
          const c = states['cover.voletroulantwc'];
          const pos = c.attributes.current_position;
          const myPos = 100 - parseInt(states['number.voletroulantwc_my_position'].state);

          if (c.state === 'opening') return 'translateY(-1px)';
          if (c.state === 'closing') return 'translateY(1px)';

          if (pos === 0) {
            return pos === myPos
              ? 'translateX(-3px)'
              : 'translateX(0px)';
          }

          if (pos > 0 && pos < 50) {
            return pos === myPos
              ? 'translateX(-3px)'
              : 'translateX(-2px)';
          }

          if (pos >= 50 && pos < 100) {
            return pos === myPos
              ? 'translateX(-3px)'
              : 'translateX(-2px)';
          }

          if (pos === 100) {
            return pos === myPos
              ? 'translateX(-4px)'
              : 'translateX(-1px)';
          }

          return 'none';
        ]]]

@juu

Je viens de m'apercevoir que appuyer sur le toggle change l'icône du toggle, mais ne change pas l'état de l'entité input_boolean.force_simu_voletroulantwc_1 (et en plus cette entité finira dans le template)

Alors est-ce que l'entité change bien d'état ? Regarde dans Outils de dev onglet État. Ou rien ne change ?

[juu]

Pour les icônes :
Les transform fonctionnent, j'ai un décalage d'environ 15px (à peaufiner) vers le bas. Je regarderai une autre fois si j'ai un problème au niveau des origines de mes SVG, ça serait mieux de corriger le décalage à la source. Du coup j'ai mis ça :

  icon:
    - width: 24px
    - transform: |
        [[[
          const c = states['cover.voletroulantwc'];
          const pos = c.attributes.current_position;
          const myPos = 100 - parseInt(states['number.voletroulantwc_my_position'].state);

          if (c.state === 'opening') return 'translateY(0px)';
          if (c.state === 'closing') return 'translateY(0px)';

          if (pos === 0) {
            return pos === myPos
              ? 'translateY(15px)'
              : 'translateY(0px)';
          }
          if (pos > 0 && pos < 50) {
            return pos === myPos
              ? 'translateY(15px)'
              : 'translateY(15px)';
          }
          if (pos >= 50 && pos < 100) {
            return pos === myPos
              ? 'translateY(15px)'
              : 'translateY(15px)';
          }
          if (pos === 100) {
            return pos === myPos
              ? 'translateY(15px)'
              : 'translateY(0px)';
          }
          return 'none';
        ]]]

Pour le toggle :
L'entité ne change pas d'état. Sur l'image suivante, les 3 toggle affichent la même entité (la 3ème ligne est une carte entité classique).
Au début mon entité était activée donc les 3 toggle sont "allumés". J'ai cliqué sur le toggle de la 2ème ligne, le toggle s'est éteint mais l'entité est restée activée comme le montre la 3ème ligne.

Quand je change réellement l'état de l'entité, tous les toggle bougent bien.

[WarC0zes]

Remplace le custom_field toggle par ce code ; ça devrait être bon.

custom_fields:
  toggle:
    card:
      type: custom:button-card
      entity: input_boolean.force_simu_voletroulantwc_1
      show_name: false
      show_state: false
      show_label: false
      tap_action:
        action: toggle
      hold_action:
        action: none
      styles:
        card:
          - background: transparent
          - box-shadow: none
          - border: none
          - padding: 0
          - width: 40px
          - height: 24px
        icon:
          - width: 40px
          - color: transparent
        custom_fields:
          sw:
            - justify-self: center
            - align-self: center
      custom_fields:
        sw: |
          [[[
            const on = entity.state === 'on';
            return `
              <div style="
                width:36px;
                height:20px;
                border-radius:10px;
                background:${on ? 'var(--primary-color)' : 'var(--disabled-color)'};
                position:relative;
                transition:.2s;">
                <div style="
                  position:absolute;
                  top:2px;
                  left:${on ? '18px' : '2px'};
                  width:16px;
                  height:16px;
                  border-radius:50%;
                  background:white;
                  transition:.2s;">
                </div>
              </div>
            `;
          ]]]

[juu]

@WarC0zes

const on = entity.state === 'on';

C'est ce que j'étais en train de faire, mais le tien est plus joli
Par contre const on = entity.state === 'on'; ne fonctionne pas, j'ai dû remplacer par const on = states['input_boolean.force_simu_voletroulantwc_1'].state === 'on';

.
Merci pour tout ! Cela fonctionne bien, c'est ce que je cherchais, plus qu'à faire les dernières finitions cosmétiques.
Maintenant je m'attaque au template, mais ça ne fonctionne pas, je galère à remplacer mes 4 entités par des variables

[WarC0zes]

@juu

Par contre const on = entity.state === 'on'; ne fonctionne pas, j'ai dû remplacer par const on = states['input_boolean.force_simu_voletroulantwc_1'].state === 'on';

Oui, c'est le souci avec plusieurs boutons imbriqués dans button-card. Tu as fait comme il fallait. Des fois il faut mettre 4 crochets pour que ça fonctionne [[[[ .... ]]]] , même 5 avec des pop-up browser-mod.

Nested custom:button-card - JS Templates - custom:button-card documentation

normalement const on = entity.state === 'on'; devrais fonctionner avec 4 crochets au lieu de 3.

[juu]

En effet, ça marche avec les 4 [[[[, ça sera plus facile à gérer.

Plus qu'à coloriser les textes de lignes, et surtout à faire mon template

Merci beaucoup pour ton aide

[WarC0zes]

@juu

En effet, ça marche avec les 4 [[[[, ça sera plus facile à gérer.

Oui, c'est plus simple a gérer, surtout si tu utilises la carte plusieurs fois, tu as juste une entité à modifier.

[roumano]

Pour afficher ce qu'on veut dans les secondary info, il faut une autre extension comme canary :