Custom Button color according to battery level

Configuration Frontend
1

Hi,
I’m trying to have a custom button card where I see the level of my phone battery and in the same time to have the colors of the button according to that level.

I’ve come up with this code but i can’t seem to be able to compare the entity_battery level to the desired value.
Maybe I need to make it int() before comparing ?

image

`type: horizontal-stack
cards:
  - type: custom:button-card
    entity: sensor.sm_g996b_battery_level
    unit_of_measurement: '%'
    device_class: battery
    name: Tek
    theme: synthwave
    styles:
      card:
        - border-color: cyan
        - text-shadow: |
            [[[
              if (entity.sm_g996b_battery_level < 30) return '0px 0px 3px red'
              if (entity.sm_g996b_battery_level >= 30 && entity.sm_g996b_battery_level < 80) return '0px 0px 3px orange'
              else if (entity.sm_g996b_battery_level >= 80) return '0px 0px 3px lime' 
            ]]]
        - box-shadow: |
            [[[
              if (entity.sm_g996b_battery_level  < 30) return '0px 0px 10px 1px red'
              if ((entity.sm_g996b_battery_level  >= 30) && (entity.sm_g996b_battery_level < 80)) return '0px 0px 10px 1px orange'
              else if (entity.sm_g996b_battery_level  >= 80) return '0px 0px 10px 1px lime'
            ]]]
      icon:
        - color: |
            [[[
              if (entity.sm_g996b_battery_level < 30) return 'red'
              if ((entity.sm_g996b_battery_level >= 30) && (entity.sm_g996b_battery_level < 80)) return 'orange'
              else if (entity.sm_g996b_battery_level >= 80) return 'lime'
            ]]]
        - animation: |
            [[[
              if (entity.sm_g996b_battery_level < 30) return 'blink 1.5s ease infinite'
              if ((entity.sm_g996b_battery_level >= 30) && (entity.sm_g996b_battery_level < 80)) return 'none'
              else if (entity.sm_g996b_battery_level >= 80) return 'blink 3s ease 1.5'
            ]]]
    show_state: true`

Any tips on where to tweak this code ?

BR
Bogdan

2

Do you want help on the card or do you just want a way for it to work? I ask because the battery state card does it all for you.

3

Hi Jchh, thanks for your reply.
If possible I’d like help on this particular card. I have the Battery State card but it is not what I need.
My purpose is to have a quick view of my phone battery.

4

no worries.

I can see that you have the sensor sensor.sm_g996b_battery_level. Does it have battery_level as an attribute or is it the battery level itself?

If attribute, try:

if (entity.attributes.battery_level < 30) return

If it is the battery level itself, try:

if (entity.state < 30) return

[edited for both scenarios]

1 Like
5

Hi!,
No for the first snipped. I’ve tried, but i can’t get anything from the .attributes. (Guess it does not have more)
And looks like it only has this:

unit_of_measurement: %
device_class: battery
icon: mdi:battery-90
friendly_name: S21P Battery Level

But it seems to work with the second snippet:

if (entity.state < 30) return

Let me try and adapt the whole code and I’ll come back with the answer.

Edit: Solution provided by @jchh

if (entity.state < 30) return
6

OK, so that sensor is the battery level itself …I should have guessed from the name.

8

Thanks Jchh! it works!

here is the code for the button:

type: custom:button-card
entity: sensor.sm_g996b_battery_level
unit_of_measurement: '%'
device_class: battery
name: Tek
theme: synthwave
styles:
  card:
    - border-color: |
        [[[
          if (entity.state < 30) return 'red'
          if ((entity.state >= 30) && (entity.state < 80)) return 'orange'
          else if (entity.state > 80) return 'lime'
        ]]]
    - box-shadow: |
        [[[
          if (entity.state < 30) return '0px 0px 10px 1px red '
          if ((entity.state >= 30) && (entity.state < 80)) return '0px 0px 10px 1px orange '
          else if (entity.state > 80) return '0px 0px 10px 1px lime '
        ]]]
  icon:
    - color: |
        [[[
          if (entity.state < 30) return 'red';
          if ((entity.state >= 30) && (entity.state < 80)) return 'orange'
          if (entity.state >= 80) return 'lime';
        ]]]
    - animation: |
        [[[
          if (entity.state < 30) return 'blink 1.5'
          if ((entity.state >= 30) && (entity.state < 80)) return 'none'
          else if (entity.state > 80) return 'blink 3s ease 1.5'
        ]]]
show_state: true

image

Best regards
B

1 Like