Style Attributes to Chip Icons

[murriano]

Hello! I'd like to make a feature suggestion, if I may. With cards like the custom-button card, you are able to add style attributes to do things like blink the icon or make it bounce under certain conditions. Would that be something that could be considered to be added for the chip entities? For example, for my basement room card, I want to either pulse or shake the washer or dryer icon to show that the washer or dryer is running. Just a thought!

Thanks!

[warmfire540]

@murriano this would be possible using card-mod. however maybe I can do it without the user needing additional cards.

button-card has been a huge inspiration though, can you show me a picture and and example yaml of you doing this with button card? Then I can repeat on my end and see if that's easily accomplished. The "washer" shaking is pretty neat and I think would win my wife's approval :)

[murriano]

@warmfire540 see below. This is using custom button cards and when the status changes (which is a template entity based on the current power draw)

type: custom:button-card
extra_styles: |
  @keyframes wiggle { 
    0% {
      webkit-transform: rotate(3deg);
      transform: rotate(3deg);
        }
    100% { 
      webkit-transform: rotate(-3deg); 
      transform: rotate(-3deg);
          }
      }
  @keyframes blink {}  

  @keyframes pulse {
    0% {
      color: unset;
      opacity: 0.5
    }
    50% {
      color: red;
    }
    100% {
      color: unset;
      opacity: 0.5
    }
  }
entity: sensor.washing_machine_status
name: washer
tap_action:
  action: more-info
  haptic: success
hold_action:
  action: none
double_tap_action:
  action: none
size: 80px
show_state: true
icon: mdi:washing-machine
styles:
  name:
    - font-weight: bold
    - font-size: 11px
    - text-transform: uppercase
  state:
    - text-transform: uppercase
    - font-size: 8px
  card:
    - height: 155px
state:
  - value: washing
    styles:
      icon:
        - animation: wiggle .5s alternate infinite
  - value: "off"
    style:
      icon:
        - animation: pulse 1s linear infinite

Wiggle.Icon.mp4

[warmfire540]

ok let me see how button-card pulls this off. if it's too much work, maybe i'll add a flag that will use button-card under the hood, and you can supply custom styles/state styles and i'll just pass them to button-card

[warmfire540]

@murriano let me know if this would suffice. in the entities section I will allow you to add a card property. here you can paste any card template as you normally would.

here is me testing using button-card with various style/state attributes, including the one you sent (even though mine wouldn't wiggle for some reason, but probably you can get it to work.)

here is an example of mine:

[warmfire540]

if still interested i can try and work on this again, let me know if you're using the card still 🌮