Need help with battery-state-card?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

maxwroc
313 Stars 13 Forks MIT License 386 Commits 30 Opened issues

Description

Battery state card for Home Assistant

Services available

!
?

Need anything else?

Contributors list

# 243,913
lovelac...
lovelac...
TypeScr...
CSS
147 commits
# 609,833
Angular
device-...
HTML
Shell
1 commit
# 49,273
C#
c-sharp
entity-...
entity-...
1 commit
# 220,305
PHP
Symfony
beansta...
rabbitm...
1 commit
# 48,643
Python
music-l...
musicbr...
Raspber...
1 commit

Battery State Card

GitHub Release GitHub All Releases hacs_badge Community Forum

Battery state card for Home Assistant. It shows battery levels from connected devices (entities).

Overview

This card was inspired by another great card showing the battery states. I have decided to implement my own as there was no response for pull requests from author and I wanted to fix few things and also add couple new features.

image

Config

Card config

| Name | Type | Default | Since | Description | |:-----|:-----|:-----|:-----|:-----| | type | string | (required) | v0.9.0 | Must be

custom:battery-state-card
| | entities | list(Entity) | (required) | v0.9.0 | List of entities. It can be collection of entity/group IDs (strings) instead of Entity objects. | title | string | | v0.9.0 | Card title | sortbylevel | string | | v0.9.0 | Values:
asc
,
desc
| collapse | number | list(Group) | | v1.0.0 | Number of entities to show. Rest will be available in expandable section (example). Or list of entity/battery groups (example) | filter | Filters | | v1.3.0 | Filter groups to automatically include or exclude entities (example) | bulk_rename | list(Convert) | | v1.3.0 | Rename rules applied for all entities (example) | style | string | | v1.4.0 | Extra CSS code to change/adjust the appearance (example)

+common options (if specified they will be apllied to all entities)

Entity object

| Name | Type | Default | Since | Description | |:-----|:-----|:-----|:-----|:-----| | entity | string | (required) | v0.9.0 | Entity ID | name | string | | v0.9.0 | Entity name override | icon | string | | v1.6.0 | Icon override (if you want to set a static custom one) | attribute | string | | v0.9.0 | Name of attribute (override) to extract the value from. By default we look for values in the following attributes:

battery_level
,
battery
. If they are not present we take entity state. | multiplier | number |
1
| v0.9.0 | If the value is not in 0-100 range we can adjust it by specifying multiplier. E.g. if the values are in 0-10 range you can make them working by putting
10
as multiplier.

+common options (if specified they will override the card-level ones)

Common options

These options can be specified both per-entity and at the top level (affecting all entities).

| Name | Type | Default | Since | Description | |:-----|:-----|:-----|:-----|:-----| | colorthresholds | list(Threshold) | (see below) | v0.9.0 | Thresholds and colors for indication of battery level. | colorgradient | list(string) | | v0.9.0 | List of hex HTML colors. At least two. In #XXXXXX format, eg.

"#FFB033"
. | tapaction | TapAction | | v1.1.0 | Action that will be performed when this entity is tapped. | statemap | list(Convert)| | v1.1.0 | Collection of value mappings. It is useful if your sensor doesn't produce numeric values. (example) | chargingstate | ChargingState | | v1.1.0 | Configuration for charging indication. (example) | secondaryinfo | string | | v1.3.0 | Secondary info text. It can be a custom text, attribute name or state property name e.g.
charging
,
last_changed
,
"My battery"
. (example)

Threshold object

| Name | Type | Default | Since | Description | |:-----|:-----|:-----|:-----|:-----| | value | number | (required) | v0.9.0 | Threshold value | color | string |

inherit
| v0.9.0 | CSS color which will be used for levels below or equal the value field. If not specified the default one is used (default icon/text color for current HA theme)

Default thresholds

| Value | Color | Description | |:------|:------|:------| | 20 |

var(--label-badge-red)
| If value is less or equal
20
the color will be red | 55 |
var(--label-badge-yellow)
| If value is less or equal
55
the color will be yellow | 100 |
var(--label-badge-green)
| If value is less or equal
100
the color will be green

Note: the exact color is taken from CSS variable and it depends on your current template.

Filters

| Name | Type | Default | Description | |:-----|:-----|:-----|:-----| | include | list(Filter) | | Filters for auto adding entities | exclude | list(Filter) | | Filters to remove entities dynamically

Note: The action (include/exclude) is performed when at least one of the filters is matching (OR). It is not possible currently to specify two or more conditions (filters combined with AND operator).

Note: Include filters should rely on static entity properties. E.g. you should not add include filter which checks the

state
property. Include filters are processed only once - when page is loaded (to minimize perf impact).

Filter object

| Name | Type | Default | Description | |:-----|:-----|:-----|:-----| | name | string | (required) | Name of the property/attribute. E.g.

state
,
attribute.device_class
| operator | string | | Operator for value comparison (see filter operators) | value | any | | Value to compare the property/attribute to

Filter operators

Operator is an optional property. If operator is not specified it depends on

value
config property: * if
value
is not specified the default operator is
exists
* if
value
starts and ends with shalsh "
/
" or if it contains wildcard "
*
" the operator is
matches
* if
value
property is set but above conditions are not met the operator is "
=
"

| Name | Type | |:-----|:-----| |

"exists"
| It just checks if value is present (e.g. to match entities having particular attribute regardless of the attribute value). It doesn't require
value
to be specified. |
"="
| If value equals the one specified in
value
property. |
">"
| If value is greater than one specified in
value
property. Possible variant:
">="
. Value must be numeric type. |
" | If value is lower than one specified in 
value
property. Possible variant:
"<="
. Value must be numeric type. |
"contains"
| If value contains the one specified in
value
property |
"matches"
| If value matches the one specified in
value
property. You can use wildcards (e.g.
"*_battery_level"
) or regular expression (must be prefixed and followed by slash e.g.
"/[a-z_]+_battery_level/"
)

Tap-Action

The definition is similar to the default tap-action in HomeAssistant. | Name | Type | Default | Description | |:-----|:-----|:-----|:-----| | action | string |

none
| Action type, one of the following:
more-info
,
call-service
,
navigate
,
url
,
none
| service | string | | Service to call when
action
defined as
call-service
. Eg.
"notify.pushover"
| servicedata | any | | Service data to inlclue when
action
defined as
call-service
| navigation
path | string | | Path to navigate to when
action
defined as
navigate
. Eg.
"/lovelace/0"
| url_path | string | | Url to navigate to when
action
defined as
url
. Eg.
"https://www.home-assistant.io"

Convert

| Name | Type | Default | Description | |:-----|:-----|:-----|:-----| | from | any | (required) | Value to convert. Note it is type sensitive (eg.

false
!=
"false"
) | to | any | (required) | Target value

Charging-state object

Note: All of these values are optional but at least

entity_id
or
state
or
attribute
is required.

| Name | Type | Default | Since | Description | |:-----|:-----|:-----|:-----|:-----| | entityid | string | | v1.1.0 | Other entity id where charging state can be found | attribute | list(Attribute) | | v1.2.0 | List of attribute name-values indicating charging in progress | state | list(any) | | v1.1.0 | List of values indicating charging in progress | icon | string | | v1.1.0 | Icon to show when charging is in progress | secondaryinfotext | string | | v1.1.0 | Text to be shown when battery is charging. To show it you need to have `secondaryinfo: charging` property set on entity. (example)

Attribute object

| Name | Type | Default | Description | |:-----|:-----|:-----|:-----| | name | string | (required) | Name of the attribute | value | string | | Value of the attribute

Group object

| Name | Type | Default | Since | Description | |:-----|:-----|:-----|:-----|:-----| | name | string | | v1.4.0 | Name of the group. Keywords available:

{min}
,
{max}
,
{count}
,
{range}
| secondary_info | string | | v1.4.0 | Secondary info text, shown in the second line. Same keywords available as in
name
| icon | string | | v1.4.0 | Group icon | min | number | | v1.4.0 | Minimal battery level. Batteries below that level won't be assigned to this group. | max | number | | v1.4.0 | Maximal battery level. Batteries above that level won't be assigned to this group.

Examples

You can use this component as a card or as an entity (e.g. in

entities card
);

Card view

Card view is useful when you want to have cleaner config (you don't need to duplicate settings in every entity entry) and when you want to apply same settings (e.g. colors) for all the battery entities.

image

type: custom:battery-state-card
title: "Battery levels"
entities:
  - sensor.bathroom_motion_battery_level
  - sensor.bedroom_balcony_battery_level
  - entity: sensor.bedroom_motion_battery_level
    name: "Bedroom motion sensor"

Entity view

Entity view is useful when you want to add battery status next to other sensors (in the same card).

image

type: entities
title: Other
show_header_toggle: false
entities:
  - sensor.energy_rpi_monthly
  - sensor.home_assistant_v2_db
  - sensor.hassio_online
  - sensor.last_boot
  - type: custom:battery-state-card
    entity: sensor.temp_outside_battery_numeric

Custom colors

Custom threshold colors

image

type: custom:battery-state-card
title: "Custom color thresholds"
color_thresholds:
  - value: 35 # applied to all values below/equal
    color: "#8fffe1"
  - value: 45 # applied to all values below/equal
    color: "#8fbbff"
  - value: 60 # applied to all values below/equal
    color: "#978fff"
  - value: 100 # applied to all values below/equal
    color: "#fe8fff"
entities:
  - entity: sensor.bathroom_motion_battery_level
    name: "Bathroom motion sensor"
  - entity: sensor.bedroom_balcony_battery_level
    name: "Bedroom balkony door sensor"
  - entity: sensor.bedroom_motion_battery_level
    name: "Bedroom motion sensor"
  - entity: sensor.bedroom_switch_battery_level
    name: "Bedroom Aqara switch"
  - entity: sensor.bedroomtemp_battery_level
    name: "Bedroom temp. sensor"

Gradient colors

image

type: custom:battery-state-card
title: "Color gradient"
color_gradient:
  - "#ff0000" # red
  - "#ffff00" # yellow
  - "#00ff00" # green
entities:
  - entity: sensor.bathroom_motion_battery_level
    name: "Bathroom motion sensor"
  - entity: sensor.bedroom_balcony_battery_level
    name: "Bedroom balkony door sensor"
  - entity: sensor.bedroom_motion_battery_level
    name: "Bedroom motion sensor"
  - entity: sensor.bedroom_switch_battery_level
    name: "Bedroom Aqara switch"
  - entity: sensor.bedroomtemp_battery_level
    name: "Bedroom temp. sensor"

Disabling colors

When you put empty array in

color_thresholds
property you can disable colors.

image

type: custom:battery-state-card
title: "No color"
color_thresholds: []
entities:
  - sensor.bedroom_motion_battery_level
  - sensor.bathroom_motion_battery_level
  - sensor.bedroomtemp_battery_level
  - sensor.bedroom_balcony_battery_level
  - sensor.bedroom_switch_battery_level

You can setup as well colors only for lower battery levels and leave the default one for the rest.

image

type: custom:battery-state-card
title: "No color - selective"
color_thresholds:
  - value: 20
    color: "red"
  - value: 60
    color: "yellow"
entities:
  - sensor.bedroom_motion_battery_level
  - sensor.bathroom_motion_battery_level
  - sensor.bedroomtemp_battery_level
  - sensor.bedroom_balcony_battery_level
  - sensor.bedroom_switch_battery_level

Sorted list and collapsed view

ezgif com-resize

type: custom:battery-state-card
title: "Sorted list and collapsed view"
sort_by_level: "asc"
collapse: 4
entities:
  - sensor.bedroom_motion_battery_level
  - sensor.bathroom_motion_battery_level
  - sensor.bedroomtemp_battery_level
  - sensor.bedroom_balcony_battery_level
  - sensor.bedroom_switch_battery_level

Battery groups

Battery groups allow you to group together set of batteries/entities based on couple conditions. You can use HA group entities to tell which entities should go to the group, or you can set min/max battery levels, or specify explicit list of entities which should be assigned to particular group.

Note: If you have battery groups defined in Home Assistant you can use their IDs instead of single entity ID (in

entities
collection).

image

type: 'custom:battery-state-card'
title: Battery state card
sort_by_level: asc
collapse:
  - name: 'Door sensors (min: {min}%, count: {count})' # special keywords in group name
    secondary_info: 'Battery levels {range}%' # special keywords in group secondary info
    icon: 'mdi:door'
    entities: # explicit list of entities
      - sensor.bedroom_balcony_battery_level
      - sensor.main_door_battery_level
      - sensor.living_room_balcony_battery_level
  - group_id: group.motion_sensors_batteries # using HA group
    secondary_info: No icon # Secondary info text
    icon: null # removing default icon for this group (from HA group definition)
  - group_id: group.temp_sensors_batteries
    min: 99 # all entities below that level should show up ungroupped
    icon: 'mdi:thermometer' # override for HA group icon
entities:
  # if you need to specify some properties for any entity in the group
  - entity: sensor.bedroom_balcony_battery_level
    name: "Bedroom balkony door"
    multiplier: 10
  # entities from below HA group won't be grouped as there is no corresponding collapsed group
  - group.switches_batteries

Non-numeric state values

If your sensor doesn't produce numeric values you can use

state_map
property and provie mappings from one value to the other.
type: custom:battery-state-card
title: "String values - state map"
entities:
  - entity: binary_sensor.battery_state
    name: "Binary sensor state"
    state_map:
      - from: "on"
        to: 100
      - from: "off"
        to: 25
  - entity: sensor.bedroom_motion
    name: "Sensor string attribute"
    attribute: "replace_battery"
    state_map:
      - from: false
        to: 100
      - from: true
        to: 25

Charging state indicators

If your device provides charging state you can configure it in the following way:

image

type: custom:battery-state-card
title: "Charging indicators"
entities:
  - entity: sensor.device_battery_numeric
    charging_state: # uses other entity state value
      entity_id: binary_sensor.device_charging
      state: "on"
  - entity: sensor.mi_roborock
    charging_state: # uses sensor.mi_roborock state value
      state: "charging"
      icon: "mdi:flash"
      color: "yellow"
  - entity: sensor.samsung
    charging_state: # uses is_charging attribute on sensor.samsung entity
      attribute:
        name: "is_charging"
        value: "yes"

Card-level charging state configuration

type: custom:battery-state-card
title: "Charging indicators"
charging_state:
  attribute: # whenever one of below attributes is matching
    - name: "Battery State"
      value: "Charging"
    - name: "is_charging"
      value: true
  state: # or if entity state matches one of the following
    - "charging"
    - "Charging"
entities:
  - sensor.device_battery_numeric
  - sensor.mi_roborock
  - sensor.samsung

Entity filtering and bulk renaming

If you want to add battery entities automatically or if you want to see them only in specific conditions you can use filters.

If you add entities automatically you cannot specify properties for individual entities. It is possible though to specify card-level properties which will be applied to all entities (see common options). For example if you wanted to set custom names (e.g. if your sensors are suffixed with some common string) you can use

bulk_rename
property to define renaming rules.

filters

type: 'custom:battery-state-card'
title: Filters
sort_by_level: "asc"
bulk_rename:
  - from: "Battery Level" # simple string replace (note: "to" is not required if you want to remove string)
    to: "sensor"
  - from: "/\\s(temperature|temp)\\s/" # regular expression
    to: " temp. "
entities:
  # entities requiring additional properties can be added explicitly
  - entity: sensor.temp_outside_battery_numeric
    multiplier: 10
    name: "Outside temp. sensor"
filter:
  include: # filters for auto-adding
    - name: entity_id # entities which id ends with "_battery_level"
      value: "*_battery_level"
    - name: attributes.device_class # and entities which device_class attribute equals "battery"
      value: battery
  exclude: # filters for removing
    - name: state # exclude entities above 99% of battery level
      value: 99
      operator: ">"

Secondary info

image

type: custom:battery-state-card
name: Secondary info
secondary_info: last_updated # applied to all entities which don't have the override
entities:
  - entity: sensor.bedroom_motion_battery_level
    name: "Bedroom motion sensor"
  - entity: sensor.mi_robrock
    secondary_info: charging # only appears when charging is detected
    charging_state:
      attribute:
        name: "is_charging"
        value: true
      secondary_info_text: "Charging in progress" # override for "Charging" text
  - entity: sensor.jacks_motorola
    name: "Jack's phone"
    secondary_info: "Motorola" # Static text

Tap actions

image

type: 'custom:battery-state-card'name: Click
color_gradient:
  - '#ff0000'
  - '#0000ff'
  - '#00ff00'
entities:
  - entity: sensor.bedroom_motion_battery_level
    name: More info
    tap_action: more-info
    value_override: 100
  - entity: sensor.bathroom_motion_battery_level
    name: Navigation path
    tap_action:
      action: navigate
      navigation_path: /lovelace/1
    value_override: 0
  - entity: sensor.bedroomtemp_battery_level
    name: Call service - Pushover
    tap_action:
      action: call-service
      service: notify.pushover
      service_data:
        message: Call service works
        title: Some title
    value_override: 60
  - entity: sensor.bedroom_balcony_battery_level
    name: Url
    tap_action:
      action: url
      url_path: 'http://reddit.com'
    value_override: 20
  - entity: sensor.bedroom_switch_battery_level
    name: No action
    value_override: 80

Extra styles

You can add CSS code which can change the appearance of the card.

Note: HTML code (including CSS class names) can change in next releases so your custom styles may require adjustments after card update.

image

title: Glance view with custom CSS
type: 'custom:battery-state-card'
entities:
  - group.all_battery_sensors
sort_by_level: asc
style: |
  .card-content {
    display: grid;
    grid-template-columns: auto auto auto auto
  }
  .entity-row.entity-spacing {
    margin: 8px 0;
  }
  .entity-row {
    display: flex;
    flex-direction: column;
  }
  .entity-row .name {
    order: 1;
    overflow: hidden;
    width: 80px;
    font-size: 12px
  }
  .entity-row.non-numeric-state .state {
    display: none;
  }
  .entity-row:not(.non-numeric-state) .state {
    position: absolute;
    text-shadow: 1px 1px black;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    overflow: hidden;
  }

Installation

Once added to HACS add the following to your lovelace configuration

yaml
resources:
  - url: /hacsfiles/battery-state-card/battery-state-card.js
    type: module

If you don't have HACS you can download js file from latest release. Drop it then in

www
folder in your
config
directory. Next add the following entry in lovelace configuration
yaml
resources:
  - url: /local/battery-state-card.js
    type: module

Development

npm install
npm run build

Bundeled transpiled code will appear in

dist
directory.

For automatic compilation on detected changes use:

npm run watch

Note: there is "undocumented"

value_override
property on the entity object which you can use for testing.

Sending pull request

When you send PR please remember to base your branch on: *

master
for bug-fixes *
vNext
for new features

Do you like the card?

If you do like the card please star it on github! This is a great way to give feedback and motivation boost for me to continue working on it. Thanks!

License

This project is under the MIT license.

My other HA related repos

github-flexi-card | homeassistant-config | lovelace-card-boilerplate

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.