Kitchentimer

[Johan_L (Johan)]

I got asked about how I did these kitchen timers in a different topic and that wasn’t a suitable place to explain it all and decided to create this to explain it all.

This thread was used as a source for creating the “dynamic timer”:

Dynamic timer with input_number

Hi guys, I’ve set up a simple automation which starts a timer, that reads an input_number as its duration, once I enable a device. I’d like to change this timer duration dynamically, how could I achieve this? For example looking at the screenshot below, I’d like to move the slider and at the same time changing the timer’s duration without the need to stop the device and start it again. [Screenshot_20230106_214409] Thanks!

The card is a combination of a vertical stack with horizontal stack cards.
It uses the Button Card from RomRider and the Circular Timer Card for karlis-vagalis (you can find both in HACS)

Next to this you need to create an input_number for every timer and in my case 2 automations. The first automation starts the timer after adjusting the time, the second one resets the timer to the default time when it’s finished.

The Card:

type: vertical-stack
cards:
  - type: custom:circular-timer-card
    entity: timer.keukentimer_1
    bins: 60
    primary_info: none
    empty_bar_color: "#e4d7fe"
    color:
      - "#4CAF50"
    card_mod:
      style: |
        ha-card {
          background: none;
          border: none;
          --ha-card-box-shadow: 0px;
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: timer.keukentimer_1
        icon: mdi:stop-circle-outline
        hold_action:
          action: none
        tap_action:
          action: perform-action
          perform_action: timer.cancel
          target:
            entity_id: timer.keukentimer_1
          data: {}
        state:
          - value: idle
            color: "#4CAF50"
          - value: active
            color: "#4CAF50"
          - value: paused
            color: "#4CAF50"
        show_state: false
        show_name: false
        styles:
          icon:
            - width: 70%
            - transform: scale(1.1)
        card_mod:
          style: |
            ha-card {
              background: none;
              border: none;
              --ha-card-box-shadow: 0px;  
      - type: custom:button-card
        entity: timer.keukentimer_1
        icon: mdi:play-circle-outline
        hold_action:
          action: none
        tap_action:
          action: perform-action
          perform_action: timer.start
          target:
            entity_id: timer.keukentimer_1
          data: {}
        state:
          - value: idle
            color: "#4CAF50"
          - value: active
            color: "#4CAF50"
          - value: paused
            color: "#4CAF50"
        show_state: false
        show_name: false
        styles:
          icon:
            - width: 70%
            - transform: scale(1.1)
        card_mod:
          style: |
            ha-card {
              background: none;
              border: none;
              --ha-card-box-shadow: 0px;  
      - type: custom:button-card
        entity: timer.keukentimer_1
        icon: mdi:pause-circle-outline
        hold_action:
          action: none
        tap_action:
          action: perform-action
          perform_action: timer.pause
          target:
            entity_id: timer.keukentimer_1
          data: {}
        state:
          - value: idle
            color: "#4CAF50"
          - value: active
            color: "#4CAF50"
          - value: paused
            color: "#4CAF50"
        show_state: false
        show_name: false
        styles:
          icon:
            - width: 70%
            - transform: scale(1.1)
        card_mod:
          style: |
            ha-card {
              background: none;
              border: none;
              --ha-card-box-shadow: 0px;
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: input_number.keukentimer1
        icon: mdi:minus-circle-outline
        hold_action:
          action: none
        tap_action:
          action: perform-action
          perform_action: input_number.decrement
          target:
            entity_id: input_number.keukentimer1
        show_state: false
        show_name: false
        styles:
          icon:
            - width: 50%
            - transform: scale(1.1)
            - color: "#4CAF50"
        card_mod:
          style: |
            ha-card {
              background: none;
              border: none;
              --ha-card-box-shadow: 0px;  
      - type: custom:button-card
        entity: input_number.keukentimer1
        icon: mdi:play-circle-outline
        hold_action:
          action: none
        tap_action:
          action: none
        show_state: true
        show_name: false
        show_icon: false
        styles:
          card:
            - font-size: 40px
            - font-weight: bold
        card_mod:
          style: |
            ha-card {
              background: none;
              border: none;
              --ha-card-box-shadow: 0px;  
      - type: custom:button-card
        entity: input_number.keukentimer1
        icon: mdi:plus-circle-outline
        hold_action:
          action: none
        tap_action:
          action: perform-action
          perform_action: input_number.increment
          target:
            entity_id: input_number.keukentimer1
        show_state: false
        show_name: false
        styles:
          icon:
            - width: 50%
            - transform: scale(1.1)
            - color: "#4CAF50"
        card_mod:
          style: |
            ha-card {
              background: none;
              border: none;
              --ha-card-box-shadow: 0px;  
grid_options:
  columns: 12
  rows: auto

Automation 1: Starts timer when adjusting the time.

triggers:
  - entity_id: input_number.keukentimer1
    trigger: state
conditions: []
actions:
  - target:
      entity_id: timer.keukentimer_1
    data:
      duration: "{{ trigger.to_state.state | int(0) * 60 }}"
    action: timer.start

Automation 2: Resets the timer to default value after finishing.

alias: Reset Keuken Timer 1 Input Number
description: ""
triggers:
  - trigger: state
    entity_id:
      - timer.keukentimer_1
    to: idle
    for:
      hours: 0
      minutes: 0
      seconds: 15
conditions: []
actions:
  - action: automation.turn_off
    metadata: {}
    data:
      stop_actions: true
    target:
      entity_id: automation.keuken_timer_1
  - action: input_number.set_value
    metadata: {}
    data:
      value: 10
    target:
      entity_id: input_number.keukentimer1
  - action: automation.turn_on
    metadata: {}
    data: {}
    target:
      entity_id: automation.keuken_timer_1
mode: single

After reading it all back it probably can be done a bit easier and cleaner with the automations, but it works

[snagglewest]

Thank you so much for posting this Johan! I’m very new to HA and a simple kitchen timer was high on the list but very allusive. I’m not a programmer by any strech but I was able to cut-n-paste and get it working.

Have you by chance made any enhancements since you posted this? I’ve tried to add seconds and a alert when it finishes but I haven’t hand any luck. Just wondering if you might be able to point me in the right direction.

Thanks - Bill