[Feature]: Battery Card

[JayReturns]

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

[arenasa70]

I modified your code to take into account the charging state:

type: custom:mushroom-template-card
entity: sensor.phone_sm_a536e_battery_level
primary: Andres Phone
secondary: '{{ states(entity)}} {{ state_attr(entity, "unit_of_measurement") }}'
icon: |-
  {% set level = states(entity) %}
  {% set state = states("sensor.phone_sm_a536e_battery_state") %}
  {% set rounded = (level | int / 10) | int * 10 %}
  {% if state.lower() == 'charging' %}
  {%    set charge = 'charging-' %}
  {% else %}
  {%    set charge = '' %}
  {% endif %}
  {% if level == 'unknown' %}
         mdi:battery-unknown
  {%  else %}
  {%     if rounded >= 100 %}
           mdi:battery
  {%     elif rounded > 0 %}
           mdi:battery-{{ charge }}{{ rounded }}
  {%     else %}
           mdi:battery-alert
  {%     endif %}
  {%   endif %}
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 %}

It's required to check a second entity to obtain the charging state.

[JayReturns]

Thanks, I did not consider adding such a feature because I only used this card for battery powered devices (motion sensors etc.). But could be worth adding this to my overview page.

[ark-]

Great idea. I found I rarely need a visual representation of battery, can you share the use case?

I found that I only care if the battery is low and I set up an automation to notify me when that's the case.

[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);
            }