Battery Widget

I have been working on a battery widget for my home screen to replace the Pixel battery widget, the UI is not great because it is rendered as ASCII art but I quite like it.

It makes use of a template widget so it requires a connection to HomeAssistant even for local devices.

{% set granularity = 28 %}
{% set max_devices = 5 %}
{# Name, Battery Level, Is Charging #}
{% set devices = [
  ("Phone", "sensor.joseph_s_phone_battery_level", "binary_sensor.joseph_s_phone_is_charging"),
  ("Watch", "sensor.joseph_s_watch_battery_level_2", "binary_sensor.joseph_s_watch_is_charging"),
  ("Laptop", "sensor.joseph_s_laptop_battery_level", "binary_sensor.joseph_s_laptop_is_charging"),
  ("Headphones", "sensor.joseph_s_headphones_battery_level", ""),
] %}
{# Min, Color #}
{% set colors = [
  (50, ""),
  (20, "#ebd660"),
  (-1, "#F2B8B5"),
] %}

{% for device in (devices|rejectattr("1", "is_state", "unavailable")|rejectattr("1", "is_state", "unknown")|list)[:max_devices] %}
{{ device[0] }}:  {{ states(device[1]) | int }}% {% if is_state(device[2], "on") %}⚑{% endif %}<br />
<font color="{{ (colors | selectattr("0", "<", states(device[1]) | int) | first)[1] }}">
{{ "β–ˆ" * (((states(device[1]) | int) / 100 * granularity) | int) }}{{ "β–‘" * (granularity - (((states(device[1]) | int) / 100 * granularity) | int)) }}
</font>
{{ "<br /><br />" if not loop.last else "" }}
{% endfor %}

The two variables at the top hold all of the config information, granularity is how many characters are used in the progress bar, devices is a list of any number of devices, it is made up 3 parts (name, level entity, and charging entity), if you don’t have a charging entity just leave it blank.

Feel free to modify it and improve it. If you make it better, I would love to hear!

Merry Christmas!

For Bluetooth battery levels check out my other post: Bluetooth Battery Levels (Android)

4 Likes

wow thats an awesome use of the template widget!!

1 Like

I really like this retro look, because it reminds me of the first computers I used as a kid in the late 80s: green monochrome displays with computers using XTs, ATs and 286 architectures.

1 Like

Just got this working :slight_smile:, thanks.

Can you add colour to the bars based on the amount of charge? E.g. red, yellow and green for some user configurable percentages.

I’m working on it, the styling is done through android text view The CommonsBlog β€” HTML Tags Supported By TextView

Ok, you can now define a number of colours and cut off points with the variable at the top

1 Like

Ok, you can now define a number of colours and cut off points with the variable at the top

Works a treat, thanks.