A different take on procentage meter

[rikardkjell]

A small contribution to the community a different way to show the procentage value of a battery sensor. This using the Markdown card:

type: markdown
 content: >-
   ## <center><font color="{%if states('sensor.pixel_6a_battery_level')|int < 25
  %}red{%elif states('sensor.pixel_6a_battery_level')|int < 75 %}amber{% else
  %}green{% endif%}">{{"|"*(states('sensor.pixel_6a_battery_level')|float/2)|int}}</font><font
  color="grey">{{"|"*((100-states('sensor.pixel_6a_battery_level')|float)/2)|int}}</font>
  {{states('sensor.pixel_6a_battery_level')}}%</center>

[123 (Taras)]

Thanks for sharing your example.

The template generates a single line containing 50 bars plus the battery level. In my case, the last bar and the level would always overflow to the next line. To mitigate this behaviour, I reduced the font size slightly. In addition, I changed the colors to provide more contrast with gray bars, moved the battery level to a separate line, and streamlined the template.

type: markdown
content: >-
  {% set bl = states('sensor.your_sensor') | int(0) %}
  {% set clr = 'red' if bl < 25 else 'gold' if bl < 75 else 'limegreen' %}
  {% set bar = bl//2 %}
  ##<br><center><font color="{{clr}}"><font size = 4em>{{"|"*bar}}</font><font color="grey"><font size = 4em>{{"|"*(50 - bar)}}</font></center>
  <center>{{bl}}%</center>

[rikardkjell]

Nicely done! Bravo