Admitted, I moved from a rather old 2022.6.6 with card-modder to a brand new 2024.1.2 with card-mod 2 (or 3, HACS anyway), and had the usual amount of fun getting everything working again, but I had to upgrade, as the fix for the August integration did not apply to such old core version.
The issue left now, is with card-mod 3. It seems that no matter what I write in the Style section it doesnāt change a thing on my cards. Iām just trying to resize the card and put a green border on it (worked in card-modder).
I would think I have the spelling and indents right, but because itās the same problem with all types of cards, surely I must be doing something wrongā¦
Can anyone suggest an avenue to explore to get the battery icon colored via the following code in custom-auto-enties using a glance card? or an alternative idea?
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 ]]]'
Example #2
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 ) }}
Iāve tried every which way from Sunday but to no avail. This is my most recent code but I canāt figure out a way to use the JS from above in any way shape or form:
yep, it is really odd, but using the battery device_class entities, I cant override the state-colors eitherā¦
nvm the template I use (you can simply replace that by any valid jinja template )
Iāve also tested some of the other formats for modding the state-badge color
- type: custom:auto-entities
card:
type: glance
columns: 5
filter:
exclude:
- domain: binary_sensor
- state: unavailable
include:
- attributes: {device_class: battery}
options:
card_mod:
style: |
:host {
--paper-item-icon-color:
{% set state = states(config.entity)|int(-5) %}
{% if state > 90 %} black
{% elif state > 70 %} pink
{% elif state > 50 %} maroon
{% elif state > 30 %} purple
{% else %} salmon
{% endif %};
}
sort: {method: state, numeric: true}
Beats me (at the moment)!
Itās late here (01:40 PST) and Iāve been trying to beat the icon color all day, last night, yesterday, and the day before!!
# customize_glob:
# "*.*":
# hide_attributes:
# - templates
#
# sensor.*_battery_level:
# templates:
# 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 ) }}
#
# icon_color: '[[[ var r = 0; var g = 0; var b = 0; if (state < 50 ) { var r = 255; var g = parseInt(5.1 * state); } else { var g = 255; var r = parseInt(510 - 5.10 * state); } var h = r * 0x10000 + g * 0x100 + b * 0x1; return '#' + ('000000' + h.toString(16)).slice(-6); ]]]'
For some reason custom-ui is dragging my system to its knees now to the point of the UI being unresponsive and I have to resort to ssh and undo my change(s) & ha core restart. Latest addition to break itā¦
