[Bug]: dynamic badges not being dynamic

[mentaluproar]

Requirements

• I checked the README.
• I have updated entity-progress-card to the latest available version.
• I did a search to see if there is a similar issue.

Current Behavior

I’m trying to set a badge with will set icon/color to mdi:washing-machine/disabled when powered off, mdi:washing-machine-alert/red when in error state, and mdi:washing-machine/primary when running. There’s no icon shown when I make the icon and color conditional and the text stays white rather than the matching what the icon should be. I’m tying this into the LG thinq integration.

I have it set as follows:
type: heading
heading_style: title
heading: Basement
icon: mdi:home-floor-b
badges:

• type: custom:entity-progress-badge
  entity: sensor.washing_machine_minutes_remaining
  icon: |-
  {% if states('sensor.washer_current_status') == 'power_off' %}
  mdi:washing-machine-off
  {% elif states('sensor.washer_current_status') != 'unknown' %}
  mdi:washing-machine-alert
  {% else %}
  mdi:washing-machine
  {% endif %}
  color: |-
  {% if states('sensor.washer_current_status') == 'power_off' %}
  disabled
  {% elif states('sensor.washer_current_status') != 'unknown' %}
  red
  {% else %}
  primary
  {% endif %}
  bar_color: primary
  bar_effect: shimmer
  frameless: true
  custom_info: |-
  {% if states('sensor.washer_current_status') == 'power_off' %}
  off
  {% else %}
  {{ states('sensor.washer_current_status') | capitalize }} - {{ states('sensor.washing_machine_minutes_remaining') }} mins
  {% endif %}
  min_value: 0
  tap_action:
  action: none
  hold_action:
  action: none
  double_tap_action:
  action: none
  hide:
  • name
  • progress_bar
  • value

Expected Behavior

No response

Steps To Reproduce

No response

Context

YAML state

Environment

- Browser:
- HA Version:
- Entity Progress Card:

Anything else?

No response

[github-actions]

This issue has been inactive for 30 days. It will be closed in 30 days if no further activity occurs.

[imark73]

I ran into the same issue with dynamic color of the progress bar not working, and managed to solve it with the following css workaround creating/using a custom css variable that I named "--progress-bar-color"

type: custom:entity-progress-card
entity: input_number.pellets_hopper
name: Pellets hopper
max_value: 13
bar_size: medium
bar_color: var(--progress-bar-color)
layout: horizontal
grid_options:
columns: 12
rows: 1
card_mod:
style: |
:host {
--progress-bar-color:
{% if states('input_number.pellets_hopper') | int < 3 %}
linear-gradient(90deg,red,orange)
{% elif states('input_number.pellets_hopper') | int < 7 %}
linear-gradient(90deg,orange,yellow)
{% else %}
linear-gradient(90deg,green,lightgreen)
{% endif %} !important
}

[francois-le-ko4la]

Hello @mentaluproar & @imark73

You try to use JINJA with a card type custom:entity-progress-badge.
You have the documentation here : https://github.com/francois-le-ko4la/lovelace-entity-progress-card?tab=readme-ov-file#-entity-progress-badge

You should use custom:entity-progress-badge-template to setup JINJA
https://github.com/francois-le-ko4la/lovelace-entity-progress-card?tab=readme-ov-file#-entity-progress-badge-template

Can you check it ?

Thank you.

[imark73]

Hello @mentaluproar & @imark73

You try to use JINJA with a card type custom:entity-progress-badge. You have the documentation here : https://github.com/francois-le-ko4la/lovelace-entity-progress-card?tab=readme-ov-file#-entity-progress-badge

You should use custom:entity-progress-badge-template to setup JINJA https://github.com/francois-le-ko4la/lovelace-entity-progress-card?tab=readme-ov-file#-entity-progress-badge-template

Can you check it ?

Thank you.

In my case it was entity-progress-card rather than entity-progress-badge, but I tried now entity-progress-card-template and got it to work. Thank you for pointing out the difference, I hadn't noticed that in the documentation!

type: custom:entity-progress-card-template
entity: input_number.pellets_hopper
name: Hopper (double tap to reset)
secondary: "{{ states('input_number.pellets_hopper')|round(1) }} bags"
badge_icon: mdi:update
badge_color: green
bar_color: |-
{% if states('input_number.pellets_hopper') | int < 3 %}
linear-gradient(90deg,darkred,red)
{% elif states('input_number.pellets_hopper') | int < 6 %}
linear-gradient(90deg,red,orange)
{% elif states('input_number.pellets_hopper') | int < 9 %}
linear-gradient(90deg,red,orange,yellow)
{% elif states('input_number.pellets_hopper') | int < 10 %}
linear-gradient(90deg,red,orange 25%,yellow 90%,lightgreen)
{% elif states('input_number.pellets_hopper') | int < 11 %}
linear-gradient(90deg,red,orange 25%,yellow 66%,lightgreen)
{% elif states('input_number.pellets_hopper') | int < 12 %}
linear-gradient(90deg,red,orange 25%,yellow 63%,lightgreen)
{% else %}
linear-gradient(90deg,red,orange 25%,yellow 50%,lightgreen)
{% endif %}
percent: >-
{% set remaining = states('input_number.pellets_hopper') | round(1) %} {% set
max = 13 %} {{ (remaining / max * 100) | round(1) }}
grid_options:
columns: 12
rows: 1

[francois-le-ko4la]

Hello,

I close this request.
@mentaluproar if the answer is not correct please let me know and I will reopen this issue.

TY.