In the past I have added templates to set the color of an icon based on a battery percentage. While this works, in this example, it is only limited to three colors.
variables:
var_color: |-
[[[
var battery_level=entity.state;
if (battery_level > 70) return 'lime';
else if (battery_level >= 30) return 'yellow';
else return 'red';
]]]
Obviously, it would not be hard to scale to add more colors. I’ve seen examples posted here in the forum that include as many as a dozen variables. But I wanted to make something better.
A while back I came across a Javascript snippet that converted a percentage to a HEX value for color ranging from red-to-green. (Javascript color scale from 0% to 100%, rendering it from red to yellow to green · GitHub) I wanted to incorporate something like it but didn’t know what I was doing or have the time.
So, here is what I adapted and applied the template to a custom:button-card and Mushroom Template Card:
custom:button-card
type: custom:button-card
entity: sensor.s22_ultra_battery_level
show_state: true
variables:
var_color: |-
[[[
var percentage = entity.state;
var r = 0; var g = 0; var b = 0;
if (percentage < 50 ) {
var r = 255;
var g = parseInt(5.1 * percentage);
} else {
var g = 255;
var r = parseInt(510 - 5.10 * percentage);
}
var h = r * 0x10000 + g * 0x100 + b * 0x1;
return '#' + ('000000' + h.toString(16)).slice(-6);
]]]
styles:
icon:
- color: '[[[ return variables.var_color ]]]'
Mushroom Template Card (I had to change the formula a little bit in this example. I believe the numbers were being rounded differently than the Javascript example and caused numbers greater than 96% to calculate incorrectly. I also customized the icon in this example. The custom:button-card inherits its icon from the entity but the Mushroom Template Card does not. The icon will show the appropriate icon for percentage and charging indicators.)
type: custom:mushroom-template-card
entity: sensor.s22_ultra_battery_level
primary: '{{ state_attr(entity, "friendly_name").title() }}'
secondary: '{{ states(entity) + "%" }}'
layout: vertical
icon: |
{% set battery_level = states(entity) | int // 10 * 10 %}
{% set charging_state = states('sensor.s22_ultra_charger_type') %}
{% set is_charging = is_state('binary_sensor.s22_ultra_is_charging', 'on') | iif(True, False) %}
{% set map = {"none":"", "ac":"charging-", "wireless":"charging-wireless-"} %}
{% set charging = map[states('sensor.s22_ultra_charger_type')] %}
{% if battery_level == 100 and is_charging == True %} mdi:battery-charging
{% elif battery_level == 100 %} mdi:battery
{% elif battery_level >= 10 %} mdi:battery-{{charging}}{{battery_level}}
{% elif battery_level >= 0 %} mdi:battery-{{charging}}outline
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |-
{% set percentage = states(entity) | int %}
{% set r, g, b = 0, 0, 0 %}
{% if (percentage <= 51) %}
{% set r = 255 %}
{% set g = (5.0 * percentage) | round | int %}
{% else %}
{% set g = 255 %}
{% set r = (505 - 4.89 * percentage) | round | int %}
{% endif %}
{{ "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) }}
Source:
(Javascript color scale from 0% to 100%, rendering it from red to yellow to green · GitHub)
// License: MIT - https://opensource.org/licenses/MIT
// Author: Michele Locati <[email protected]>
// Source: https://gist.github.com/mlocati/7210513
function perc2color(perc) {
var r, g, b = 0;
if(perc < 50) {
r = 255;
g = Math.round(5.1 * perc);
}
else {
g = 255;
r = Math.round(510 - 5.10 * perc);
}
var h = r * 0x10000 + g * 0x100 + b * 0x1;
return '#' + ('000000' + h.toString(16)).slice(-6);
}
