Custom carte cover de mushroom / template

EMqA · Juillet 13, 2025, 4:43

Carte « pile verticale », de base dans HA.

type: vertical-stack
cards:
  - features:
      - type: custom:service-call
        entries:
          - type: button
            entity_id: cover.cellier
            icon: mdi:arrow-up
            tap_action:
              action: perform-action
              perform_action: cover.open_cover
              target:
                entity_id:
                  - cover.cellier
              data: {}
          - type: button
            entity_id: cover.cellier
            icon: mdi:stop
            tap_action:
              action: perform-action
              perform_action: cover.stop_cover
              target:
                entity_id:
                  - cover.cellier
              data: {}
          - type: button
            entity_id: cover.cellier
            icon: mdi:arrow-down
            tap_action:
              action: perform-action
              perform_action: cover.close_cover
              target:
                entity_id:
                  - cover.cellier
              data: {}
          - type: dropdown
            entity_id: cover.cellier
            options:
              - entity_id: cover.cellier
                tap_action:
                  action: perform-action
                  perform_action: cover.set_cover_position
                  target:
                    entity_id:
                      - cover.cellier
                  data:
                    position: 50
                icon: ""
                label: 50%
              - entity_id: cover.cellier
                tap_action:
                  action: perform-action
                  perform_action: cover.set_cover_position
                  target:
                    entity_id:
                      - cover.cellier
                  data:
                    position: 20
                icon: ""
                label: 20%
              - entity_id: cover.cellier
                tap_action:
                  action: perform-action
                  perform_action: cover.set_cover_position
                  target:
                    entity_id:
                      - cover.cellier
                  data:
                    position: 10
                icon: ""
                label: 10%
    type: tile
    features_position: inline
    vertical: false
    entity: cover.cellier
    grid_options:
      columns: 12
      rows: 1
  - features:
      - type: custom:service-call
        entries:
          - type: button
            entity_id: cover.cellier
            icon: mdi:arrow-up
            tap_action:
              action: perform-action
              perform_action: cover.open_cover
              target:
                entity_id:
                  - cover.cellier
              data: {}
          - type: button
            entity_id: cover.cellier
            icon: mdi:stop
            tap_action:
              action: perform-action
              perform_action: cover.stop_cover
              target:
                entity_id:
                  - cover.cellier
              data: {}
          - type: button
            entity_id: cover.cellier
            icon: mdi:arrow-down
            tap_action:
              action: perform-action
              perform_action: cover.close_cover
              target:
                entity_id:
                  - cover.cellier
              data: {}
          - type: dropdown
            entity_id: cover.cellier
            options:
              - entity_id: cover.cellier
                tap_action:
                  action: perform-action
                  perform_action: cover.set_cover_position
                  target:
                    entity_id:
                      - cover.cellier
                  data:
                    position: 50
                icon: ""
                label: 50%
              - entity_id: cover.cellier
                tap_action:
                  action: perform-action
                  perform_action: cover.set_cover_position
                  target:
                    entity_id:
                      - cover.cellier
                  data:
                    position: 20
                icon: ""
                label: 20%
              - entity_id: cover.cellier
                tap_action:
                  action: perform-action
                  perform_action: cover.set_cover_position
                  target:
                    entity_id:
                      - cover.cellier
                  data:
                    position: 10
                icon: ""
                label: 10%
    type: tile
    features_position: inline
    vertical: false
    entity: cover.cellier
    grid_options:
      columns: 12
      rows: 1

ou custom Vertical Stack In Card (via HACS), avec un rendu différent

type: custom:vertical-stack-in-card
cards:
  - features:
      - type: custom:service-call
        entries:
          - type: button
            entity_id: cover.cellier
            icon: mdi:arrow-up
            tap_action:
              action: perform-action
              perform_action: cover.open_cover
              target:
                entity_id:
                  - cover.cellier
              data: {}
          - type: button
            entity_id: cover.cellier
            icon: mdi:stop
            tap_action:
              action: perform-action
              perform_action: cover.stop_cover
              target:
                entity_id:
                  - cover.cellier
              data: {}
          - type: button
            entity_id: cover.cellier
            icon: mdi:arrow-down
            tap_action:
              action: perform-action
              perform_action: cover.close_cover
              target:
                entity_id:
                  - cover.cellier
              data: {}
          - type: dropdown
            entity_id: cover.cellier
            options:
              - entity_id: cover.cellier
                tap_action:
                  action: perform-action
                  perform_action: cover.set_cover_position
                  target:
                    entity_id:
                      - cover.cellier
                  data:
                    position: 50
                icon: ""
                label: 50%
              - entity_id: cover.cellier
                tap_action:
                  action: perform-action
                  perform_action: cover.set_cover_position
                  target:
                    entity_id:
                      - cover.cellier
                  data:
                    position: 20
                icon: ""
                label: 20%
              - entity_id: cover.cellier
                tap_action:
                  action: perform-action
                  perform_action: cover.set_cover_position
                  target:
                    entity_id:
                      - cover.cellier
                  data:
                    position: 10
                icon: ""
                label: 10%
    type: tile
    features_position: inline
    vertical: false
    entity: cover.cellier
    grid_options:
      columns: 12
      rows: 1
  - features:
      - type: custom:service-call
        entries:
          - type: button
            entity_id: cover.cellier
            icon: mdi:arrow-up
            tap_action:
              action: perform-action
              perform_action: cover.open_cover
              target:
                entity_id:
                  - cover.cellier
              data: {}
          - type: button
            entity_id: cover.cellier
            icon: mdi:stop
            tap_action:
              action: perform-action
              perform_action: cover.stop_cover
              target:
                entity_id:
                  - cover.cellier
              data: {}
          - type: button
            entity_id: cover.cellier
            icon: mdi:arrow-down
            tap_action:
              action: perform-action
              perform_action: cover.close_cover
              target:
                entity_id:
                  - cover.cellier
              data: {}
          - type: dropdown
            entity_id: cover.cellier
            options:
              - entity_id: cover.cellier
                tap_action:
                  action: perform-action
                  perform_action: cover.set_cover_position
                  target:
                    entity_id:
                      - cover.cellier
                  data:
                    position: 50
                icon: ""
                label: 50%
              - entity_id: cover.cellier
                tap_action:
                  action: perform-action
                  perform_action: cover.set_cover_position
                  target:
                    entity_id:
                      - cover.cellier
                  data:
                    position: 20
                icon: ""
                label: 20%
              - entity_id: cover.cellier
                tap_action:
                  action: perform-action
                  perform_action: cover.set_cover_position
                  target:
                    entity_id:
                      - cover.cellier
                  data:
                    position: 10
                icon: ""
                label: 10%
    type: tile
    features_position: inline
    vertical: false
    entity: cover.cellier
    grid_options:
      columns: 12
      rows: 1

samourai47 · Septembre 3, 2025, 9:01

Hello

Je n’arrive pas a modifier les couleurs en fonction de la position des volets
Je m’y prends surement mal
Une idée ?
Merci

type: vertical-stack
cards:
  - type: custom:mushroom-template-card
    primary: Volets de la maison
    multiline_secondary: true
    secondary: >-
      {% set all = expand('cover.tous_les_volets'|lower) -%} {% set positions =
      all | map(attribute='attributes.current_position')|list-%} {% set moving =
      all | selectattr('state', 'in', ['opening','closing'])|list|count -%} {%
      set open = positions | reject("!=",100) |list |count -%} {% set closed =
      positions | reject("!=",0) |list |count -%} {% set other =
      positions|list|count - open - closed - moving -%} Fermés = {{ closed }} /
      Partiels = {{ other }} / Ouverts = {{ open }} {% if moving > 0 -%} /
      Actifs = {{ moving }}{% endif %}
    icon: mdi:window-shutter
    icon_color: >-
      {% if closed == all|count %} green {% elif open == all|count %} blue {%
      elif moving > 0 %} orange {% else %} yellow {% endif %}
    layout: horizontal
    fill_container: true
  - type: entities
    entities:
      - entity: cover.tous_les_volets
        secondary_info: last-changed
    grid_options:
      columns: 11
      rows: 1

samourai47 · Septembre 3, 2025, 6:09

Finalement j’ai trouvé une piste qui fonctionne. Ci dessous le code

type: vertical-stack
cards:
  - type: custom:mushroom-template-card
    entity: cover.tous_les_volets
    multiline_secondary: true
    secondary: >-
      {% set all = expand('cover.tous_les_volets') %} {% set positions = all |
      map(attribute='attributes.current_position') | list %} {% set moving = all
      | selectattr('state', 'in', ['opening','closing']) | list | count %} {%
      set open = positions | select('eq', 100) | list | count %} {% set closed =
      positions | select('eq', 0) | list | count %} {% set other = positions |
      list | count - open - closed - moving %} Fermés = {{ closed }} / Partiels
      = {{ other }} / Ouverts = {{ open }} {% if moving > 0 %} / Actifs = {{
      moving }}{% endif %}
    icon: mdi:window-shutter
    icon_color: >-
      {% set all = expand('cover.tous_les_volets') %} {% set positions = all |
      map(attribute='attributes.current_position') | list %} {% set moving = all
      | selectattr('state', 'in', ['opening','closing']) | list | count %} {%
      set open = positions | select('eq', 100) | list | count %} {% set closed =
      positions | select('eq', 0) | list | count %} {% if closed == all | count
      %}
        green
      {% elif open == all | count %}
        blue
      {% elif moving > 0 %}
        orange
      {% else %}
        yellow
      {% endif %}
    layout: horizontal
    fill_container: true
  - type: custom:mushroom-chips-card
    chips:
      - type: action
        icon: mdi:arrow-up-bold-outline
        icon_color: blue
        tap_action:
          action: call-service
          service: cover.open_cover
          target:
            entity_id: cover.tous_les_volets
      - type: action
        icon: mdi:pause-circle
        icon_color: orange
        tap_action:
          action: call-service
          service: cover.stop_cover
          target:
            entity_id: cover.tous_les_volets
      - type: action
        icon: mdi:arrow-down-bold-outline
        icon_color: green
        tap_action:
          action: call-service
          service: cover.close_cover
          target:
            entity_id: cover.tous_les_volets
    alignment: center

Par contre le rendu est pas top. Je n’arrive pas à mettre le rectangle autour de la carte chips

Une idée ?

Merci

hackdiy · Septembre 4, 2025, 7:07

Salut,
utilise custom:mod-card pour ajouter un style à la carte mushroom-chips-card :

voila le code et le rendu , je ne sais pas si c’est vraiment ce que tu cherche a faire.

type: vertical-stack
cards:
  - type: custom:mushroom-template-card
    entity: cover.tous_les_volets
    multiline_secondary: true
    secondary: >-
      {% set all = expand('cover.tous_les_volets') %} {% set positions = all |
      map(attribute='attributes.current_position') | list %} {% set moving = all
      | selectattr('state', 'in', ['opening','closing']) | list | count %} {%
      set open = positions | select('eq', 100) | list | count %} {% set closed =
      positions | select('eq', 0) | list | count %} {% set other = positions |
      list | count - open - closed - moving %} Fermés = {{ closed }} / Partiels
      = {{ other }} / Ouverts = {{ open }} {% if moving > 0 %} / Actifs = {{
      moving }}{% endif %}
    icon: mdi:window-shutter
    icon_color: >-
      {% set all = expand('cover.tous_les_volets') %} {% set positions = all |
      map(attribute='attributes.current_position') | list %} {% set moving = all
      | selectattr('state', 'in', ['opening','closing']) | list | count %} {%
      set open = positions | select('eq', 100) | list | count %} {% set closed =
      positions | select('eq', 0) | list | count %} {% if closed == all | count
      %}
        green
      {% elif open == all | count %}
        blue
      {% elif moving > 0 %}
        orange
      {% else %}
        yellow
      {% endif %}
    layout: horizontal
    fill_container: true
  - type: custom:mod-card
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: action
          icon: mdi:arrow-up-bold-outline
          icon_color: blue
          tap_action:
            action: call-service
            service: cover.open_cover
            target:
              entity_id: cover.tous_les_volets
        - type: action
          icon: mdi:pause-circle
          icon_color: orange
          tap_action:
            action: call-service
            service: cover.stop_cover
            target:
              entity_id: cover.tous_les_volets
        - type: action
          icon: mdi:arrow-down-bold-outline
          icon_color: green
          tap_action:
            action: call-service
            service: cover.close_cover
            target:
              entity_id: cover.tous_les_volets
      alignment: center
    style: |
      ha-card {
        border: 1px solid var(--primary-color);
        border-radius: 10px;
        padding: 10px;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
      }

Edit: Code corrigé

samourai47 · Septembre 4, 2025, 7:29

bonsoir

merci pour ta reponse

Ce que je voudrais c’est exactement ce que tu me propose mais chez moi ca ne fonctionne pas
Ni chrome , ni firefox ni chrome android. Pas ce “rectangle” autour du chips

J’ai bien card-mod installé
bizarre

hackdiy · Septembre 4, 2025, 7:34

Essaie de vider le cache de ton navigateur pour voir , et si tu utilises un thème personnalisé, essaie de changer de thème pour voir si cela résout le problème.

samourai47 · Septembre 4, 2025, 7:44

Pas de theme..

Mode sombre clair ou auto idem

J’ai le rectangle du dessus mais pas celui du bas

hackdiy · Septembre 4, 2025, 7:50

Tu n’a peut être pas copier le bon code

samourai47 · Septembre 4, 2025, 7:53

je pense que si mais ca me donne toujours ca

Après c’est pas non plus catastrophique, mais agacant

hackdiy · Septembre 4, 2025, 8:25

Tu est sur que card-mod est bien installer ?

WarC0zes · Septembre 4, 2025, 8:35

hackdiy:

  - type: custom:mod-card
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: action
          icon: mdi:arrow-up-bold-outline
          icon_color: blue
          tap_action:
            action: call-service
            service: cover.open_cover
            target:
              entity_id: cover.tous_les_volets
        - type: action
          icon: mdi:pause-circle
          icon_color: orange
          tap_action:
            action: call-service
            service: cover.stop_cover
            target:
              entity_id: cover.tous_les_volets
        - type: action
          icon: mdi:arrow-down-bold-outline
          icon_color: green
          tap_action:
            action: call-service
            service: cover.close_cover
            target:
              entity_id: cover.tous_les_volets
      alignment: center
    style:
      ha-card:
        border: 1px solid var(--primary-color)
        border-radius: 10px
        padding: 10px
        box-shadow: 0px 0px 10px rgba(0,0,0,0.1)

Salut,
il manque le card_mod: sur la carte mod-card.

    card_mod: 
      style: |
        ha-card {
          border: 1px solid var(--primary-color);
          border-radius: 10px;
          padding: 10px;
          box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
      }

  - type: custom:mod-card
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: action
          icon: mdi:arrow-up-bold-outline
          icon_color: blue
          tap_action:
            action: call-service
            service: cover.open_cover
            target:
              entity_id: cover.tous_les_volets
        - type: action
          icon: mdi:pause-circle
          icon_color: orange
          tap_action:
            action: call-service
            service: cover.stop_cover
            target:
              entity_id: cover.tous_les_volets
        - type: action
          icon: mdi:arrow-down-bold-outline
          icon_color: green
          tap_action:
            action: call-service
            service: cover.close_cover
            target:
              entity_id: cover.tous_les_volets
      alignment: center
    card_mod: 
      style: |
        ha-card {
          border: 1px solid var(--primary-color);
          border-radius: 10px;
          padding: 10px;
          box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
      }

hackdiy · Septembre 4, 2025, 8:49

Salut, WarC0zes.

mon code fonctionne très bien chez moi la preuve en image et même sans la partie card_mod: .

   
      style: |
        ha-card {
          border: 1px solid var(--primary-color);
          border-radius: 10px;
          padding: 10px;
          box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
      }

WarC0zes · Septembre 4, 2025, 8:53

possible, mais pas ce code

celui la ok ( avec | { ; } qui manquait )

hackdiy:

      style: |
        ha-card {
          border: 1px solid var(--primary-color);
          border-radius: 10px;
          padding: 10px;
          box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
        }

hackdiy · Septembre 4, 2025, 9:02

Je t’assure que le code fonction même avec le diagramme manquant et HA n’a même pas bronché j’ai supprimé tout la partie style et la carte a un meilleur aspect sous certains thèmes.

samourai47 · Septembre 5, 2025, 7:52

Hello

Merci a vous
j’avance car le rectangle s’affiche bien avec le code de warcozes, mais il est de couleur bleu
Je dois avoir un truc bizarre

WarC0zes · Septembre 5, 2025, 8:04

Oui, @hackdiy a un dashboard spécial qui fonctionne avec de mauvais code

C’est normal, il utilise la couleur primaire du thème.
Tu peux changer par ( à adapter ,à ton besoin ):

border: 1px solid rgba(224,224,224,0.4);

samourai47 · Septembre 5, 2025, 8:39

Super c’est presque bon

Manque le fond. J’ai essaye un background mais ca m’a changé la couleur des icones

WarC0zes · Septembre 5, 2025, 9:19

Rajoute background: rgb(28,28,28);.
Si ça ne veut pas, mettre background: rgb(28,28,28) !important;

samourai47 · Septembre 5, 2025, 9:37

Ca a l’air tellement facile pour toi… lol

Merci ca fonctionne comme je le souhaitais

samourai47 · Septembre 5, 2025, 10:21

Re..je vais abuser mais je pense rester dans l’idee sinon je crée un nouveau post…J’ai cette carte simple pour tous les volets

state_color: true
type: entities
entities:
  - entity: cover.terrasse
    secondary_info: last-changed
  - entity: cover.terrasse
    type: custom:slider-entity-row
    step: 5
    min: 0
    max: 100
    grow: true
    full_row: true
  - entity: cover.cuisine
    secondary_info: last-changed
  - entity: cover.cuisine
    type: custom:slider-entity-row
    step: 5
    min: 0
    max: 100
    grow: true
    full_row: true
  - entity: cover.salle_a_manger
    secondary_info: last-changed
  - entity: cover.salle_a_manger
    type: custom:slider-entity-row
    step: 5
    min: 0
    max: 100
    grow: true
    full_row: true
  - entity: cover.salon
    secondary_info: last-changed
  - entity: cover.salon
    type: custom:slider-entity-row
    step: 5
    min: 0
    max: 100
    grow: true
    full_row: true
  - entity: cover.dressing
    secondary_info: last-changed
  - entity: cover.dressing
    type: custom:slider-entity-row
    step: 5
    min: 0
    max: 100
    grow: true
    full_row: true
  - entity: cover.marie_chouffe
    secondary_info: last-changed
  - entity: cover.marie_chouffe
    type: custom:slider-entity-row
    step: 5
    min: 0
    max: 100
    grow: true
    full_row: true
  - entity: cover.salle_de_bain
    secondary_info: last-changed
  - entity: cover.salle_de_bain
    type: custom:slider-entity-row
    step: 5
    min: 0
    max: 100
    grow: true
    full_row: true
  - entity: cover.cellier
    secondary_info: last-changed
  - entity: cover.cellier
    type: custom:slider-entity-row
    step: 5
    min: 0
    max: 100
    grow: true
    full_row: true
  - entity: cover.palier
    secondary_info: last-changed
  - entity: cover.palier
    type: custom:slider-entity-row
    step: 5
    min: 0
    max: 100
    grow: true
    full_row: true
  - entity: cover.salle_de_jeux
    secondary_info: last-changed
  - entity: cover.salle_de_jeux
    type: custom:slider-entity-row
    step: 5
    min: 0
    max: 100
    grow: true
    full_row: true
grid_options:
  columns: 11
  rows: 2

Par contre le visuel est pas top car il n’y a ce rectangle qu’autour de la premiere entité

Y a moyen de prendre toute la carte dans le rectangle? Ou 1 rectangle par entité?

Merci d’avance