Awesome

Battery State Card

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.

Breaking changes

• Secondary info last_updated / last_changed values. Now these values has to be put in quotes and curly braces e.g. secondary_info: "{last_updated}"
• Secondary info charging indication. Now the value has to be in curly braces e.g. secondary_info: "{charging}"
• Sorting setting has changed. Now it is called sort (previously "sort_by_level") and it can define multiple levels of sorting.
• Color settings are now in a single config entry colors ("color_thresholds" and "color_gradient" settings are not working any more)

• When you want to use it as entity (e.g. in entities card) you need to use differnt type: custom:battery-state-entity instead of custom:battery-state-card.
• Custom styles are not supported any more

Config

Default card config

When config is empty the card is initialized with the default config which you can find below. Once you start adding custom configuration the default configuration won't be applied hence if you wish to alter the default config please copy-paste it from the below listing.

type: custom:battery-state-card
secondary_info: "{last_changed}"
filter:
  include:
    - name: "attributes.device_class"
      value: "battery"
  exclude:
    - name: "entity_id"
      value: "binary_sensor.*"
sort:
  by: "state"
collapse: 8
bulk_rename:
  - from: " Battery"
  - from: " level"
colors:
  steps:
    - '#ff0000'
    - '#ffff00'
    - '#00ff00'
  gradient: true

Card config

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

Entity object

+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).

Keyword string (KString)

This is a string value containing dynamic values. Data for dynamic values can be taken from entity properties, its attributes, other entity state/attributes, etc.

Keywords support simple functions to convert the values

You can execute functions one after another. For example if you have the value "Battery level: 26.543234%" and you want to extract and round the number then you can do the following: "{attribute.battery_level|replace(Battery level:,)|replace(%,)|round()} %" and the end result will be "27"

Sort object

Note: you can simplify this setting and use just use strings if you want to keep ascending order e.g.:

sort: 
  - "name"
  - "state"

Note: the state and name values used for sorting are the ones you see rendered on the card (e.g. after state_map transformations). You can use raw entity values to sort by prefixing their names with entity.. E.g. entity.last_changed or entity.attributes.battery_level or entity.state

Color settings

Note: enabling gradient requires at least two colors/steps and all provided colors need to be in hex HTML format e.g. #ff00bb.

Color step

Default colors

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

Filters

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

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 "="

Tap-Action

The definition is similar to the default tap-action in HomeAssistant.

Convert

Bulk rename

Charging-state object

Note: All of these values are optional but at least entity_id or state or attribute is required.

Attribute object

Group object

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.

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).

Note: there is a different type used.

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-entity
    entity: sensor.temp_outside_battery_numeric

Custom colors

Custom threshold colors

type: custom:battery-state-card
title: "Custom color thresholds"
colors:
  steps:
    - 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

type: custom:battery-state-card
title: "Color gradient"
colors:
  steps:
    - "#ff0000" # red
    - "#ffff00" # yellow
    - "#00ff00" # green
  gradient: true
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 steps property you can disable colors.

type: custom:battery-state-card
title: "No color"
colors: 
  steps: []
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.

type: custom:battery-state-card
title: "No color - selective"
colors:
  steps:
    - 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

type: custom:battery-state-card
title: "Sorted list and collapsed view"
sort: "state"
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).

type: 'custom:battery-state-card'
title: Battery state card
sort: "state"
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:

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.

type: 'custom:battery-state-card'
title: Filters
sort: "state"
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: ">"

Bulk rename using BulkRename object to disable capitalizing the first letter of entity name (enabled by default)

type: 'custom:battery-state-card'
title: Filters
sort: "state"
bulk_rename:
  rules:
    - 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. "
  capitalize_first: false
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

Secondary info

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

type: 'custom:battery-state-card'name: Click
colors:
  steps:
    - '#ff0000'
    - '#0000ff'
    - '#00ff00'
  gradient: true
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

Other use cases

RSSI sensors (signal strength)

type: custom:battery-state-card
secondary_info: '{last_changed}'
icon: mdi:signal
# below an example with dynamic icon
# icon: "mdi:signal-cellular-{state|abs()|greaterthan(69,outline)|greaterthan(59,1)|greaterthan(49,2)|greaterthan(2,3)}"
filter:
  include:
    - name: attributes.device_class
      value: signal_strength
sort:
  by: state
collapse: 8
bulk_rename:
  - from: ' Signal'
  - from: ' strength'
  - from: ' Rssi'
  - from: ' numeric'
value_override: '{state|abs()}'
colors:
  steps:
    - color: '#00ff00'
      value: 50
    - color: '#ffff00'
      value: 65
    - color: '#ff0000'
      value: 100
  gradient: true

HDD temperatures

type: custom:battery-state-card
title: HDD temperatures
icon: mdi:harddisk
colors:
  steps:
    - value: 26
      color: blue
    - value: 36
      color: green
    - value: 45
      color: yellow
    - value: 60
      color: red
tap_action:
  action: more-info
collapse: 3
sort: 
  by: state
  desc: true
unit: °C
round: 0
filter:
  include:
    - name: entity_id
      value: sensor.nasos_sd*
    - name: entity_id
      value: sensor.omv2_sd*
    - name: entity_id
      value: sensor.exnas_st12*temper*
    - name: entity_id
      value: sensor.*_disk_*_temperature
entities:
  - entity: sensor.vidik_temperature
  - entity: sensor.exnas_d1_temperatures_temperature

Motion sensors (sorted by state and last changed property)

type: custom:battery-state-card
secondary_info: '{last_changed}'
icon: '{state|equals(off,mdi:motion-sensor-off)|equals(on,mdi:motion-sensor)}'
filter:
  include:
    - name: attributes.device_class
      value: motion
sort:
  - by: state
    desc: true
  - by: entity.last_changed
    desc: true
colors:
  steps:
    - value: 0
      color: inherit
    - value: 1
      color: var(--state-active-color)
unit: null
state_map:
  - from: 'off'
    to: 0
    display: Clear
  - from: 'on'
    to: 1
    display: Detected
collapse: 8

Installation

Once added to HACS add the following resource to your lovelace configuration (if you have yaml mode active)

lovelace:
  mode: 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

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

Troubleshooting

You can turn on the debug output via debug setting. It can be turned on for all of the entities:

debug: true

Or single entity by specifying entity_id:

debug: sensor.owl_energy_signal_strength

Note: "Copy to clipboard" is available only if you access your HA via https.

After clicking on show/hide you will see the entity data which is available for the card to process.

{
  "entity_id": "sensor.owl_energy_signal_strength",
  "state": "-72",
  "attributes": {
    "state_class": "measurement",
    "event": "115a011a32e20100000172000031bbc85d69",
    "unit_of_measurement": "dBm",
    "assumed_state": true,
    "device_class": "signal_strength",
    "friendly_name": "Owl energy Signal strength"
  },
  "context": {
    "id": "01HPC8X76DDZ4D3XK5BMH8KKFW",
    "parent_id": null,
    "user_id": null
  },
  "last_changed": "2024-02-11T14:24:59.597Z",
  "last_updated": "2024-02-11T14:24:59.597Z",
  "display": {
    "entity_id": "sensor.owl_energy_signal_strength",
    "device_id": "91b4ffe9a73db4d1ee9482d0e7d94a84",
    "platform": "rfxtrx",
    "entity_category": "diagnostic",
    "name": "Signal strength"
  },
  "device": {
    "area_id": "outside",
    "configuration_url": null,
    "config_entries": [
      "2c67d4fe27613df1b3de59a1f042dc5c"
    ],
    "connections": [],
    "disabled_by": null,
    "entry_type": null,
    "hw_version": null,
    "id": "91b4ffe9a73db4d1ee9482d0e7d94a84",
    "identifiers": [
      [
        "rfxtrx",
        "5a",
        "1",
        "32:e2"
      ]
    ],
    "manufacturer": null,
    "model": "ELEC2, CM119/160",
    "name_by_user": "Owl energy",
    "name": "ELEC2, CM119/160 32:e2",
    "serial_number": null,
    "sw_version": null,
    "via_device_id": null
  },
  "area": {
    "aliases": [],
    "area_id": "outside",
    "name": "Outside",
    "picture": null
  }
}

When you look at the entity data you can for example figure out what you can display using KString e.g. Area: {area.name}, Device: {device.name_by_user}

Development

npm install
npm run build

Bundeled transpiled code will appear in dist directory.

For automatic compilation on detected changes use:

npm run watch

The watch script starts web server exposing dist dir so you can reference the local file in your HA via the following:

lovelace:
  resources:
    - url: http://127.0.0.1:5501/dist/battery-state-card.js
      type: module

Note: there is "undocumented" value_override property on the entity object which you can use for testing.

Testing

npm run test

Or (to see tests coverage report)

npm run test+coverage

Tests in card and entity directory are e2e tests which run in Electron (headless) browser. All the other tests run in node env (hence they are much faster).

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.

Automatic notifications about low battery levels

It is not possible to do such a thing from the card level. If you want to get automatic notifications/alerts you can use the blueprint shared by sbyx:

https://my.home-assistant.io/create-link/?redirect=blueprint_import&blueprint_url=https%3A%2F%2Fgist.github.com%2Fsbyx%2F1f6f434f0903b872b84c4302637d0890

Click on "copy url" button and paste it in your browser. If you have configured my.home-assistant.io already you should be redirected to the page in your HA where you can review the blueprint code and add it. Once you add it you can create automation based on it.

My other HA related repos

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