How to display an HA timer countdown in a notification: section?

[danielbrunt57]

HA timer entities states are either active or idle and when the entity is displayed via entities card the state is magically transformed into a countdown by some internal computation using now() and the attribute finishes_at, which is removed when timer is "idle".
I can get the button-card's overall state to display the countdown by using entity: timer.bathroom_light_timer & show_state: true but I do not want that! I'd like to display the countdown in a notification are but can't figure out the javascript.

My failed attempt thus far:

type: custom:button-card
name: Bathroom
icon: mdi:vanity-light
entity: light.bathroom_light
tap_action:
  action: navigate
  navigation_path: /lovelace/bathroom
show_state: false
styles:
  grid:
    - position: relative
  custom_fields:
    notification1:
      - background-color: |
          [[[
            if (states['binary_sensor.bathroom_occupancy'].state == 'off')
              return "";
            return "";
          ]]]
      - border-radius: 10%
      - position: absolute
      - left: 5%
      - top: 25%
      - height: 30px
      - width: 30px
      - font-size: 6px
      - line-height: 25px
    notification2:
      - background-color: |
          [[[
            if (states['timer.bathroom_light'].state == 'idle')
              return "";
            return "green";
          ]]]
      - border-radius: 50%
      - position: absolute
      - left: 75%
      - top: 10%
      - height: 25px
      - width: 25px
      - font-size: 8px
      - line-height: 25px
custom_fields:
  notification1: |
    [[[
      if (states['binary_sensor.bathroom_occupancy'].state == 'on')
        return `<ha-icon
        icon="mdi:motion-sensor"
        style="width: 22px; height: 22px; color: yellow;">
        </ha-icon>`
      return "";
    ]]]
  notification2: |
    [[[ 
      if (states['timer.bathroom_light'].attributes.finishes_at)
        return helpers.formatDateTime(timer.bathroom_light.attribute.finishes_at);
      return helpers.formatDateTime(timer.bathroom_light.attribute.finishes_at);
    ]]]

A simple text display works:

type: custom:button-card
name: Bathroom
icon: mdi:vanity-light
entity: light.bathroom_light
tap_action:
  action: navigate
  navigation_path: /lovelace/bathroom
show_state: false
styles:
  grid:
    - position: relative
  custom_fields:
    notification1:
      - background-color: |
          [[[
            if (states['binary_sensor.bathroom_occupancy'].state == 'off')
              return "";
            return "";
          ]]]
      - border-radius: 10%
      - position: absolute
      - left: 5%
      - top: 25%
      - height: 30px
      - width: 30px
      - font-size: 6px
      - line-height: 25px
    notification2:
      - background-color: |
          [[[
            if (states['timer.bathroom_light'].state == 'idle')
              return "";
            return "green";
          ]]]
      - border-radius: 50%
      - position: absolute
      - left: 75%
      - top: 10%
      - height: 25px
      - width: 25px
      - font-size: 8px
      - line-height: 25px
custom_fields:
  notification1: |
    [[[
      if (states['binary_sensor.bathroom_occupancy'].state == 'on')
        return `<ha-icon
        icon="mdi:motion-sensor"
        style="width: 22px; height: 22px; color: yellow;">
        </ha-icon>`
      return "";
    ]]]
  notification2: |
    [[[ 
      if (states['timer.bathroom_light'].state == 'idle')
        return ' ';
      return 'Active';
    ]]]

[ngocjohn]

there is a workaround for it, use another button card as a custom fields. here is an example, just play with css according to your needs.

      custom_fields:
        timer:
          card:
            type: custom:button-card
            entity: timer.dishwasher_remaining
            aspect_ratio: 1/1
            show_icon: false
            show_state: true
            show_name: false
      styles:
        custom_fields:
          timer:
            - display: block
            - position: absolute
            - top: '-10%'
            - right: 0%
            - width: 45%
            - background-color: 'rgb(3, 169, 244)'
            - border-radius: 50%

[danielbrunt57]

Thank you! That did the trick!

      - type: custom:button-card
        name: Bathroom
        icon: mdi:vanity-light
        entity: light.bathroom_light
        show_state: false
        tap_action:
          action: navigate
          navigation_path: /lovelace/bathroom
        custom_fields:
          motion: |
            [[[
              if (states['binary_sensor.bathroom_occupancy'].state == 'on')
                return `<ha-icon
                icon=mdi:motion-sensor
                style="width: 22px; height: 22px; color: yellow;">
                </ha-icon>`
              return "";
            ]]]
          timer:
            card:
              type: custom:button-card
              entity: timer.bathroom_light
              aspect_ratio: 1/1
              show_icon: false
              show_name: false
              show_state: |
                [[[
                  if (states['timer.bathroom_light'].state == 'active')
                    return true;
                  return false;
                ]]]
              styles:
                card:
                  - border: none
                state:
                  - font-size: 70%
                  - color: yellow
        styles:
          custom_fields:
            motion:
              - display: block
              - position: absolute
              - top: 30%
              - left: 2%
              - width: 30%
              - height: 30%
            timer:
              - display: block
              - position: absolute
              - top: 20%
              - right: 2%
              - width: 30%
              - height: 30%

[larryo108]

Sorry to resurrect an old thread, but is there a way to show just hours and minutes? I would like to remove the seconds from the countdown.

[danielbrunt57]

You can't alter how the entities or button card displays a running timer.
I'd start with a template sensor similar to what was posted here, but keep in mind that those cards know how to deal with a timer entity and display a countdown in hh:mm:ss based on the finishes_at attribute while the state is active.

    sensor:
      - name: "Countdown"
        state: >-
            {% set f = state_attr('timer.countdown', 'finishes_at') %}
            {{ '00' if f == None else (as_datetime(f) - now()).total_seconds() | timestamp_custom('%S', false) }}

You are going to have to get creative!