Help Wanted: Issue with Progress Bar not Displayed

[jaxfellow]

I'm reaching out to ask for help I encountered while using the custom:timer-bar-card with a new integration that's not listed

The custom:timer-bar-card is not displaying the progress bar correctly when using a sensor that represents the remaining time until a specific event. Despite attempting various formatting methods for the sensor data, including converting the time remaining to a duration format and calculating the percentage of time remaining, the card still fails to render the progress bar accurately.

Initially, my sensor gives me the next event time in this format: 2024-03-13T03:59:00+00:00. I tried multiple sensor templates to convert this to proper date and time, time HH:MM, time HH:MM:SS, even percentages like but after all, I couldn't make it to show the progress bar.

example template I tried to convert the format:

sensor:
  - platform: template
    sensors:
      next_meeting_time_formatted:
        friendly_name: 'Next Meeting Time (Formatted)'
        value_template: >
          {% set meeting_time = states('sensor.next_meeting_time') %}
          {% set meeting_datetime = strptime(meeting_time, '%Y-%m-%dT%H:%M:%S%z') %}
          {% set current_time = now() %}
          {% set time_remaining = (meeting_datetime - current_time).total_seconds() | int %}
          {% set hours = (time_remaining // 3600) | int %}
          {% set minutes = ((time_remaining % 3600) // 60) | int %}
          {% set seconds = (time_remaining % 60) | int %}
          {{ '%02d:%02d:%02d' | format(hours, minutes, seconds) }}

This showed the correct remaining time, 04:43:59 but not the progress bar.

turning on the debug mode showing me this:

State: 04:43:59 (state mode = idle)
Mode: idle (auto mode = N/A, unused)
Duration: second
Time remaining:
Counter:
Attr: {"friendly_name":"Next Meeting Time (Formatted)"}

I'm not sure if I'm missing something?

[rianadon]

Could you paste your configuration for the card? You can use this 2024-03-13T03:59:00+00:00 format for end_time, and to make the card show up you'll need some sort of fixed value for the entity's state (e.g active if there's a meeting scheduled) and assign that to active_state.

Hope that helps!

[jaxfellow]

This doesn't work. Let me put everything here.

starting from Developer tools I have 3 entities (sensors) related to this topic, brought from Mawaqit integration. The one in the yellow frame next_salat_time is the original one, and the one in blue next_salat_duration is the one created by the sensor template converting the original value.

Here is my card configuration

type: custom:timer-bar-card
entity: sensor.next_salat_duration
duration:
  end_time: sensor.next_salat_time
active_state: active
debug: true

and the result:

disabling debug, and saving:

[rianadon]

Hey. I understand what you're trying to do a little bit better now. As far as I understand it, you'd like the timer to always be running (that is to say the progress bar will always be displayed). I don't have a mode to easily enable this in the card, so you'll have to use a bit of a "hack" to get this to work.

The active_state says that the progress bar will be displayed when the state of the entity matches the value of active_state. However, sensor.next_salat_duration changes over time. The "hack" is to use state_attribute to calculate state from another attribute. I see you have the friendly_name attribute on this entity, so we can use this attribute. As long as the friendly name doesn't change, the card will work. Then you can use this configuration:

type: custom:timer-bar-card
entity: sensor.next_salat_duration
duration:
  end_time: sensor.next_salat_time
active_state: "Next salat Duration"
state_attribute: friendly_name
debug: true

I hope that achieves what you're looking for!