Timer Custom Button Card - Add/Subtract time

Looking for a front end solution to kick off a timer and add/subtract time to it while the timer is going. Couldn’t find one readily available, so I am trying to create my own quickly.

It becomes complicated because you cannot extend a timer beyond start time

This seems to work just fine out of the developer tools>services

service: timer.start
target:
  entity_id: timer.maddie_quiettime
data:
  duration: >
    {% set FinishDate = states.timer.maddie_quiettime.attributes.finishes_at %}
    {% set RemainingRuntimeSeconds = as_timestamp(FinishDate) - now().timestamp() %}
    00:00:{{ RemainingRuntimeSeconds | int + 120 | int}}

But when I try to incorporate it into the front end via custom button card, it throws an error when I try to (re)start the timer with a template to control duration.

image

type: custom:button-card
variables:
  my-timer: timer.maddie_quiettime
styles:
  grid:
    - grid-template-areas: '"time plus" "time minus"'
    - grid-template-columns: 3fr 1fr
    - grid-template-rows: 1fr 1fr
custom_fields:
  time:
    card:
      type: custom:button-card
      entity: timer.maddie_quiettime
      layout: icon_name_state2nd
      icon: mdi:bed-clock
      show_name: true
      show_icon: true
      show_state: true
      show_label: true
      name: Maddie Quiet Time
      tap_action:
        action: call-service
        service: timer.start
        service_data:
          entity_id: timer.maddie_quiettime
          duration: '00:10:00'
      hold_action:
        action: more-info
      style: |
        ha-card {
          border: none;
          margin-top: 0px;
          margin-left: 0px;
          border-radius: 0px;
        }
  plus:
    card:
      type: custom:button-card
      entity: timer.maddie_quiettime
      layout: icon_name
      name: +2 min
      icon: mdi:plus-circle
      show_name: true
      show_icon: false
      tap_action:
        action: call-service
        service: timer.start
        target:
          entity_id: timer.maddie_quiettime
        data:
          duration: >
            {% set FinishDate =
            states.timer.maddie_quiettime.attributes.finishes_at %} {% set
            RemainingRuntimeSeconds = as_timestamp(FinishDate) -
            now().timestamp() %}  00:00:{{ RemainingRuntimeSeconds | int + 120 |
            int}}
  minus:
    card:
      type: custom:button-card
      entity: timer.maddie_quiettime
      layout: icon_name
      name: '-2 min'
      icon: mdi:plus-circle
      show_name: true
      show_icon: false
      tap_action:
        action: call-service
        service: timer.change
        target:
          entity_id: timer.maddie_quiettime
        service_data:
          duration: '-0:0:120'

Failed to call service timer/start. offset (% set FinishDate = states.timer.maddie_quiettime.attributes.finishes_at %} {% set RemainingRuntimeSeconds = as_timestamp(FinishDate) - now().timestamp() %) 00:00:({ RemainingRuntimeSeconds | int + 120 | int}} should be format ‘HH:MM’, ‘HH:MM:SS’ or 'HH:MM:SS.F for dictionary value @ data['duration]

Any reccomendations?

The linked post about extending a timer is about a different service call, not timer.start.

service: timer.start
target:
  entity_id: timer.maddie_quiettime
data:
  duration:
    minutes: |
      {% set FinishDate = ( state_attr('timer.maddie_quiettime', 'finishes_at') 
      | default(now().isoformat(),true) ) | as_datetime | as_local %}
      {% set RemainingRuntime = (FinishDate - now()).total_seconds() / 60 %}
      {{ RemainingRuntime + 2 }}

Also, unless something has changed recently or you are using an additional custom integration, Custom Button card does not allow templates in actions.

The linked post about extending a timer is about a different service call, not timer.start .

Understood… It would be simpler to just use timer.change +00:02:00, but that will not allow it to extend past start time as referenced in the link.

Also, unless something has changed recently or you are using an additional custom integration, Custom Button card does not allow templates in actions.

This might be the answer - the github page seems to suggest it supports templates within the actions?

After playing with it another hour (and relying on some ChatGPT help) I found a clunky working solution with a helper script.

alias: add_time_to_timer
sequence:
  - service: timer.start
    data_template:
      entity_id: "{{ timer_entity }}"
      duration: >
        {% set FinishDate = states.timer.maddie_quiettime.attributes.finishes_at
        %} {% set RemainingRuntimeSeconds = as_timestamp(FinishDate) -
        now().timestamp() %}  00:00:{{ RemainingRuntimeSeconds | int + minutes *
        60 | int}}
mode: single
type: custom:button-card
variables:
  my-timer: timer.maddie_quiettime
styles:
  grid:
    - grid-template-areas: '"time plus" "time minus"'
    - grid-template-columns: 2fr 1fr
    - grid-template-rows: 1fr 1fr
custom_fields:
  time:
    card:
      type: custom:button-card
      entity: timer.maddie_quiettime
      layout: icon_name_state2nd
      icon: mdi:bed-clock
      show_name: true
      show_icon: true
      show_state: true
      show_label: true
      name: Quiet Time
      tap_action:
        action: call-service
        service: timer.start
        service_data:
          entity_id: timer.maddie_quiettime
          duration: '00:30:00'
      hold_action:
        action: more-info
      style: |
        ha-card {
          border: none;
          margin-top: 0px;
          margin-left: 0px;
          border-radius: 0px;
        }
  plus:
    card:
      type: custom:button-card
      entity: timer.maddie_quiettime
      layout: icon_name
      name: +2 min
      icon: mdi:plus-circle
      show_name: true
      show_icon: false
      tap_action:
        action: call-service
        service: script.add_time_to_timer
        service_data:
          timer_entity: timer.maddie_quiettime
          minutes: 2
  minus:
    card:
      type: custom:button-card
      entity: timer.maddie_quiettime
      layout: icon_name
      name: '-2 min'
      icon: mdi:minus-circle
      show_name: true
      show_icon: false
      tap_action:
        action: call-service
        service: timer.change
        target:
          entity_id: timer.maddie_quiettime
        service_data:
          duration: '-0:02:00'

It works as intended, and is somewhat elegant since I at least don’t need multiple helper scripts. But still feel like I shouldn’t need one at all. Still curious why its a formatting problem. Does custom button card really not allow for templating of actions?

It does seem to suggest that, but Custom button card doesn’t use Jinja templates, so you would need to figure out how to do it using the Javascript-style templating used in the card.

The closest thing to templated actions I have seen an example of is defining custom actions.

Most cards do not allow templating the actions. Even those that allow templating everywhere else rarely allow it for actions. There’s a custom feature for Tile cards that adds Jinja-like templating that I think can be used in the actions, but I haven’t played around with it much yet.

You are using button cards inside the button card and from my experience templating doesn’t work well on the stacked button (custom fields) The good news is the stacked card doesn’t necessarily need to be a button card. I use a Mushroom Chip card when in this scenario. For yours I used a Mushroom template card.

I tested it and it worked well
chrome-capture-2024-3-21

type: custom:button-card
variables:
  my-timer: timer.maddie_quiettime
styles:
  grid:
    - grid-template-areas: '"time plus" "time minus"'
    - grid-template-columns: 3fr 1fr
    - grid-template-rows: 1fr 1fr
custom_fields:
  time:
    card:
      type: custom:button-card
      entity: timer.maddie_quiettime
      layout: icon_name_state2nd
      icon: mdi:bed-clock
      show_name: true
      show_icon: true
      show_state: true
      show_label: true
      name: Maddie Quiet Time
      tap_action:
        action: call-service
        service: timer.start
        service_data:
          entity_id: timer.maddie_quiettime
          duration: '00:10:00'
      hold_action:
        action: more-info
      card_mod:
        style: |
          ha-card {
            border: none;
            margin-top: 0px;
            margin-left: 0px;
          }
  plus:
    card:
      type: custom:mushroom-template-card
      entity: timer.maddie_quiettime
      icon: mdi:plus
      primary: 2 Min
      tap_action:
        action: call-service
        service: script.add_time_to_timer
        service_data:
          timer_entity: timer.maddie_quiettime
          minutes: 2
      icon_color: red
      card_mod:
        style: |
          ha-card {
           border: none;
             }
  minus:
    card:
      type: custom:mushroom-template-card
      entity: light.bed_lights
      icon: mdi:minus
      primary: 2 Min
      tap_action:
        action: call-service
        service: timer.change
        target:
          entity_id: timer.maddie_quiettime
        service_data:
          duration: '-00:2:00'
      icon_color: blue
      card_mod:
        style: |
          ha-card {
           border: none;
             }

1 Like

Great suggestion - thank you!

1 Like