Timer Bar Card

A progress bar display for [Home Assistant][home-assistant] timers. Show the time left on your dishwasher, kitchen timer, 3D Printer, sprinklers, time-controlled lights (even plain ol' switches with automations), washing machine, and much more!

<table><tr><td>

🍄 Newly Added: Mushroom Styling 🍄

I've been really enjoying Paul Bottein's beautiful Mushroom card collection, so I've added new styles to make the card feel at home in your mushroom garden. Jump to Configuring the Mushroom Style for examples.

</td></tr></table>

The card is also well tested. There are 24 tests, and they've helped me catch a few bugs already. 🐞

You may also be interested in these other related but unaffiliated cards:

• @Gluwc's Bar Card for numerical quantities or percentages
• @pmongloid's Flipdown Timer Card for timers but it has a cool flip effect!

Jump to: [Integration Support Status] [Turn On/Turn Off Switch] [Styling Examples]<br> [Working with New Integrations] [Examples] [Troubleshooting]

Installation

Timer Bar Card is available from [HACS][hacs], the Home Assisstant Community Store.

If you don't have HACS installed, follow the manual installation instructions.

Configure the Card

The card displays Home Assistant timers with minimal configuration.

<table><tr><th>YAML Configuration</th><th>Timer Bar Card</th></tr><tr><td><p></p>

type: custom:timer-bar-card
entities:
  - timer.alarm
  - timer.alarm_two
  - timer.alarm_three

</td><td> <img alt="Screenshot" src="https://raw.githubusercontent.com/rianadon/timer-bar-card/main/images/basic.png" width="445" /> </td></tr></table>

Most integrations require adding at least one or two additional lines of YAML configuration so the card knows the format of the timer. For more information on how these options work, see Working with New Integrations.

Integration Support Status

<pre><code><b>🌈 Did you configure the card for another integration? 🌈</b> I'd love to add it here! Please submit an <a href="https://github.com/rianadon/timer-bar-card/issues/new?template=tell-me-about-an-integration-you-got-working.md">issue</a> with the integration name and your configuration! </code></pre>

Integration	Status	Extra configuration required
Home Assistant timer	supported & tested	no! 🎉
Automation-controlled<br>switches	supported & tested	set duration to { fixed: x:xx:xx }
Sun	supported	See the example
[OpenSprinkler][opensprinkler]	supported	no! 🎊 (example)
Amazon Alexa Timer	supported	start_time, end_time, and guess_mode [#22]
Bambu Lab	supported	active_state, end_time [#143] (♡ @andrewtimosca)
BMW Connected Drive	supported	active_state, end_time [#60] (♡ @hoeni!)
Cleverio Sous Vide (Tuya)	supported	multiple: see #67 (thanks @develop-daraf!)
Daily Schedule	supported	active_state, end_time [#80] (♡ @igorsantos07)
Google Home Timer	supported	auto-entities card or template entity
Home Connect †	supported	active_state, end_time [#36] (♡ @rickdeck!)
HomeWhiz ‡	supported	multiple: see #121 (thanks @GigiPompieru)
Irrigation Unlimited	supported	duration and start_time [#5]
Meater	supported	active_state, end_time [#122] (♡ @Bascht74!)
Miele	supported	template entity required: see #62
Moonraker	supported	mutliple: see #107 (thanks @user74656!)
OctoPrint	supported	multiple: see #58 (thanks @schmacka!)
PrusaLink	supported	start+end time, guess_mode [#106] (♡ @deadly667!)
RainMachine	supported	multiple: see #46 (thanks @shbatm!)
SmartThings	supported	multiple: see #45 (thanks @TheRedBull205!)
Tesla	supported	template entity required: see #98
ThinQ washer/dryer	supported	configure duration to initial_time [#15]
ThinQ dishwasher	supported	multiple: see #70 (thanks @ollo69 for the help)
Google Home Alarm	not really [#18]	template entity required

† BSH appliances - Bosch/Siemens/Neff/Gagenau. Check out issue #36 for the full card configuration!
‡ Devices connected through the HomeWhiz app: Beko, Grundig, and Arcelik brands

If your configuration isn't listed, follow the instructions in Working with New Integrations. Once you configure it, I'd super appreciate if you could submit an issue with the integration's name and your configuration. You'll get a mention in this document and help others save time. 🌈

Turn On a Switch for Some Time, Then Turn it Off

This is a common use case of the card, so here's a full example of how you can create a button on your dashboard to turn on a switch entity, count down ten seconds, then turn the entity off. This takes a few different components in Home Assistant: The Timer Bar Card, a Script, and an Automation (optional)

While the script is shown in YAML mode, you can alternatively create it in the visual editor (the Scripts tab in the same area as Automations).

<table><tr><th>Card Configuration</th><th>Script Configuration</th></tr><tr><td><p></p>

type: custom:timer-bar-card
entities:
  - switch.cat_toy
duration:
  script: script.switch_on_10s
tap_action:
  action: call-service
  service: script.switch_on_10s
hold_action:
  action: more-info

</td><td><p></p>

alias: Turn the switch on then off
sequence:
  - service: homeassistant.turn_on
    data: {}
    target:
      entity_id: switch.cat_toy
  - delay: "00:00:10"
  - service: homeassistant.turn_off
    data: {}
    target:
      entity_id: switch.cat_toy
mode: single # also consider restart

</td></tr></table>

In this example, the switch's id is switch.cat_toy and the script's id is script.switch_on_10s.

The card is given two actions: clicking/tapping it will calll the script, and holding it will bring up the switch entity's information. The script uses the Call Service action to turn on and off the switch.

⚠️ Make sure that if you're creating the script from the UI, you do not rename the delay action. The delay needs to have the duration at the end of its name (e.g. delay action 0:01:12)—this is how the card knows how long the timer is. You shouldn't need to rename the action in most cases, except if the duration is really small (sometimes the automatic name is delay for 10 seconds which does not parse).

The script's name is parsed because finding its true duration would require the card to independently access the Home Assistant API rather than using the shared state. I'm trying to keep this simple.

Using a script has several advantages:

• It does not interfere with manual operation of the switch.
• You can create multiple buttons to turn the same switch on for different amounts of time.
• If you create a new script for each button, the timer bar will only show on the button that was pressed.

However, you may wish to ensure that even under manual operation, the switch is never turned on for more than ten seconds. In this case, you can add an automation that is trigggered when switch.cat_toy's state changes to on and that calls the script.turn_on service with entity script.script_on_10s.

Simplifying with only an Automation + Card

If both the automation and the button are going to keep the switch on for the same amount of time, you can simplify the setup and not use a script. Add the delay and switch off services to the automation (or set the automation to only trigger when the switch is on for 10s) and change the card's duration: script option to duration: fixed: "00:00:10". Also change the tap action to either call the switch's turn on service or toggle the switch. If you change the automation's delay in the future, make sure to update the card too.

<table><tr><th>Card Configuration</th><th>Automation Configuration</th></tr><tr><td><p></p>

type: custom:timer-bar-card
entities:
  - switch.cat_toy
duration:
  fixed: 00:00:10
tap_action:
  action: toggle
hold_action:
  action: more-info

</td><td><p></p>

alias: Turn the switch off after it is turned on
trigger:
  - platform: state
    entity_id: switch.cat_toy
    to: "on"
condition: []
action:
  - delay: "00:00:10"
  - service: homeassistant.turn_off
    data: {}
    target:
      entity_id: switch.cat_toy
mode: single # also consider restart

</td></tr></table>

🎨 Styling Examples

<table><tr> <td><p></p><a href="#receding-progress-bar"><p align="center">RECEDING PROGRESS BAR</p> <img alt="Screenshot" src="https://raw.githubusercontent.com/rianadon/timer-bar-card/main/images/receding.png" width="378" /></a></td> <td><p></p><a href="#show-only-progress-bar"><p align="center">SHOW ONLY PROGRESS BAR</p> <img alt="Screenshot" src="https://raw.githubusercontent.com/rianadon/timer-bar-card/main/images/onlybar.png" width="394" /></a></td> <td><p></p><a href="#use-with-paper-buttons-row"><p align="center">USE WITH PAPER BUTTONS ROW</p> <img alt="Screenshot" src="https://raw.githubusercontent.com/rianadon/timer-bar-card/main/images/button-row.png" width="474" /></a></td> </tr><tr> <td><p></p><a href="#customize-appearance-based-on-timer-percentage"><p align="center">CUSTOMIZE APPEARANCE BASED ON TIMER PERCENTAGE</p> <img alt="screenshot" src="https://raw.githubusercontent.com/rianadon/timer-bar-card/main/images/modifications.jpg" width="384" /></a></td> <td><p></p><a href="#icons-and-entity-in-card-header"><p align="center">ICONS AND ENTITY IN CARD HEADER</p> <img src="https://raw.githubusercontent.com/rianadon/timer-bar-card/main/images/header-icons.png" alt="Screenshot" width="477" /></a></td> <td><p></p><a href="#embedded-in-an-entities-card"><p align="center">EMBEDED IN AN ENTITIES CARD</p> <img alt="Screenshot"