Display remaining seconds of timer in frontend

I would like to display a the remaining time of a running timer in the frontend, but only if it is actually running.

I tried creating a template sensor. But I can’t force the sensor to update every second. It always remains on the initially set time:

sensor:
  - platform: template
    sensors:
      timer_remaining:
        entity_id: sensor.time
        value_template: "{{state_attr('timer.timer', 'remaining')}}"
      timer_display:
        entity_id: timer.timer
        value_template: >
          {% if is_state('timer.timer', 'active') %}
            {{state_attr('timer.timer', 'remaining')}}
          {% else %}            
          {% endif %}

When i simple display the timer in a lovelace entity card, it does show me the remaining seconds. I want somethin like this! But only if a timer is actually running.

image

But if I try to read the state of a running timer in the template editor, I only get a state of “active”. Not even the attributes are updated.

image

How can I get the remaining time of a running timer in the frontend?

1 Like

Try this:

sensor:
  - platform: template
    sensors:
      timer_remaining:
        entity_id: timer.timer
        value_template: "{{state_attr('timer.timer', 'remaining')}}"
      timer_display:
        entity_id: timer.timer
        value_template: >
          {% if is_state('timer.timer', 'active') %}
            {{state_attr('timer.timer', 'remaining')}}
          {% else %} 
            Halted
          {% endif %}

doesn’t work.
(above my sensors, the two below are your version).

image

I tried using sensor.time for force regular updates. Maybe I need to use an automation to refresh the template sensor every second. But I don’t want to run a automation that constantly checks if a timer is running.

I tested the following and it works.

I created a timer:

timer:
 my_timer:
   duration: '00:00:30'

I displayed it in the UI using a Conditional Card:

      - type: conditional
        conditions:
          - entity: timer.my_timer
            state_not: "idle"
        card:
          type: entities
          entities:
            - timer.my_timer
  • When the timer is not running (state is idle) it is not displayed in the UI.
  • When the timer is running, it is displayed in the UI.
1 Like

Thank you for the suggestion. This doesn’t work for me, because I want to display the timer in a picture elements card. I basically need a simple ( template ) sensor, like in the snippet above, that displays what I need.

I see. I didn’t know you wanted to use a Picture Elements card (not mentioned in your first post).

How do you propose to use a Picture Elements card to conditionally display an entity?

Or is the goal to only suppress the display of the timer’s state if it is not running?

I’m also interested to see if there is a way. I dont think this is currently possible when using anything but an entity card.

I’ve seen bugs about this in the bug tracker but they were all closed.

https://github.com/home-assistant/home-assistant-polymer/issues/2159

basically, yes

That’s too bad

There is a conditional element in the picture elements card, I use it in my floorplans

I saw it mentioned in the documentation but what exactly does it control? Lukastillman doesn’t want to suppress the display of the entire timer, just the timer’s state if the timer isn’t running. Is that possible with a Picture Element card?

I forgot that, thank you

However, I tried it and it doesn’t work. The state of the timer is active and that is what’s displayed, when I add it in the picture element card. For some reason, the remaining time is only displayed in the entities card.

@123 I could have worked, if the state of the timer actually contained the remaining time.

@123, just controls visibility of the picture elements I think, that’s what I use it for

Very strange, not noticed this before. As you say, the ‘remaining’ attribute does not update when running, sure it should ? is this a bug ?

The conditional picture elements does work but as you say it just says “active”

1 Like

This has come up a lot before, including by myself.

I think the bottom line is this…

The remaining attribute does not ever update when a timer is active. In fact I believe that timers don’t even actually count down the time at all but when they are started they work out what time they will finish and then stop at that time.

Lovelace will display the countdown (I assume by working it out) but I find it doesn’t always keep updating if the tab loses focus. Also it only works at all if you do not start the timer again before it has finished. In that case it will just show active and the initial time.

@petro in another post said he looked at the code and one way to get the remaining time is to pause the timer. This will populate the remaining attribute. Not useful for time critical purposes but I can confirm it works as I have spent all day today rewriting all my PIR sensor code using pauses and starts to allow me to have reliable data with sensors that sleep for four minutes after four activations within four minutes (but that is another story).

I hope this is helpful.

1 Like

I think it is by design. I think it because it was considered too processor intensive to keep decrementing timers every second. At least I am sure I read that explanation somewhere else…

That is really too bad.

That’s a bug, but it’s not present in button-card, I fixed it there already :stuck_out_tongue:
I’ll PR a fix in HA core also.

1 Like

Brilliant! Thank you!

PR:
https://github.com/home-assistant/home-assistant-polymer/pull/3248

2 Likes