Battery - Custom button

Configuration Frontend
1

Hi Team. I am looking for some help , suggestion etc.

I am looking to create a custom button that opens a page and displays a list of batteries and there status. I am ok with that part. What i need some help with. The icon on the battery will be a battery and i would like it to be green when all batteries are 100% but should just one of them need replacing to change the icon to red. Its just a visual indication to tell me to go look in that page.

Thanks for any help in advance

2

Isn’t this automatic if you have device_class battery?

image

Edit: Ah, no… If you create a group to show the lowest battery level the icon changes but not the colour.

image

Edit: My mistake, sorry! I hadn’t ticked “colour icon based on state”. Here’s your button - I think it turns red when the battery level is really low.

image

3

Thanks for the reply. I will be using that Battery card on the page i am using.

I am looking to use a button card or a chip card that will change from green to red if any of the batteries need to be replaced.

4

Actually this seems to work. I created a group and put some batteries in there. Then have this code on the battery. Think it may need some tweeking

type: custom:button-card
show_entity_picture: true
name: Batteries
state:
  - value: 'off'
    icon: mdi:battery
    color: red
  - value: 'on'
    icon: mdi:battery
    color: green
tap_action:
  action: navigate
  navigation_path: /mcfarlane-towers-ios/batteries
entity: binary_sensor.group_batteries
show_state: false
show_label: true
size: 20%
label: |
  [[[
    if (states['binary_sensor.group_batteries'].state === "on")
      return "closed";
    else if (states['binary_sensor.group_batteries'].state === "off")
      return "open";
  ]]]