Simplifying UI battery reporting template for a chip

Configuration Frontend
1

Hey guys, first post here so hopefully the moderators won’t have to slam me too heavily…

I wanted to add my devices with batteries (laptops, phones etc) to my entirely mushroom-based dashboard so that they look something like this:

image
image966×106 5.22 KB

Now I ended up with this yaml:

chips:
  - type: template
    icon: |-
      {% set number = (states('sensor.toddys_handset_battery_level') | int) %}
      {% set state = (states('sensor.toddys_handset_battery_state')) %}
      {% if (number >= 90) and (state == 'Not Charging') %}
      mdi:battery
      {% elif (number >= 90) and (state == 'Charging') %}
      mdi:battery-charging
      {% elif (number >= 80) and (state == 'Not Charging') %}
      mdi:battery-80
      {% elif (number >= 80) and (state == 'Charging') %}
      mdi:battery-charging-80
      {% elif (number >= 70) and (state == 'Not Charging') %}
      mdi:battery-70
      {% elif (number >= 70) and (state == 'Charging') %}
      mdi:battery-charging-70
      {% elif (number >= 60) and (state == 'Not Charging') %}
      mdi:battery-60
      {% elif (number >= 60) and (state == 'Charging') %}
      mdi:battery-charging-60
      {% elif (number >= 50) and (state == 'Not Charging') %}
      mdi:battery-50
      {% elif (number >= 50) and (state == 'Charging') %}
      mdi:battery-charging-50
      {% elif (number >= 40) and (state == 'Not Charging') %}
      mdi:battery-40
      {% elif (number >= 40) and (state == 'Charging') %}
      mdi:battery-charging-40
      {% elif (number >= 30) and (state == 'Not Charging') %}
      mdi:battery-30
      {% elif (number >= 30) and (state == 'Charging') %}
      mdi:battery-charging-30
      {% elif (number >= 20) and (state == 'Not Charging') %}
      mdi:battery-20
      {% elif (number >= 20) and (state == 'Charging') %}
      mdi:battery-charging-20
      {% elif (number >= 10) and (state == 'Not Charging') %}
      mdi:battery-10
      {% elif (number >= 10) and (state == 'Charging') %}
      mdi:battery-charging-10
      {% elif (number >= 0) and (state == 'Not Charging') %}
      mdi:battery-outline
      {% elif (number >= 0) and (state == 'Charging') %}
      mdi:battery-charging-outline
      {% else %}
      mdi:battery
      {% endif %}
    entity: sensor.toddys_handset_battery_level
    icon_color: |-
      {% set number = (states('sensor.toddys_handset_battery_level') | int) %}
      {% set state = (states('sensor.toddys_handset_battery_state')) %}
      {% if (number >= 50) or (state == 'Charging') %}
      green
      {% elif (number <= 30) %}
      red
      {% else %}
      orange
      {% endif %}
    content: iPhone {{ states('sensor.toddys_handset_battery_level') }}%

Now I know there are plenty of battery-related cards out there but I just wanted to keep it consistent with the rest of my mushroom dashboard so I tried to make my own one as you can see above.

So my question is - does anyone have any idea how to simplify the above yaml (or some other clever templating way to do it) as I want to do it for as many devices as I can and man that’s a lot of yaml…

edit: I just realised that in the first photo I have only applied the yaml to the 3rd chip so that’s why the other two are just the normal battery icon.

2 
chips:
  - type: template
    entity: sensor.toddys_handset_battery_level
    icon: |-
      {% set number = states(entity) | int %}
      {% set state = states('sensor.toddys_handset_battery_state') %}
      {% set charge =  'charging-' if state == 'Charging' else '' %}
      {% if 90 > number >= 10 %}  
        mdi:battery-{{ charge }}{{ number//10 }}0
      {% elif number >= 0 %}
        mdi:battery-{{ charge }}outline
      {% else %}
        mdi:battery
      {% endif %}
    icon_color: |-
      {% set number = states(entity) | int %}
      {% set state = states('sensor.toddys_handset_battery_state') %}
      {% if number >= 50 %}
      green
      {% elif number <= 30 and state == 'Not Charging' %}
      red
      {% else %}
      orange
      {% endif %}
    content: D iPhon
1 Like
3

Hey Drew this is absolutely perfect!!! Thank you so much! I was just about to ask you about the ‘x’ but then your edit came up :slight_smile: and now it works perfectly :+1: :+1: :+1:

1 Like
4

Just double check that all values for the battery state sensor are correct… on Android the state is lower case:

      {% set number = states(entity) | int %}
      {% set state = states('sensor.phone_battery_state') %}
      {% set charge = 'charging-' if state == 'charging' else '' %}
      {% if 90 > number >= 10 %}
        mdi:battery-{{charge}}{{ number//10 }}0
      {% elif number >= 0 %}
        mdi:battery-{{charge}}outline
      {% else %}
        mdi:battery
      {% endif %}
5

So far I have only hooked up iOS devices but thanks for that I will check on the other devices. Thanks for the tip!