I’ve got a picture-elements card configured nicely. I wanted to add custom CSS to get a fan icon rotating, so I’ve installed card-mod. Using this great post as a starting point, I can make an icon (ha-svg-icon) rotate, but I can’t make it state-based.
If I try to add a [data-state="on"] attribute selector to the ha-icon element, it applies too high up in the CSS, and only gets injected if it matches the state at page refresh.
If I move the CSS up to the ha-icon, it selectively applies by state in real-time (no refresh required, red background added for testing), but it doesn’t rotate!
Oh, you’re saying I should do the condition check through HA state instead of using a CSS selector for the data attribute? Ok, I’ll have a look into that tomorrow. Never tried it.
Sorry @arrikhan / @renk1, I have barely used this since I set it up. Took me a few minutes to even find where this was configured!! Anyway, apparently it doesn’t work anymore No more rotation.
If I get time/inspiration to look into it AND I find a fix, I’ll post back.
I have played around a bit with the code to make it display and control two separate fans with just one icon (direction,color, speed and tap etc.). As a state-icon on a picture-elements card in a hui-element card in a fold-entity-row on an entities-card.
entities:
- type: custom:fold-entity-row
style:
ha-icon:
$: |
ha-svg-icon {
color: var(--my-font99-color); # chevron
}
head:
entity: sensor.dummy_fold # quick-fix for no section lines
name: Fans & More
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
border: solid 0px ;
}
padding: 15
open: false
entities:
- type: custom:hui-element
card_type: picture-elements
style: |
ha-card {
height: 53px !important;
}
image: /local/pix.gif
elements:
- type: state-icon
entity: input_boolean.dummy_always_off # dummy to stick the icon to
icon: mdi:fan # the icon to stick the combined functionality to.
tap_action:
action: call-service
service: automation.trigger
target:
entity_id: automation.fan_switch
double_tap_action:
action: call-service
service: scene.turn_on
target:
entity_id: scene.fan_all_on
hold_action:
action: call-service
service: scene.turn_on
target:
entity_id: scene.fan_all_off
style:
top: 5%
left: 5%
'--mdc-icon-size': 32px
card_mod:
style:
state-badge:
$:
ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
animation: {% if is_state('switch.fan_left','off') and is_state('switch.fan_right','off') %} rotation 0.0s linear infinite {% elif is_state('switch.fan_left','off') and is_state('switch.fan_right','on') %} rotation 5.0s linear infinite {% elif is_state('switch.fan_left','on') and is_state('switch.fan_right','off') %} rotation 7.0s linear infinite {% else %} rotation 1.0s linear infinite {% endif %}; }
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: {{ 'rotate(-360deg)' if is_state('switch.fan_left','on') else 'rotate(360deg)' }};
}
}
.: |
:host {
--paper-item-icon-color: {% if is_state('switch.fan_left','off') and is_state('switch.fan_right','off') %} #3B3B3B {% elif is_state('switch.fan_left','off') and is_state('switch.fan_right','on') %} indianred {% elif is_state('switch.fan_left','on') and is_state('switch.fan_right','off') %} darkolivegreen {% else %} orange {% endif %};
show_state: false```