Afficher des attribut(s) personnalisé(s) dans un carte mushroom cover

Bonjour,

Je suis débutant avec HA et j’aurais besoin d’un peu d’aide.

je souhaitre créer une carte pour actionner un volet roulant avec mushroom cover.
Je pilote le volet via un relay Shelly, qui ne donne aucun retour sur la position du volet donc j’ai aussi installé un capteur d’ouverture (Shelly aussi) qui donne le statut réel du volet (ouvert ou fermé)

Voilà ce que j’arrive à obtenir, c’est volontairement petit et minimaliste (comme le style Tile)

Ma carte cover mushroom affiche les boutons haut et bas , le nom et le statut.
Mais le statut est déduit de l’action sur les boutons , sans feed back, donc potentiellement faux.
Et bien sûr je voudrais que ce statut soit donné par le capteur de position, qui est le reflet de la réalité.

J’ai donc créé un sensor dans mon répertoire /homeassistant/Templates/templates.yaml, comme ceci

- sensor:
    - name: etat_affichage_volets_roulants
      unit_of_measurement: "w"
      icon:  mdi:lightbulb-off
      state: "0"
      attributes:
        attr1: >
            {%  if is_state('binary_sensor.contactvoletroulantcuisine_window','on') %}Ouvert{%else%}Fermé{%endif%}

Je pense qu’un binay sensor aurait été plus adapté , mais je verrai plus tard , ce sensor fonctionne.

Voilà le code de la carte , probablement pas optimisé du tout car je suis un bleu … :frowning:

type: custom:mushroom-cover-card
entity: cover.voletsroulants
name: Volets
layout: horizontal
fill_container: false
primary_info: name
secondary_info: state
show_position_control: false
show_buttons_control: true
icon: mdi:window-shutter
grid_options:
  columns: 6
  rows: 1
tap_action:
  action: none
hold_action:
  action: none
double_tap_action:
  action: none
card_mod:
  style:
    mushroom-state-info$: |
      .container {
        align-items: center;
        #flex-direction: row !important;
        #align-items: baseline;
        #gap: 2px;        
      }
    mushroom-shape-icon$: |
      .shape {
        --shape-color: #orange !important;
      }
    mushroom-cover-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          height: 0px !important;
          width: 10px !important;
          margin-top: 15px !important;
          margin-left: 15px !important; 
          --control-icon-size: 40px;
        }
      mushroom-button:nth-child(2)$: |
        .button {
          #height: 0px !important;
          #width: 0px !important;
          margin-top: 0px !important;
          margin-left: 100px !important;            
        }
      mushroom-button:nth-child(3)$: |
        .button {
          #height: 40px !important;
          #width: 10px !important;
          margin-top: 0px !important;
          margin-left: 0px !important;
          --control-icon-size: 40px;          
        }
    .: >
      ha-card {

           background: #1C1C1C;
          #--chip-background: black;
          --primary-text-color: green;

          --card-primary-color: cyan;
          #--card-secondary-color: blue;
      {%  if is_state('cover.voletsroulants','open') %}

      --card-secondary-color : var(--red-color);

      {% else %}

      --card-secondary-color : var(--green-color);

      {% endif %}      

          
      }

      ha-state-icon {
    

       {%  if is_state('binary_sensor.contactvoletroulantcuisine_window','on') %}

      color: var(--red-color) ;
      --card-mod-icon: mdi:window-shutter-open

      {% else %}
      color: var(--green-color);
      --card-mod-icon: mdi:window-shutter

      {% endif %}           

      }

Mais malgré mes recherches je sais pas comment faire pour qu’au lieu de l’état (information secondaire : state) , en rouge ici , il m’affiche l’attribut de mon sensor.

Je me perds avec les histoire de custom template , templating etc… et j’avoue un peu tout confondre, ça n’est pas simple.

Any help would be greatly appreciated :slight_smile:
Merci d’avance.

Cyril

Ma configuration


System Information

version core-2025.5.3
installation_type Home Assistant OS
dev false
hassio true
docker true
user root
virtualenv false
python_version 3.13.3
os_name Linux
os_version 6.6.74-haos-raspi
arch aarch64
timezone Europe/Paris
config_dir /config
Home Assistant Community Store
GitHub API ok
GitHub Content ok
GitHub Web ok
HACS Data ok
GitHub API Calls Remaining 5000
Installed Version 2.0.5
Stage running
Available Repositories 2016
Downloaded Repositories 6
Home Assistant Cloud
logged_in false
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Home Assistant Supervisor
host_os Home Assistant OS 15.2
update_channel stable
supervisor_version supervisor-2025.05.3
agent_version 1.7.2
docker_version 28.0.4
disk_total 916.2 GB
disk_used 17.1 GB
healthy true
supported true
host_connectivity true
supervisor_connectivity true
ntp_synchronized true
virtualization
board rpi5-64
supervisor_api ok
version_api ok
installed_addons Terminal & SSH (9.17.0), Mosquitto broker (6.5.1), Samba share (12.5.1), File editor (5.8.0), ZeroTier One (0.20.0), ESPHome Device Builder (2025.5.2), MQTT Explorer (browser-1.0.3), Linky (1.5.0), Zigbee2MQTT (2.4.0-1)
Dashboards
dashboards 8
resources 9
views 7
mode storage
Network Configuration
adapters lo (disabled), end0 (enabled, default, auto), hassio (disabled), docker0 (disabled), ztmosjn2co (disabled), veth89dc5eb (disabled), veth067471d (disabled), veth44878c1 (disabled), vethc2bd4de (disabled), vethf260d85 (disabled), veth17478e4 (disabled), veth15b4780 (disabled), vethd4440ad (disabled)
ipv4_addresses lo (127.0.0.1/8), end0 (10.0.0.125/24), hassio (172.30.32.1/23), docker0 (172.30.232.1/23), ztmosjn2co (192.168.196.237/24), veth89dc5eb (), veth067471d (), veth44878c1 (), vethc2bd4de (), vethf260d85 (), veth17478e4 (), veth15b4780 (), vethd4440ad ()
ipv6_addresses lo (::1/128), end0 (2a01:cb14:1268:2000:5b37:8ecc:810d:5c84/64, fe80::7c1d:5a94:a11e:8aa5/64), hassio (fe80::5465:54ff:fe64:4222/64), docker0 (fe80::b8f3:64ff:fe40:bdfc/64), ztmosjn2co (fe80::482:8fff:fe10:b0ae/64), veth89dc5eb (fe80::48bb:78ff:fe27:eb05/64), veth067471d (fe80::1448:9bff:fee3:d0d0/64), veth44878c1 (fe80::f8ed:9eff:fefd:50db/64), vethc2bd4de (fe80::fc28:dcff:fe88:32c3/64), vethf260d85 (fe80::7824:a4ff:fe94:f0d5/64), veth17478e4 (fe80::4bd:2bff:fe3f:ffc0/64), veth15b4780 (fe80::a40c:78ff:fe49:9e4b/64), vethd4440ad (fe80::f4ed:56ff:fe4b:9839/64)
announce_addresses 10.0.0.125, 2a01:cb14:1268:2000:5b37:8ecc:810d:5c84, fe80::7c1d:5a94:a11e:8aa5
Recorder
oldest_recorder_run 21 mai 2025 à 17:21
current_recorder_run 5 juin 2025 à 09:53
estimated_db_size 1157.54 MiB
database_engine sqlite
database_version 3.48.0
Sonoff
version 3.8.2 (c4b6fda)
cloud_online 0 / 1
local_online 0 / 0

Bonjour,

Si tu veux le faire sans template, card_mod et autres trucs compliqués, je peux te montrer comment faire ta carte en custom:button-card simplement.

Bonjour et merci pour ta réponse , je veux bien , sans abuser de ton temps et de ta patience.
Mon niveau est assez limité cependant … :frowning:

La carte custom:button-card est installée chez toi ?

Si ce n’est pas le cas, installe-la.

La carte: custom:button-card se travaille en code uniquement mais une fois les principes de base acquis, cela se fait très facilement.

On va partir sur une base simple. La carte support avec une icône (dont l’aspect changera en fonction de l’état du volet), un nom statique : « Volets » et un état (qui changera lui aussi en fonction de l’état du volet). Nous ajouterons 2 « custom_fields », un pour le bouton permettant de monter le volet et un pour le bouton permettant de le descendre.

Tu n’as qu’un capteur pour ton volet ? Si oui, donc tu as uniquement un retour s’il est complétement fermé ou complétement ouvert ?

pourquoi crée un sensor virtual alors que ta deja un capteur On/Off , tu peut crée un cover template.

1 « J'aime »

Ok c’est installé , je viens de créer une carte (vierge)

Je veux pouvoir personnaliser l’attribut (Ouvert ou fermé , au lieu de on off)

OK, on va commencer par mettre en place les éléments (l’icone, le nom, et un label pour l’état) :

type: custom:button-card
entity: cover.chambre
name: Volet
icon: mdi:window-shutter-open
label: "ouvert"
show_label: true

Colle ceci dans ta carte vierge et change l’entité par la tienne

Une fois fait, on va demander à la carte d’afficher l’icone à gauche puis le nom et le label à droite, l’un au dessus de l’autre. Tu ajouteras donc en dessous de la dernière ligne : layout: icon_name_state2nd

Salut tu peux définir le type de sensor binaire sur volet ou porte pour avoir ‹ ouvert ›/ferme.
Cela se fait dans la configuration des entités.
Ici dans mon exemple ‹ afficher en tant que › porte pour un binary sensor de ma boîte aux lettres

type: custom:button-card
entity: cover.voletsroulants
name: Volet
icon: mdi:window-shutter-open
label: ouvert
show_label: true

A la fin , arrivera-t-on a faire une petite carte (façon tile) , car c’est vraiment ce que je recherche

oui j’ai bien compris le capteur lui utilise on/off
voila un exemple de template Cover

cover:
  - platform: template
    covers:
      volets_roulants_template:
        friendly_name: "Volets roulants"
        value_template: >-
          {% if is_state('binary_sensor.contactvoletroulantcuisine_window', 'on') %}
            open
          {% else %}
            closed
          {% endif %}
        open_cover:
          service: cover.open_cover
          target:
            entity_id: cover.voletsroulants
        close_cover:
          service: cover.close_cover
          target:
            entity_id: cover.voletsroulants
        stop_cover:
          service: cover.stop_cover
          target:
            entity_id: cover.voletsroulants
        icon_template: >-
          {% if is_state('binary_sensor.contactvoletroulantcuisine_window', 'on') %}
            mdi:window-shutter-open
          {% else %}
            mdi:window-shutter
          {% endif %}

avec un card_mod ça te donne ça


1 « J'aime »

Ah , ça je ne savais pas , Merci

Oui, avec custom:button-card, tu peux définir la taille de la carte au pixel près (hauteur et largeur) et je te montrerai comment adapter la taille à l’écran d’affichage si besoin.

De base la taille de la custom:button-card s’adapte automatiquement à ton mode (section ou non).
Tu ne m’as pas dit si ton capteur permettait d’avoir l’état « ouvert » ou « fermé » de ton volet, ou les deux (ça serait l’idéal).

Actuellement, tu dois avoir ça comme code :

type: custom:button-card
entity: cover.chambre
name: Volet
icon: mdi:window-shutter-open
label: ouvert
show_label: true
layout: icon_name_state2nd

On va maintenant définir les styles de base des différents éléments (icone, name et label) :

type: custom:button-card
entity: cover.chambre
name: Volet
icon: mdi:window-shutter-open
label: ouvert
show_label: true
layout: icon_name_state2nd
styles:
  icon:
    - color: red
    - background-color: rgba(255,0,0,0.2)
    - border-radius: 50%
    - width: 40%
  name:
    - color: blue
    - font-size: 20px
    - font-weight: bold
  label:
    - color: red
    - font-size: 1em

On détermine la couleur de base pour l’icône, la couleur de fond de l’icône (en rgba de façon à mettre une transparence, ici 0.2 soit 20% d’opacité), un border-radius à 50% pour avoir une icône ronde et on met sa taille à 40% (tu pourras régler cela en fonction de ton envie).
Pour le nom, j’ai mis la couleur à « blue » mais de la même manière, on peut définir une couleur en rgba (red, green, blue, alpha). J’ai mis la taille de la police à 20 pixel mais tu peux la définir en « em » : 1 em = taille standard, et j’ai mis la police en gras (font-weight: bold). Tu pourrais aussi la mettre en italique avec font-style: italic.

Donc ton capteur prend comme état « off » quand le volet est fermé et « on » quand le volet est ouvert ?

Tu me diras quand ça sera bon pour toi et on passera au changement de couleur de l’icône en fonction de la position du volet ainsi qu’au changement de l’état « ouvert » ou « fermé » et la couleur du texte. Dis-moi si je vais trop vite.

Ok, on continue donc avec les changements lors des changements d’état du volet. Tu veux prendre en compte un état intermédiaire (ni complètement ouvert ni complétement fermé ?)

type: custom:button-card
entity: cover.chambre
name: Volet
icon: mdi:window-shutter-open
label: |
  [[[
    const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
    return (value === 'on') ? 'Ouvert' : 'Fermé';
  ]]]
show_label: true
layout: icon_name_state2nd
styles:
  icon:
    - color: |
          [[[
            const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
            return (value === 'on') ? 'red' : 'green';
          ]]]
    - background-color: |
        [[[
          const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
          return (value === 'on') ? 'rgba(255,0,0,0.2)' : 'rgba(0,255,0,0.2)';
        ]]]
    - border-radius: 50%
    - width: 30%
    - margin-right: 60%
  name:
    - color: blue
    - font-size: 20px
    - font-weight: bold
    - padding-right: 140%
  label:
    - color: red
    - font-size: 1em
    - padding-right: 140%

J’ai décalé l’affichage de l’icône, du nom et du label pour avoir de la place pour les boutons. As-tu besoin d’explications pour les changements d’attributs en fonction de l’état du volet (ouvert ou fermé) ?

Merci beaucoup pour ta réponse.
J’essayerai .
Je suis entre les mains de Cleya, je vais le suivre

Le capteur est un effet hall , donc on et off
son petit nom : binary_sensor.contactvoletroulantcuisine_window

Et oui OK , j’ai bien le code décrit

Oui
On= ouvert
et Off = fermé

C’est bon pour moi

En attendant le réponse de Cleya , j’ai essayé ton code mais ça me donne l’erreur suivante :

j’ai bêtement fait un copier coller , il fallait peut etre que je rajoute QQ chose , désolé

ce n’est pas une carte mais un template a mètre dans configuration YAML

OUPS , désolé , le boulet … :slight_smile:
Je ressayerai .
Merci

J’ai un fichier spécifique pour les templates, je peux le mettre dedans , ou fichier configuration.yaml obligatoire ?
J’ai essayé dans mon fichier /homeassistant/Templates/templates.yaml
mais tel quel ça ne lui plait pas , je pense qu’est un pb de déclaration au début

Je ne sais pas si tu as vu mais c’esst bon pour moi
Pas besoin d’expliactions pour l’instant.
Uniquement 2 états , et si partiellement ouvert , c’est ouvert

tu peut crée un fichier cover.yaml a la racine /homeassistant et ajouter cette ligne dans ton fichier configuration.yaml cover: !include cover.yaml