bonjour
je me lance avec button card et j’ai besoin de votre aide
je souhaite centrer l’icone au centre de la carte et la mettre en grey quand elle est inactive et en jaune acitive.
mettre un deuxième capteur d’humidité a coté du capteur de temperature
mais je sais pas faire
pouvez vous m’aider
SVP
type: custom:vertical-stack-in-card
cards:
- show_name: ''
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /lovelace/1
icon: mdi:door-closed
hold_action:
action: toggle
show_state: false
name: 'Couloir '
entity: light.lumieres_couloir
icon_height: 60px
- show_name: ''
show_icon: false
type: button
show_state: true
entity: sensor.processor_temperature
card_mod:
style:
.: |
ha-card {
--ha-card-background: #131313;
}
Merci
je n’ai peux etre pas utilisé la bonne methode pour creer ma carte !
Salut,
pas certain que tu puisse faire ce genre de choses avec les cartes standard.
Une custom assez populaire est la button-card sur HACS.
Puissant, mais il faut s’y mettre, c’est un peu plus complexe.
1 « J'aime »
type: custom:vertical-stack-in-card
cards:
- type: custom:button-card
entity: binary_sensor.porte_d_entree_contact
label: Couloir
show_label: false
show_state: false
show_name: false
color: Grey
icon: mdi:door-closed
styles:
label:
- font-size: 12px
state:
- font-size: 10px
icon:
- height: 70px
- color: |
[[[
if (entity.state == 'on') return 'yellow';
if (entity.state == 'off') return 'Grey';
]]]
- show_name: ''
show_icon: false
type: button
show_state: true
entity: sensor.processor_temperature
je suis arrivé a changer les couleurs mais pas l’alignement de l’icone central n’y l’incorporation de la deuxiemme sonde a coté de la 1ere
Je comprends pas ton icone est centrer de gauche a droite. Tu parle sur la hauteur ?
oui sur la hauteur c’est bien ca
dans ton code ta qu’un capteur sensor.processor_temperature, elle est ou la deuxième sonde ?
tu peu tester ca pour avoir deux sonde a coté
type: custom:vertical-stack-in-card
cards:
- type: custom:button-card
entity: binary_sensor.0x00158d0007bef2b5_occupancy
label: Couloir
show_label: false
show_state: false
show_name: false
color: Grey
icon: mdi:door-closed
size: 15%
styles:
label:
- font-size: 12px
state:
- font-size: 10px
icon:
- color: |
[[[
if (entity.state == 'on') return 'yellow';
if (entity.state == 'off') return 'Grey';
]]]
- type: horizontal-stack
cards:
- show_name: ''
show_icon: false
type: button
show_state: true
entity: sensor.processor_temperature
card_mod:
style: |
ha-card {
margin-top: -10px;
}
- show_name: ''
show_icon: false
type: button
show_state: true
entity: sensor.processor_temperature
card_mod:
style: |
ha-card {
margin-top: -10px;
}
Bonjour, tu peux utiliser des custom_fields pour afficher tes deux entités et les placer exactement où tu veux (au pixel près).
1 « J'aime »
Après faut bien comprendre que ce que tu fais là c’est coller plusieurs cartes les unes au dessus des autres avec custom:vertical-stack-in-card donc il n’y a pas de notion de centrage vertical possible car en réalité ce sont vraiment plusieurs cartes…
C’est surement possible aussi de tout faire dans la button-card en fait, car tu peux y mettre différentes entitiés. Et là le centrage sera différent, car ce ne sera qu’une carte.
c’est ce que je charche a faire !!! mais mes competences sont limités et c’est pour ca que je demande votre aide
Ca va là, ça fait appel a des compétences en lecture (en anglais certes), il y a beaucoup d’exemples et de possibilités avec button-card 
type: custom:button-card
aspect_ratio: 1/1
custom_fields:
fond:
card:
type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- border: none
premier_capteur:
card:
type: custom:button-card
size: 90%
entity: binary_sensor.chambre_detecteur_d_ouverture_fenetre_cote_droit_contact
show_icon: true
show_name: false
state:
- value: 'off'
styles:
icon:
- color: dimgray
card:
- box-shadow: none
- border-radius: 5%
- background-color: rgba(242,242,242,0.7)
- width: 100px
- height: 100px
- value: 'on'
styles:
icon:
- color: rgb(255,255,128)
card:
- border-radius: 5%
- box-shadow: 0px 0px 6px 3px rgba(255,255,128,0.8)
- background-color: rgba(0,0,0,0.5)
- width: 100px
- height: 100px
deuxieme_capteur:
card:
type: custom:button-card
size: 90%
entity: binary_sensor.chambre_detecteur_d_ouverture_fenetre_cote_gauche_contact
show_icon: true
show_name: false
state:
- value: 'off'
styles:
icon:
- color: dimgray
card:
- box-shadow: none
- border-radius: 5%
- background-color: rgba(242,242,242,0.7)
- width: 100px
- height: 100px
- value: 'on'
styles:
icon:
- color: rgb(255,255,128)
card:
- border-radius: 5%
- box-shadow: 0px 0px 6px 3px rgba(255,255,128,0.8)
- background-color: rgba(0,0,0,0.5)
- width: 100px
- height: 100px
styles:
custom_fields:
fond:
- position: absolute
- left: 0
- top: 0
- width: 100%
- height: 100%
premier_capteur:
- position: absolute
- left: 25%
- top: 38%
deuxieme_capteur:
- position: absolute
- left: 55%
- top: 38%
Voilà un exemple avec des custom_fields et des options supplémentaires en cas de changement d’état (fond plus sombre et halo jaune autour du custom_field de l’entité en cas de passage à « on »).
Le positionnement des différents custom_fields se fait à partir des lignes :
styles:
custom_fields
Si tu as des questions n’hésites pas
1 « J'aime »
