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