J’ai simplement fait un copier de ton code et remplacé l’entité et l’attributs de l’entité .
Ca fonctionne aleatoirement, bizarre…
Je confirme, il faudrait un autre « testeur » pour voir …
J’ai refait quelques tests.
Ca a l’air de fonctionner une fois la modif appliquée. Mais quand on raffraichit le navigateur, ça ne fonctionne plus. Et l’icone disparait par moment.
EDIT : j’ai fait une correction. Je teste et poste demain si ok
Bon ça fonctionne comme ça !
Autre question est il possible de faire clignoter le texte du badge ?
Autre question que je me pose pourquoi dans HA certains badge sont rouge et d’autres bleu ? Je parle de la couleur du rond.
Aussi certains badge ont un logo ouvert/fermé je pense aux fenetres et portes alors que les lumières et les volets ont un texte allumé/éteint ouvert/fermé. Pourquoi ?
- entity: binary_sensor.madame_au_volant
card_mod:
style:
ha-state-label-badge $ ha-label-badge $: |
{% if is_state('binary_sensor.madame_au_volant', 'on') %}
.badge-container .label-badge .value::after {
content: "{{ state_attr('binary_sensor.madame_au_volant', 'car') }}";
background-color: var(--ha-label-badge-color, var(--primary-color));
color: var(--ha-label-badge-label-color, white);
border-radius: 1em;
padding: 9% 16% 8%;
font-weight: 500;
overflow: hidden;
position: absolute;
bottom: -1em;
left: -0.2em;
right: -0.2em;
line-height: 1.05em;
font-size: 0.5em;
}
{% endif %}
.: |
:host {
{% if is_state('binary_sensor.madame_au_volant', 'on') %}
--label-badge-text-color: orange;
{% else %}
--label-badge-text-color: unset;
{% endif %}
}
1 « J'aime »
Pour l’instant je parviens à faire clignoter le « label » complet :
Et vu la structure je suis pas certain d’arriver à faire clignoter que le texte.
Si ça te va je peux te partager le code.
Sinon tu peux « économiser » 2 lignes de code sur ton code actuel :
- entity: binary_sensor.madame_au_volant
card_mod:
style:
ha-state-label-badge $ ha-label-badge $: |
{% if is_state('binary_sensor.madame_au_volant', 'on') %}
.badge-container .label-badge .value::after {
content: "{{ state_attr('binary_sensor.madame_au_volant', 'car') }}";
background-color: var(--ha-label-badge-color, var(--primary-color));
color: var(--ha-label-badge-label-color, white);
border-radius: 1em;
padding: 9% 16% 8%;
font-weight: 500;
overflow: hidden;
position: absolute;
bottom: -1em;
left: -0.2em;
right: -0.2em;
line-height: 1.05em;
font-size: 0.5em;
}
{% endif %}
.: |
:host {
{% if is_state('binary_sensor.madame_au_volant', 'on') %}
--label-badge-text-color: orange;
{% endif %}
}
Pour ça, c’est une question de « class » et de type d’entité (sensor / binary_sensor …).
Ah oui c’est pas mal déjà !
Oui partages.
C’est l’icone ou le texte dans le rond que je voulais faire clignoter.
voilà déjà :
- entity: binary_sensor.herbs_pc
card_mod:
style:
ha-state-label-badge $ ha-label-badge $: |
{% if is_state('binary_sensor.madame_au_volant', 'on') %}
.badge-container .label-badge .value::after {
content: "{{ state_attr('binary_sensor.madame_au_volant', 'car') }}";
background-color: var(--ha-label-badge-color, var(--primary-color));
color: var(--ha-label-badge-label-color, white);
border-radius: 1em;
padding: 9% 16% 8%;
font-weight: 500;
overflow: hidden;
position: absolute;
bottom: -1em;
left: -0.2em;
right: -0.2em;
line-height: 1.05em;
font-size: 0.5em;
animation: blink 2s linear infinite;
}
@keyframes blink {
from {opacity: 0;}
to {opacity: 100;}
from {opacity: 100;}
to {opacity: 0;}
}
{% endif %}
.: |
:host {
{% if is_state('binary_sensor.madame_au_volant', 'on') %}
--label-badge-text-color: aqua;
{% endif %}
}
L’icône et le texte doivent clignoté si l’entité est « on » ou « open » ?
Ton code fonctionne deja pour le label
Oui c’est ca l’icone ou le texte, je pense que c’est la même chose, si l’entité est à on
Alors c’est pas exactement la même pour une icône ou du texte :
Pour une icône
- entity: binary_sensor.herbs_pc
card_mod:
style:
ha-state-label-badge $ ha-label-badge $: |
{% if is_state(config.entity, 'on') %}
.badge-container .label-badge .value::after {
content: "{{ state_attr(config.entity, 'round_trip_time_avg') }}";
background-color: var(--ha-label-badge-color, var(--primary-color));
color: var(--ha-label-badge-label-color, white);
border-radius: 1em;
padding: 9% 16% 8%;
font-weight: 500;
overflow: hidden;
position: absolute;
bottom: -1em;
left: -0.2em;
right: -0.2em;
line-height: 1.05em;
font-size: 0.5em;
}
{% endif %}
ha-state-label-badge $ ha-label-badge ha-state-icon $: |
{% if is_state(config.entity, 'on') %}
ha-svg-icon {
animation: blink 2s linear infinite;
}
@keyframes blink {
from {opacity: 0;}
to {opacity: 100;}
from {opacity: 100;}
to {opacity: 0;}
}
{% endif %}
.: |
:host {
{% if is_state(config.entity, 'on') %}
--label-badge-text-color: aqua;
{% endif %}
animation: blink 2s linear infinite;
}
Pour du texte
- entity: light.yeelight_bureau
card_mod:
style:
ha-state-label-badge $ ha-label-badge: |
{% if is_state(config.entity, 'on') %}
.big {
animation: blink 2s linear infinite;
}
@keyframes blink {
from {opacity: 0;}
to {opacity: 100;}
from {opacity: 100;}
to {opacity: 0;}
}
{% endif %}
J’ai laissé mes entités 
Maintenant tu as plusieurs exemples
Merci. Ca doit etre un vrai sapin de noel ton dashboard !
Et sinon juste pour changer l’icon en fonction de l’etat, possible ?
En fait pas vraiment, je suis plus sur des choses assez basiques
Par contre j’ai un dashboard spécial « test », ou je cumule des dizaines de cartes pour des essais.
Oui mais pas que avec « card-mod », ça peut aussi se faire avec « custom-ui » et ainsi la modif de l’icône est dispo « partout ».
Je te laisse faire une petite recherche sur le forum, tu devrais trouver pas mal d’exemple
Salut,
regarde ce post.
1 « J'aime »
Ca marche pas pour du texte. voici mon code
- entity: sensor.rt2_teleinfo_ptec
card_mod:
style:
ha-state-label-badge $ ha-label-badge: |
{% if is_state('sensor.rt2_teleinfo_ptec', 'HPJR') %}
.big {
animation: blink 2s linear infinite;
}
@keyframes blink {
from {opacity: 0;}
to {opacity: 100;}
from {opacity: 100;}
to {opacity: 0;}
}
{% endif %}
Si si ça fonctionne …
C’est juste que ma template est basée sur une entité qui est soit « on », soit « off », et qui affiche « allumé » /« éteint ».
Donc forcement tu es obligé d’adapter à ton entité, d’ailleurs si tu mets :
{% if is_state(config.entity, 'HPJR') %}
Mon petit doigt me dit que ça va fonctionner
Ton code fonctionne oui sur une entité light.
Par contre je comprends pas ta dernière réponse. C’est bien ce que j’ai fait dans mon code…
{% if is_state('sensor.rt2_teleinfo_ptec', 'HPJR') %}
Ou j’ai loupé un truc…
Si la template se base sur la même entité que le badge lui même, tu n’es pas obligé de recopier le nom de cette entité les X fois où tu en auras besoin :
C’est un « raccourcis » permis par card-mod.
Ah ok d’acc.
Mais non toujours pas
- entity: sensor.rt2_teleinfo_ptec
card_mod:
style:
ha-state-label-badge $ ha-label-badge: |
{% if is_state(config.entity, 'HPJR') %}
.big {
animation: blink 2s linear infinite;
}
@keyframes blink {
from {opacity: 0;}
to {opacity: 100;}
from {opacity: 100;}
to {opacity: 0;}
}
{% endif %}
Ouais désolé, je commence à ne plus suivre 
Le clignotement fonctionne sur ton exemple car la classe est big fournie par l’entité light à minimum.
Dans mon cas, je n’ai qu’un sensor classique non rattaché à une classe.
Dans l’exploreur DOM de chrome, je vois que mon texte est lié à la classe SPAN tout court et non SPAN.big.
Du coup je n’arrive pas à le transposer.
Si je met host, c’est le badge complet qui clignote (logo, label et texte)
Essaies ça pour voir :
- entity: sensor.rt2_teleinfo_ptec
card_mod:
style:
ha-state-label-badge $ ha-label-badge $ .badge-container .label-badge: |
{% if is_state(config.entity, 'HPJR') %}
.value {
animation: blink 2s linear infinite;
}
@keyframes blink {
from {opacity: 0;}
to {opacity: 100;}
from {opacity: 100;}
to {opacity: 0;}
}
{% endif %}
