Ludoc
Mars 26, 2024, 12:22
1
Bonjour/bonsoir,
J’essaye de faire une animation sur une carte mushroom-template, dans le cas où la valeur d’une entité n’est pas disponible, du style « unknown »
J’ai besoin de faire un test sur cette valeur pour déclencher l’animation, mais je boulette au niveau du test surement.
type: custom:mushroom-template-card
entity: binary_sensor.co_cuisine_fenetre_gauche_contact
icon: |
{% if is_state(entity, 'on') %}
mdi:window-open
{% elif is_state(entity, 'unknown') %}
mdi:window-close
{% else %}
mdi:window-closed
{% endif %}
icon_color: |
{% if is_state(entity, 'on') %}
red
{% elif is_state(entity, 'unknown') %}
orange
{% else %}
green
{% endif %}
card_mod:
style: |
mushroom-shape-icon$: |
{% if is_state('binary_sensor.co_cuisine_fenetre_gauche_contact', 'unknown' %}
{
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
}
Je n’ai pas vraiment trouvé de cas où c’est traité avec un test.
Ludoc
Mars 26, 2024, 4:13
2
Bon, j’arrive à quelque chose avec ça
card_mod:
style:
mushroom-shape-icon$: |
shape {
{{ '--shape-animation: spin 1s linear infinite; @keyframes blink {
50% {opacity: 0;}}' if is_state('binary_sensor.co_cuisine_fenetre_gauche_contact', 'unknown') }}
}
A l’origine, c’est une croix (mdi:window-close), elle tourne avec l’état « unknown », mais je n’arrive pas à avoir l’effet clignotant de
@keyframes blink {50% {opacity: 0;}}
Salut,
@keyframes blink {
0% {opacity: 1;}
100% {opacity: 0.2;}
Ludoc
Mars 26, 2024, 5:53
4
Hello, merci pour la réponse.
card_mod:
style:
mushroom-shape-icon$: |
shape {
{{ '--shape-animation: spin 1s linear infinite;
@keyframes blink {
0% {opacity: 1;}
100% {opacity: 0.2;}' if is_state('binary_sensor.co_cuisine_fenetre_gauche_contact', 'unknown') }}
}
Je n’ai plus rien du tout
Faut le même nom d’effet dans animation: et @keyframes
test:
card_mod:
style: |
ha-state-icon {
{% if is_state('binary_sensor.co_cuisine_fenetre_gauche_contact', 'unknown' %}
animation: blink 2s linear alternate infinite;
{% else %}
animation: none;
{% endif %}
}
@keyframes blink {
0% {opacity: 1;}
100% {opacity: 0.2;}
}
Un lien avec des exemples pour mushroom et card_mod:
Ludoc
Mars 26, 2024, 6:11
6
En effet, c’est que j’ai utilisé comme lien pour essayer de le faire, le pb est de s’avoir où mettre le test.
Le keyframes sert a configurer l’effet.
des exemples d’animation pour entities card:
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
{% if is_state('light.rpi_cooling_fan','on') %}
animation: rotation_1 2s linear infinite;
color: green
{% else %}
animation: none;
color: red
{% endif %}
}
@keyframes rotation_1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
{% if is_state('binary_sensor.0x00158d0007d49ec1_occupancy','on') %}
animation: blink 2s linear alternate infinite;
{% endif %}
}
@keyframes blink {
0% {opacity: 1;}
100% {opacity: 0.2;}
}
Je ne sais si c’est ton exemple d’animation exact, mais j’ai testé et j’ai réussi cette animation avec cela
type: custom:mushroom-template-card
primary: '{{states(''sensor.exterieure'')}}'
secondary: ''
icon: mdi:thermometer
icon_color: |-
{% if states('sensor.exterieure') | float >= 30 %} red
{% elif states('sensor.exterieure') | float >= 26 %} yellow
{% elif states('sensor.exterieure') | float >= 16 %} green
{% else %} blue
{% endif %}
badge_icon: mdi:window-close
card_mod:
style:
mushroom-badge-icon$: |
.badge {
{% if states('sensor.electrovanne_potager_weight_jeff') == 'unknown' %}
animation: ping 2s infinite;
{% else %}
{% endif %}
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
Pour l’icone:
card_mod:
style: |
ha-state-icon {
{% if states('binary_sensor.co_cuisine_fenetre_gauche_contact') == 'unknown' %}
animation: blink 2s linear alternate infinite;
{% endif %}
}
@keyframes blink {
0% {opacity: 1;}
100% {opacity: 0.1;}
}
Pour le badge:
card_mod:
style: |
mushroom-badge-icon {
{% if states('binary_sensor.co_cuisine_fenetre_gauche_contact') == 'unknown' %}
animation: blink 2s linear infinite alternate;
{% endif %}
}
@keyframes blink {
0% {opacity: 1;}
100% {opacity: 0.1;}
}
2 « J'aime »
Ludoc
Mars 26, 2024, 12:36
10
Merci @WarC0zes pour la précision sur le keyframes, en fait, je m’évertuais à vouloir l’inclure dans la partie test.
Du coup, ça va beaucoup mieux
- type: custom:mushroom-template-card
entity: binary_sensor.co_cuisine_fenetre_gauche_contact
icon: |
{% if is_state(entity, 'on') %}
mdi:window-open
{% elif is_state(entity, 'unknown') %}
mdi:window-close
{% else %}
mdi:window-closed
{% endif %}
icon_color: |
{% if is_state(entity, 'on') %}
red
{% elif is_state(entity, 'unknown') %}
orange
{% else %}
green
{% endif %}
card_mod:
style: |
ha-state-icon {
{% if states('binary_sensor.co_cuisine_fenetre_gauche_contact') == 'unknown' %}
animation: blink 1s linear alternate infinite;
{% endif %}
}
@keyframes blink {
50% {opacity: 0;}
}
Merci encore
1 « J'aime »
, même plus l’icone tournante.
