David
Novembre 3, 2022, 7:23
1
Bonjour à tous
J’ai une carte mais je ne peux changer la couleur ni la taille, rien ne bouge, je suppose que mon code n’est pas bon.
Voici le code
type: vertical-stack
title: VOLETS
cards:
- type: custom:button-card
color: 1
name: Ouvrir Volets
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: cover.volet_salon_7ada06a2_window_covering
color: rgba(5, 5, 5.)
icon: mdi:window-shutter-open
name: Salon
icon_height: 100px
- type: custom:button-card
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: cover.volet_sejour_570479ad_window_covering
color: rgba(255, 255, 255.)
icon: mdi:window-shutter-open
name: Séjour
- type: custom:button-card
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: cover.volet_baie_vitree_23b1cc13_window_covering
color: rgba(255, 255, 255.)
icon: mdi:window-shutter-open
name: Baie Vitrée
- type: custom:button-card
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: cover.volet_porte_cuisine
color: rgba(255, 255, 255.)
icon: mdi:window-shutter-open
name: Porte cuisine
- type: custom:button-card
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: cover.volet_cote_piscine
color: rgba(255, 255, 255.)
icon: mdi:window-shutter-open
name: Coté Piscine
- type: custom:button-card
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: cover.volet_cote_gazon
color: rgba(255, 255, 255.)
icon: mdi:window-shutter-open
name: Coté Gazon
- type: custom:button-card
color: rgba(255, 255, 255.)
name: Fermeture Volets
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: cover.volet_salon_7ada06a2_window_covering
color: rgba(255, 255, 255.)
icon: mdi:window-shutter
name: Salon
- type: custom:button-card
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: cover.volet_sejour_570479ad_window_covering
color: rgba(255, 255, 255.)
icon: mdi:window-shutter
name: Séjour
- type: custom:button-card
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: cover.volet_baie_vitree_23b1cc13_window_covering
color: rgba(255, 255, 255.)
icon: mdi:window-shutter
name: Baie Vitrée
- type: custom:button-card
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: cover.volet_porte_cuisine
color: rgba(255, 255, 255.)
icon: mdi:window-shutter
name: Porte Cuisine
- type: custom:button-card
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: cover.volet_cote_piscine
color: rgba(255, 255, 255.)
icon: mdi:window-shutter
name: Coté Piscine
- type: custom:button-card
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: cover.volet_cote_gazon
color: rgba(255, 255, 255.)
icon: mdi:window-shutter
name: Coté Gazon
et voici l’image
Herbs
Novembre 3, 2022, 7:46
2
Salut @David
Un p’tit conseil sur genre de chose : commence déjà par un seul et unique bouton.
Ensuite quand tout fonctionne tu peux dupliquer le code
Maintenant première correction sur tes codes couleur :
Pour du blanc « opaque » :
color: rgb(255, 255, 255)
Pour du blanc avec transparence :
color: rgba(255, 255, 255,0.5)
Avec le « a » de rgba et le « 0.5 » pour l’indice de transparence.
Ensuite si tu nous en disais un peu plus sur le résultat rechercher on pourrait surement t’aiguiller plus efficacement
Enfin je pense qu’une partie de ton code est bon puisque le code suivant fonctionne (j’ai repris le code du dernier bouton de la dernière ligne avec un cover perso) :
type: custom:button-card
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: cover.volet_bureau
color: rgba(0, 255, 255, 0.5)
icon: mdi:window-shutter
name: Coté Gazon
David
Novembre 4, 2022, 4:54
3
Salut Herbs
J’ai suivi ton conseil et voilà, cela fonctionne mais, j’ai un message d’erreur.
Tu demandais là ou je souhaite aller :
changer la taille de Icon
changer la taille du texte
changer l’icon si ouvert ou fermé ainsi que la couleur
Cela fait beaucoup …mais qui n’ose pas n’a rien
Pour le message d’erreur, j’ai déjà posé la question sur un autre sujet mais pas de retour, tu peux m’aider ???
Bob
Novembre 4, 2022, 6:03
4
Bonsoir @David
Pour la taille de police, et la couleur ça peut t’aider je pense.
Bob
type: custom:button-card
color_type: card
entity: sensor.ecowatt_level_now
name: RTE Now
state:
- value: Situation normale
icon: mdi:transmission-tower
- value: Risques de coupures d'électricité
icon: mdi:transmission-tower-off
- value: Coupures d'électricité programmées
icon: mdi:transmission-tower-off
styles:
card:
- font-size: 14px
- font-weight: normal
- color: white
- background-color: '#202020'
icon:
- color: >
[[[ if (entity.attributes.level_code == "1") return '#44739e'; if
(entity.attributes.level_code == "2") return '#ff9800'; else return
'red'; ]]]
1 « J'aime »
Herbs
Novembre 4, 2022, 6:14
5
En complément de @Bob
Un autre exemple de code :
type: custom:button-card
name: Portail
entity: cover.portail
tap_action:
action: call-service
service: cover.toggle
service_data:
entity_id: cover.portail
size: 35px
icon: |
[[[
if (entity.state == 'open') return 'mdi:gate-open';
else return 'mdi:gate';
]]]
styles:
card:
- font-size: 30px
icon:
- color: |
[[[
if (entity.state == 'open') return 'rgb(255,127,80)';
else return 'rgba(0, 255, 255, 0.5)';
]]]
Ce qui donne :
Avec ces 2 exemples, plus la doc officielle tu as déjà de quoi avancer.
Faut vraiment que tu la lises pour comprendre l’effet de chacune des directives sur le résultat final.
Une fois que tu auras trouver ton « style », tu pourras dupliquer au sein des stacks horizontales et/ou verticales.
Aussi pour éviter de copier X fois une fraction du code lié au style, j’t’invite à te pencher sur la notion de « button_card_templates » dans la doc
David
Novembre 4, 2022, 9:58
6
Mais j’ai 55 balais, l’anglais bof, l’informatique bof alors les codes encore moins …
Donc c’est grace à vous que j’arrive à progresser. grace à votre partage et le temps que vous prenez pour répondre à des questions, qui pour vous sont très certainement évidente. mais pour moi c’est complexe et loin d’etre simple.
Je ne peux dire que merci et encore merci.
Bonne nuit.
David
Novembre 5, 2022, 7:45
7
Qqun peut le dire comment faire pour enlever ce message d’erreur
Tu peu pas, button-card s’édite pas par le UI. C’est qu’en YAML.
David
Novembre 5, 2022, 9:40
9
OK grace à vous j’ai réussi
type: horizontal-stack
title: VOLETS
cards:
- type: custom:button-card
name: Salon
entity: cover.volet_salon_7ada06a2_window_covering
tap_action:
action: call-service
service: cover.toggle
service_data:
entity_id: cover.volet_salon_7ada06a2_window_covering
size: 30px
icon: |
[[[
if (entity.state == 'open') return 'mdi:window-shutter-open';
else return 'mdi:window-shutter';
]]]
styles:
card:
- font-size: 15px
icon:
- color: |
[[[
if (entity.state == 'open') return 'rgba(0, 204, 0, 1.5)';
else return 'rgb(102, 178, 255)';
]]]
- type: custom:button-card
name: Séjour
entity: cover.volet_sejour_570479ad_window_covering
tap_action:
action: call-service
service: cover.toggle
service_data:
entity_id: cover.volet_sejour_570479ad_window_covering
size: 30px
icon: |
[[[
if (entity.state == 'open') return 'mdi:window-shutter-open';
else return 'mdi:window-shutter';
]]]
styles:
card:
- font-size: 15px
icon:
- color: |
[[[
if (entity.state == 'open') return 'rgba(0, 204, 0, 1.5)';
else return 'rgb(102, 178, 255)';
]]]
Herbs
Novembre 5, 2022, 10:04
10
Salut @David
Bonne nouvelle
Maintenant si tu penses appliquer le même style pour tous tes boutons « volet » on peut optimiser avec les « button_card_templates » dont je t’ai parlé hier.
Pour ça tu peux sortir de tes cartes tout le code qu’elles auront en commun, et mettre ça en template.
Créer la template :
il faut éditer le dashboard, ajouter l’entrée « button_card_templates: », et ensuite créer les templates.
Exemple ici la template s’appelle « sw_light » et est appliquée aux boutons pilotant de l’éclairage :
Dans le code du bouton « appeler » la template :
type: custom:button-card
entity: light.sw_spots_cuisine
name: Cuisine
template: sw_light
Dans une stack horizontale :
type: horizontal-stack
cards:
- type: custom:button-card
entity: light.sw_spots_cuisine
name: Cuisine
template: sw_light
- type: custom:button-card
entity: switch.sw_lampe_salon
name: Salon
template: sw_light
- type: custom:button-card
entity: light.sw_wc_rdc
name: Wc
template: sw_light
Comme tu peux le voir ça fait gagner quelques lignes de code
Bon bref en « vidéo » ça donne ça :
Voilà de quoi t’amuser encore un peu aujourd’hui
1 « J'aime »
David
Novembre 5, 2022, 10:55
11
Merci beaucoup regarde , j’ai réussi
mais c’est la première fois que je rentre dans ce mode « éditeur configuration » et j’ai vu que j’ai des choses écrites dedans.
Encore autre chose :
Herbs
Novembre 5, 2022, 11:23
12
Impec
Ca va dépendre de comment tu gères ton dashboard, mais par défaut oui.
Après si tu créés un second dashboard il aura son propre « code »
Déjà les « template » de button-card
Mais c’est à faire avec précaution, surtout quand on débute.
Oui c’est ça.
David
Novembre 5, 2022, 11:24
13
merci alors à présent je vais m’amuser
David
Novembre 5, 2022, 12:23
14
bon ben une question
voici mon code pour le bouton qui fonctionne
type: custom:button-card
name: Entrée Garage
entity: switch.lumiere_couloir_channel_1
template: inter
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.lumiere_couloir_channel_1
size: 35px
icon: |
[[[
if (entity.state == 'on') return 'mdi:toggle-switch-outline';
else return 'mdi:toggle-switch-off';
]]]
styles:
card:
- font-size: 12px
icon:
- color: |
[[[
if (entity.state == 'on') return 'rgba(0, 204, 0, 1.5)';
else return 'rgb(245, 0, 1)';
]]]
Question
Ou de modifier la couleur du texte ici interrupteur en noir, car si le thème de la vue est teal (exemple) le texte n’est plus visible
Herbs
Novembre 5, 2022, 1:43
15
Alors là tu es sur une icône, un objet on va dire « monobloc » qui possède ça propre « définition ».
Donc là il faudrait recréer une icône à part entière (même si le design serait quasi identique) et la redéfinir à ta sauce.
Par contre dans ton code l’icône pour le « on » est une version « outline » alors que pour le « off » t’as la version basique.
Donc tu peux essayer la version « outline » du « off » pour voir mdi:toggle-switch-off-outline .
Pour t’aider à choisir les icône tu peux faire un tour ici .
Donc là on était sur la modif d’une « icône », maitenant dans HA si tu créés une carte entities avec un switch :
type: entities
entities:
- entity: switch.sw_lampe_salon
name: Lampe Salon
Dans ce cas avec une intégration du type « card-mod » ou directement dans un thème custom, tu pourras customiser l’apparence du switch.
Ce texte, c’est bien le « titre » d’une « stack » ou autre chose ?
Envoies le code de la card pour voir stp ?
David
Novembre 5, 2022, 1:54
16
Ben… je pense que je t’ai perdu au fil de la lecture
Je suppose que le code c’est le tout :
type: horizontal-stack
title: Interrupteurs
cards:
- type: custom:button-card
name: Entrée
entity: switch.lumiere_couloir_channel_2
template: inter
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.lumiere_couloir_channel_2
- type: custom:button-card
name: Entrée Garage
entity: switch.lumiere_couloir_channel_1
template: inter
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.lumiere_couloir_channel_1
- type: custom:button-card
name: Applique Entrée
entity: switch.applique_couloir_channel_1
template: applique
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.applique_couloir_channel_1
- type: custom:button-card
name: Applique Escalier
entity: switch.applique_couloir_channel_2
template: applique
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.applique_couloir_channel_2
égaelment le template
inter:
size: 35px
icon: |
[[[
if (entity.state == 'on') return 'mdi:light-recessed';
else return 'mdi:toggle-switch-off';
]]]
styles:
card:
- font-size: 12px
- state_color: false
icon:
- color: |
[[[
if (entity.state == 'on') return 'rgba(0, 204, 0, 1.5)';
else return 'rgb(245, 0, 1)';
]]]
applique:
size: 35px
icon: |
[[[
if (entity.state == 'on') return 'mdi:coach-lamp';
else return 'mdi:coach-lamp';
]]]
styles:
card:
- font-size: 12px
- state_color: false
icon:
- color: |
[[[
if (entity.state == 'on') return 'rgba(0, 204, 0, 1.5)';
else return 'rgb(245, 0, 1)';
]]]
En espérant avoir tout envoyé
Sinon existe-t-il une page ou l’on peut trouver la syntaxe des codes des « card » ou yaml ?
Herbs
Novembre 5, 2022, 4:01
17
Oui désolé c’est un peu le bazar dans ma tête, j’ai moi même du mal à me suivre parfois
Ce que je voulais dire c’est qu’il faut bien différencier les éléments qu’on veut modifier, car ce ne sera pas toujours la même méthode pour le faire.
Bon vu le code il s’agit bien du titre d’une « horizontal-stack », et là ça va être compliqué à modifier.
C’est que mon avis, mais perso j’approfondirai ce qu’on a déjà vu ensemble avant d’aller sur ce genre de modif.
David
Novembre 6, 2022, 6:44
18
Merci à tous et surtout @Herbs pour ton aide précieuse, j’ai appris beaucoup avec nos échanges.
