[Feature]: Battery Card

Is your feature request related to a problem?

I have a lot of battery powered smart home devices I’d like to monitor. A regular entity card is not enough because I prefer to color the battery icon based on the battery level. My current workaround involves templates using the sensor’s states: This is what it looks like:

The code looks something like this:

type: custom:mushroom-template-card
primary: Arbeitszimmer Schalter
secondary: '{{ states(entity) }} {{ state_attr(entity, "unit_of_measurement") }}'
icon: |-
 {% set level = states(entity) %}
 {% set rounded = (level | int / 10) | int * 10 %}
 {% if level == 'unknown' %}
   mdi:battery-unknown
 {% else %}
   {% if rounded >= 100 %}
     mdi:battery
   {% elif rounded > 0 %}
     mdi:battery-{{ rounded }}
   {% else %}
     mdi:battery-alert
   {% endif %}
 {% endif %}
entity: sensor.arbeitszimmer_schalter_power
icon_color: |
 {% set level = states(entity)|int %}
 {% if level == 'unknown' %}
   purple
 {% else %}
   {% if level >= 50 %}
     green  
   {% elif level >= 20 and level < 50 %}
     orange
   {% else %}
     red
   {% endif %}
 {% endif %}

Describe the solution you’d like

The solution would involve a dedicated battery card which requires only the battery sensor to be given in order to achieve the above result.

Describe alternatives you’ve considered

See above.

Additional context

none

[AlexSchmitz222]

would appreciate aswell

[gfandrea]

I just wanted to share my take on the battery card:

This is my home battery, is the first card in my dashboard and I need this to know if I can use my appliance whitout spending

Right now I am using an entity card and the bar card (now the entity card doesn’t show the percentage, but you could semplify this card moving the percentage from the bar to the entity card)

this is the code:

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 45% 55%
      margin: '-4px -4px -8px -4px;'
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.powerwall_solar_now
        name: Batteria
        icon: mdi:home-battery-outline
        icon_color: teal
        icon_type: icon
        tap_action:
          action: navigate
          navigation_path: energia
      - type: custom:bar-card
        entity: sensor.powerwall_charge
        severity:
          - from: '0'
            color: orange
            to: '25'
          - from: '26'
            to: '49'
            color: orange
          - from: '50'
            to: '100'
            color: teal
        name: ' '
        height: 42px
        min: '0'
        max: '100'
        entity_row: true
        color: teal
        positions:
          icon: 'off'
          indicator: 'off'
        card_mod:
          style: |
            ha-card {
              padding: 12px;
              margin-left: 12px;
              --bar-card-border-radius: 12px;
            }
            bar-card-value {
              margin: 12px;
              font-size: 12px;
              font-weight: bolder;
            }
            bar-card-backgroundbar {
              opacity: 0.2;
              filter: brightness(1);
            }

EDIT: made more simple ad mushroom like:

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 45% 55%
      margin: '-4px -4px -8px -4px;'
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.powerwall_charge
        primary: Batteria
        secondary: '{{states(''sensor.powerwall_charge'') }}%'
        icon: mdi:home-battery-outline
        icon_color: teal
        icon_type: icon
        badge_icon: "{% if is_state('binary_sensor.powerwall_charging','on') %}\n\_\_mdi:arrow-up-bold\n{% endif %}"
        badge_color: "{% if is_state('binary_sensor.powerwall_charging','on') %}\n\_\_teal\n{% endif %}"
        tap_action:
          action: navigate
          navigation_path: energia
      - type: custom:bar-card
        entity: sensor.powerwall_charge
        severity:
          - from: '0'
            color: gray
            to: '0'
          - from: '1'
            to: '49'
            color: teal
          - from: '50'
            to: '100'
            color: teal
        name: ' '
        height: 42px
        min: '0'
        max: '100'
        entity_row: true
        color: teal
        positions:
          icon: 'off'
          indicator: 'off'
          value: 'off'
        card_mod:
          style: |
            ha-card {
              padding: 12px;
              margin-left: 12px;
              --bar-card-border-radius: 12px;
            }
            bar-card-backgroundbar {
              opacity: 0.2;
              filter: brightness(1);
            }