I wanted to share the progression that I made with one of my auto-entities cards. Special thanks goes out to @Mariusthvdb for pointing me in the right direction to get the card_mod to work in the final result and @Ildar_Gabdullin’s Entities card post in the card_mod thread.
This is what I started with using - entity_id: sensor.*_motion_detector_battery_level include:
Code
type: custom:auto-entities
card:
type: entities
title: Motion Detector Batteries
card_mod:
style: |
ha-card {
background: black;
--primary-text-color: white;
}
filter:
include:
- entity_id: sensor.*_motion_detector_battery_level
exclude:
- options: {}
state: unavailable
- options: {}
hidden_by: user
sort:
method: state
numeric: true
reverse: true
I added card_mod to colorize the states and icons using the red-to-green scale template that I posted in Green-to-red icon color gradient template (battery percentage).
Code
type: custom:auto-entities
card:
type: entities
title: Motion Detector Batteries
card_mod:
style: |
ha-card {
background: black;
--primary-text-color: white;
}
filter:
include:
- entity_id: sensor.*_motion_detector_battery_level
options:
card_mod:
style:
hui-generic-entity-row $: |
{% set percentage = states(config.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 %}
{% set gradient = "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) %}
.state { color: {{ gradient }} }
state-badge { color: {{gradient}}; }
exclude:
- options: {}
state: unavailable
- options: {}
hidden_by: user
sort:
method: state
numeric: true
reverse: true
I did not like how each entity had Motion Detector Battery Level in the name. To fix this, I knew I needed to be able to use a template to get the entities, replace the text, and still apply the card_mod. This is the end result.
Code
type: custom:auto-entities
card:
type: entities
title: Motion Detector Batteries
card_mod:
style: |
ha-card {
background: black;
--primary-text-color: white;
}
unique: entity
show_empty: true
filter:
template: |
{%- set device_list = states.sensor
| selectattr('entity_id', 'search', 'motion_detector_battery_level')
| rejectattr('state' , 'in' , ['unknown','unavailable'])
| map(attribute='entity_id')
| list -%}
{%- for device in device_list -%}
{{ {
'entity': device,
'name': state_attr(device, "friendly_name") | regex_replace(find='Motion Detector Battery Level', replace='', ignorecase=true) ,
'card_mod':
{'style':
{'hui-generic-entity-row $': '
{% set percentage = states(config.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 %}
{% set gradient = "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) %}
.state { color: {{ gradient }}; }
state-badge { color: {{ gradient }}; }'
}
}
} }},
{%- endfor -%}
sort:
method: state
reverse: true
numeric: true
The final template can be easily adapted to use a list of entities similar to the standard include: method where a complex template is not needed but can still utilize the rest of the code.
Code
{%- set device_list = [
'sensor.s25_ultra_battery_level', 'sensor.watch5_battery_level',
'sensor.tab_s7_fe_battery_level', 'sensor.ipad_battery_level'
] -%}
UPDATE: This example shows how to find multiple strings to be removed from the displayed name. regex_replace(find='Battery Level|Door|Battery', replace='', ignorecase=true)
Code
type: custom:auto-entities
card:
type: entities
title: Sensor Batteries
card_mod:
style: |
ha-card {
background: black;
--primary-text-color: white;
}
unique: entity
show_empty: true
filter:
template: |
{%- set device_list = [
'sensor.refrigerator_battery','sensor.freezer_battery',
'sensor.living_room_door_battery_level','sensor.bathroom_door_battery_level',
'sensor.hallway_closet_battery_level'
] -%}
{%- for device in device_list -%}
{{ {
'entity': device,
'name': state_attr(device, "friendly_name") | regex_replace(find='Battery Level|Door|Battery', replace='', ignorecase=true),
'card_mod':
{'style':
{'hui-generic-entity-row $': '
{% set percentage = states(config.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 %}
{% set gradient = "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) %}
.state { color: {{ gradient }}; }
state-badge { color: {{ gradient }}; }'
}
}
} }},
{%- endfor -%}
sort:
method: state
reverse: true
numeric: true
At the risk of going off-topic, here’s how I’ve brought this all together. I use the /breakthestatic/swipe-card (which is a little more up-to-date than /bramkragten/swipe-card).
Code
type: custom:swipe-card
start_card: 2
parameters:
effect: cube
loop: true
freeMode: true
speed: 4000
autoplay:
delay: 2500
disableOnInteraction: false
reverseDirection: false
stopOnLastSLide: false
cards:
- type: custom:auto-entities
card:
type: entities
title: My Devices
card_mod:
style: |
ha-card {
background: black;
--primary-text-color: white;
}
unique: entity
show_empty: true
filter:
template: |
{%- set device_list = [
'sensor.s25_ultra_battery_level', 'sensor.watch5_battery_level',
'sensor.tab_s7_fe_battery_level', 'sensor.dereks_ipad_battery_level'
] -%}
{%- for device in device_list -%}
{{ {
'entity': device,
'name': state_attr(device, "friendly_name") | regex_replace(find='Battery Level', replace='', ignorecase=true) ,
'card_mod':
{'style':
{'hui-generic-entity-row $': '
{% set percentage = states(config.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 %}
{% set gradient = "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) %}
.state { color: {{ gradient }}; }
state-badge { color: {{ gradient }}; }'
}
}
} }},
{%- endfor -%}
sort:
method: state
reverse: true
numeric: true
- type: custom:auto-entities
card:
type: entities
title: Motion Detector Batteries
card_mod:
style: |
ha-card {
background: black;
--primary-text-color: white;
}
unique: entity
show_empty: true
filter:
template: |
{%- set device_list = states.sensor
| selectattr('entity_id', 'search', 'motion_detector_battery_level')
| rejectattr('state' , 'in' , ['unknown','unavailable'])
| map(attribute='entity_id')
| list -%}
{%- for device in device_list -%}
{{ {
'entity': device,
'name': state_attr(device, "friendly_name") | regex_replace(find='Motion Detector Battery Level', replace='', ignorecase=true),
'card_mod':
{'style':
{'hui-generic-entity-row $': '
{% set percentage = states(config.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 %}
{% set gradient = "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) %}
.state { color: {{ gradient }}; }
state-badge { color: {{ gradient }}; }'
}
}
} }},
{%- endfor -%}
sort:
method: state
reverse: true
numeric: true
- type: custom:auto-entities
card:
type: entities
title: Sensor Batteries
card_mod:
style: |
ha-card {
background: black;
--primary-text-color: white;
}
unique: entity
show_empty: true
filter:
template: |
{%- set device_list = [
'sensor.refrigerator_battery','sensor.freezer_battery',
'sensor.living_room_door_battery_level','sensor.bathroom_door_battery_level',
'sensor.hallway_closet_battery_level'
] -%}
{%- for device in device_list -%}
{{ {
'entity': device,
'name': state_attr(device, "friendly_name") | regex_replace(find='Battery Level|Door|Battery', replace='', ignorecase=true),
'card_mod':
{'style':
{'hui-generic-entity-row $': '
{% set percentage = states(config.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 %}
{% set gradient = "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) %}
.state { color: {{ gradient }}; }
state-badge { color: {{ gradient }}; }'
}
}
} }},
{%- endfor -%}
sort:
method: state
reverse: true
numeric: true