le resultat
aucune couleur
jai essayé plein de truc en m’aidant avec IA
là c’est avec un masque qui change en fonction de l’ouverture à partir de l’icone mdi:window-shutter pour cacher 1, 2 ou 3 des traits horizontaux représentant les lames du volet.
cardcard_mod:
ca marchera pas 
change juste la couleur:
card_mod:
style: |
ha-state-icon {
color: orange;
}
changer la couleur suivant un état
card_mod:
style: |
ha-state-icon {
{% if is_state('cover.volet_pignon', 'closed') %}
color: green;
{% else %}
color: red;
{% endif %}
}
Ca marche pas 2x comme ça ?
j’ai pas compris ???
cardcard_mod, ça marche pas 2 fois mieux que card_mod ?
1 « J'aime »
en couleur javais reussi avec ce resultat Mais Je perd les fleches up and down Cest mon probleme de depart .Jai fais beaucoup dessaie qui demeure enregistre dans la meme vue Je me demande si cela pose probleme interaction entre elle
C’est normal que ca change toute les icones tu utilise --card-mod-icon dans ha-card , ca modifie toutes les icones de la carte.
pour changer que l’icone principal c’est:
card_mod:
style: |
ha-state-icon {
--card-mod-icon: mdi:mushroom;
}
Non chaque carte est indépendante des autres, pas d’interactions entre les différentes cartes du même tableau de bord.
voila icone et couleur de l’icone qui change
card_mod:
style: |
ha-state-icon {
{% if is_state('cover.volet_pignon', 'closed') %}
color: green;
--card-mod-icon: mdi:window-shutter;
{% else %}
color: red;
--card-mod-icon: mdi:window-shutter-open;
{% endif %}
}
1 « J'aime »
en effet votre remarque me plait
je ne savais pas comment les differencier
le temps me manquent pour verifier
Je vais regarder cela plus tard
Merci a vous tous pour votre attention a ma galere
bonne soirée
Bonjour
super cette carte 
Est-ce que tu peux partagé le code ? J’aimerais me baser sur celle-là pour me faire mes propres cartes 
Beau travail
Attention !
Les cartes de @anon51798830 sont belles, mais il y a un prix à payer…
Beaucoup, beaucoup de lignes de code…
@zensomme_frederic Un petit récapitulatif:
La carte mushroom-cover de base donne ça (chez moi, voir plus bas pour chez toi…):
En reprenant le code de @WarC0zes qui te permet de modifier la bonne icone et changer la couleur, ça donne ça:
type: custom:mushroom-cover-card
layout: horizontal
show_buttons_control: true
entity: cover.volet_cuisine
name: Essai Volet cuisine
show_position_control: false
#partie de WarC0zes à ajouter:
card_mod:
style: |
ha-state-icon {
{% if is_state('cover.volet_pignon', 'closed') %}
color: green;
--card-mod-icon: mdi:window-shutter;
{% else %}
color: red;
--card-mod-icon: mdi:window-shutter-open;
{% endif %}
}
Pour obtenir le résultat suivant:
Mais hélas, comme tu as mis le doigt dans l’engrenage, tu vas bientôt aussi demander à modifier la couleur de fond de l’icone… et là il va falloir que tu ailles voir dans les liens qu’on t’a mis plus haut pour trouver tout seul quelle valeur il faut modifier avec card_mod… Indice ça risque de ressembler à…
# a ajouter dans le bloc cardmod...
mushroom-shape-icon$: |
.shape {
--shape-color: orange !important;
}
Mais vu ton problème, il existe probablement aussi une autre solution: le customize pour affecter la bonne classe à tes volets s’ils ne l’ont pas de base.
J’imagine que la source de ta question c’est que de base (contrairement à ma première image) tes volets ressemblent à ça:
ou à ça:
mais pas à ça:
Si c’est bien le cas c’est que tes volets n’ont pas la bonne « device_class. »
La fonction customize te permet de dire à home assistant le type de cover que tu utilises, et te permet alors d’utiliser les cartes sans modification par card_mod.
Pour faire ça il faut que tu ajoutes une clef « homeassistant:/customize: » dans ton configuration.yaml, et pour chaque entité que tu veux modifier, sa nouvelle device_class.
Par exemple:
# Customisations
homeassistant:
customize:
# pour donner le type 'volet roulant' à ton volet pignon:
cover.volet_pignon:
device_class: shutter
# pour donner le type 'porte de garage' à un volet de garage:
cover.volet_garage:
device_class: garage_door
# etc..
Tu peux également changer l’icone et sa couleur dans le customize… Avantage, c’est fait pour toutes les cartes, y compris les cartes par défaut et le « more info ».
La doc est là: Home Assistant Core Integration - Home Assistant en particulier les device_class pour les covers: Cover - Home Assistant
Attention !
@BBE change d’avatar comme de slip pour brouiller les pistes…
Pour le code de la partie graphique, c’est ça (mais comme ce n’était qu’un exemple je n’ai pas mis le code pour déplacer le masque en fonction du pourcentage d’ouverture du volet) :
type: custom:button-card
aspect_ratio: 9/1.6
custom_fields:
fond:
card:
type: custom:button-card
aspect_ratio: 7/0.9
styles:
card:
- background-color: rgba(64,64,64,0.8)
- border: none
tap_action:
action: none
hold_action:
action: none
bouton_pos:
card:
type: custom:button-card
size: 100%
icon: mdi:window-shutter
show_name: false
styles:
icon:
- color: rgba(255,211,14,1.0)
card:
- box-shadow: 0px 0px 4px 0px rgba(255,240,0,0.5)
- border-radius: 50%
- background-color: rgba(255,240,0,0.3)
- width: 48px
- height: 48px
tap_action:
action: none
hold_action:
action: none
mask:
card:
type: custom:button-card
size: 85%
show_name: false
styles:
card:
- border-radius: 0%
- border: none
- background-color: rgba(148,143,71,1.0)
- width: 15px
- height: 15px
tap_action:
action: none
hold_action:
action: none
percentage:
card:
type: custom:button-card
size: 100%
show_name: true
name: Essai volet pignon
label: 'Ouverture : 50%'
show_label: true
styles:
name:
- justify-self: start
- font-size: 0.9em
label:
- justify-self: start
- font-size: 0.8em
card:
- border-radius: 0%
- border: none
- background-color: rgba(102,102,102,1.0)
- width: 150px
- height: 50px
tap_action:
action: none
hold_action:
action: none
bouton_down:
card:
type: custom:button-card
size: 100%
icon: mdi:menu-up
show_name: false
styles:
icon:
- color: black
card:
- box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
- border: 2px rgba(211,211,211,1.0) outset
- border-radius: 50%
- background-color: rgba(196,196,196,1.0)
- width: 48px
- height: 48px
tap_action:
action: none
hold_action:
action: none
bouton_stop:
card:
type: custom:button-card
size: 40%
icon: mdi:square
show_name: false
styles:
icon:
- color: black
card:
- box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
- border: 2px rgba(211,211,211,1.0) outset
- border-radius: 50%
- background-color: rgba(196,196,196,1.0)
- width: 48px
- height: 48px
tap_action:
action: none
hold_action:
action: none
bouton_up:
card:
type: custom:button-card
size: 100%
icon: mdi:menu-down
show_name: false
styles:
icon:
- color: black
card:
- box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
- border: 2px rgba(211,211,211,1.0) outset
- border-radius: 50%
- background-color: rgba(196,196,196,1.0)
- width: 48px
- height: 48px
tap_action:
action: none
hold_action:
action: none
styles:
custom_fields:
fond:
- position: absolute
- left: 2%
- top: 10%
- width: 96%
- height: 54px
bouton_pos:
- position: absolute
- left: 3%
- top: 18%
mask:
- position: absolute
- left: 6.5%
- top: 50%
percentage:
- position: absolute
- left: 17%
- top: 10%
bouton_down:
- position: absolute
- left: 60%
- top: 18%
bouton_stop:
- position: absolute
- left: 73%
- top: 18%
bouton_up:
- position: absolute
- left: 86%
- top: 18%
Après 2 ans sans avatar, j’avoue j’ai tatonné un peu…
Rebonjour,
Je parlais de cette carte 
Merci
Alors là, tu vas donner raison à @BBE car il ne s’agit pas d’une simple carte mais d’un ensemble qui sera (si je finis un jour) un tableau de bord pour le téléphone portable de mon épouse. L’ensemble du code fait un peu plus de 2000 lignes 
Tu le trouveras sur ce post : Ecrire en couleur une entité en fonction de son état - #67 par Cleya
Merci pour le code je vais essayer de comprendre… 
Si tu veux, je peux poster juste le code de la carte « Salle à manger ». Ca sera plus simple pour commencer.