Showing remaining timer time of a fan/light in a custom button card that turns it on

I have a front page on Lovelace with almost all switches to save space. I want to have the remaining time of timers on each button. I managed to use an example from a custom button card that enables us to add overlaying layers over the button but the returned value is the remaining time in the event of turning it, the time is not counting down but remains the same 0:05:00. The number 4:38 is a working timer in a different field, which I would like to move to its button. So all lights and fans controlled by timers will have the count down overlaying the icon.

image

type: custom:button-card
template: light
entity: light.light_toilet
show_name: false
size: 65%
styles:
  grid:
    - position: relative
  custom_fields:
    notification:
      - background-color: navy
      - border-radius: 20%
      - position: absolute
      - left: 0%
      - top: 60%
      - height: 20px
      - width: 48px
      - font-size: 10px
      - line-height: 20px
custom_fields:
  notification: |
    [[[ return states['timer.toilet_light_timer'].attributes.remaining ]]]

I was playing with a solution to make a triggered template sensor with an idea to show the constantly updating sensor made from the attribute “remaining” of the timer. But I cannot manage to create it in configuration.yaml:

template:
  - trigger:
      - platform: time_pattern
        seconds: "/1"
    sensor:
      - name: "Toilet timer remaning"
        state: "{{ state_attr('timer.toilet_light_timer', 'remaining') }}"

The “legacy” method of creating the sensor from an attribute of another entity works well but that method does not provide us with triggers, so I wanted to learn the “modern” method but even the simplest approach following the documentation does not produce a new entity.

The preferable option would be to somehow rewrite the code that returns only the initial value as shown in the first code, if that’s possible.

Any help is appreciated!

ok, so I managed to make a sensor from an entity attribute “remaining” using the modern method but it keeps its value at 00:05:00 despite the timer counting down, so the time pattern method to refresh the sensor would not work. Yes, I tried to refresh it in developers tools.

So the way forward would be to update the returned value somehow.

Solved without any template sensor, just with code in the particular button card. Attribute remaining surprisingly is not a remaining time, what is it remains a question. See here.

image

type: custom:button-card
template: light
entity: light.light_toilet
show_name: false
size: 65%
custom_fields:
  timer:
    card:
      type: custom:button-card
      entity: timer.toilet_light_timer
      tap_action: none
      show_state: true
      show_name: false
      show_icon: false
      style: |
        ha-card.button-card-main {
          font-size: 9px !important;
        }
styles:
  grid:
    - position: relative
  custom_fields:
    timer:
      - filter: |
          [[[
            if (states['timer.toilet_light_timer'].state == 'active')
              return "opacity(70%)";
            return "opacity(0%)";
          ]]]
      - border-radius: 0%
      - position: absolute
      - left: 8%
      - top: 75%
      - height: 20px
      - width: 40px
2 Likes

Great, would you mind sharing your button card? Would like to apply this for a minute count-down timer.

Thanks

Sorry for late reply. However, the button card code is in the post above.

Did you manage to get this countdown timer working?

yes, as I said, the code is above