Il faut superposer les images (le forum gère mal la transparence):
Une image de fond (pas jointe)
Une image pour le sapin (il est pas dans l’image de fond chez moi)
Une image pour avoir un effet lumineux (halo)
Et les guirlandes de couleurs
Ensuite il faut empiler tout ça avec
type: picture-elements
card_mod:
style: |
@keyframes my-blink {
from {opacity: 0;}
to {opacity: 100;}
from {opacity: 100;}
to {opacity: 0;}
}
image: /local/images/floors/rdc/base.png
elements:
- type: image
entity: automation.guirlande_off
image: /local/images/empty.png
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': /local/images/floors/rdc/items/sapin.png
tap_action: none
- type: image
image: /local/images/empty.png
style:
top: 50%
left: 50%
width: 100%
animation: my-blink 0.4s linear infinite
entity: switch.prise
tap_action:
action: none
state_image:
'on': /local/images/floors/rdc/items/sapin_on.png
- type: image
image: /local/images/empty.png
style:
top: 50%
left: 50%
width: 100%
animation: my-blink 1.9s linear infinite
entity: switch.prise
tap_action:
action: none
state_image:
'on': /local/images/floors/rdc/items/sapin_vert.png
- type: image
image: /local/images/empty.png
style:
top: 50%
left: 50%
width: 100%
animation: my-blink 1.4s linear infinite
entity: switch.prise
tap_action:
action: none
state_image:
'on': /local/images/floors/rdc/items/sapin_bleu.png
- type: image
image: /local/images/empty.png
style:
top: 50%
left: 50%
width: 100%
animation: my-blink 1.1s linear infinite
entity: switch.prise
tap_action:
action: none
state_image:
'on': /local/images/floors/rdc/items/sapin_jaune.png
- type: image
image: /local/images/empty.png
style:
top: 50%
left: 50%
width: 100%
animation: my-blink 0.6s linear infinite
entity: switch.prise
tap_action:
action: none
state_image:
'on': /local/images/floors/rdc/items/sapin_rouge.png
- Quand l’automatisation est active => on affiche le sapin
- Quand la prise est active => on affiche en plus le halo, et les couleurs
- Astuce : mettre une durée d’animation différente pour les couleurs, que ça donne un effet asynchrone