Bonjour,
Sur mes anciens badges, je pouvais animer le petit logo en fonction de l’état.
type: entity
entity: input_boolean.courrier_present
icon: mdi:mailbox
name: Boîte aux lettres
card_mod:
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .value {
{% if is_state('input_boolean.courrier_present', 'on') %}
animation: jump 1.2s cubic-bezier(0,1.03,1,.01) 0s infinite normal;
color: yellow;
{% endif %}
}
.badge-container .label-badge {
{% if is_state('input_boolean.courrier_present', 'on') %}
--ha-label-badge-color: yellow;
{% elif is_state('input_boolean.courrier_present','off') %}
--ha-label-badge-color: black;
{% endif %}
}
@-webkit-keyframes jump{
0%,12%,100%{ transform:rotate(0); filter: brightness(1); }
4%,8%{ transform:rotate(40deg) translateX(-0px);filter: brightness(10);}
6%,10%{ transform:rotate(-40deg)translateX(0px);filter: brightness(10); }
}
@keyframes jump{
0%,12%,100%{ transform:rotate(0); filter: brightness(1); }
4%,8%{ transform:rotate(40deg) translateX(-0px);filter: brightness(10);}
6%,10%{ transform:rotate(-40deg)translateX(0px);filter: brightness(10); }
}
Maintenant j’ai celui là que je voudrais animer :
type: custom:mushroom-template-badge
content: |
{% if is_state('vacuum.roomba', 'cleaning') %}
Ménage en cours
{% elif is_state('vacuum.roomba', 'docked') %}
Sur sa base
{% elif is_state('vacuum.roomba', 'paused') %}
En pause
{% elif is_state('vacuum.roomba', 'returning') %}
Retour à la base
{% elif is_state('vacuum.roomba', 'error') %}
En erreur
{% endif %}
icon: mdi:robot-vacuum
color: |-
{% if is_state('vacuum.roomba', 'cleaning') %}
green
{% elif is_state('vacuum.roomba', 'docked') %}
white
{% elif is_state('vacuum.roomba', 'paused') %}
orange
{% elif is_state('vacuum.roomba', 'returning') %}
blue
{% elif is_state('vacuum.roomba', 'error') %}
red
{% endif %}
label: 'Robot '
entity: vacuum.roomba
tap_action:
action: more-info
Merci pour votre aide
BBE
Octobre 16, 2024, 2:08
2
This topic is technically a cross post from a reply to the Mushroom Card Topic found here: Part 1. But it was suggested in a comment to post it here as a guide instead. Below info is true as of Mushroom Version 3.6.4 and Card Mod Version 3.4.3 ...
Reading time: 252 mins 🕑
Likes: 670 ❤
le lien magique pour faire du card_mod et du mushroom.
Je viens de tomber dessus à l’instant sur un autre post. Je vais regarder ça merci!
BBE
Octobre 16, 2024, 2:12
4
Il n’y a pas « encore » le nouveau badge dedans…
Mais essaye avec soit le template chip, soit la carte template ça ne doit pas être très loin de l’une ou l’autre des syntaxes (je parierai pour les chips…)
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
mushroom-entity-chip:nth-child(2)$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
mushroom-action-chip:nth-child(3)$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
mushroom-light-chip:nth-child(4)$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
mushroom-weather-chip:nth-child(5)$: |
ha-state-icon {
# Cant be changed as it is not a normal HA icon.
}
mushroom-template-chip:nth-child(6)$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
mushroom-alarm-control-panel-chip:nth-child(7)$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
mushroom-back-chip:nth-child(8)$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
mushroom-menu-chip:nth-child(9)$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
dans cette syntaxe je remplacerai
En espérant que ça colle…
J’ai essayé ça mais cela ne marche pas :
card_mod:
style:
mushroom-conditional-badge:nth-child(1):
mushroom-template-badge: |
ha-state-icon {
animation: jump 1.2s cubic-bezier(0,1.03,1,.01) 0s infinite normal;
}
@-webkit-keyframes jump{
0%,12%,100%{ transform:rotate(0); filter: brightness(1); }
4%,8%{ transform:rotate(40deg) translateX(-0px);filter: brightness(10);}
6%,10%{ transform:rotate(-40deg)translateX(0px);filter: brightness(10);}
}
@keyframes jump{
0%,12%,100%{ transform:rotate(0); filter: brightness(1); }
4%,8%{ transform:rotate(40deg) translateX(-0px);filter: brightness(10);}
6%,10%{ transform:rotate(-40deg)translateX(0px);filter: brightness(10);}
}
BBE
Octobre 16, 2024, 2:47
6
Ben là tu as pris la syntaxe du chip conditionnel qui est hyper spécialisée (deux chips imbriqués…) tu aurai du essayer celles d’en dessous…
Mais fais une recherche sur le forum anglophone, j’ai regardé 2 min et je suis tombé sur des posts disant que c’est impossible pour l’instant…
Perso je ne fais pas tourner mes icones… Difficile d’en faire plus.
Genre ça:
card_mod:
style:
mushroom-template-badge:nth-child(1)$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}