Display remaining seconds of timer in frontend

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

It does not work again!

I have to admit I’m a bit lost here.
How is this at all useful in a home automation context.?
It seems pointlessly processor intensive and I can’t think of a single use.
If you want to time something, to get the automation just right, use a stopwatch, there’s probably one on your phone.
I could also time the 100 metre dash at a school race meet using an IBM mainframe from the 1970’s but I don’t as there are more appropriate tools.
If you are spending time watching timers count down to zero, then you clearly are not getting any benefit from home automation.

Well. If this task is needlessly processor intensive, I am fine with it.

I use timers primarily for cooking. And I constantly need to check how much time the timer has left, for me to prepare other parts of the meal. I used to ask my Google Home but since I threw that out, I wanted to display the timer on my wall mounted tablet showing the HA interface (I use Snips now for voice which sends commands to Home Assistant)

I don’t think that use case is extremely far fetched. Granted, it has little to do with “automation”, but it makes my life a little easier not having to leave my phone in the middle of my kitchen surface for the timer alone.

Absolutely, it’s your choice, though I’m pretty hard pushed to think of any cooking action that needs precision to the second either. Still some people are really fussy about their boiled eggs :wink:

1 Like

I have been thinking about this, you could do full recipes.
You get a sounder of some sort. (I have a neo coolcam siren, not as intrusive as it sounds, it can be set to different tunes, 3 seconds or so)
You populate an input_select with your recipe steps, you populate another with the times between, then you start the recipe, it tells you what to do, then it alerts you for the next step, the next step etc.
Again I wouldn’t do it but, there is probably an ocd epicurean out there. :rofl:

Edit: that’s two selects per recipe, you might end up with quite a few and organising them would be ‘interesting’ but if done as packages you could share recipes. :rofl: :rofl:

1 Like

Hey guys,

Long time ago - but I assume, some are still interested in a solution!

Came across this post while looking for some more information, but couldn’t find anything that was easy to do and then decided to tweak around and actually just found a way! :smiley:

I use picture-entity combined with a state-badge to mimic a glance card, the timer is always up-to-date and only shows when it’s “active”:

21

Here’s my card:

        - elements:
          - conditions:
              - entity: timer.test1
                state: active
            elements:
              - entity: timer.test1
                hold_action:
                  action: null
                style:
                  color: transparent
                  font-size: 150%
                  left: 85%
                  top: 15%
                tap_action:
                  action: null
                type: state-badge
            hold_action:
              action: null
            tap_action:
              action: null
            type: conditional
          - conditions:
              - entity: light.test
                state_not: blabla
            elements:
              - entity: light.test
                hold_action:
                  action: toggle
                style:
                  left: 50%
                  top: 50%
                tap_action:
                  action: more-info
                type: state-icon
            hold_action:
              action: null
            tap_action:
              action: more-info
            type: conditional
        image: /local/test-30x100px-transparent.png
        type: picture-elements

(don’t mind the “state_not: blabla”, as this is only to get the light-icon permanent)

The background image is just a transparent 30x100px png which I created in GIMP.

Now, you have to add/change the following to/in your theme to hide the badge circles and background, otherwise it doesn’t look good aesthetically - this will also change other badges (tweak around with this one, but also remember what it was before, if you don’t want to lose anything)

label-badge-background-color: "var(--paper-card-background-color)"
label-badge-border-color: "transparent"
label-badge-red: "transparent"
label-badge-text-color: "darkgrey"
2 Likes

That looks like a much cleaner solution then the kludge I did.

I created an input number that would record the as_timestamp(now()) when the timer was started, and then another sensor that would calculate the active timer_duration - (input_number - as_timestamp(now())) to work out how long was left on the timer. It works perfectly but is impractical to do for all timers, I only do it where I need to know how long is left on a timer, to add or minus time from an existing running timer or I want something I can visually see on the GUI.

1 Like

this works for me.
how do i allow the card to be shown even if the timer is idle?

Don’t use a Conditional Card?