Timer Bar Card (+ Mushroom Style)

[Corey_Johnson]

I am trying to figure out why I am not getting the bar to display at all. I appreciate any help.

I installed via HACS and verified that it shows as a resource. I initially only restarted HA but then later performed a reboot.

I have created 2 different cards in attempt of getting something to display.

type: entities
entities:
  - entity: input_boolean.saturntimer
  - entity: input_number.saturntimer
  - entity: sensor.print_time_remaining
  - entity: sensor.print_time_remaining
    type: custom:timer-bar-card
    duration:
      entity: input_number.saturntimer
      units: minutes

type: custom:timer-bar-card
entities:
  - sensor.print_time_remaining
layout: full_row
text_width: 0px

[rianadon]

It’s frustrating when that happens. Sometimes the browser just takes a little while to find the new card. I’d try giving it a day to see if it shows up, or try another browser and see if the card appears for the meantime.

This GitHub issue might help as well. Some others had the same problem, and it was eventually resolved by just waiting it out: Custom Element Doesn't exist: timer-bar-card · Issue #48 · rianadon/timer-bar-card · GitHub

[larryo108 (Larry Overn)]

EDIT: Post removed. See below.

[larryo108 (Larry Overn)]

I am trying to develop a progress bar only implementation. I can get that working just fine. I am wondering if there is a way to remove all of the padding and/or margins around the card. I would like to literally just have the progress bar.

[larryo108 (Larry Overn)]

Can you share the card-mod code you used to minimize your progress bars for the timers? Thanks in advance.

[alexeiw123]

sure!

type: custom:layout-card
layout_type: custom:grid-layout
cards:
  - type: conditional
    conditions:
      - entity: timer.range_light_countdown
        state: active
    card:
      type: custom:timer-bar-card
      entity: timer.range_light_countdown
      layout: full_row
      bar_direction: rtl
      bar_radius: 5px
      invert: true
      text_width: 0px
      compressed: true
      filter: true
      bar_height: 3px
layout:
  margin: '-25px 1px -27px 1px'

[larryo108 (Larry Overn)]

Cool. So if I understand this correctly, it looks like you are using the margins of the layout-card to minimize the size of the bar. I am not sure that will work in my case, but it is good to know. I am trying to incorporate the progress bar into the bottom of a custom button-card layout and I am struggling to get it at the bottom. Thanks.

[alexeiw123]

Something like that, It’s a bit of a distant memory for me now.
There’s probably more elegant ways to do it - I’m no expert.

[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%

  }