Style Battery

Battery grid (v2.2.0+)

A grid of battery outlines, one per entity, each filled from the left to its level, with the value and name under it. Below 20 % a battery is red, below 40 % amber, above that green, so the ones to change stand out.

Good for

Every battery in the house on one card, with an include rule so new devices appear by themselves.

Example

type: custom:chartdeck-card
style: battery
title: Batteries
sort: ascending
include:
  device_class: battery

Or with the batteries listed:

type: custom:chartdeck-card
style: battery
title: Batteries
sort: ascending
entities:
  - entity: sensor.front_door_lock_battery
    name: Front door
  - entity: sensor.hall_motion_battery
    name: Hall motion
  - entity: sensor.smoke_alarm_battery
    name: Smoke alarm

To use this style, set style: battery (or pick Battery grid under Bars in the editor's Style section). Picking it in the editor also sets Sort to smallest first, when no sort is set, so the emptiest battery comes first.

Sensible defaults

• Fill runs from min to max, 0 to 100 unless you change them.
• Colours: red below 20, amber below 40, green from 40, when the card has no colour bands of its own. Set severity and the bands are used instead.
• Tiles: as many 88 px tiles across as fit the card.
• Order: as listed, unless sort is set. A card written in YAML without sort keeps the listed order, as every other style does; only the editor fills it in.

Options

There are no options of its own. The card's own ones do the work:

• sort: ascending puts the emptiest first; descending the fullest first. Unavailable batteries go to the end.
• columns sets how many tiles sit across, at most. Tiles never get narrower than 76 px, so a narrow card uses fewer.
• severity replaces the red, amber and green defaults, for the card or one entity.
• show.value: false and show.name: false hide the value or name under each battery.
• include, exclude, hide_unavailable and limit pick which batteries appear: see Options.

Missing and unavailable entities

An unavailable or missing entity draws a dashed, empty outline with its status ("Unavailable", "Entity not found") under it, even with show.value: false.

Tapping

Each tile is the entity's own element, so tap_action, hold_action and double_tap_action work as on the other styles (more-info by default).

Everything else

Batteries fill in from empty when the card appears and move to a new level when it changes. Animation is off when animate: false is set or the browser asks for reduced motion.

Layout: one chart for the whole card. Every shared option is described on the Options page.

Previous: Chord · Next: Spiral · All styles