🔋 Lovelace: Battery state card

Simple yet customizable battery state card. Useful when you have a lot of battery powered home-automation devices in your system (and you want to track their battery state).

I hope you will like it!

Let me know if you have any questions. In case of spotted issues or if you have any suggestions please add an issue on github

Have fun playing with it,


Lookes awesome! Is there a way the card can automatically select all entities with the battery attribute? Instead of thinking of adding new devices with batteries each time it would be great they are automatically added.
Thanks for the fantastic work!!

Thanks for the suggestion.

Yes I have this idea in mind as someone already suggested this via issue on GH. Eventually the issue was closed as this can be achieved via combination of this card with auto-entities.

But still I’m considering adding it (especially as more and more people are asking about the same :wink: )


Nice card. I like it better than the battery-entity plugin I was using.

submitted a feature request on github for you.


Any way to automatically detect if an entity has a “battery charging” attribute and add it to the entity?

As far as I can figure out using auto-entities precludes the ability to set the charging status.

Yes you won’t be able to set entity properties via auto-entities card. You can put feature request on the auto-entities repo :wink:

Anyway currently (v1.1.1) you’re not even able to use attribute as charging indicator. I’ll add this in v1.2.0 and I’m thinking about adding a card-level setting for charging state which would be applied to all entities (this would cover your scenario, I think).

1 Like

Great card!! Will definitely use this one :slight_smile:
One question: Is the “collapsed view” intended to also work on iOS devices?
I cant get it to work on my iphone.
Nothing happens when pushing the “arrow down”
(Running latest version of HA and App)
Thanks // Fredrik

This code works for me, need to clean up some old battery devices thought:

type: 'custom:auto-entities'
  type: 'custom:battery-state-card'
  sort_by_level: asc
    - entity_id: sensor.*.battery_level*

Gives me this output:

1 Like

Nobody with the same problem?

No I don’t, but did you look in the development tools - States tab to find out which entities might give you these? You could add a friendly name there or subsequently filter them out if they are not relevant.

That’s an alternative, yes, but more a “work-around” than solution. Will try!

@Zkaning It should work on iPhone (what iOS version do you have? I assume you use Safari not Chrome there right?).
Let me know if this works for you: https://codepen.io/maxwroc/pen/yLYvdGe (tap arrow on right bottom side on you iPhone)

Is there anyone else seeing similar problem on iOS?

The folding/unfolding functionality is purely based on CSS selectors and what I see all of them should be supported by mobile safari for a long time. So I’m not sure what might be wrong in your case.

If there are other people experiencing same problem I’ll try to investigate it more.

@Piggyback I think there is some confusion here. I think that @Zkaning was asking about his prev question not about the above screenshot pasted by @crzykidd. In the case from the screenshot there are some entities (caught by include rules from auto-entities card) which have to be excluded by additional filters (in auto-entities card) :slight_smile:

@finity FYI v1.2.0 was released some time ago, just in case you’ve missed it

Thanks @maxwroc! You’re completely right! I’ve answered @crzykidd and not @Zkaning! thanks for pointing that out!

@Zkaning I was able to reproduce the problem you’ve described on my iPad. It looks like there is a bug on iOS Safari. I found as well a workaround: if you tap on the area on the left side of the arrow it works:

It is even more funny that when you do it (and list expands) the arrow/chevron button starts working :slight_smile: I’ll think about some permanent solution.

Ahh, yes, that works! I was not clear before when I described the problem, it is in the iOS Companion 2.0 app running on iOS 13.2.2 that I have the problem but your solution @maxwroc worked there as well… hehe :stuck_out_tongue_closed_eyes: Thanks!!

@Piggyback, @crzykidd FYI I have just released v1.3.0 where you have a way to automatically add and remove entities (in very similar way how it is done in auto-entities card). So you don’t need to use additional cards any more to achieve same result.


thanks Max! it was indeed not difficult with the auto-entities, but this is easier :slight_smile:


came here because of my search to mitigate the demise of icon_color set by custom-ui, which will be broken from Ha110 onward… I did file a FR https://github.com/home-assistant/frontend/issues/5892 to try to bridge the gap.
Isn’t you card affected?

seems your battery-state-card.js looks very much like the state-card-custom-ui.html.
Would you have any idea how to rebuild that into a custom card/script like yours, and reinstall the use of icon_color? (note the icons can still be customized, and the templates we use in custom-ui are still available in Lovelace, and displayed in the more-info pane)
We would just need a way of re-enabling the functionality…

Pleae have a look if you could spare a minute? thanks!

@Mariusthvdb I’m not familiar with custom-ui sorry. I think my card shouldn’t be affected by incomming changes (I haven’t tested it on 0.110 though). My understanding is that the paper-icon elements are affected while ha-icon should be fine (and I use this one).

Try doing the same in custom-ui and let know if it helps. BTW I don’t see 0110 update in my HA yet

Bram fixed it for me (us)…

If the “entity:” key is required but you want to only add the entities thru the filter what do you put under “entities:”? can you leave it blank?