lovelace-entity-progress-card

[twilit cedar]

hello,

I was looking for a card with a progress bar that had the same look&feel as the Mushroom/Tile cards and I didn't find anything. Rather than complaining I developed it. This is my first custom card so for those who are interested: https://github.com/francois-le-ko4la/lovelace-entity-progress-card/

After a couple of version, I provide something stable with a card editor and use cases documented in the README.

I remain open to your comments therefore feel free to test/suggest.

[marble cipher]

Looks good, I was looking for something like this. What resources did you use to make the card? I am trying to make my own cards for my dashboard, but the documentation is a little confusing.

[twilit cedar]

The documentation is light but you have to understand it and know the mechanisms before to type your first line of code. ^^
For guidance and resources, the Home Assistant Forums are a great starting point (the French forums are particularly helpful as well). Additionally, you might want to check out GitHub accounts like home-assistant-tutorials, which provide excellent examples and methodologies for working with Home Assistant.... ok and at the end of the day reverse engineering with existing card is interesting. The first <HA-FORM> was a nightmare for me and when you realize that any field need the hass variable to know the environment it's more simple. That's why in my project I did a function to manage all fields creation using variables to industrialize a litlle bit....
When building my project, I noticed many examples using the Lit library to enhance the user experience. However, I chose to stick with plain HTMLElement to avoid potential import issues. This allowed me to focus on a straightforward mechanism for handling hass value updates and efficiently switching between the card editor and the card view.
As for TypeScript vs JavaScript, I opted for JavaScript since my project is relatively simple and doesn’t require the additional features or complexity of TypeScript.

[twilit cedar]

What's Changed

• Automatically adapts to the user's language for error messages and descriptions, ensuring a localized experience. 🇬🇧 🇪🇸 🇫🇷
• HACS better support by @harmonie-durrant in #1

** New Contributors **

@marble cipher  made their first contribution in #1

TY!

[twilit cedar]

@short dirge & @marble cipher I fixed the hacs.json to avoid issue with HACS install and attached the JS file to the release. If you can test...

[short dirge]

Still not able to download

HACS tries to download
https://github.com/francois-le-ko4la/lovelace-entity-progress-card/releases/download/tags/1.0.9/entity-progress-card.js
whereas the release asset can be found at
https://github.com/francois-le-ko4la/lovelace-entity-progress-card/releases/download/1.0.9/entity-progress-card.js

[twilit cedar]

😆

[marble cipher]

nothing to do with code, my fork works just fine, delete the latest release and tag and add it back uploading the js when you do so.

@twilit cedar

[twilit cedar]

@marble cipher done

[marble cipher]

ok going to test now

@twilit cedar Perfect! working now

So the new languages are based on the HA language or the browser ?

[twilit cedar]

ha haaa... yes I know.... My browser is in English and HA in French and I get English ^^
Browser...... that's my next step I was on it before this little HACS issue..........

hass.language.....

haha hass.config.language

[marble cipher]

ah, yes, simple and easy mistake

[short dirge]

I tried the auto entities variant and broke it due to those rtl_433 sensors having absurd precision

the user is at fault there, but it might make sense to regardless round the value a bit

I would've also expected to get a more-info popup on click

[marble cipher]

makes sense yeah

[twilit cedar]

@short dirge

• round the value: ha ! TY I have no sensor like that. I will include it in the next release.
• more-info popup on click: already in my roadmap ^^

[short dirge]

supporting other ways of determining the progress other than a sensor value being a number between 0 and 100 might also be something worth exploring

[twilit cedar]

@short dirge

• round the value : for my own usage if I have 23.5% it's enough. do you want a parameter to adjust the number of digits after the decimal point ?

[short dirge]

I personally don't really care 😄
If I were you, I wouldn't make it (fully) configurable as people entering arbitrary precision will make making the thing look nice rather hard

[marble cipher]

I think add the following at least

• precision (ex: 2 => 0.01%)
• max value (0-max instead of default 100)
• units (%, w, kWh, K ...)

Just made a pull request for light theme ! 💡

Reverse engineering is fun 🙃

[twilit cedar]

HA language - done
precision (ex: 2 => 0.01%) - done
max value (0-max instead of default 100) - done
test in progress

[marble cipher]

Nice!

[twilit cedar]

approved your PR and merge. I test.

all is nice

[marble cipher]

Nice

[twilit cedar]

ha ha

released

@short dirge & @marble cipher I let u test.

[marble cipher]

Nice will do some testing

I only see battery, did you upload the right .js file ? @twilit cedar

The language is fine, but all the other new features aren't there

[twilit cedar]

Raaaaaaa I did not drop the right file

I fix it asap. In my car now...

I am French. A good explanation 😅

[marble cipher]

I live and go to university in France, I thought you might be.

[twilit cedar]

🙂

fixed

[marble cipher]

@twilit cedar I found a bug. If the max_value is lower than the entity value it disappears. (In sections the whole section disappears and cannot click on edit button)

[twilit cedar]

I did the same test with a temperature sensor approx 20° max_value at 10°. Have you got a feedback from your console ? (tools > browser tools > dev tools)

ha... Uncaught (in promise) ReferenceError: value is not defined

I see an issue

[twilit cedar]

@marble cipher I did a bug fix according to my own logs. 1 error per second due to a bad parameter.
let me know.

[marble cipher]

Ok, will have to test it tomorrow. I'll let you know. Thx

[marble cipher]

@twilit cedar I just got on to test it and it only fixes it's self if I clear the browser cache for some reason, I have tested it mutiple times to check, here are my logs if you need them.

[marble cipher]

This is on v1.0.13 btw

[twilit cedar]

I develop directly on my production (I knooooooooow its bad) and sometime I have cache issue therefore I use a private tab to force the refresh. I did a couple of update yesterday and at the end of the day the browser become crazy ^^
I will try to reproduce it with the Ligh theme color....

[marble cipher]

Yeah it is a pain having it not refresh how I'd expect it to.

[twilit cedar]

ha haaaa I read the code to get the right color and icon.................. when I read the code we did not update to take the max value..... looooooololol I check your scenario now

ha haaaaaaaaa !

therefore last position in our theme (icon and color) should be used at max_value and manage the limit. easy to do.

[marble cipher]

Nice.

@twilit cedar I made a new pull request with a fix to custom units. They were showing the percentage no matter what the unit, now they show the correct info if the unit is not a %. In my tests it works well.

[hidden zinc]

you should consider also having this be a feature you can add to a tile card

[twilit cedar]

This card has undergone significant improvements to enhance both its functionality and user experience. Key updates include:

• Interactive Features: The card now supports an interactive "More Info" option, allowing users to click on the card to reveal additional details about the entity, enhancing the overall usability and information access.

• Enhanced Customization: The default setting ensures a seamless experience, while also allowing users to tailor it to their preferences. decimal parameter has been added, we can measure an entity according to a max_value or another entity...

• Smoother Animation: To provide a more fluid and visually appealing experience, the card has integrated ha-icon and ha-shape elements, which ensure proper animations and transitions.

• Code Optimisation: Behind the scenes, the card has been optimized for performance and maintainability, offering a more reliable and smoother experience for users.

All suggestions are welcome.
https://github.com/francois-le-ko4la/lovelace-entity-progress-card

[twilit cedar]

Last update:

• min_value: add this parameter to define the minimum value to be used when calculating the percentage.
• navigate_to: add this parameter to specifie a URL to navigate to when the card is clicked.

Doc has been updated accordingly...

[modest ibex]

This is what i am looking for. Ill try to test and use, then will report back if there are issues.

[twilit cedar]

here or directly on github. you are welcome.

[twilit cedar]

Breaking news: A new card editor has been released !

[twilit cedar]

Breaking news 1.0.24/1.0.25:

• Fix: Resolved the issue described in "Card editor does one update and nothing else unless opened again" by @marble cipher (see issue #8).
  Split configuration management to enhance safety and prevent conflicts.
  Simultaneous update management
• Language support: Added translated labels for color choices to support multiple languages 🇬🇧 🇪🇸 🇩🇪 🇫🇷
• Icons for Layout Options: Added meaningful icons (mdi-) for layout choices to improve user experience.
• Code Optimization: Improved overall code performance and reduced complexity.
• Debug mode

I did it during my free time. If you have a question/issue/request dont hesitate....

[cyan briar]

Salut Ko4la, merci pour cette carte. La carte ne fonctionne pas avec une entité de type cover, le pourcentage reste à 0% quelque soit la position du volet roulant, ce serait bien qu'on puisse aussi ajuster la valeur en cliquant sur la barre de pourcentage directement, comme une slider entity card finalement. Bon courage pour la suite 🙂

[old crystal]

English please - see rule #3 😉

[twilit cedar]

hello,

New release 1.0.26 has been pushed :

• Editor:
  • Language support: Added translated labels for Theme choices to support multiple languages 🇬🇧 🇪🇸 🇩🇪 🇫🇷
  • Documentation : Added a direct link to access the documentation.
• Theme improvements:
  • Fix the color scheme to match the existing battery theme.
  • When the entity provide a battery* icon, we use the device's charging icon to display its current charging status. This will provide a more visually informative representation of the battery level.
• Card Improvements: Adjust the card's corner radius to align with the standard Home Assistant card radius for a consistent look and feel.
• Error Handling: Implement more robust error handling to catch and manage potential errors effectively.
• Code optimization: Perform code cleanup to enhance readability, remove redundant code, and optimize performance.

[twilit cedar]

hello,

@old crystal , I translate : "Hi Ko4la, thanks for this card. The card does not work with a cover type entity, the percentage remains at 0% whatever the position of the roller shutter, it would be good if we could also adjust the value by clicking on the percentage bar directly, like a slider entity card finally. Good luck for the future"

TY for you positive feedback on this card.

I just did a test on covers. Indeed it is true for the moment I have not adapted this type of entities.
The entities that return values ​​or percentages through their state do not pose any problems.

[twilit cedar]

for example a bat, temp, humidity.....

[twilit cedar]

Covers works with attributes to get current position :

[twilit cedar]

to summarize:

• yes and I will think about your use case for the next release
• my card is to take a look on a status therefore its a read only component and (for now) we will not be able to change a value or control an equipment.

[cyan briar]

Thanks a lot, I try asap

[twilit cedar]

ok, I suggest to filter automatically with:
"cover" -> "current_position" -> %
"light" -> "brightness" / 255 to get %
"fan" -> "percentage" -> %

[twilit cedar]

in progress... for the next release a new select box to specify the attribute....

[cloud yarrow]

you're amazing, can't wait to try

[twilit cedar]

@cyan briar 1.0.27
If you let (by default) the tap action to get more info then you can click on the card and get the slider to play with your cover....

1.0.27-1.0.30

What's Changed

• Language support: Added Italian 🇬🇧 🇪🇸 🇩🇪 🇮🇹 🇫🇷
• Attribute support : Added attribute support for cover, light, fan, climate, humidifier, media_player, vacuum, device_tracker, and weather.
• Code optimization: Perform code cleanup to enhance readability, remove redundant code, and optimize performance.
• Theme: Added Temperature/Humidity/VOC/PM 2.5 themes.
• Theme: Added support for °F in the temperature theme.
• Unit: Added automatic unit configuration based on entity attributs.
• Documentation: updated and improved

[twilit cedar]

TY for your positive feedback. let me know if you have an issue.

[clever wasp]

I NEED YOU TO KNOW I WAS LOOKING FOR SOMETHING LIKE THIS

sorry just so excited 😄

[twilit cedar]

Let me know if you have any question or suggestion...

[clever wasp]

Is there a way of making the bar larger in the card?

[twilit cedar]

now, there is no parameter but I can add it.

[twilit cedar]

@clever wasp: here any test....

• 8px: current default size (default - small)
• 12 px: not so bad (medium)
• 16 px : i think thats the limit for this kind of design
• 20 px : baaaaaaaad...

[clever wasp]

was thinking of when the card is in a vertical orientation where the line is on its own row,

This is really great! gonna use it with my Bambu-Lab Progress Indicator the dial was not my style haha

[twilit cedar]

let me test

@clever wasp

[clever wasp]

i like 2-3 there

great work!

[twilit cedar]

yeaaa definitely..... 20 is too much....

I think a simple "select box" with a small/medium/large.....

[clever wasp]

👍

[twilit cedar]

done. 1.0.31 -> https://github.com/francois-le-ko4la/lovelace-entity-progress-card

[twilit cedar]

1.0.31 -1.0.33

• Customization: Added bar_size parameter.
• Theme: Added CPU/RAM themes. Feature requested in "Consumption theme / battery inverse colors" by @nortuzar (see issue #9)
• Mouse pointer fix: Fixed a bug where the pointer incorrectly indicated that the card was clickable regardless of the configuration.
• Error handling: Added an error message when an attribute is incorrect.
• Code and performance improvements:
• Avoid DOM updates when values remain unchanged.
• Enabled Shadow DOM for the editor to prevent style conflicts.
• Improved CSS for better readability and maintainability.
• Optimized some checks to speed up processing.
• Removed the last hardcoded values.

[twilit cedar]

1.0.34

What's Changed

• custom_theme: Added. Anticipating every possible theming need is unrealistic. While predefined themes cover common use cases, some scenarios require greater flexibility. To accommodate this, I have introduced this option for advanced use cases, enabling users to define custom themes tailored to their specific requirements.
• Vertical layout: Fixed. Fine-tuned to manage the vertical layout using CSS mechanisms.
• JS vs CSS: Improved. Now handles component visibility (Show/Hide) using CSS, reducing JavaScript execution, improving performance, and enhancing maintainability by leveraging native browser rendering optimizations.

[viral torrent]

Hi and thank you very much for your work on the card! I noticed that the title font differs from the usual a little bit. Would it be possible to adjust it to match? Thanks!

[twilit cedar]

Hello, 100% right. I worked on it this we and other stuff and released 1.0.36. That should be better now.

[twilit cedar]

What's Changed

• Vertical/Horizontal Layout: Fixed. Simplified styles and minor bug fixes for better consistency.
• Horizontal Layout: Fixed. Now more aligned with a tile-based theme.
• Percentage: Fixed. Negative percentages previously caused some fun but unexpected visual behaviors, which have now been fixed.
• Performance: Improved. Optimizations for improved efficiency on bar animation.

https://github.com/francois-le-ko4la/lovelace-entity-progress-card/releases/tag/1.0.36

[viral torrent]

That fixed it, thank you! 👍

[twilit cedar]

You are welcome!

[twilit cedar]

What's Changed

• custom_theme: Fixed. Under rare (and slightly amusing) circumstances, the evaluated value could exceed the theme's defined limits, or your custom theme's min/max intervals could have accidentally become incorrect, breaking your theme's interval continuity. 😅
  • Validation that min < max: No more topsy-turvy intervals—each range must make logical sense now!
  • Validation of min/max continuity: Every max max should flow seamlessly to the next min without any annoying gaps or overlaps.
  • Graceful boundary handling: If the evaluated value falls below the theme's defined intervals, we’ll gracefully default to the lowest definition. Similarly, values exceeding the theme will align with the highest definition.

https://github.com/francois-le-ko4la/lovelace-entity-progress-card/releases/tag/1.0.37

[twilit cedar]

What's Changed (1.0.38-1.0.40)

• discord server: Created. Link in the README
• icon: Added flexibility. TY @Jezza34000
  • icon defined in custom_theme is now optional
    Order of Priority for the Icon:
    • Theme/Custom Theme: The icon derived from the theme or style applied to the item.
    • Icon Parameter: A custom icon specifically defined for the item.
    • Icon Associated with the Entity: The icon directly linked or representative of the entity.
    • Default: The icon used by default if no other is specified.
• Theme Selector: Improved. Better design for a better experience.
• CSS Optimization:
  • Added a dedicated icon class in the CSS (editor) to minimize unnecessary DOM modifications and improve styling consistency.
  • CSS: Improved styling by using more dynamic CSS rather than relying on JavaScript.
• Entity Statuses: Added handling for unavailable and unknown statuses.
  • Displays the status text instead of the percentage when the entity is unavailable or unknown.
  • Icon is greyed out, and an orange badge with an exclamation mark is shown for unavailable entities.
• Error Message Style: Fixed
  • Fixed an issue where error messages were difficult to read in themes other than dark mode.
• Performance:
  • Offloaded more responsibilities to CSS, reducing unnecessary HTML DOM modifications.
  • Optimized stored objects to reduce RAM usage.
  • Added additional checks to determine if HTML updates are needed, improving efficiency.
• Code Cleanup: Enhanced code readability and maintainability:
  • Reformatted arrays for consistency.
  • Removed unecessary comments
  • Removed last hardcoded values to improve flexibility.
  • Resolved minor syntax issues for cleaner execution.

[twilit cedar]

So there I was, away on a trip, minding my own business, when I suddenly needed to access Home Assistant. Easy, right? Nope. Turns out my certificate had decided to go on strike. No remote access for me.
Like any determined (or desperate) tech enthusiast, I started looking for... alternative routes. All was Blocked. Carrier pigeon with MQTT support? Still in beta. After some hacking-around (the legal kind, I swear), I finally found a way in! Victory was within reach!
But then... boom. Expired token. And to top it all off, my precious certificate ended up in the digital dumpster.
Bref, it’s not the end of the world, but damn, it’s annoying. Therefore I did that if it can be usefull...

• Create the sensor:
  configuration.yaml:

command_line: !include command_line.yaml

command_line.yaml:

- sensor:
    name: "SSL Certificate Expiry"
    command: >
      echo $(( ($(date -u -d "$(curl -vI --insecure https://XXX:8123 2>&1 | grep -i 'expire date' | awk -F': ' '{print $2}' | sed -E 's/Jan/01/; s/Feb/02/; s/Mar/03/; s/Apr/04/; s/May/05/; s/Jun/06/; s/Jul/07/; s/Aug/08/; s/Sep/09/; s/Oct/10/; s/Nov/11/; s/Dec/12/' | awk '{print $4"-"$1"-"$2" "$3}')" +%s) - $(date +%s) ) / 86400 ))
    unit_of_measurement: "days"
    scan_interval: 3600

Adapt it accordingly! My personal env is build with docker... Dont scream on my month conversion (busybox....)

• create the card:

type: custom:entity-progress-card
show_more_info: true
decimal: 0
min_value: 0
max_value: 90
name: SSL Certificate Expiry
icon: mdi:certificate
custom_theme:
  - min: 0
    max: 10
    color: var(--red-color)
  - min: 10
    max: 20
    color: var(--yellow-color)
  - min: 20
    max: 90
    color: var(--success-color)
entity: sensor.ssl_certificate_expiry
unit: " days"
grid_options:
  columns: 12
  rows: 1

Conclusion
Next step will be of course to schedule a notification ^^

[twilit cedar]

What's Changed 1.0.40 -> 1.0.47

• Multi-Language Support:
  • Added. 🇭🇷 🇵🇱 🇳🇱 🇲🇰 🇵🇹 🇩🇰 🇳🇴 🇸🇪
  • The language selection, previously handled in the server configuration, is now managed in the user configuration to support multilingual usage.
• Card height: Fixed. Occasionally appears "squashed" with @poiromaniax. (see issue #12)
• icon: Added flexibility. Default icon is also selected with device_class and device Type.
• badges: Improved. The badge system has been enhanced for better handling of three distinct states:
  • Unavailable
  • Not Found
  • Unknown
• Timer support: Added. Manage the timer entity state and animate the bar accordingly. (request from @FrankJaco here: issue #14)
  • unit:
    • %: show the ratio
    • s: show the seconds
    • timer: show HH:MM:SS (standard)
    • flextimer: same than timer but truncate the display according to the current value
  • Badge management: Added. Play/Pause icon according to the timer state.
  • reverse parameter: Added. reverse parameter to allow a countdown.
  • add bar_orientation: Allows the progress bar to be displayed from right to left, useful for timers.
• hover effect: Added.
  • The background color now changes when the mouse hovers over the card
• CSS: Improved.
• Documentation update
• Code optim
  • Reorganize parameters for better structure.
  • Remove duplicate or unnecessary code.
  • Refactor class for improved readability and understanding.

[twilit cedar]

1.1.x has been released !!!

We are finally moving to version 1.1.0 (about time!) since the core features planned for this card have been developed, and now we're diving into more advanced features and use cases. It also marks the shift to the new Home Assistant 2025.3 look & feel, with support for multiple entities: battery, cover, timer, counter, fan, sensor... basically, if it exists, we probably support it. 😉

[twilit cedar]

New editor for this card !

[twilit cedar]

NEWS !

New Themes Parameters

• optimal_when_low: A new theme parameter indicating that the optimal state occurs when the value is low (e.g., for memory or CPU usage, where lower values are better).
• optimal_when_high: A new theme parameter indicating that the optimal state occurs when the value is high (e.g., for battery, where a higher charge is better).

These new parameters replace the previous, more specific themes (e.g., battery, cpu, and memory), allowing users to define themes with less redundancy and more flexibility.

New editor Features

• hide: Added. This feature allows elements to be hidden within the editor, providing more flexibility in content management.
• disable_unit: Added. This option enables the disabling of specific units in the editor, offering greater control over the displayed.

Language

🌟 Our goal is to make this card a seamless and intuitive tool for users worldwide, eliminating language barriers and ensuring proper data formatting for every region. If you have suggestions for additional languages or formatting improvements, we’re always open to feedback! To accommodate multilingual environments, the card defaults to the language set in the user's profile for optimal consistency and localization.
📖 Text Display

We strive to make this card as inclusive as possible, with support for: 🇬🇧 English, 🇪🇸 Spanish, 🇩🇪 German, 🇮🇹 Italian, 🇫🇷 French, 🇵🇱 Polish, 🇳🇱 Dutch, 🇲🇰 Macedonian, 🇵🇹 Portuguese, 🇩🇰 Danish, 🇸🇪 Swedish, and 🇳🇴 Norwegian (Bokmål). More languages may be added in the future to enhance accessibility!

🔢 Intelligent Number Formatting (NEW)

Numbers are displayed based on your regional preferences, using:

• Your selected language settings (auto)
• Your specific format (manual selection)
• Or the system-defined format from your Home Assistant user profile (system/navigator)

By default, the card uses standard Arabic numerals (0-9) for maximum compatibility.

[twilit cedar]

1.3.0 has been released !
As this card continues to evolve, the mission remains the same: simplicity first, flexibility when you need it. With version 1.3.0 and beyond, we’ve opened the door to greater expressiveness using Jinja — without sacrificing ease of use.

** ✨ Dynamic options **
Say hello to:

• The custom_info option for dynamic inline text
• The badge option for icon overlays driven by real-time state

** 🎨 Color & Bar Color**: Improved

• ✅ Added Reset (✕) button to revert to the default color.
• ✅ Display of current color (live preview).
• ✅ Support for YAML-defined colors: displayed when specified.
• ✅ Improved dropdown placement and size for a smoother user experience.

** 📐 Space Between Components**: Improved

• ✅ Consistent spacing between all components.
• ➕ Enhanced readability and overall layout.

** 👆 tap_action**: Improved & Complete

• tap_action: 🎯 Defines the action when a user taps the card. Perfect for quick interactions!
• double_tap_action: 👆 Double tap for a distinct action, allowing for even more interaction possibilities.
• hold_action: ⏳ Trigger an action when the user holds down on the card. A great way to enable long-press functionality.
• icon_tap_action: 🌟 Tap the icon on the card to trigger a special action. Customization at your fingertips!
• icon_double_tap_action: 💥 Double tap the icon to perform a unique action. More options, more fun!
• icon_hold_action: ✋ Hold the icon to execute an action. For those who like to press and hold!

🧩 Watermark

• 🎯 Highlights the low zone (e.g., <10%) and high zone (e.g., >80%) directly on the bar.
• 🎨 Fully customizable colors for each zone.
• ✨ Brings visual awareness to optimal operating ranges — especially useful for batteries, sensors, and more.

🧹 Unnecessary descriptions: Removed

• ✅ Cleaned up the GUI.
• 🔍 Improved readability through clearer and more descriptive labels.

** 📚 Documentation Updates **

The documentation has been expanded and improved:

• Includes new properties: hold_action, icon_tap_action, and force_circular_background.
• Clear explanations of behavior and configuration options.
• Updated examples and visuals reflecting the new look and features.

🏭 Package Industrialization

• Code Minification: The source code is now minified, resulting in faster load times and a more optimized deployment.
• Automatic Code Deployment: The latest code is now automatically published, streamlining the release process and reducing the risk of inconsistencies.

** 🧹 Code cleanup and improvement**

[twilit cedar]

** What's new 1.3.1/1.3.3 ?**

A smarter, more human, and more intuitive card.

This version marks a major step toward a card that’s easier to configure, more aligned with Home Assistant standards, and richer in features. We worked to make it "speak your language" — less manual setup, more intelligence by default, and an ever-stronger attention to detail.

Thank you all for your feedback and support! 🚀

🔥 New Features

• A new name_option parameter to add more informations with jinja
• Color Parameter Support
  You can now customize the bar's background color using theme-aware color variables
• The badge option has been split into two distinct and more flexible parameters:
  • badge_icon – Defines the icon to display (e.g. mdi:battery), supports Jinja templating.
  • badge_color – Controls the background and icon color, also supports Jinja and CSS color values.
• state_content: Added
  • Allows you to add Home Assistant attributes before the main value directly through a simple YAML description.
  • Complements the custom_info field by offering a quick, native method.
• Duration: Added
• Unit Typography : Fixed

🔄 Improvements

• Hide
  • Added the ability to hide both the value and the unit when state_content or custom_info is enough.
  • Enables customized displays without redundancy.
• Timer
  • Default behavior updated to avoid manual configuration:
• Unit
  • Unit detection improved:
• Error Messages
  • Lighter DOM by default for better performance.
  • Home Assistant color codes are now used for visual consistency.

📚 Documentation

• Added all the new parameters (state_content, etc.).
• New advanced guide: "Washing Machine example" (@erikgeurts) to show how to use it with multiple entities.
• Clarified unit management between automatic and manual modes.

[twilit cedar]

I summarize here all new improvement from 1.3.3 to now.
🔹 1.4.8
• Zero-centered bars (center_zero)
• Marginless layout, multiline secondary info
• Multi-entity support with auto-totaling
• 🛠 Fixed: unit_spacing
• ➕ YAML: center_zero, additions, min_width

🔹 1.4.7
• New bar effects: shimmer, radius, glass, gradient
• Multiple watermark styles (triangle, area, line...)
• 🧱 Full modular refactor
• ➕ Config validation added

🔹 1.4.6
• Improved editor animations & layout behavior
• Better badge sizing and alignment
• 🛠 Fixed: unreadable badge text

🔹 1.4.5
• Supports images instead of icons
• reverse_secondary_info_row option
• ➕ CSS/Doc updates for frameless mode

🔹 1.4.4
• Frameless mode: smoother, better compatibility
• Full CSS rework, cleaner UI editor
• 🧠 Throttling system for better performance

🔹 1.4.3
• State change tracking engine
• Refined theme and color management
• Better structured code and editor feedback

🔹 1.4.2
• Badge mode (compact version)
• Frameless cards without borders
• Advanced color options per element

🔹 1.4.1
• New YAML: bar_orientation, bar_size, layout
• Better gallery preview

🔹 1.4.0
• 🔥 NEW: Entity Progress Card Template
• Ideal for custom logic and dynamic calculations

---

🔸 Older Highlights (1.3.x)

• Support for unit_spacing, decimal precision, and icon fixes
• Accordion animations smoothed
• Toggle/action bugs fixed (tap, hold, double_tap)
• Memory optimizations and resource management

[twilit cedar]

1.4.9

🆕 What’s New – Nightly Update

✨ Improvements
• height option added
→ Allows setting height (e.g., 120px, 10em, 30%) for consistent layouts in stacks or grids.

🐞 Bug Fixes
• Fixed Chrome warning: mouse event / passive: true
• [#71] Secondary info cannot be a sensor value – Thanks @vogtmh
• [#68] disable_unit: true broke custom theme – Thanks @nicknol
• [#64] Enhancement: Changing the height of the card – Thanks @DaN660
• [#66] Blank dashboard issue – Thanks @Cptkex82, @awlobo, @vogtmh

🙏 Big thanks to @mooseBringer for help on Discord!

📚 README Updates
• Content refreshed for clarity
• Structure reorganized for better navigation
↪️ PR by @Duncan1106 → https://github.com/francois-le-ko4la/lovelace-entity-progress-card/pull/69

🚀 New Contributor
• @Duncan1106 made their first contribution 🎉
→ https://github.com/francois-le-ko4la/lovelace-entity-progress-card/pull/69

🔗 Links
• GitHub: https://github.com/francois-le-ko4la/lovelace-entity-progress-card
• Full Changelog: https://github.com/francois-le-ko4la/lovelace-entity-progress-card/compare/1.4.8...1.4.9

🆕 What’s New – v1.4.10
Greater visual flexibility & enhanced stability!

✅ New Features
• bar_size: xlarge → Bigger progress bar for better visibility
• Progress bar can now appear below the main content (ideal for horizontal layout)
• Card auto-adjusts to fit this layout
📷 Preview Screenshot

🛠 Improvements
• center_zero now defaults to min_value: -100 for more intuitive display
• Improved entity icon rendering + custom image support
→ #70 (@nicknol)
• Better data handling for different types (string, number...)
• Smoother responsive design (especially vertical)
• Codebase cleanup: reusable utilities, future-proof structure

🐞 Bug Fixes
• Fixed card height issue (caused by CSS typo)
• Badge editor/rendering glitches fixed
• WebSocket: improved update process initialization & stability

📚 README Updates
• Added docs for bar_size, min_value
• Updated browser compatibility matrix
→ #74 (@WarC0zes)

🌐 Browser Support

• Home Assistant 2024.0+
• Chrome 98+
• Edge 98+
• Firefox 94+
• Safari 15.4+
• Opera 84+

📎 Full Changelog:
https://github.com/francois-le-ko4la/lovelace-entity-progress-card/compare/1.4.9...1.4.10

[twilit cedar]

🎉 1.5.0-RC2 is (a)live! 🎉

Test the latest release candidate of the Entity Progress Card and explore exciting new features, enhanced validation, and improved documentation.

JS file: entity-progress-card.js
RC Testing Process: rc-testing.md
Release Notes & Infos: rc-testing-notes.md

💡 Highlights in this RC:

• Badge Template
• Progress bar positioning with bar_position (top, bottom, overlay)
• Single-line overlay mode with bar_single_line
• Trend indicators for real-time value changes
• Fully enhanced validation system
• Multilingual support & updated documentation

[twilit cedar]

🆕 New Feature 1.5.0/1.5.1

• Badge Template: Added
  ➡️ [Feature]: Entity Progress Badge Template #79 (@Pulpyyyy)

• Progress Bar Positioning
  New parameter: bar_position with the following options:

  • default: standard position
  • top: at the top of the card
  • bottom: at the bottom of the card
  • overlay: overlaid on top of the content

  ➡️ [Feature]: Add option to show progress bar along bottom (or top) border of card #73 (@Valdorama)
  ➡️ [Enhancement]: Style for XL bar #76 (@yduke)
  ➡️ [Feature]: bar position #80 (@NfxGT) (soon!)

• bar_effect: added support for center_zero (effect: 'radius', 'glass', 'gradient')

• Single-Line Mode for Overlay Bars
  New parameter: bar_single_line (for overlay mode bars only)

• Trend Indicator
  New parameter: trend_indicator (boolean)
  Displays trend icons:

  • mdi:chevron-up-box: upward trend
  • mdi:chevron-down-box: downward trend
  • mdi:equal-box: stable trend
    Automatically positioned at the top right of the card

  ➡️ [Feature]: trend indicator #82

• Enhanced validation system added:

  • YAML is fully analyzed and failback applyed.
  • Many new error messages have been introduced to handle cases such as:
    • Missing properties,
    • Invalid types (string, number, boolean, array, object),
    • Malformed entity IDs,
    • Discontinuous or inconsistent ranges (min > max),
    • Invalid theme, icon, or state contents,
    • Automatic application of default values.
  • deprecated parameters: Warn in JavaScript console when using deprecated parameters.

• Multilingual support: Extended and fixed

  • Extended:
    All new error messages have been translated into over 20 languages, including now
    • 🇻🇳 Vietnamese (vi)
    • 🇷🇺 Русский (ru)
    • 🇹🇭 Thai (th)
    • 🇮🇩 Indonesian (id)
    • 🇺🇦 Ukrainian (uk)
    • 🇮🇳 Hindi (hi)
    • 🇨🇿 Czech (cs)
    • 🇧🇩 Bengali (bn)
  • Fix Small/Medium/Large translation

• Card Template: Added the force_circular_background option in the template
  ➡️ [Feature]: Add force_circular_background: true in the template card options #83

• Editor: Added new xlarge size option for the bar.

• Accessibility: respects the “Reduce Motion” setting (iOS/macOS, Android, Windows) to limit animations and prevent dizziness, migraines, or distractions.