Timer Component - See remaining time?

Configuration
11

Hey Guys, i see the topic is nearly diminished but i got to the same struggle as you all and thought i share my solution with you. its not a perfect one, i wanted cooler stuff but hadn’t had the ability; My Solution can count down with every Minute you insert, but it doesn’t count as time running down - perhaps anyone has an idea how to integrate the time sensor here.

Aim of my approach was to build an timer that shuts down all lights and media every night and i wanted to have an visual feedback of the running timer, after a while using my first timer i got to that last point :wink:

First things first:

input_boolean:
  timer:
    name: timer
    initial: off
input_number:
  timer:
    name: Timer
    min: 1
    max: 180
    step: 1
    mode: slider
script: 
  timeron:
    sequence:
#### Turn on Timer based on input_number.timer
        - delay: '00:{{ states.input_number.timer.state | int }}:00'
        - service: homeassistant.turn_off
          entity_id: "something to turn off"
#### Set timer in Normal Position 
        - service: input_number.set_value
          data:
            entity_id: input_number.timer
            value: 45.0
        - service: input_boolean.turn_off
          entity_id: input_boolean.timer
  timeroff:
    sequence:
      - service: script.turn_off
        entity_id: script.timer
#### The Important Part taken from the first Post here in this Topic
automation:
  - alias: timerstarted
    trigger:
      platform: time_pattern
      minutes: '/1'
    condition:
      condition: state
      entity_id: 'input_boolean.timer'
      state: 'on'
    action:
      service: input_number.decrement
      data:
        entity_id: input_number.timer
  - id: 'Timer'
    alias: 'Timer'
    hide_entity: False
    trigger:
      platform: state
      entity_id: input_boolean.timer
      to: 'on'
    action:
      - service: homeassistant.turn_on
        entity_id: script.timer
      - service: homeassistant.turn_on
        entity_id: automation.timerstarted
      - service: automation.trigger
        entity_id: automation.timerstarted
  - id: 'Timer Off'
    alias: 'Timer Off'
    hide_entity: False
    trigger:
      platform: state
      entity_id: input_boolean.timer
      to: 'off'
    action:
      - service: homeassistant.turn_on
        entity_id: script.timeroff
      - service: homeassistant.turn_off
        entity_id: automation.timerstarted

part of my Lovelace config for the timer:

resources:
  - url: /local/button-card.js
    type: module
views:
  - icon: mdi:home
    cards:
#### Lichter
      - type: vertical-stack
        cards:
########################################################
############## Conditional Card Timer###################
########################################################
          - type: conditional
            conditions:
              - entity: input_boolean.timer
                state: "on"
            card:
              type: "custom:button-card"
              entity: input_number.timer
              show_state: true
              color_type: card
              color_off: rgb(218, 108, 108)
              action: more-info
              style:
                - font-size: 24px
                - font-weight: bold
        - type: vertical-stack
          cards:
              - type: horizontal-stack
                cards:
                  - type: picture-entity
                    image: "some picture u like"
                    entity: input_boolean.timer
                    tap_action:
                      action: toggle
                    hold_action:
                      action: more-info
                    show_name: false
                    show_state: false
              - type: entities
                entities:
                  - input_number.timer

so i hope to revive this topic and perhaps someone out there has found a more reliable and functional way to display countdown timer in the frontend.

NEWS: Countdown kitchen timer - #15 by Flipso

1 Like