Showing a duration in frontend?

Configuration Frontend
1

I want to show a running clock in the frontend that indicates the duration since some sensor changed state.

When searching for a solution to this, I found a lot about timers and countdowns, but apparently no one wants to count time upwards, i.e. show a duration.

I even found an nice looking flipdown timer card but it seems to do nothing. It always shows 00:00, neither counts downwards nor upwards and it’s showing two ‘x’ buttons (but should show five?) which are doing nothing or resulting in errors about non existing services. But maybe I didn’t understand it’s purpose or how it should be used.

Can anyone point me into the right direction? Is there anything I could use for that purpose?

2

Besides it does not count up, but only down, the flipdown timer card works fine and flawlessly.
But you have to set initial timers in configuration.yaml

I have this in configuration.yaml:

# Timers
timer:
  kookwekker1:
    duration: "00:01:00"
  kookwekker2:
    duration: "00:01:00"

This is the card code:

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: custom:flipdown-timer-card
        show_hour: true
        show_title: true
        theme: dark
        duration: '00:01:00'
        styles:
          rotor:
            width: 60px
            height: 80px
          button:
            width: 80px
            location: bottom
        entity: timer.kookwekker1
  - type: horizontal-stack
    cards:
      - type: custom:flipdown-timer-card
        show_hour: true
        show_title: true
        theme: dark
        duration: '00:01:00'
        styles:
          rotor:
            width: 60px
            height: 80px
          button:
            width: 80px
            location: bottom
        entity: timer.kookwekker2
  - type: shopping-list
    title: Boodschappenlijst

and that results in this with the card:

afbeelding

Tapping any number on the flipdown we can adjust the time to any desired time and press start. We use it for cooking timers for a long time and are fully satisfied… :wink:

3

If you use something like the mushroom entity card, you can show the last_changed as secondary info.

Screenshot_20221004-010042_Home Assistant
Screenshot_20221004-010042_Home Assistant793×170 13.5 KB

4

Today I found a solution for a stopwatch, which is basically what I was looking for. It can be triggered by an automation by switching an input_boolean to On. So, everything I need for my use case:

Maybe I’ll have a deeper look into the flip down card and see, if I can combine it with this stopwatch, because I like the design of this card, but for now, the stopwatch does the trick.

2 Likes