@Mariusthvdb thanks for the compliments and review! That is a great call to set the var in the top to simplify the icon color selection logic. I havenāt implemented this yet in the examples below.
Your dashboard looks nice. I moved my battery icons outside the bar as they were not too visible. Also, the I couldnāt read the sensor names with the white text very easily, so I moved this out as well. Possibly, I could change the text color to a high-contrast color, depending on the background of the bar if I wanted to have the text included inside the bar.
Do you have a link to your post where you used the āmimickā bars? Iām not sure if your are referring to the hui-sensor-entity-row in your code?
So, I used the Battery Notes integration which discovers battery entities and automatically adds new sensors for each device for the battery level. It has a database for devices which is updated regularly.
I still need to find a better way to select all battery entities and corresponding battery types, as my custom entities filter is relying on entity names such as: entity_id: sensor.*_battery for my battery entities and for the battery type (created by the HA-Battery-Notes integration): states(config.entity + ā_typeā)
I have some additional Z-Wave battery entities that arenāt using the same naming convention.
The filter for auto-entities does not support OR conditions, so I canāt do anything like:
entity_id: sensor.*_battery OR sensor.some_battery_entity
It means that I would have to include multiple entities in the filter and then repeat the options for the bar-card, which is ugly:
Repeated bar-card Code for Different Entity Filters (not ideal)
views:
- title: Batteries
panel: false
cards:
- type: custom:auto-entities
card:
title: Battery Status
type: entities
state_color: false
show_header_toggle: false
filter:
include:
- entity_id: sensor.*_battery
options:
type: custom:bar-card
animation: true
max: 100
height: 40px
positions:
name: outside
icon: outside
value: inside
indicator: 'off'
unit_of_measurement: '%'
severity:
- value: null
from: 0
to: 10
color: red
icon: mdi:battery-alert
- value: null
from: 11
to: 20
color: darkred
icon: mdi:battery-10
- value: null
from: 21
to: 30
color: darkorange
icon: mdi:battery-20
- value: null
from: 31
to: 40
color: orange
icon: mdi:battery-30
- value: null
from: 41
to: 50
color: yellow
icon: mdi:battery-40
- value: null
from: 51
to: 60
color: yellowgreen
icon: mdi:battery-50
- value: null
from: 61
to: 70
color: lightgreen
icon: mdi:battery-60
- value: null
from: 71
to: 80
color: limegreen
icon: mdi:battery-70
- value: null
from: 81
to: 90
color: green
icon: mdi:battery-80
- value: null
from: 91
to: 100
color: darkgreen
icon: mdi:battery
card_mod:
style: |
ha-card {
border-style: hidden;
}
.card-content {
padding: 0px;
}
bar-card-card {
height: 35px;
}
bar-card-value {
color: white;
}
bar-card-name:after {
content: "\A Battery Type: {{ states(config.entity + '_type') }}";
white-space: pre;
font-size: 12px;
color: green;
font-weight: bold;
}
bar-card-name {
width: 250px;
font-size: 13px;
}
ha-icon {
{% if states(config.entity) | int <= 10 %}
color: red;
{% elif states(config.entity) | int <= 20 %}
color: darkred;
{% elif states(config.entity) | int <= 30 %}
color: darkorange;
{% elif states(config.entity) | int <= 40 %}
color: orange;
{% elif states(config.entity) | int <= 50 %}
color: yellow;
{% elif states(config.entity) | int <= 60 %}
color: yellowgreen;
{% elif states(config.entity) | int <= 70 %}
color: lightgreen;
{% elif states(config.entity) | int <= 80 %}
color: limegreen;
{% elif states(config.entity) | int <= 90 %}
color: green;
{% else %}
color: darkgreen;
{% endif %}
}
- entity_id: sensor.some_battery_entity
options:
type: custom:bar-card
animation: true
max: 100
height: 40px
positions:
name: outside
icon: outside
value: inside
indicator: 'off'
unit_of_measurement: '%'
severity:
- value: null
from: 0
to: 10
color: red
icon: mdi:battery-alert
- value: null
from: 11
to: 20
color: darkred
icon: mdi:battery-10
- value: null
from: 21
to: 30
color: darkorange
icon: mdi:battery-20
- value: null
from: 31
to: 40
color: orange
icon: mdi:battery-30
- value: null
from: 41
to: 50
color: yellow
icon: mdi:battery-40
- value: null
from: 51
to: 60
color: yellowgreen
icon: mdi:battery-50
- value: null
from: 61
to: 70
color: lightgreen
icon: mdi:battery-60
- value: null
from: 71
to: 80
color: limegreen
icon: mdi:battery-70
- value: null
from: 81
to: 90
color: green
icon: mdi:battery-80
- value: null
from: 91
to: 100
color: darkgreen
icon: mdi:battery
card_mod:
style: |
ha-card {
border-style: hidden;
}
.card-content {
padding: 0px;
}
bar-card-card {
height: 35px;
}
bar-card-value {
color: white;
}
bar-card-name:after {
content: "\A Battery Type: {{ states(config.entity + '_type') }}";
white-space: pre;
font-size: 12px;
color: green;
font-weight: bold;
}
bar-card-name {
width: 250px;
font-size: 13px;
}
ha-icon {
{% if states(config.entity) | int <= 10 %}
color: red;
{% elif states(config.entity) | int <= 20 %}
color: darkred;
{% elif states(config.entity) | int <= 30 %}
color: darkorange;
{% elif states(config.entity) | int <= 40 %}
color: orange;
{% elif states(config.entity) | int <= 50 %}
color: yellow;
{% elif states(config.entity) | int <= 60 %}
color: yellowgreen;
{% elif states(config.entity) | int <= 70 %}
color: lightgreen;
{% elif states(config.entity) | int <= 80 %}
color: limegreen;
{% elif states(config.entity) | int <= 90 %}
color: green;
{% else %}
color: darkgreen;
{% endif %}
}
exclude:
- entity_id: sensor.west_side_battery
- entity_id: sensor.south_east_battery
- entity_id: sensor.south_west_battery
- entity_id: sensor.front_door_battery
sort:
method: state
numeric: true
reverse: false
show_empty: false
icon: mdi:battery
Chat GPT suggested a method where I could define a map of battery entities and battery types with an input text helper:
Input Text Helper with Map of Battery Entities and Types
input_text:
battery_type_dict:
name: Battery Type Dictionary
initial: >
{
"sensor.pool_patio_lights_switch_battery": "CR2032",
"sensor.bedroom_hallway_lights_switch_battery": "3x AAA"
}
And then use custom::auto-entities with the dictionary:
Custom auto-entities using map from Input Text Helper
type: custom:auto-entities
card:
title: Battery Status
type: entities
state_color: false
show_header_toggle: false
filter:
template: |
{% set sensors = states('input_text.battery_type_dict') | from_json %}
{% for sensor, battery_type in sensors.items() %}
{
"entity": "{{ sensor }}",
"type": "custom:bar-card",
"animation": true,
"name": "{{ state_attr(sensor, 'friendly_name') }} Battery",
"max": 100,
"height": "40px",
"columns": 1,
"positions": {
"name": "outside",
"icon": "outside",
"value": "inside",
"indicator": "off"
},
"unit_of_measurement": "%",
"severity": [
{ "value": null, "from": 0, "to": 10, "color": "red", "icon": "mdi:battery-alert" },
{ "value": null, "from": 11, "to": 20, "color": "darkred", "icon": "mdi:battery-10" },
{ "value": null, "from": 21, "to": 30, "color": "darkorange", "icon": "mdi:battery-20" },
{ "value": null, "from": 31, "to": 40, "color": "orange", "icon": "mdi:battery-30" },
{ "value": null, "from": 41, "to": 50, "color": "yellow", "icon": "mdi:battery-40" },
{ "value": null, "from": 51, "to": 60, "color": "yellowgreen", "icon": "mdi:battery-50" },
{ "value": null, "from": 61, "to": 70, "color": "lightgreen", "icon": "mdi:battery-60" },
{ "value": null, "from": 71, "to": 80, "color": "limegreen", "icon": "mdi:battery-70" },
{ "value": null, "from": 81, "to": 90, "color": "green", "icon": "mdi:battery-80" },
{ "value": null, "from": 91, "to": 100, "color": "darkgreen", "icon": "mdi:battery" }
],
"card_mod": {
"style": |
ha-card {
border-style: hidden;
}
.card-content {
padding: 0;
}
bar-card-card {
height: 40px;
}
bar-card-value {
color: white;
}
bar-card-contentbar {
color: red;
font-weight: bold;
}
bar-card-name:after {
content: "\A Battery Type: {{ battery_type }}";
white-space: pre;
font-size: 12px;
color: green;
font-weight: bold;
}
bar-card-name {
width: 160px;
}
ha-icon {
{% if states(sensor) | int <= 10 %}
color: red;
{% elif states(sensor) | int <= 20 %}
color: darkred;
{% elif states(sensor) | int <= 30 %}
color: darkorange;
{% elif states(sensor) | int <= 40 %}
color: orange;
{% elif states(sensor) | int <= 50 %}
color: yellow;
{% elif states(sensor) | int <= 60 %}
color: yellowgreen;
{% elif states(sensor) | int <= 70 %}
color: lightgreen;
{% elif states(sensor) | int <= 80 %}
color: limegreen;
{% elif states(sensor) | int <= 90 %}
color: green;
{% else %}
color: darkgreen;
{% endif %}
}
}
}
{% if not loop.last %},{% endif %}
{% endfor %}
sort:
method: state
numeric: true
reverse: false
show_empty: false
I havenāt tried this yet, but it looks promising. It would be awesome if I could use the above to choose a list of custom battery entities by ID and corresponding battery types by ID (in the map), in addition to using the HA-Battery-Notes automatic sensors.
To avoid repeating the bar-card options when using multiple include filters in auto-entities, Chat GPT suggested to make a reusable YAML template for the bar-card configuration:
bar_card_template.yaml
entities:
- &bar_card_template
type: custom:bar-card
animation: true
max: 100
height: 20px;
columns: 1
positions:
name: outside
icon: outside
value: inside
indicator: 'off'
unit_of_measurement: '%'
severity:
- value: null
from: 0
to: 10
color: red
icon: mdi:battery-alert
- value: null
from: 11
to: 20
color: darkred
icon: mdi:battery-10
- value: null
from: 21
to: 30
color: darkorange
icon: mdi:battery-20
- value: null
from: 31
to: 40
color: orange
icon: mdi:battery-30
- value: null
from: 41
to: 50
color: yellow
icon: mdi:battery-40
- value: null
from: 51
to: 60
color: yellowgreen
icon: mdi:battery-50
- value: null
from: 61
to: 70
color: lightgreen
icon: mdi:battery-60
- value: null
from: 71
to: 80
color: limegreen
icon: mdi:battery-70
- value: null
from: 81
to: 90
color: green
icon: mdi:battery-80
- value: null
from: 91
to: 100
color: darkgreen
icon: mdi:battery
card_mod:
style: |
:host {
border-style: none;
border: none;
}
.card-content {
padding: 10px;
}
bar-card-card {
height: 20px;
}
bar-card-value {
color: white;
}
bar-card-contentbar {
color: red;
font-weight: bold;
}
bar-card-name {
width: 100px;
}
ha-icon {
{% if states(config.entity) | int <= 10 %}
color: red;
{% elif states(config.entity) | int <= 20 %}
color: darkred;
{% elif states(config.entity) | int <= 30 %}
color: darkorange;
{% elif states(config.entity) | int <= 40 %}
color: orange;
{% elif states(config.entity) | int <= 50 %}
color: yellow;
{% elif states(config.entity) | int <= 60 %}
color: yellowgreen;
{% elif states(config.entity) | int <= 70 %}
color: lightgreen;
{% elif states(config.entity) | int <= 80 %}
color: limegreen;
{% elif states(config.entity) | int <= 90 %}
color: green;
{% else %}
color: darkgreen;
{% endif %}
}
# Reference this template for each sensor
entities:
- <<: *bar_card_template
entity: sensor.pool_patio_lights_switch_battery
name: Pool Patio Battery
- <<: *bar_card_template
entity: sensor.bedroom_hallway_lights_switch_battery
name: Bedroom Hallway Battery
And then the dashboard card configuration:
Lovelace Dashboard Card using YAML Template
entities:
- &bar_card_template
type: custom:bar-card
animation: true
max: 100
height: 20px;
columns: 1
positions:
name: outside
icon: outside
value: inside
indicator: 'off'
unit_of_measurement: '%'
severity:
- value: null
from: 0
to: 10
color: red
icon: mdi:battery-alert
- value: null
from: 11
to: 20
color: darkred
icon: mdi:battery-10
- value: null
from: 21
to: 30
color: darkorange
icon: mdi:battery-20
- value: null
from: 31
to: 40
color: orange
icon: mdi:battery-30
- value: null
from: 41
to: 50
color: yellow
icon: mdi:battery-40
- value: null
from: 51
to: 60
color: yellowgreen
icon: mdi:battery-50
- value: null
from: 61
to: 70
color: lightgreen
icon: mdi:battery-60
- value: null
from: 71
to: 80
color: limegreen
icon: mdi:battery-70
- value: null
from: 81
to: 90
color: green
icon: mdi:battery-80
- value: null
from: 91
to: 100
color: darkgreen
icon: mdi:battery
card_mod:
style: |
:host {
border-style: none;
border: none;
}
.card-content {
padding: 10px;
}
bar-card-card {
height: 20px;
}
bar-card-value {
color: white;
}
bar-card-contentbar {
color: red;
font-weight: bold;
}
bar-card-name {
width: 100px;
}
ha-icon {
{% if states(config.entity) | int <= 10 %}
color: red;
{% elif states(config.entity) | int <= 20 %}
color: darkred;
{% elif states(config.entity) | int <= 30 %}
color: darkorange;
{% elif states(config.entity) | int <= 40 %}
color: orange;
{% elif states(config.entity) | int <= 50 %}
color: yellow;
{% elif states(config.entity) | int <= 60 %}
color: yellowgreen;
{% elif states(config.entity) | int <= 70 %}
color: lightgreen;
{% elif states(config.entity) | int <= 80 %}
color: limegreen;
{% elif states(config.entity) | int <= 90 %}
color: green;
{% else %}
color: darkgreen;
{% endif %}
}
# Reference this template for each sensor
entities:
- <<: *bar_card_template
entity: sensor.pool_patio_lights_switch_battery
name: Pool Patio Battery
- <<: *bar_card_template
entity: sensor.bedroom_hallway_lights_switch_battery
name: Bedroom Hallway Battery
Anyway, Iām glad that this forum is here and we can exchange ideas and code. Iāll keep playing with it to see what I can come up with and then post any updates.
