Taille boutons de custom:button-card

Jerome_ARNOULD · Mars 19, 2021, 7:51

Bonjour,

Sauriez-vous comment je peux réduire en largeur la taille des button-card?
J’aimerais faire un panel de boutons radio. J’en ai vu des faits sur:
https://forum.hacf.fr/t/carte-gestion-radio/717/2
En fait, j’aurais aimé avoir ce visuel mais sans l’avoir lié à chaque enceinte.

J’aimerais faire du node-red pour distribuer suivant les radios.
Sauf que peu importe la manière de m’y prendre, j’ai un grand espace à gauche et à droite de chaque logo (je précise que les logos sont carrés).
Ce qui fait que même si j’essaie de mettre 4 logos un à coté de l’autre, seuls 3 sont affichés:

En fait, je ne sais pas trop comment m’y prendre ni quelle card utiliser…
Je vous mets mon code.
Ne regardez pas à la présentation, je suis en phase de test et j’ai utilisé le même png et ai essayé tellement de trucs que rien n’est bien aligné.

type: 'custom:stack-in-card'
mode: vertical
cards:
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        entity: input_boolean.nrj
        name: NRJ
        show_name: false
        show_entity_picture: true
        show_state: false
        tap_action:
          action: toggle
        state:
          - entity_picture: /local/image/radios/nrj.png
            value: 'off'
            styles:
              card:
                - width: 160px
                - border-radius: 14px
                - padding-top: 0px
                - padding-bottom: 0px
                - margin-bottom: 20px
          - entity_picture: /local/image/radios/nrj.png
            value: 'on'
            styles:
              card:
                - width: 160px
                - border-radius: 14px
                - padding-top: 0px
                - padding-bottom: 0px
                - margin-bottom: 20px
      - type: 'custom:button-card'
        entity: input_boolean.bel_rtl
        name: NRJ
        size: 50px
        show_name: false
        show_entity_picture: true
        show_state: false
        tap_action:
          action: toggle
        state:
          - entity_picture: /local/image/radios/nrj.png
            value: 'off'
            styles:
              card:
                - width: 160px
                - border-radius: 14px
                - padding-top: 0px
                - padding-bottom: 0px
                - margin-bottom: 20px
          - entity_picture: /local/image/radios/nrj.png
            value: 'on'
            styles:
              card:
                - width: 160px
                - border-radius: 14px
                - padding-top: 10px
                - padding-bottom: 10px
                - margin-bottom: 20px
      - type: 'custom:button-card'
        entity: input_boolean.fun_radio
        name: NRJ
        size: 50px
        show_name: false
        show_entity_picture: true
        show_state: false
        tap_action:
          action: toggle
        state:
          - entity_picture: /local/image/radios/nrj.png
            value: 'off'
            styles:
              card:
                - width: 160px
                - border-radius: 14px
                - padding-top: 0px
                - padding-bottom: 0px
                - margin-bottom: 20px
          - entity_picture: /local/image/radios/nrj.png
            value: 'on'
            styles:
              card:
                - width: 160px
                - border-radius: 14px
                - padding-top: 10px
                - padding-bottom: 10px
                - margin-bottom: 20px
      - type: 'custom:button-card'
        entity: input_boolean.radio_contact
        name: NRJ
        size: 50px
        show_name: false
        show_entity_picture: true
        show_state: false
        tap_action:
          action: toggle
        state:
          - entity_picture: /local/image/radios/nrj.png
            value: 'off'
            styles:
              card:
                - width: 160px
                - border-radius: 14px
                - padding-top: 0px
                - padding-bottom: 0px
                - margin-bottom: 20px
          - entity_picture: /local/image/radios/nrj.png
            value: 'on'
            styles:
              card:
                - width: 160px
                - border-radius: 14px
                - padding-top: 10px
                - padding-bottom: 10px
                - margin-bottom: 20px

Merci de votre aide

Clemalex · Mars 19, 2021, 8:10

Tu as fixé la largeur de la carte…

Enlève ça et tu verras un autre comportement que :

Pour voir la carte tu devrais ajouter :

border: 5px solid red

La où tu as actuellement width

Jerome_ARNOULD · Mars 19, 2021, 9:25

Bonjour,
Merci pour ta réponse
En fait, le « width » me permettait d’avoir la taille souhaitée du logo.
J’ai fais tes modifs (uniquement sur le premier). Alors oui, j’ai les 4 mais parce que le premier logo est plus petit. Par contre, je garde la largeur qui m’embête

Une idée?

Merci

Jerome_ARNOULD · Mars 19, 2021, 10:18

Finalement, ca a fini par marcher. Plutot que d’utiliser width, j’ai utilisé size.

Merci à toi

Clemalex · Mars 19, 2021, 11:19

Poste ton code et une capture

Jerome_ARNOULD · Mars 19, 2021, 11:22

type: 'custom:stack-in-card'
mode: vertical
cards:
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        entity: input_boolean.nrj
        name: NRJ
        size: 55px
        show_name: false
        show_entity_picture: true
        show_state: false
        tap_action:
          action: toggle
        state:
          - entity_picture: /local/image/radios/radio_contact.jpg
            value: 'off'
            styles:
              card:
                - border-radius: 64px
                - padding-top: 10px
                - padding-bottom: 10px
                - margin-bottom: 20px
          - entity_picture: /local/image/radios/radio_contact.jpg
            value: 'on'
            styles:
              card:
                - border-radius: 64px
                - padding-top: 10px
                - padding-bottom: 10px
                - margin-bottom: 20px
      - type: 'custom:button-card'
        entity: input_boolean.bel_rtl
        name: NRJ
        size: 55px
        show_name: false
        show_entity_picture: true
        show_state: false
        tap_action:
          action: toggle
        state:
          - entity_picture: /local/image/radios/nrj.png
            value: 'off'
            styles:
              card:
                - border-radius: 14px
                - padding-top: 10px
                - padding-bottom: 10px
                - margin-bottom: 20px
          - entity_picture: /local/image/radios/nrj.png
            value: 'on'
            styles:
              card:
                - border-radius: 14px
                - padding-top: 10px
                - padding-bottom: 10px
                - margin-bottom: 20px
      - type: 'custom:button-card'
        entity: input_boolean.fun_radio
        name: NRJ
        size: 50px
        show_name: false
        show_entity_picture: true
        show_state: false
        tap_action:
          action: toggle
        state:
          - entity_picture: /local/image/radios/nrj.png
            value: 'off'
            styles:
              card:
                - border-radius: 14px
                - padding-top: 10px
                - padding-bottom: 10px
                - margin-bottom: 20px
          - entity_picture: /local/image/radios/nrj.png
            value: 'on'
            styles:
              card:
                - border-radius: 14px
                - padding-top: 10px
                - padding-bottom: 10px
                - margin-bottom: 20px
      - type: 'custom:button-card'
        entity: input_boolean.radio_contact
        name: NRJ
        size: 50px
        show_name: false
        show_entity_picture: true
        show_state: false
        tap_action:
          action: toggle
        state:
          - entity_picture: /local/image/radios/nrj.png
            value: 'off'
            styles:
              card:
                - border-radius: 14px
                - padding-top: 10px
                - padding-bottom: 10px
                - margin-bottom: 20px
          - entity_picture: /local/image/radios/nrj.png
            value: 'on'
            styles:
              card:
                - border-radius: 14px
                - padding-top: 10px
                - padding-bottom: 10px
                - margin-bottom: 20px
      - type: 'custom:button-card'
        entity: input_boolean.radio_contact
        name: NRJ
        size: 50px
        show_name: false
        show_entity_picture: true
        show_state: false
        tap_action:
          action: toggle
        state:
          - entity_picture: /local/image/radios/nrj.png
            value: 'off'
            styles:
              card:
                - border-radius: 14px
                - padding-top: 10px
                - padding-bottom: 10px
                - margin-bottom: 20px
          - entity_picture: /local/image/radios/nrj.png
            value: 'on'
            styles:
              card:
                - border-radius: 14px
                - padding-top: 10px
                - padding-bottom: 10px
                - margin-bottom: 20px
      - type: 'custom:button-card'
        entity: input_boolean.radio_contact
        name: NRJ
        size: 50px
        show_name: false
        show_entity_picture: true
        show_state: false
        tap_action:
          action: toggle
        state:
          - entity_picture: /local/image/radios/nrj.png
            value: 'off'
            styles:
              card:
                - border-radius: 14px
                - padding-top: 10px
                - padding-bottom: 10px
                - margin-bottom: 20px
          - entity_picture: /local/image/radios/nrj.png
            value: 'on'
            styles:
              card:
                - border-radius: 14px
                - padding-top: 10px
                - padding-bottom: 10px
                - margin-bottom: 20px
      - type: 'custom:button-card'
        entity: input_boolean.radio_contact
        name: NRJ
        size: 50px
        show_name: false
        show_entity_picture: true
        show_state: false
        tap_action:
          action: toggle
        state:
          - entity_picture: /local/image/radios/nrj.png
            value: 'off'
            styles:
              card:
                - border-radius: 14px
                - padding-top: 10px
                - padding-bottom: 10px
                - margin-bottom: 20px
          - entity_picture: /local/image/radios/nrj.png
            value: 'on'
            styles:
              card:
                - border-radius: 14px
                - padding-top: 10px
                - padding-bottom: 10px
                - margin-bottom: 20px

Forcement, rien n’est fini mais je sais que j’y arriverai

Clemalex · Mars 19, 2021, 11:31

Une piste d’amélioration rapide (moins de duplication de style et image grisé quand off) :

type: 'custom:stack-in-card'
mode: vertical
cards:
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        entity: input_boolean.nrj
        size: 55px
        show_name: false
        show_entity_picture: true
        entity_picture: /local/image/radios/radio_contact.jpg
        show_state: false
        tap_action:
          action: toggle
        style:
          card:
            - border-radius: 64px
            - padding-top: 10px
            - padding-bottom: 10px
            - margin-bottom: 20px
        state:
          - value: 'off'
            style:
              card:
                filter: grayscale(60%);

Mais le vrai + c’est d’utiliser les modèles (templates)

Jerome_ARNOULD · Mars 19, 2021, 11:52

En fait, je ne compte pas changer l’opacité de l’image si off.
En fait, je voudrait 1 bouton avec une image fixe peu importe l’état. Même plus, j’aimerais un bouton qui n’envoie que « on ». Mais je n’ai trouvé que le booléen…
Mais je ne sais pas comment faire.
Sais-tu me donner une piste pour les templates ?
Merci

Clemalex · Mars 21, 2021, 9:12

Un message a été scindé en un nouveau sujet : Button-card - Les modèles (templates)

Jerome_ARNOULD · Mars 21, 2021, 5:45

Bonjour,

Il y a une chose étrange qui se passe. Chaque fois que ma page se recharge, je perds l’arrondi appliqué sur l’image de ma station. Il faut que je clique sur l’image pour que l’arrondi revienne.

Savez-vous ce que j’ai raté?

Merci

Clemalex · Mars 21, 2021, 10:20

Regarde dans le code que je t’ai donné où j’ai mis l’arrondi…

Il n’est pas conditionné par un état contrairement à ton code

Jerome_ARNOULD · Mars 22, 2021, 10:33

Bonjour,

J’ai essayé ta manière (sans l’assombrissement car je n’en ai pas besoin).
Et… ebn ca marche pas, il revient carré.
Je te post le code mais je pense que je ne me suis pas trompé.

type: 'custom:stack-in-card'
mode: vertical
cards:
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        entity: input_boolean.nrj
        name: NRJ
        size: 100%
        show_name: false
        show_entity_picture: true
        entity_picture: /local/image/radios/nrj.png
        show_state: false
        tap_action:
          action: toggle
        styles:
          card:
            - border-radius: 60px
            - padding-top: 0px
            - padding-bottom: 0px
            - margin-bottom: 10px

Ce ne serait donc pas dû à ca…
T’as d’autres idée?

Merci

Clemalex · Mars 23, 2021, 12:36

Ce n’est pas que c’était dû à ça, c’est simplement que le code était répété pour rien.

Ton problème de perte d’arrondi est un fonctionnement normal de la carte.

C’est décrit dans la documentation : GitHub - custom-cards/stack-in-card: 🛠 group multiple cards into one card without the borders

Si tu veux garder l’arrondi, il te faut donc ajouter :

type: 'custom:stack-in-card'
keep:
  border_radius: true