Besoin d'aide sur une carte

Bonjour à tous,

je me suis inspirer d’une carte existante, le code trouvé sur le forum (MERCI)

Alors plusieurs points ou je sèche :

  • je n’arrive pas à modifier la couleur de fond, ni la bordure !!
  • je n’arrive pas à placer une icone dans dans le bouton pour allumer !!
  • la taille de carte principale !!

La question suis-je parti sur la bonne piste ??

Pouvez-vous me conseiller.

Merci

voici la carte

et le code

type: custom:layout-card
layout_type: masonry
styles: null
cards:
  - type: custom:button-card
    aspect_ratio: 2/1
    custom_fields:
      fond:
        card:
          type: custom:button-card
          name: COULOIR
          styles:
            name:
              - font-size: 24px
              - font-weight: bold
              - color: blue
              - justify-self: start
              - padding-left: 5%
            card:
              - background-color: rgba(250,250,250,1)
          style: |
            ha-card {
              box-shadow: rgba(250,250,250,1);
              border: rgba(0, 0, 0, 0.0);
            }
      Spots:
        card:
          type: custom:button-card
          name: SPOTS
          styles:
            name:
              - font-size: 16px
              - font-weight: bold
              - color: rgba(0,0,0,1)
              - justify-self: null
            card:
              - background-color: rgba(255,250,250,0.0)
          style: |
            ha-card {
              box-shadow: none;
              border: none;
            }
      entree_entree:
        card:
          type: custom:button-card
          name: Entrée
          styles:
            name:
              - font-size: 16px
              - font-weight: bold
              - color: rgba(0,0,0,1)
            card:
              - background-color: rgba((120,120,120,0.50)
          style: |
            ha-card {
              box-shadow: none;
              border: none;
            }
      entree_garage:
        card:
          type: custom:button-card
          name: Garage
          styles:
            name:
              - font-size: 16px
              - font-weight: bold
              - color: rgba(0,0,0,1)
            card:
              - background-color: rgba(255,255,255,0.0)
          style: |
            ha-card {
              box-shadow: none;
              border: none;
            }
      spot_entree:
        card:
          type: custom:button-card
          entity: switch.couloir_entree
          icon: phu:ceiling-fugato-two
          show_name: false
          state:
            - value: 'off'
              styles:
                card:
                  - box-shadow: none
                  - background-color: rgba(242,242,242,0.5)
                icon:
                  - color: rgb(255,255,128,1)
            - value: 'on'
              styles:
                icon:
                  - color: rgb(255,255,128)
                card:
                  - box-shadow: 0px 0px 6px 3px rgba(230,27,37,1)
                  - background-color: rgba(105,105,105,0.5)
      spot_garage:
        card:
          type: custom:button-card
          entity: switch.couloir_garage
          icon: phu:pendant-round
          show_name: false
          state:
            - value: 'off'
              styles:
                icon:
                  - color: Dimgray
                card:
                  - box-shadow: none
                  - background-color: rgba(242,242,242,0.5)
            - value: 'on'
              styles:
                icon:
                  - color: rgb(255,255,128)
                card:
                  - box-shadow: 0px 0px 6px 3px rgba(230,27,37,1)
                  - background-color: rgba(105,105,105,0.5)
    styles:
      custom_fields:
        fond:
          - background-image: null
          - position: absolute
          - left: 0
          - top: 0
          - width: 50%
          - height: 50%
          - background-size: null
          - background-position: center
          - opacity: 0.7
        Spots:
          - width: 30%
          - position: absolute
          - left: 5%
          - top: 25%
        entree_entree:
          - width: 25%
          - position: absolute
          - left: 40%
          - top: 15%
        entree_garage:
          - width: 25%
          - position: absolute
          - left: 70%
          - top: 15%
        spot_entree:
          - width: 25%
          - position: absolute
          - left: 40%
          - top: 25%
        spot_garage:
          - width: 25%
          - position: absolute
          - left: 70%
          - top: 25%

Bonsoir, on va y aller progressivement :grinning:

Pour ce que tu essaie de faire, il n’y a pas besoin de layout-card, une simple button-card suffit.

Premier point : la couleur de fond :

type: custom:button-card
aspect_ratio: 2/1
name: COULOIR
styles:
  card:
    - background-color: rgba(211,211,211,1.0)

Le nom de ta carte : COULOIR

Pour enlever la bordure :

Pour changer la couleur de la bordure :

On va ajouter un premier custom_field pour la ligne des spots :

type: custom:button-card
name: COULOIR
aspect_ratio: 2/1
custom_fields:
  Spots:
    card:
      type: custom:button-card
      name: SPOTS
      styles:
        name:
          - font-size: 16px
          - font-weight: bold
          - color: rgba(0,0,0,1)
          - justify-self: null
        card:
          - background-color: rgba(255,250,250,0.0)
      style: |
        ha-card {
          box-shadow: none;
          border: none;
        }
styles:
  card:
    - background-color: rgba(255,255,255,1.0)
    - border: none
  name:
    - color: blue
    - font-size: 24px
    - font-weight: bold
    - align-self: start
    - justify-self: start
    - padding-left: 5%
  custom_fields:
    Spots:
      - width: 30%
      - position: absolute
      - left: 5%
      - top: 25%

Suite demain :wink:

2 « J'aime »

Bonjour,

La suite : ajout de deux autres custom_fields et déplacement du custom_field spots :

type: custom:button-card
name: COULOIR
aspect_ratio: 2/1
custom_fields:
  spots:
    card:
      type: custom:button-card
      name: SPOTS
      styles:
        name:
          - font-size: 16px
          - font-weight: bold
          - color: rgba(0,0,0,1)
          - justify-self: null
        card:
          - background-color: rgba(255,250,250,0.0)
      style: |
        ha-card {
          box-shadow: none;
          border: none;
        }

  entree:
    card:
      type: custom:button-card
      name: Entrée
      styles:
        name:
          - font-size: 16px
          - font-weight: bold
          - color: rgba(0,0,0,1)
          - justify-self: null
        card:
          - background-color: rgba(255,250,250,0.0)
      style: |
        ha-card {
          box-shadow: none;
          border: none;
        }

  garage:
    card:
      type: custom:button-card
      name: Garage
      styles:
        name:
          - font-size: 16px
          - font-weight: bold
          - color: rgba(0,0,0,1)
          - justify-self: null
        card:
          - background-color: rgba(255,250,250,0.0)
      style: |
        ha-card {
          box-shadow: none;
          border: none;
        }
        
styles:
  card:
    - background-color: rgba(255,255,255,1.0)
    - border: none
  name:
    - color: blue
    - font-size: 24px
    - font-weight: bold
    - align-self: start
    - justify-self: start
    - padding-left: 5%
  custom_fields:
  
    spots:
      - width: 30%
      - position: absolute
      - left: 7%
      - top: 28%

    entree:
      - width: 30%
      - position: absolute
      - left: 35%
      - top: 15%

    garage:
      - width: 30%
      - position: absolute
      - left: 65%
      - top: 15%

Arrivé à ce niveau, on va se rendre compte que la carte réagit comme un bouton et que si on clique dessus, elle va changer de couleur avant de revenir à sa couleur initiale.
Pour pallier à ça on va la « recouvrir » avec un custom:field servant à inscrire « COULOIR ».

Puis on va ajouter les boutons pour commander les lumières de l’étage et du garage :

type: custom:button-card
aspect_ratio: 2/1
custom_fields:
  couloir:
    card:
      type: custom:button-card
      name: COULOIR
      styles:
        card:
          - background-color: rgba(255,255,255,1.0)
          - border: none
        name:
          - color: blue
          - font-size: 24px
          - font-weight: bold
          - align-self: start
          - justify-self: start
          - padding-left: 5%
    
  spots:
    card:
      type: custom:button-card
      name: SPOTS
      styles:
        name:
          - font-size: 16px
          - font-weight: bold
          - color: rgba(0,0,0,1)
          - justify-self: null
        card:
          - background-color: rgba(255,255,255,0.0)
      style: |
        ha-card {
          box-shadow: none;
          border: none;
        }
  entree:
    card:
      type: custom:button-card
      name: Entrée
      styles:
        name:
          - font-size: 16px
          - font-weight: bold
          - color: rgba(0,0,0,1)
          - justify-self: null
        card:
          - background-color: rgba(255,250,250,0.0)
      style: |
        ha-card {
          box-shadow: none;
          border: none;
        }
  garage:
    card:
      type: custom:button-card
      name: Garage
      styles:
        name:
          - font-size: 16px
          - font-weight: bold
          - color: rgba(0,0,0,1)
          - justify-self: null
        card:
          - background-color: rgba(255,250,250,0.0)
      style: |
        ha-card {
          box-shadow: none;
          border: none;
        }
  commande_entree:
    card:
      type: custom:button-card
      styles:
        card:
          - background-color: rgba(242,242,242,1.0)
          - aspect-ratio: 3/1
      style: |
        ha-card {
          box-shadow: none;
        }
  commande_garage:
    card:
      type: custom:button-card
      styles:
        card:
          - background-color: rgba(242,242,242,1.0)
          - aspect-ratio: 3/1
      style: |
        ha-card {
          box-shadow: none;
        }
styles:

  custom_fields:
    couloir:
      - width: 100%
      - position: absolute
      - left: 0%
      - top: 0%
    spots:
      - width: 30%
      - position: absolute
      - left: 7%
      - top: 28%
    entree:
      - width: 30%
      - position: absolute
      - left: 35%
      - top: 15%
    garage:
      - width: 30%
      - position: absolute
      - left: 65%
      - top: 15%
    commande_entree:
      - width: 20%
      - position: absolute
      - left: 40%
      - top: 30%
    commande_garage:
      - width: 20%
      - position: absolute
      - left: 70%
      - top: 30%


hello @anon41081891
Grâce à ton code qui est plus simple le tout est paramétrable, voici rapidement le résultat.
Merci beaucoup pour ton aide très précieuse :grinning:

voici le résultat avec un bouton, MAIS je n’arrive à changer icon ET si possible la changer en fonction de On / OFF
image

voici le code

type: custom:button-card
name: COULOIR
aspect_ratio: 2/1
custom_fields:
  spots:
    card:
      type: custom:button-card
      name: SPOTS
      styles:
        name:
          - font-size: 16px
          - font-weight: bold
          - color: rgba(0,0,0,1)
          - justify-self: null
        card:
          - background-color: rgba(100,200,250,1.0)
      style: |
        ha-card {
          box-shadow: none;
          border: none;
        }
  entree:
    card:
      type: custom:button-card
      name: Entrée
      styles:
        name:
          - font-size: 16px
          - font-weight: bold
          - color: rgba(0,0,0,1)
          - justify-self: null
        card:
          - background-color: rgba(255,250,250,1.0)
      style: |
        ha-card {
          box-shadow: none;
          border: none;
        }
  garage:
    card:
      type: custom:button-card
      name: Garage
      styles:
        name:
          - font-size: 16px
          - font-weight: bold
          - color: rgba(0,0,0,1)
          - justify-self: null
        card:
          - background-color: rgba(255,250,100,1.0)
      style: |
        ha-card {
          box-shadow: none;
          border: none;
        }
  spot_entree:
    card:
      type: custom:button-card
      entity: switch.couloir_entree
      icon: phu:ceiling-fugato-two
      show_name: false
      state:
        - value: 'off'
          styles:
            card:
              - box-shadow: none
              - background-color: rgba(242,242,242,1)
            icon:
              - color: rgb(255,255,128,1)
        - value: 'on'
          styles:
            icon:
              - color: rgb(255,255,128)
            card:
              - box-shadow: 0px 0px 6px 3px rgba(230,27,37,1)
              - background-color: rgba(105,105,105,0.5)
styles:
  card:
    - background-color: rgba(200,255,255,1.0)
    - border-color: rgba(0,0,0,1.0)
  name:
    - color: blue
    - font-size: 24px
    - font-weight: bold
    - align-self: start
    - justify-self: start
    - padding-left: 5%
  custom_fields:
    spots:
      - width: 30%
      - position: absolute
      - left: 4%
      - top: 35%
    entree:
      - width: 30%
      - position: absolute
      - left: 35%
      - top: 15%
    garage:
      - width: 30%
      - position: absolute
      - left: 68%
      - top: 15%
    spot_entree:
      - width: 30%
      - position: absolute
      - left: 35%
      - top: 35%

Attends, ça vient :grin: :grin: :grin:

On va maintenant ajouter les entités devant être commandées par les boutons, des icônes et le comportement lors du clic sur ces boutons…

D’ores et déjà en sélectionnant définissant les entités, on va constater qu’en cliquant dessus les icônes vont devenir jaunes.

type: custom:button-card
aspect_ratio: 2/1
custom_fields:
  couloir:
    card:
      type: custom:button-card
      name: COULOIR
      styles:
        card:
          - background-color: rgba(255,255,255,1.0)
          - border: none
        name:
          - color: blue
          - font-size: 24px
          - font-weight: bold
          - align-self: start
          - justify-self: start
          - padding-left: 5%
    
  spots:
    card:
      type: custom:button-card
      name: SPOTS
      styles:
        name:
          - font-size: 16px
          - font-weight: bold
          - color: rgba(0,0,0,1)
          - justify-self: null
        card:
          - background-color: rgba(255,255,255,0.0)
      style: |
        ha-card {
          box-shadow: none;
          border: none;
        }
  entree:
    card:
      type: custom:button-card
      name: Entrée
      styles:
        name:
          - font-size: 16px
          - font-weight: bold
          - color: rgba(0,0,0,1)
          - justify-self: null
        card:
          - background-color: rgba(255,250,250,0.0)
      style: |
        ha-card {
          box-shadow: none;
          border: none;
        }
  garage:
    card:
      type: custom:button-card
      name: Garage
      styles:
        name:
          - font-size: 16px
          - font-weight: bold
          - color: rgba(0,0,0,1)
          - justify-self: null
        card:
          - background-color: rgba(255,250,250,0.0)
      style: |
        ha-card {
          box-shadow: none;
          border: none;
        }
  commande_entree:
    card:
      type: custom:button-card
      entity: light.entree_lampe_interieure
      show_name: false
      icon: mdi:lightbulb
      styles:
        card:
          - background-color: rgba(242,242,242,1.0)
          - aspect-ratio: 3/1.2
      style: |
        ha-card {
          box-shadow: none;
        }
  commande_garage:
    card:
      type: custom:button-card
      entity: light.entree_lampe_exterieure
      show_name: false
      icon: mdi:lightbulb
      styles:
        card:
          - background-color: rgba(242,242,242,1.0)
          - aspect-ratio: 3/1.2
      style: |
        ha-card {
          box-shadow: none;
        }
styles:

  custom_fields:
    couloir:
      - width: 100%
      - position: absolute
      - left: 0%
      - top: 0%
    spots:
      - width: 30%
      - position: absolute
      - left: 7%
      - top: 28%
    entree:
      - width: 30%
      - position: absolute
      - left: 35%
      - top: 15%
    garage:
      - width: 30%
      - position: absolute
      - left: 65%
      - top: 15%
    commande_entree:
      - width: 20%
      - position: absolute
      - left: 40%
      - top: 30%
    commande_garage:
      - width: 20%
      - position: absolute
      - left: 70%
      - top: 30%

image

Afin d’améliorer la visibilité quand une lampe est allumée, on va modifier le comportement du custom_field en fonction de l’état (state) de la lampe (l’entité) : allumée (on) ou éteinte (off) :

type: custom:button-card
aspect_ratio: 2/1
custom_fields:
  couloir:
    card:
      type: custom:button-card
      name: COULOIR
      styles:
        card:
          - background-color: rgba(255,255,255,1.0)
          - border: none
        name:
          - color: blue
          - font-size: 24px
          - font-weight: bold
          - align-self: start
          - justify-self: start
          - padding-left: 5%
  spots:
    card:
      type: custom:button-card
      name: SPOTS
      styles:
        name:
          - font-size: 16px
          - font-weight: bold
          - color: rgba(0,0,0,1)
          - justify-self: null
        card:
          - background-color: rgba(255,255,255,0.0)
      style: |
        ha-card {
          box-shadow: none;
          border: none;
        }
  entree:
    card:
      type: custom:button-card
      name: Entrée
      styles:
        name:
          - font-size: 16px
          - font-weight: bold
          - color: rgba(0,0,0,1)
          - justify-self: null
        card:
          - background-color: rgba(255,250,250,0.0)
      style: |
        ha-card {
          box-shadow: none;
          border: none;
        }
  garage:
    card:
      type: custom:button-card
      name: Garage
      styles:
        name:
          - font-size: 16px
          - font-weight: bold
          - color: rgba(0,0,0,1)
          - justify-self: null
        card:
          - background-color: rgba(255,250,250,0.0)
      style: |
        ha-card {
          box-shadow: none;
          border: none;
        }
  commande_entree:
    card:
      type: custom:button-card
      entity: light.entree_lampe_interieure
      show_name: false
      icon: mdi:lightbulb
      styles:
        card:
          - background-color: rgba(242,242,242,1.0)
          - aspect-ratio: 3/1.2
      state:
        - value: 'off'
          styles:
            icon:
              - color: dimgray
            card:
              - box-shadow: none
              - background-color: rgba(242,242,242,0.7)
        - value: 'on'
          styles:
            icon:
              - color: rgb(255,255,128)
            card:
              - box-shadow: 0px 0px 6px 3px rgba(255,255,128,0.8)
              - background-color: rgba(0,0,0,0.5)
  commande_garage:
    card:
      type: custom:button-card
      entity: light.entree_lampe_exterieure
      show_name: false
      icon: mdi:lightbulb
      styles:
        card:
          - background-color: rgba(242,242,242,1.0)
          - aspect-ratio: 3/1.2
styles:
  custom_fields:
    couloir:
      - width: 100%
      - position: absolute
      - left: 0%
      - top: 0%
    spots:
      - width: 30%
      - position: absolute
      - left: 7%
      - top: 28%
    entree:
      - width: 30%
      - position: absolute
      - left: 35%
      - top: 15%
    garage:
      - width: 30%
      - position: absolute
      - left: 65%
      - top: 15%
    commande_entree:
      - width: 20%
      - position: absolute
      - left: 40%
      - top: 30%
    commande_garage:
      - width: 20%
      - position: absolute
      - left: 70%
      - top: 30%

image

Après, si à force d’ajouter des custom_fields, la carte devient trop petite, il suffit de changer l’aspect_ratio pour augmenter ou réduire sa longueur :

Il faudra alors régler à nouveau la position des différents custom_fields.

@David Si tu n’as pas d’autres questions, marque le message comme résolu

1 « J'aime »

Merci infiniment, cela veut dire que l’on peut construire les cartes à souhait …
Merci @anon41081891

c’est genial, je vais tester le truc dés que possible et je te tiens au jus pour le resultat…

Bonjour à vous,

Merci pour cette construction progressive qui permet de mieux comprendre.les possibilités de cette carte.
Néanmoins, j’ai 2 questions :
1 - Je ne comprend pas les lignes « |
ha-card {
box-shadow: none;
border: none;
} »
J’ai cherché sur internet et je n’ai rien trouvé sur « ha-card »

2 - Mes lampes restent noir malgré une copie du code.

Hello,

Partage le code Yaml de ta carte, ce sera plus facile pour te dépanner :wink:

Un exemple de carte fonctionnelle :

type: custom:button-card
entity: light.bulb_entree
name: []
icon: mdi:lamp
size: 50%
state:
  - value: 'on'
    styles:
      icon:
        - color: var(--button-card-light-color)
styles:
  card:
    - box-shadow: 0px 0px 10px 1px var(--button-card-light-color)
    - width: 50px
    - height: 50px
tap_action:
  action: toggle
hold_action:
  action: more-info

ce qui donne en fonction du choix de couleur et son état
1
2
3

Oups, effectivement avec le code.

type: custom:button-card
aspect_ratio: 2/1
custom_fields:
  couloir:
    card:
      type: custom:button-card
      name: COULOIR
      styles:
        card:
          - background-color: rgba(255,255,255,1.0)
          - border: none
        name:
          - color: blue
          - font-size: 24px
          - font-weight: bold
          - align-self: start
          - justify-self: start
          - padding-left: 5%
  spots:
    card:
      type: custom:button-card
      name: SPOTS
      styles:
        name:
          - font-size: 16px
          - font-weight: bold
          - color: rgba(0,0,0,1)
          - justify-self: null
        card:
          - background-color: rgba(255,255,255,0.0)
      style: |
        ha-card {
          box-shadow: none;
          border: none;
        }
  entree:
    card:
      type: custom:button-card
      name: Entrée
      styles:
        name:
          - font-size: 16px
          - font-weight: bold
          - color: rgba(0,0,0,1)
          - justify-self: null
        card:
          - background-color: rgba(255,250,250,0.0)
      style: |
        ha-card {
          box-shadow: none;
          border: none;
        }
  garage:
    card:
      type: custom:button-card
      name: Garage
      styles:
        name:
          - font-size: 16px
          - font-weight: bold
          - color: rgba(0,0,0,1)
          - justify-self: null
        card:
          - background-color: rgba(255,250,250,0.0)
      style: |
        ha-card {
          box-shadow: none;
          border: none;
        }
  commande_entree:
    card:
      type: custom:button-card
      entity: input_button.allumer_lampe_table
      tap_action:
        action: toggle
      show_name: false
      icon: mdi:lightbulb
      styles:
        card:
          - background-color: rgba(242,242,242,1.0)
          - aspect-ratio: 3/1.2
      state:
        - value: 'off'
          styles:
            icon:
              - color: dimgray
            card:
              - box-shadow: none
              - background-color: rgba(242,242,242,0.7)
        - value: 'on'
          styles:
            icon:
              - color: rgb(255,255,128)
            card:
              - box-shadow: 0px 0px 6px 3px rgba(255,255,128,0.8)
              - background-color: rgba(0,0,0,0.5)
  commande_garage:
    card:
      type: custom:button-card
      entity: input_button.eteindre_lampe_table
      tap_action:
        action: toggle
      show_name: false
      icon: mdi:lightbulb
      styles:
        card:
          - background-color: rgba(242,242,242,1.0)
          - aspect-ratio: 3/1.2
styles:
  custom_fields:
    couloir:
      - width: 100%
      - position: absolute
      - left: 0%
      - top: 0%
    spots:
      - width: 30%
      - position: absolute
      - left: 7%
      - top: 28%
    entree:
      - width: 30%
      - position: absolute
      - left: 35%
      - top: 15%
    garage:
      - width: 30%
      - position: absolute
      - left: 65%
      - top: 15%
    commande_entree:
      - width: 20%
      - position: absolute
      - left: 40%
      - top: 30%
    commande_garage:
      - width: 20%
      - position: absolute
      - left: 70%
      - top: 30%

Je t’ai mis un exemple juste au dessus de ta dernière réponse.
le box-shadow c’est l’effet ombré ( de couleur dans mon cas) autour du bouton

@+

Bonjour,

Les lignes ha-card… sont des lignes qui permettent d’ajouter du code CSS et notamment dans ce cas là, elles servent à ce qu’il n’y ait pas de bordure et d’ombrage autour des custom_fields indiquant le nom (SPOTS par exemble).

Je regarde ton code pour essayer de voir ce qui ne fonctionne pas et je reviens vers toi.

Il manque les entities non ?

Bonjour a tous,
Vous utiliser card_mod, mais vous oublier d’utiliser la syntaxe card_mod: pour le style.

C’est pas:

      style: |
        ha-card {
          box-shadow: none;
          border: none;
        }

Mais plutot:

      card_mod:
        style: |
          ha-card {
            box-shadow: none;
            border: none;
          }

Si vous mettez pas le card_mod, vous n’utiliser pas toute les fonctionnalités de card_mod.

@Krull56,
J’ai copié ton code, changé par mon entité…ça marche sans les couleurs…

@anon41081891 ,
Merci. J’ai enfin compris l’utilité des lignes avec {…}

Si tu fais un appui prolongé sur le bouton créé tu devrais avoir le choix des couleurs

J’ai encore oublié le code…

type: custom:button-card
entity: input_button.allumer_lampe_salon
name: []
icon: mdi:lamp
size: 50%
state:
  - value: 'on'
    styles:
      icon:
        - color: var(--button-card-light-color)
styles:
  card:
    - box-shadow: 0px 0px 10px 1px var(--button-card-light-color)
    - width: 50px
    - height: 50px
tap_action:
  action: toggle
hold_action:
  action: more-info

Si je fais un appui long, celà ouvre la fenêtre de l’entité…

Oui, et si c’est une ampoule tu as alors

Sauf que pour toi c’est un input.boulean buton :wink:

Pour ces fonctions de base (border, box-shadow) il n’y a pas besoin de signifier card-mod, ça a été implémenté par le développeur de button-card directement.