Timer Bar Card (+ Mushroom Style)

[larryo108 (Larry Overn)]

Neither am I man. Hahaha. Thanks.

[larryo108 (Larry Overn)]

Is there any way to make the progress bar vertical instead of horizontal? Just curious if this has been considered.

[dutchguy]

Is there a way to always show the bar, instead of showing idle when no timer is running?

[nicknol]

first of all: many thanks for this outstanding card, and especially for adding the mushroom style

and of course I have a question or perhaps a feature request:
we could configure icon and active_icon, but we could have only one state_color.
what about having color and active_color? I would need it (at least) for the mushroom flavor.

and I noticed that the icon isn’t changed depending on the status if I use the mushroom flavor

[chrisgrou]

Hello,
TLDR: Using only duration, the bar resets after a restart. Using start/end_time it isn’t displayed at all.

So, my water heater turns off with a trigger automation.
-I set the time I want it to run for with an input number: (input_number.water_heater_duration)
-I use two datetimes (time only) to calculate start and finish time:

When I use the card with just the duration, it runs fine, but after a reboot, it will reset.
So if number.water_heater_duration is 10mins and I reboot with 5mins remaining, it will start counting from 10 again.

type: custom:timer-bar-card
entity:
  - input_boolean.water_heater
duration:
  entity: input_number.water_heater_duration
  units: minutes

I though maybe if I used start_time this wouldn’t happen (right?).
But if I use any combination of start_time or end_time, the bar isn’t displayed, I just get the entity state.

type: custom:timer-bar-card
entity:
  - input_boolean.water_heater
start_time:
  entity: input_datetime.water_heater_start_time_only
end_time:
  entity: input_datetime.water_heater_finish_time_only
duration:
  entity: input_number.water_heater_duration
  units: minutes

Any ideas?

[tempus2016 (Tempus)]

Is there a way to show the timer card when the end time looks like this?

My end time doesnt have an attribute. Will I need to convert the state of this entity to look like : 2021-09-07T20:24:13+00:00?

[AndyReifman (Andrew)]

Has anyone used these cards with the Metrology theme? I have some timers setup with using mushroom cards, but as soon as I set my view theme to one of the metrology ones the spacing gets thrown way off.

This is the YAML for my Washing machine timer

      - type: custom:timer-bar-card
        entity: timer.washing_machine
        tap_action:
          action: call-service
          service: timer.start
          target:
            entity_id: timer.washing_machine
        mushroom:
          layout: vertical
          color: blue
          secondary_info: last-updated

[justbaj (Dan)]

thanks for your work mate, this is exactly what I was looking for.

[paddy0174 (Patrick)]

Same here! Can’t offer a solution, just to let you know, it’s not only you.

[rianadon]

Author here! I tried downloading Metrology theme today and checking how the card looks. I’m not sure if I did anything wrong (downloaded the latest metro.yaml from GitHub along with style.css and the fonts), but the card looks pretty normal:

I’m not sure how the theme is interfering, but seeing there’s multiple of you with the same problem I’d like to fix this!

[drjjr (Don)]

Just ran into this same problem. Here’s what I added to the end of the card to address this:

card_mod:
  style: |
    ha-card {
      .text-content {
        font-size: 15px;
      }

Change the 15px to whatever you need it to be for your card.
So my card’s YAML looks like:

type: custom:timer-bar-card
entity: timer.drip_irrigation_1_timer
name: Water
mushroom:
  primary_info: name
  layout: vertical
tap_action:
  action: call-service
  service: script.run_drip_irrigation_for_10_minutes
hold_action:
  action: more-info
card_mod:
  style: |
    ha-card {
      .text-content {
        font-size: 15px;
      }

[drjjr (Don)]

The font itself was also different so I changed the card_mod section to this:

card_mod:
  style: |
    ha-card {
      .text-content {
        font-size: 14px;
        font-family:Roboto,Noto,Noto Sans,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;margin:0;padding:0;height:100%

  }