Battery state card for Home Assistant
Battery state card for Home Assistant. It shows battery levels from connected devices (entities).
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.
| 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)
| 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
10as multiplier.
+common options (if specified they will override the card-level ones)
| 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)
| 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)
| Value | Color | Description | |:------|:------|:------| | 20 |
var(--label-badge-red)| If value is less or equal
20the color will be red | 55 |
var(--label-badge-yellow)| If value is less or equal
55the color will be yellow | 100 |
var(--label-badge-green)| If value is less or equal
100the color will be green
Note: the exact color is taken from CSS variable and it depends on your current template.
| 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
stateproperty. Include filters are processed only once - when page is loaded (to minimize perf impact).
| 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
Operator is an optional property. If operator is not specified it depends on
valueconfig property: * if
valueis not specified the default operator is
exists* if
valuestarts and ends with shalsh "
/" or if it contains wildcard "
*" the operator is
matches* if
valueproperty 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
valueto be specified. |
"="| If value equals the one specified in
valueproperty. |
">"| If value is greater than one specified in
valueproperty. Possible variant:
">=". Value must be numeric type. |
" | If value is lower than one specified invalueproperty. Possible variant:"<=". Value must be numeric type. |"contains"| If value contains the one specified invalueproperty |"matches"| If value matches the one specified invalueproperty. 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 whenactiondefined ascall-service. Eg."notify.pushover"| servicedata | any | | Service data to inlclue whenactiondefined ascall-service| navigationpath | string | | Path to navigate to whenactiondefined asnavigate. Eg."/lovelace/0"| url_path | string | | Url to navigate to whenactiondefined asurl. 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 valueCharging-state object
Note: All of these values are optional but at least
entity_idorstateorattributeis required.| Name | Type | Default | Since | Description | |:-----|:-----|:-----|:-----|:-----| | entity_id | 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
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 inname| 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.
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).
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_numericCustom colors
Custom threshold colors
type: custom:battery-state-card title: "Custom color thresholds" 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
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_thresholdsproperty you can disable colors.
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_levelYou 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" 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_levelSorted list and collapsed view
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_levelBattery 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
entitiescollection).
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_batteriesNon-numeric state values
If your sensor doesn't produce numeric values you can use
state_mapproperty 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: 25Charging 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.samsungEntity 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_renameproperty to define renaming rules.
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
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 textTap actions
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: 80Extra 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.
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: moduleIf you don't have HACS you can download js file from latest release. Drop it then in
wwwfolder in yourconfigdirectory. Next add the following entry in lovelace configurationyaml resources: - url: /local/battery-state-card.js type: moduleDevelopment
npm install npm run buildBundeled transpiled code will appear in
distdirectory.For automatic compilation on detected changes use:
npm run watchNote: there is "undocumented"
value_overrideproperty on the entity object which you can use for testing.Sending pull request
When you send PR please remember to base your branch on: *
masterfor bug-fixes *vNextfor new featuresDo 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