improved "card_battery" card

[vncnt-dev]

I improved the "card_battery" card for users of the official Home Assistant Companion App, which indicate whether and how the device is being charged and colors the icon based on the battery level.
(no braking changes)

wireless charging	wired charging

warning color	danger color

example config:

- type: 'custom:button-card'
  template: card_battery
  entity: sensor.mi_9_battery_level
  variables:
       ulm_card_battery_battery_charger_type_entity_id: sensor.mi_9_charger_type
       ulm_card_battery_battery_battery_level_danger: 30
       ulm_card_battery_battery_battery_level_warning: 80
  name: Smartphone

Variable	Example	Required	Explanation
entity	sensor.yourSmartphone_battery_level	true	This is your battery entity
ulm_card_battery_attribute	battery_attribute	false	If your entity provides the battery percent in an attribute (= not as an own sensor), fill in the attribute's name here. E.g. if you have `sensor.livingroom_thermometer` and the attribute for your battery power is `sensor.livingroom_thermometer.attributes.battery_percent`, you fill in battery_percent here.
ulm_card_battery_battery_state_entity_id	sensor.yourSmartphone_battery_state	false	Entity that holds the battery state (charging/discharging). If provided, the Icon will display the current status.
ulm_card_battery_charger_type_entity_id	sensor.yourSmartphone_charger_type	false	Entity that holds the charger type (ac/wireless/none). This Entity replaces the need for the `ulm_card_battery_battery_state_entity_id` entity. If provided, the Icon will display the current charger type. This is only useful if you charge your devices Wireless and with cable.
ulm_card_battery_battery_level_danger	30	true	Changes the color of the Icon, if the battery level falls below the provided value. Must be higher than `ulm_card_battery_battery_level_waring`
ulm_card_battery_battery_level_waring	50	true	Changes the color of the Icon, if the battery level falls below the provided value.
ulm_card_battery_color_battery_level_danger:	'var(--google-yellow)'	false	Color of icon if battery level is within the 'danger' zone. default: 'var(--google-red)'
ulm_card_battery_color_battery_level_warning:	'var(--google-yellow)'	false	Color of icon if battery level is within the 'warning' zone. default: 'var(--google-yellow)'
ulm_card_battery_color_battery_level_ok:	'var(--google-green)'	false	Color of icon if battery level is not within the 'danger' or 'warning' zone. default: 'var(--google-green)'

[CM000n]

This is a great work! Thank you very much!
Would you mind switching to DEV as a base branch? There have been some developments in the meantime that currently prevent a merge.

We should also open a ticket in the page repo to revise the card documentation:
https://github.com/UI-Lovelace-Minimalist/page/issues
Unfortunately, none of us currently has administration rights in the page repo, as long as nothing is heard from @Paddy0174. :-(

[bavo]

Why does it matter whether the warning level has been set here?
In my opinion, if the battery level is lower than danger level we should always choose the danger level color.

[bavo]

I've posted a small remark above.

But the card looks awesome! Great work 💪

[vncnt-dev]

I've posted a small remark above.

But the card looks awesome! Great work 💪

Thanks for the code review.
You're right, I fixed it and also made the code cleaner in general.

[checkerschaf]

Here's a small typo. I guess it should be ulm_card_battery_battery_level_warning

[vncnt-dev]

thanks

[CM000n]

Hey @vncnt-dev. Seems that you have some trailing whitespaces and wrong quotet string values in your code.
Please have a look at the last pre-commit check logs: https://github.com/UI-Lovelace-Minimalist/UI/runs/4550906638?check_suite_focus=true#step:4:53

[vncnt-dev]

I have one warning left, but I can't figure out what the error is?
Could somebody help? :)

[CM000n]

I have merged it now. It was the way of commenting on line 291

This...

    color: "blue" # blue, red, green, yellow, purple, pink

should be commented like this:

    # blue, red, green, yellow, purple, pink
    color: "blue"