Oui, j’ai vu, j’ai édité le code pour la prise en compte des changements d’état du volet. Dis-moi si tu as besoin d’explication pour cette partie. Je vais prendre un café, suite dans 10 minutes si tu veux bien. On passera ensuite aux boutons.
Pas besoin d’expliactions pour l’instant.
Uniquement 2 états , et si partiellement ouvert , c’est ouvert
juste pour info le nom du capteur Hall est
binary_sensor.contactvoletroulantcuisine_window
y’ a pas detecteur dedans 
je corrige dans mon code
c’est bon
le capteur se met en On = ouvert et Off = fermé
Oui, j’ai mis un capteur de chez moi pour avoir la visualisation 
j’ai juste oublié de te dire de le changer
1 « J'aime »
oui.
J’ai mis ton code dans configuration.yaml
Mais comment je crèe la carte après ?
Il faut créer une carte générique et changer le type dans le code , c’est ça ?
voila une correction de ton code d’origine , dit moi si 'est ok. et n’oublie pas de changer les noms cover et binary_sensor si il ne corespondent pas .
type: custom:mushroom-cover-card
entity: cover.voletsroulants
name: Volets
layout: horizontal
fill_container: false
primary_info: name
secondary_info: >-
{% if is_state('binary_sensor.contactvoletroulantcuisine_window', 'on') %}
Ouvert
{% else %}
Fermé
{% endif %}
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: |
ha-card {
background: #1C1C1C;
--primary-text-color: green;
--card-primary-color: cyan;
{% if is_state('binary_sensor.contactvoletroulantcuisine_window', 'on') %}
--card-secondary-color: var(--green-color);
{% else %}
--card-secondary-color: var(--red-color);
{% endif %}
}
ha-state-icon {
{% if is_state('binary_sensor.contactvoletroulantcuisine_window', 'on') %}
color: var(--green-color);
--card-mod-icon: mdi:window-shutter-open;
{% else %}
color: var(--red-color);
--card-mod-icon: mdi:window-shutter;
{% endif %}
}
Je t’ai mis juste pour info. des éléments graphiques dans les styles de l’élément « card » (la carte support). J’ai ajouté l’attribut « pointer-events: none » de façon à supprimer l’effet sur la carte lors d’un clic. Le clic ne devant se faire que sur les custom_fields que nous allons ajouter pour les boutons « monter » et « descendre » pour piloter le volet. Veux-tu un bouton « stop » pour l’arrêter en cours de route ? Là encore j’utilserai un de mes volets pour les actions, il faudra que tu mettes ton entité.
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:
card:
- background-color: rgba(54,54,54,1.0)
- border: 2px rgba(211,211,211,0.8) outset
- box-shadow: 4px 4px 8px rgba(32,32,32,0.5)
- border-radius: 10px
- pointer-events: none
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.5)' : 'rgba(0,255,0,0.2)';
]]]
- border-radius: 50%
- width: 30%
- margin-right: 60%
name:
- color: cyan
- font-size: 20px
- font-weight: bold
- padding-right: 140%
label:
- color: red
- font-size: 1em
- padding-right: 140%
Nous allons faire un premier custom_fields pour le bouton qui permettra de monter le volet. Un custom_fields est un champ personnalisé permettant d’afficher n’importe quelle carte dans une custom:button-card (ou d’afficher une animation, un flux vidéo, bref à peu près tout ce que tu veux). Nous allons nous servir d’une custom:button-card. Le principe est de définir le custom_field, de lui donner un nom, de définir ce qu’il doit afficher puis ensuite dans les styles de la carte support, nous déterminerons où il devra s’afficher.
Nous allons donc d’abord définir le custom_fields en ajoutant entre la définition de la carte support et ses styles ceci :
custom_fields:
bouton_monter:
card:
type: custom:button-card
Tu verras un petit point blanc en bas à droite de la carte support.
Comme nous utilisons une custom:button-card, nous allons pouvoir ajouter une icône (et cela suffira) puis définir les styles de cette icone ainsi que les styles de la carte (élément card).
Voilà donc ce que nous allons définir pour le bouon monter :
custom_fields:
bouton_monter:
card:
type: custom:button-card
icon: mdi:arrow-up-bold
styles:
card:
- aspect-ratio: 1/1
- background: none
- border: none
- width: 50px
- pointer-events: |
[[[
const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
return (value === 'on') ? 'none' : 'auto';
]]]
icon:
- width: 80%
- color: |
[[[
const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
return (value === 'on') ? 'green' : 'dimgray';
]]]
le pointer-events permet de définir si le bouton est « cliquable » ou pas en fonction de l’état du volet : on ne peut pas le monter si le volet est ouvert…
La couleur de l’icone change aussi en fonction de l’état (grisé = inactif) quand le volet est ouvert et vert dans le cas contraire.
Nous allons ensuite déterminer la position du custom_fields. Comme dit pluis haut ceci se fait dans les styles de la carte support :
Je n’indique la position par rapport au coin gauche et haut de la carte support car de base le custom_fields est positionné verticalement au centre de la carte support.
C’est bon pour toi ?
Nous allons maintenant gérer l’action lors du clic (quand celui-ci est possible) en définissant ce qui doit se faire :
custom_fields:
bouton_monter:
card:
type: custom:button-card
icon: mdi:arrow-up-bold
styles:
card:
- aspect-ratio: 1/1
- background: none
- border: none
- width: 50px
- pointer-events: |
[[[
const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
return (value === 'on') ? 'none' : 'auto';
]]]
icon:
- width: 80%
- color: |
[[[
const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
return (value === 'on') ? 'green' : 'dimgray';
]]]
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: cover.cuisine
Pense à changer l’entité dans « entity_id ».
Nous allons pouvoir ajouter le deuxième bouton (pour descendre le volet) de la même manière avec un deuxième custom_fields. Il suffit de copier et collé le premier puis modifier le nom et les autres éléments, ce qui sera bien plus rapide que de tout retaper.
Le code complet :
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') ? 'Fermé' : 'Ouvert';
]]]
show_label: true
layout: icon_name_state2nd
custom_fields:
bouton_monter:
card:
type: custom:button-card
icon: mdi:arrow-up-bold
styles:
card:
- aspect-ratio: 1/1
- background: none
- border: none
- width: 50px
- pointer-events: |
[[[
const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
return (value === 'on') ? 'auto' : 'none';
]]]
icon:
- width: 80%
- color: |
[[[
const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
return (value === 'on') ? 'green' : 'dimgray';
]]]
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: cover.salon_volet_roulant_cote_bibliotheque
bouton_descendre:
card:
type: custom:button-card
icon: mdi:arrow-down-bold
styles:
card:
- aspect-ratio: 1/1
- background: none
- border: none
- width: 50px
- pointer-events: |
[[[
const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
return (value === 'off') ? 'auto' : 'none';
]]]
icon:
- width: 80%
- color: |
[[[
const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
return (value === 'off') ? 'green' : 'dimgray';
]]]
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: cover.salon_volet_roulant_cote_bibliotheque
styles:
card:
- background-color: rgba(54,54,54,1.0)
- border: 2px rgba(211,211,211,0.8) outset
- border-radius: 10px
- pointer-events: none
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.5)' : 'rgba(0,255,0,0.2)';
]]]
- border-radius: 50%
- width: 30%
- margin-right: 60%
name:
- color: cyan
- font-size: 20px
- font-weight: bold
- padding-right: 140%
label:
- color: |
[[[
const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
return (value === 'on') ? 'red' : 'green';
]]]
- font-size: 1em
- padding-right: 140%
custom_fields:
bouton_monter:
- position: absolute
- left: 45%
bouton_descendre:
- position: absolute
- right: 15%
Pense à bien mettre l’entité de ton volet
Oui c’est tout bon ça marche.
Merci à toi !!! et bon WE
Je continue avec Cleya pour button-card
Merci beaucoup pour le temps que tu passes.
Chat GPT n’a qu’a bien se tenir lol
Pas besoin de bouton stop , et mlerci pour les infos .
Je colle et je corrige
ChatGPT se plante systématiquement pour ce que nous allons voir maintenant
c’est ok
c’est ok , point blanc présent
C’est ok
Ben en fait je n’ai pas d’affichage du statut du volet (en texte)
secondary_info: >-
{% if is_state('binary_sensor.contactvoletroulantcuisine_window', 'on') %}
Ouvert
{% else %}
Fermé
{% endif %}
semble ne pas fonctionner
Il faudra que tu inverse la couleur de l’icone du custom_fields et probablement aussi le pointer-events. Tu ne dois pas pouvoir cliquer sur ce bouton si le volet est ouvert. Le principe de l’expression en fonction de l’état est le suivant : return (expression évaluée) ? 'valeur si vrai' : 'valeur si faux' ;
T’occupes, avec custom:button-card, ça s’affichera (et sans card-mod) 
1 « J'aime »
OK c’est pkus long poiur moi désolé , ces satanées indentations !!!
je changerai les sens/couleurs après
l’état en couleur n’est pas suffisant ou bien ne fonctionne pas ? je ne voie pas l’intérêt de rajouter du text en plus .
j’ai changé les sens en changeant
return (value === 'off')
return (value === 'on')
dans le pointer et l’icone
Oui je suis de ton avis , mais Madame voudrait bien du texte …
Et ce que femme veut , femme l’obtient
ou essaye hardemment de l’obtenir
1 « J'aime »
Oui, une fois le principe compris (et après plusieurs essais), tu y arriveras. Je suis moi aussi obligé de faire plusieurs essais avant que ça colle
Pour modifier la taille de la carte, tu peu le faire sans souci dans les styles de l’élément « card » avec « - width: » et « - height: » en spécifiant la atille en pixels (« - width: 400px ») ou en pourcentage (« - width: 50% »).
Tu as maintenant une version simplifiée de ce qu’on peut faire avec une custom:button-card. Si tu veux aller plus loin, les possibilités de cette carte sont énormes et une fois les principes de base acquis, tu ne pourras plus t’en passer…
la qualité d’image avec la capture est plus que bof, mais ça donne un aperçu 
C’est bon pour ta carte « Volet » ?
Tu trouveras des exemples que j’ai posté ici :
2 « J'aime »