Icon toggling/flashing code

Configuration Frontend
,
1

Here’s a code that will make your icon change every second:

sensor:
  - platform: template
    sensors:
      toggling_icon_sensor:
		friendly_name: Toggling Icon
		value_template: >
		  {% if true %}
            Flash
          {% else %}
            Steady
          {% endif %}
		icon_template: >
          {% elif is_state('sensor.toggling_icon_sensor', 'Flash') %}
            {% if states('counter.heartbeat_counter')|int % 2 == 0 %}
              mdi:recycle
            {% else %}
              mdi:trash-can
            {% endif %}
          {% else %}
            mdi:trash-can
          {% endif %}

counter:
  heartbeat_counter:
    name: Heartbeat Counter
    restore: true
    minimum: 1
    maximum: 9999
    initial: 1
    step: 1

automation:
  - alias: Publish Heartbeat
    trigger:
      - platform: time_pattern
        seconds: '/1'
    action:
      - service: counter.increment
        entity_id: counter.heartbeat_counter
          
  - alias: Reset Heartbeat
    trigger:
      - platform: template
        value_template: '{{ (states.counter.heartbeat_counter.state|int) >= (states.counter.heartbeat_counter.attributes.maximum|int) }}'
        for: "00:00:01"
    action:
      - service: counter.reset
        entity_id: counter.heartbeat_counter

Video: https://www.facebook.com/jean.gauthier.96/videos/10157567254297270/

Here’s a code that will make you icon color flash every second:

sensor:
  - platform: template
    sensors:
      flashing_pulse:
        entity_id: 
          - sensor.dates_second
        value_template: >
          {% if states('sensor.dates_second')|int % 2 == 0 %}
            on
          {% else %}
            off
          {% endif %}
      flashing_icon_sensor:
		entity_id: 
          - sensor.dates_second
        value_template: >
          on

customize:
  sensor.flashing_icon_sensor:
  custom_ui_state_card: state-card-custom-ui
  templates:
    icon_color: >
      if (entities['sensor.flashing_pulse'].state === 'on') return '#FFC000';
      return '#2F7EFD';

counter:
  heartbeat_counter:
    name: Heartbeat Counter
    restore: true
    minimum: 1
    maximum: 9999
    initial: 1
    step: 1

automation:
  - alias: Publish Heartbeat
    trigger:
      - platform: time_pattern
        seconds: '/1'
    action:
      - service: counter.increment
        entity_id: counter.heartbeat_counter
          
  - alias: Reset Heartbeat
    trigger:
      - platform: template
        value_template: '{{ (states.counter.heartbeat_counter.state|int) >= (states.counter.heartbeat_counter.attributes.maximum|int) }}'
        for: "00:00:01"
    action:
      - service: counter.reset
        entity_id: counter.heartbeat_counter

Video: https://www.facebook.com/jean.gauthier.96/videos/10157567550057270/

2

(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)

6

This is an extremely complicated way to get this to work. You can do this much easier with css and custom cards. On top of that, it’s going to hog system resources where a UI representation of this (css + custom card) wouldn’t hog anything.

7

Cool, it would be great if you can provide an example (and details to implement it) as I’m not used to css… I use this option a lot, and it could become a concern… Thanks :slight_smile:

8

Yah, it’s gonna be a few days, out on business. I need to play around with the css to get icons workinggn. The flash is super simple. Just don’t have the code on hand.

9

Thanks :grin:

10

I am also interested how to use css to do this…
I would like to use this in case of closing a gate…
During the closing the switch should flashing…
Any idea how to do this?

Thank you

11

Yeah, I had forgotten about this… but my setup still works and it’s widely used without noticeable effects…

BUT, I’d really like to have something easier and cleaner…

12

hi,
The sensor Configuration in the example is incomplete.
And I do not have sensor.dates_second. Is it a system sensor?
Thank you

13

Hi,

This is simply a trigger to redo “calculation” of the sensor template. You need something that changes every second. At first, I had created a sensor.dates_second, but you should simply replace it with counter.heartbeat_counter

  - platform: template
    sensors:
      flashing_pulse:
        entity_id: 
          - counter.heartbeat_counter
        value_template: >
          {% if states('counter.heartbeat_counter')|int % 2 == 0 %}
            on
          {% else %}
            off
          {% endif %}
      flashing_icon_sensor:
		entity_id: 
          - counter.heartbeat_counter
        value_template: >
          on
14

Oops, Sorry I noticed I never responded. Anyways, to do a simple blink without all the extra fluff you can add an animation using card mod or custom-button card:

Here’s a simple flashing custom:button card.

- type: "custom:button-card"
  color_type: card
  entity: binary_sensor.intruder
  name: Intruder Alert
  state:
    - value: "on"
      color: red
      icon: mdi:alert
      styles:
        card:
          - animation: blink 2s ease infinite
    - operator: default
      color: green
      icon: mdi:shield-check

the important bit is:

          - animation: blink 2s ease infinite

That’s what’s doing the blinking.

4 Likes
15

That’s cool and will work perfect for something else in my project, BUT, it’s not looking at all like mines…

Toggle example
Blink example

16

thank you.