@nuiler next time you post your code use three backticks (also called backquotes which are above the left tab key and to the left of the number 1 key on your keyboard) before and after your code. It will display your code in the format the you’re using it. Below is an example.
Hi. I’m trying to figure out how to have multiple icons with their animations triggered by different entities. Your code works great with one icon. I tried duplicating the ha-card part but don’t really have the skills. Do you have any ideas?
@cappadanna I’m a little confused. Do you mean one card that shows multiple icons for separate entities and that trigger based on their state or do you mean one card that will show and trigger a different icon based on the state of separate entities? And sorry if my question seems even more confusing. I’m just trying to figure out exactly what you’re trying to do.
If you’re trying to add multiple icons for multiple entities you need to add additional style and element code for them. For example if adding two more entities you add them under elements: and then also add additional style code with a different name for the --state-color:, --state-animation:, and rotation and use whatever parameters you want for each one. Be sure to change all instances of them accordingly. Also change the location under top: and bottom: so they do not sit on top of one another. Try adding one before you add two. Less chance of writing the wrong code and then easier to troubleshoot. (Hopefully I don’t make any errors when I added the notation for you.)
type: picture-elements
image: (don't forget your background image)
style: |
ha-card {
{% if is_state('binary_sensor.nibecompressor','on') %}
--state-color: #FDD835;
--state-animation: rotation 2s linear infinite;
{% else %}
--state-color: #44739E;
{% endif %}
{% if is_state('binary_sensor.nibecompressor','on') %} (change to second entity)
--state-color-1: #FDD835; (change name)
--state-animation-1: rotation-1 3s linear infinite; (change both names)
{% else %}
--state-color-1: #44739E; (use changed name from above)
{% endif %}
{% if is_state('binary_sensor.nibecompressor','on') %} (change to third entity)
--state-color-2: #FDD835; (change name)
--state-animation-2: rotation-2 4s linear infinite; (change both names)
{% else %}
--state-color-2: #44739E; (use changed name from above)
{% endif %}
}
@keyframes rotation {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
@keyframes rotation-1 { (change name)
0% {transform: rotate(0deg)}
50% {transform: rotate(90deg)}
100% {transform: rotate(360deg)}
}
@keyframes rotation-2 { (change name)
0% {transform: rotate(180deg)}
100% {transform: rotate(360deg)}
}
elements:
- type: state-icon
state_color: false
entity: binary_sensor.nibecompressor
icon: mdi:fan
style:
top: 63%
left: 36%
transform: translate(0,0)
position: absolute
'--paper-item-icon-color': var(--state-color)
animation: var(--state-animation)
- type: state-icon
state_color: false
entity: binary_sensor.nibecompressor (change to second entity)
icon: mdi:fan (change icon if necessary)
style:
top: 63% (adjust so they're not on top of each other)
left: 46% (adjust so they're not on top of each other)
transform: translate(0,0)
position: absolute
'--paper-item-icon-color': var(--state-color-1) (change name accordingly)
animation: var(--state-animation-1) (change name accordingly)
- type: state-icon
state_color: false
entity: binary_sensor.nibecompressor (change to third entity)
icon: mdi:fan (change icon if necessary)
style:
top: 63% (adjust so they're not on top of each other)
left: 46% (adjust so they're not on top of each other)
transform: translate(0,0)
position: absolute
'--paper-item-icon-color': var(--state-color-1) (change name accordingly)
animation: var(--state-animation-1) (change name accordingly
Thank you so much, I meant multiple icons with different entities. I didn’t understand that I had to use different names for the state-color etc. but now it makes perfect sense. Thanks for great explanation!
