Display remaining seconds of timer in frontend

[petro]

@123

Before it can be tested, the template needs this minor adjustment because h , m , and s are strings:

(n + h|int * 60 * 60 + m|int * 60 + s|int)

Yep fixed the template

@123

When the associated timer begins its countdown, the Template Sensor displays the timestamp. However, during the countdown, it doesn’t change because its entity_id (the associated timer) maintains a constant state of active and none of its attributes change.

This shouldn’t matter. Adding device_class: timestamp with a timestamp causes the UI to treat the datetime as a relative time. So it should count up or down without state changes when placed into UI elements that utilize the timestamp deviceclass.

EDIT: This is how ‘last_updated’, ‘last_changed’, and ‘last_triggered’ works in the UI by the way.

EDIT2: The states page will just have the timestamp like you see in your pic.

EDIT3: The only question is, (haven’t tested) Does relative time work for future timestamps? My memory says yes.

[123 (Taras)]

I have no luck getting it to work.

That’s a screenshot of this:

views:
  - title: Timer Test
    badges:
      - entity: timer.my_timer
      - entity: sensor.my_timer_end
    cards:
      - type: entities
        title: ''
        entities:
          - entity: timer.my_timer
          - entity: sensor.my_timer_end

• timer.my_timer displayed as a badge or in an entities card, displays its countdown.
• sensor.my_timer_end displays the full duration in a badge and Invalid date in an entities card but never shows a countdown.

Regardless of whether timer.my_timer is idle or active, the state of sensor.my_timer_end remains fixed at my_timer's duration (5 minutes in this example).

[petro]

Hmm, I just noticed this:

Mistake in my template? It should just be the timestamp but it also has the duration?

[123 (Taras)]

Aaargh! That’s my mistake! I was experimenting with the template and that leading time is a leftover (from the Template Editor) that I copied into the sensor’s configuration.

It works now and looks like this:

[petro]

Nice, I would be interested to see what happens with the template under 1 minute. Also what happens if you pause

[123 (Taras)]

Hmm. Paused with 1:41 remaining.

Even though the timer remains paused, the sensor continues to report the time difference and proceeds to say:
In 4 minutes
In 3 minutes
In 2 minutes
In 1 minute
In 59 seconds
etc

It then proceeds to “wrap around” and tell you how long ago the timer allegedly finished (even though it is actually still paused).

Upon starting the paused timer, the sensor resets itself to the original duration.

[klogg]

Until v113 my timers in buttons updated (showed a countdown) in the frontend but now they have reverted to the ‘old’ behaviour - when the view loses focus it stops updating until the browser is refreshed.

I have no idea if this similar to or related to the old bug…

@RomRider

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

@RomRider

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

[RomRider]

Is it happening with core buttons also?

[klogg]

I don’t use any core buttons
I’ll set one up and check…

[klogg]

@RomRider

Is it happening with core buttons also?

After some testing I can say, no it is not happening in core buttons.

[RomRider]

Alright, please file a bug on github, I’m going to have a look

[klogg]

Done, thanks.

[alessandro.bardi]

Hi,
i’ve tried to show countdown with the code above but it’s something wrong:

Thank you so much for any help.
Regards,

Alessandro

[Wiz (Vladimir)]

Good work! But I don’t see definition of sensor.timer_duration_aircon_run that comes in automation. It’s time that’s determined in UI?

[callifo]

Yeah looks like I missed that one, I’ve updated the original post. Its an MQTT sensor.

[Cool_Hansen]

I tried to adapt this template for two different timers. But I can’t get it to work.
I have this in configuration.yaml:

timer:
  rasen:
    duration: '02:23:00'
    icon: mdi:timer-outline
  beete:
    duration: '01:20:00'
    icon: mdi:timer-outline

sensor:
  - platform: time_date
    display_options:
      - 'time'
      - 'date'
      - 'date_time'
      - 'date_time_utc'
      - 'date_time_iso'
      - 'time_date'
      - 'time_utc'
      - 'beat'
  - platform: template
    sensors:
      rasen_timer_end:
        friendly_name: "Rasen Timer End"
        device_class: timestamp
        entity_id: timer.rasen # <--- Your timer (and first line of template)
        value_template: >-
          {%- set duration = state_attr('timer.rasen', 'duration') %}
          {%- if duration in ['none', 'idle'] %}
            unavailable
          {%- else %}
            {% set h, m, s = duration.split(':') %}
            {% set n = now().timestamp() | list | map('int') %}
            {{ (n + h|int * 60 * 60 + m|int * 60 + s|int) | timestamp_custom('%Y-%m-%dT%H:%M:%S-00:00', False) }}
          {%- endif -%}
      beete_timer_end:
        friendly_name: "Beete Timer End"
        device_class: timestamp
        entity_id: timer.beete # <--- Your timer (and first line of template)
        value_template: >-
          {%- set duration = state_attr('timer.beete', 'duration') %}
          {%- if duration in ['none', 'idle'] %}
            unavailable
          {%- else %}
            {% set h, m, s = duration.split(':') %}
            {% set n = now().timestamp() | list | map('int') %}
            {{ (n + h * 60 * 60 + m * 60 + s) | timestamp_custom('%Y-%m-%dT%H:%M:%S+02:00', False) }}
          {%- endif -%}

Both timers work correct. I can start them an they show me the timestamp when finished.

The sensors are created but their states are unavailable.

What do I wrong?

[petro]

try this

          {%- set duration = state_attr('timer.rasen', 'duration') %}
          {%- if duration in ['none', 'idle'] %}
            unavailable
          {%- else %}
            {% set h, m, s = duration.split(':') | list | map('int') %}
            {% set n = now().timestamp()  %}
            {{ (n + h * 60 * 60 + m * 60 + s) | timestamp_custom('%Y-%m-%dT%H:%M:%S-00:00', False) }}
          {%- endif -%}

[Cool_Hansen]

Thank you very much. It was a step to the right way. The sensor is now updating … but … strange behaviour … the update is every 30 seconds.
For example: If I use a 5 min timer, the display says 5 min left. After 30 seconds the display says 4 min left … and … hold on to your seat … another 30 sec later it jups to … 5 min. It goes so again and again. From 5 to 4 to 5 to 4 … Even when the timer is stopped.

[obaldius]

If you are into NR, I’d give this one a go. The only downside vs the stock HA timer is it doesn’t allow to pause by default, a workaround could be done though. For the rest, it’s better than the HA timer in every way.

Node Red timer that persists after HA restart

Node Red timer that will survive an HA restart, a Node Red deploy or restart. Timer goes on and it creates an entity in HA with the remaining time. The sensor does update the remaining time in lovelace. Example for 15 minutes timer. You will need: ‘node-red-contrib-stoptimer-varidelay’ [image] [{"id":"eebfa303.35e34","type":"stoptimer-varidelay","z":"3ebeb767.8778f8","duration":"5","durationType":"num","units":"Second","payloadtype":"num","payloadval":"0","name":"Timer in Node Red","report…

[mb_EQNvD3CjP (mb)]

Valid question, I think the bottom line for me is to save space on the UI.
I use a status line that represents all sorts of statuses, that may include a timer given a switch is on for a pre-determined amount of time. Displayed nicely in a single line on the bottom of a picture elements card.

The alternative would be to display 3 input booleans, 6 input numbers, sun rise, sun set, and the timer.