Help, how do get an icon to blink?

Configuration Frontend
1

Hi all,

i’m in home assistant for about 10 months now and really enjoying it!!

For one of my dashboards i want to show certain states on my wallpanel.

The case:
I have a horizontal stack with mushroom chips, each chip for a diferent state with a color changing icon. i got this working with template chips and is working exacly as planed.

I would like the chips to blink when they are in a certain state, for example:
i have a chip (the 6th chip in the yaml) that when the waterpressure from the central heating drops below 1,6 bar the chip turns red and i get every hour a notification on my phone, when i single click the chip it toggles the automation on/off so it stops nagging me all day, when the automation is off the icon turns yellow.

I would like the icon to also blink when the automation is off

If i put the following in the yaml all the chips start to blink when the state is true

card_mod:
style: |
{% if is_state(‘automation.notify_cv_druk_laag’,‘off’) %}
ha-card { animation: blink 1s linear infinite; }
@keyframes blink { 50% {opacity: 0;} }
{%- endif %}

any thoughts?

ps: i’m from the netherlands, so sorry if my english isn’t always correct.

My current config:

type: horizontal-stack
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: light
        entity: light.toilet_licht
        tap_action:
          action: toggle
        icon: mdi:paper-roll
        content_info: none
        use_light_color: true
      - type: light
        entity: light.hal_licht
        tap_action:
          action: toggle
        icon: mdi:hanger
        use_light_color: true
        content_info: none
      - type: light
        entity: light.strip
        use_light_color: true
        tap_action:
          action: toggle
        icon: mdi:countertop
        content_info: none
      - type: light
        entity: light.stopcontact_tuin
        tap_action:
          action: toggle
        content_info: none
        icon: mdi:flower
        use_light_color: true
    alignment: start
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: alarm_control_panel.alarmo
        icon: mdi:shield-outline
        icon_color: >-
          {{ 'grey' if states('alarm_control_panel.alarmo') == 'disarmed' else
          'orange' if states('alarm_control_panel.alarmo') == 'arming' else
          'red' if states('alarm_control_panel.alarmo') == 'armed_away' else
          'purple' if states('alarm_control_panel.alarmo') == 'armed_home' }}
    alignment: center
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - condition: or
            conditions:
              - condition: state
                entity: automation.notify_cv_druk_laag
                state: 'off'
              - condition: state
                entity: input_boolean.status_cv_chip
                state: 'on'
        chip:
          type: template
          icon_color: >-
            {{ 'red' if states('input_boolean.status_cv_chip') == 'on' else
            'yellow' if states ('automation.notify_cv_druk_laag') == 'off' else
            'null' }}
          tap_action:
            action: call-service
            service: automation.toggle
            target:
              entity_id: automation.notify_cv_druk_laag
          entity: input_boolean.status_cv_chip
          icon: mdi:water-boiler-alert
      - type: conditional
        conditions:
          - condition: numeric_state
            entity: counter.stofzuig_counter
            above: 1
        chip:
          type: template
          icon_color: >-
            {{ 'grey' if states('counter.stofzuig_counter') == '0' else 'green'
            if states('counter.stofzuig_counter') == '1' else 'yellow' if
            states('counter.stofzuig_counter') == '2' else 'red' if
            states('counter.stofzuig_counter') == '3' }}
          icon: mdi:vacuum
      - type: conditional
        conditions:
          - condition: numeric_state
            entity: counter.vuilnis
            above: 1
        chip:
          type: template
          icon: phu:garbage-residual
          icon_color: >-
            {{ 'grey' if states('counter.vuilnis') == '0' else 'green' if
            states('counter.vuilnis') == '1' else 'yellow' if
            states('counter.vuilnis') == '2' else 'red' if
            states('counter.vuilnis') == '3' }}
      - type: conditional
        conditions:
          - condition: or
            conditions:
              - condition: state
                entity: sensor.afvalwijzer_today
                state: GFT
              - condition: state
                entity: sensor.afvalwijzer_tomorrow
                state: GFT
        chip:
          type: template
          icon: mdi:trash-can-outline
          icon_color: green
          entity: sensor.afvalwijzer_gft
    alignment: end

Chips
Chips1920×232 16.8 KB

2

this will make the mushroom chip blink.

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:home
    icon_color: red
    entity: automation.frigate_eventsv2
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        animation: blink 1.5s ease-in-out infinite;;
      }

      @keyframes blink {
        100% {opacity: 0;}
      }
3

To get multiple chips to animate just extend the animation to the next child

type: horizontal-stack
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - condition: or
            conditions:
              - condition: state
                entity: sensor.afvalwijzer_tomorrow
                state: GFT
              - condition: state
                entity: sensor.afvalwijzer_tomorrow
                state: GFT
        chip:
          type: template
          icon: mdi:trash-can-outline
          icon_color: green
          entity: sensor.afvalwijzer_gft
      - type: conditional
        conditions:
          - condition: or
            conditions:
              - condition: state
                entity: sensor.afvalwijzer_tomorrow
                state: GFT
              - condition: state
                entity: sensor.afvalwijzer_tomorrow
                state: GFT
        chip:
          type: template
          icon: mdi:trash-can-outline
          icon_color: green
          entity: sensor.afvalwijzer_gft
    
    card_mod:
      style:
        mushroom-template-chip:nth-child(1)$: |
          ha-state-icon {
             animation: blink 1s linear infinite;
          }
          @keyframes blink { 50% {opacity: 0;}
          }       
        mushroom-template-chip:nth-child(2)$: |
          ha-state-icon {
             animation: blink 1s linear infinite;
           }
           @keyframes blink { 50% {opacity: 0;}
           }
4

@LiQuid_cOOled reply is alot more detailed than mine lol. although it took me over 30 minutes to workout how to get the chip to blink, and took him less than 10 to come up with your detailed response. :blush:

1 Like
5

Chips are the most finicky of the mushroom cards to mod.

6

Hej guys, thanks for the help and sorry for the late response.

Got the blinking of a single chip part working! i was wondering, is it also posible to let it only blink when it’s in a certain state.

I would like the chips to blink when they are in a certain state, for example:
i have a chip (the 6th chip in the yaml) that when the waterpressure from the central heating drops below 1,6 bar the chip turns red and i get every hour a notification on my phone, when i single click the chip it toggles the automation on/off so it stops nagging me all day, when the automation is off the icon turns yellow.

I would like the icon to also blink when the automation is off

7

Here is an example of templating the animation in card mod

card_mod:
  style:
    mushroom-conditional-chip:nth-child(6):
      mushroom-template-chip$: |
        {% if states('sensor.your_sensor') | int <= 1 %}
         ha-state-icon {
          --color: red !important;
          animation: blink 1s linear infinite;
            }
         @keyframes blink { 50% {opacity: 0;}
          {% endif %} }