I am a professional dev yet can use some GUI convenience every once and then, plus building on top of a dead repo is by definition fragile
It works more or less.
Again about UI: many experienced users use yaml mode dashboards and do not care about UI.
The code should all be in my original post. To change everything to your own needs just change the yaml for the bar card itself, in the css code only the following items should be edited:
{% set entity = {
"state": states('counter.regenwater_filter') | int(9999999999),
"name": "Levensduur",
"unit": " d"
}
%} {% set severity = {
"green": 0,
"orange": 180,
"red": 240
}
%} {% set colors = {
"green": "76,175,80",
"orange": "255,152,0",
"red": "244,67,54"
}
%}
you’re right, Bar card repo seems abandoned and with that, UI editing suffers more getting out of touch when the core HA Dashboard progresses.
The core HA dashboard is getting more advanced with every release, and many advanced users rely on that. Given the new features in the automations scripting, and also the new Dashboard options, the UI is truly getting there. Many integrations migrate to the UI, so we need less Yaml with each and every release.
very important: keep providing positive feedback to the dev team, so they can advance even further, especially when you say you are a professional dev. Please do, and dont let anyone talk you out of it.
rebuilt my Home Assistant card to use regular entities card (because of the current bard-card being unmaintained.) It isnt the same, but it does have a nice ring to it. Picture needs some further tweaking (so it doesnt repeat and still is the correct size/proportion.)
and a variation with some tighter paddings, so the individual entities have a bit more space horizontally. can also change margins:
padding: 0px 16px;
/*margin: 0px -16px;*/
so do as you please there
Yaml
# green #0, 128, 0
# darkgreen #0, 100, 0
# limegreen 50, 205, 50
# gold 255, 215, 0
# brown # 165, 42, 42
# orange #255, 165, 0
# darkorange #255, 140, 0
# orangered #255, 69, 0
# tomato # 255, 99, 71
# maroon #128, 0, 0
# red #255, 0, 0
type: entities
card_mod:
style: |
ha-card {
background:
{% set dark = is_state('binary_sensor.donker_buiten','on') %}
url('/local/homeassistant/homeassistant{{"-dark" if dark }}.png');
color: white;
--card-mod-icon-color: white;
font-weight: bold;
padding-top: 40px;
}
entities:
- entity: sensor.last_boot
- entity: sensor.processor_use
<<: &perc
card_mod:
style: |
hui-generic-entity-row {
padding: 0px 16px;
border-radius: 24px;
background:
{% set perc = states(config.entity)|float(0) %}
{% set rest = 100 - perc %}
{% if perc >= 59 %} {% set bar = '255, 0, 0' %}
{% elif perc >= 44 %} {% set bar = '128, 0, 0' %}
{% elif perc >= 24 %} {% set bar = '255, 165, 0' %}
{% elif perc >= 9 %} {% set bar = '0, 100, 0' %}
{% else %} {% set bar = '0, 128, 0' %}
{% endif %}
/*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/
linear-gradient(to right, rgb({{bar}}) 0%, rgb({{bar}}) {{perc}}%, rgba({{bar}},0.2) {{perc}}%, rgba({{bar}},0.2) 100%);
}
name: Cpu
- entity: sensor.processor_temperature
name: Temp
card_mod:
style: |
hui-generic-entity-row {
padding-right: 16px;
padding-left: 16px;
margin: 0px -16px;
border-radius: 24px;
background:
{% set temp = states(config.entity)|float(0) %}
{% set rest = 100 - temp %}
{% if temp >= 85 %} {% set bar = '255, 0, 0' %}
{% elif temp >= 75 %} {% set bar = '128, 0, 0' %}
{% elif temp >= 65 %} {% set bar = '255, 99, 71' %}
{% elif temp >= 55 %} {% set bar = '255, 69, 0' %}
{% elif temp >= 45 %} {% set bar = '255, 140, 0' %}
{% elif temp >= 35 %} {% set bar = '255, 165, 0' %}
{% else %} {% set bar = '0, 128, 0' %}
{% endif %}
/*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{temp}}%);*/
linear-gradient(to right, rgb({{bar}}) 0%, rgb({{bar}}) {{temp}}%, rgba({{bar}},0.2) {{temp}}%, rgba({{bar}},0.2) 100%);
}
- entity: sensor.memory_use_percent
name: Memory
card_mod:
style: |
hui-generic-entity-row {
padding-right: 16px;
padding-left: 16px;
margin: 0px -16px;
border-radius: 24px;
background:
{% set perc = states(config.entity)|float(0) %}
{% set rest = 100 - perc %}
{% if perc >= 85 %} {% set bar = '255, 0, 0' %}
{% elif perc >= 75 %} {% set bar = '128, 0, 0' %}
{% elif perc >= 60 %} {% set bar = '255, 165, 0' %}
{% elif perc >= 50 %} {% set bar = '165, 42, 42' %}
{% else %} {% set bar = '0, 128, 0' %}
{% endif %}
/*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/
linear-gradient(to right, rgb({{bar}}) 0%, rgb({{bar}}) {{perc}}%, rgba({{bar}},0.2) {{perc}}%, rgba({{bar}},0.2) 100%);
}
- entity: sensor.disk_use_percent_home
name: Disk
<<: *perc
- entity: sensor.swap_use
name: Swap
card_mod:
style: |
hui-generic-entity-row {
padding-right: 16px;
padding-left: 16px;
margin: 0px -16px;
border-radius: 24px;
background:
{% set swap = states(config.entity)|float(0) %}
{% set rest = 1000 - swap %}
{% set factor = 0.06 %}
{% if swap >= 768 %} {% set bar = '255, 0, 0' %}
{% elif swap >= 640 %} {% set bar = '255, 215, 0' %}
{% else %} {% set bar = '50, 205, 50' %}
{% endif %}
/*linear-gradient(to left,ivory {{rest*factor}}%, {{bar}} {{swap*factor}}%);*/
linear-gradient(to right, rgb({{bar}}) 0%, rgb({{bar}}) {{swap*factor}}%, rgba({{bar}},0.2) {{swap*factor}}%, rgba({{bar}},0.2) 100%);
}
or add a bit of border, alike the original bar-card:
border-radius: 24px; /*7pt*/;
border: 2px solid rgb(49,150,207);
border-shadow: 2pt;
final touch for now: add a bit more color to the rest bar, setting the percentage to 0.6 in the linear -gradient:
linear-gradient(to right, rgb({{bar}}) 0%, rgb({{bar}}) {{perc}}%, rgba({{bar}},0.6) {{perc}}%, rgba({{bar}},0.2) 100%);
since this now is no longer a bar-card, I wont pursue here,
(I want some common mods that apply to all individual entities moved to the top card mod if possible) but given the fact the original was made with bar-card elements in the picture-elements card, I figured it to be relevant
well OMT then
yep, easy
Yaml for some common row height and icon size on the individual entities
type: entities
card_mod:
style:
hui-sensor-entity-row:
$: |
hui-generic-entity-row {
height: 25px;
padding: 0px 16px;
border-radius: 24px;
border: 2px solid rgb(49,150,207);
border-shadow: 2pt;
}
.: |
ha-card {
background:
{% set dark = is_state('binary_sensor.donker_buiten','on') %}
url('/local/homeassistant/homeassistant{{"-dark" if dark }}.png');
color: white;
--card-mod-icon-color: white;
--mdc-icon-size: 20px;
font-weight: bold;
padding-top: 40px;
}
better:
8 Likes
hi how do you add variables to the theme?
can you post full code please?
Using any code editor open your theme file located inside the folder “theme” inside the “config” volume of your Home Assistant installation. and simply paste the variables at the end of the file.
hey did you ever get this working?
Have you tried smth like
type: custom:bar-card
entity: ...
card_mod:
style: |
bar-card-card {
border-radius: ...;
}
???
How to apply a gradient to only one card? This is what’ve got now but it applies to all cards.
type: custom:bar-card
title: Printer
entities:
- entity: sensor.hp_officejet_5252_color_ink_cartridge_level
color: Cyan
name: Color
- entity: sensor.hp_officejet_5252_black_ink_cartridge_level
color: Black
name: Black
- entity: sensor.hp_printer_cartridge_moisture
name: Moisture
icon: mdi:water-percent
direction: up
height: 200
stack: horizontal
positions:
icon: inside
name: inside
indicator: 'off'
card_mod:
style: |-
ha-card {
bar-card-backgroundbar {
background: linear-gradient(green 5%, orange 50%, red 75%);
border-radius: 25px;
}
bar-card-currentbar {
background: linear-gradient(green 5%, yellow 25%, orange 50%, red 75%);
clip-path: polygon(0 100%, 100% 100%, 100% calc(100% - var(--bar-percent)), 0 calc(100% - var(--bar-percent)));
border-radius: 12px;
}
bar-card-name {
text-shadow: 1px 1px black
}
bar-card-value {
text-shadow: 1px 1px black
}
}
Almost there. As a workaround split the bars in a horizontal stack. Now only have to see why the Ink Moisture name gets justified left when the card renders to fit the screen.
type: horizontal-stack
title: Printer
cards:
- type: custom:bar-card
entities:
- entity: sensor.hp_officejet_5252_color_ink_cartridge_level
name: Color
direction: up
decimal: 0
height: 200
stack: horizontal
positions:
icon: inside
name: 'off'
indicator: 'off'
card_mod:
style: |-
ha-card {
bar-card-backgroundbar {
border-radius: 5px;
}
bar-card-currentbar {
background: linear-gradient(to right, cyan 33%, magenta 33% 66%, yellow 66%);
clip-path: polygon(0 100%, 100% 100%, 100% calc(100% - var(--bar-percent)), 0 calc(100% - var(--bar-percent)));
border-radius: 5px;
}
bar-card-name {
text-shadow: 1px 1px black
}
bar-card-value {
text-shadow: 1px 1px black
}
}
- type: custom:bar-card
entities:
- entity: sensor.hp_officejet_5252_black_ink_cartridge_level
color: Black
name: Black
direction: up
decimal: 0
height: 200
stack: horizontal
positions:
icon: inside
name: 'off'
indicator: 'off'
card_mod:
style: |-
ha-card{
--bar-card-border-radius: 5px;
border-radius: 12px;
}
bar-card-name {
text-shadow: 1px 1px black
}
bar-card-value {
text-shadow: 1px 1px black
}
- type: custom:bar-card
entities:
- entity: sensor.hp_printer_cartridge_moisture
name: Ink Moisture
icon: mdi:water-percent
direction: up
height: 200
stack: horizontal
positions:
icon: inside
name: inside
indicator: 'off'
card_mod:
style: |-
ha-card{
--bar-card-border-radius: 5px;
border-radius: 12px;
}
bar-card-name {
text-shadow: 1px 1px black
}
bar-card-value {
text-shadow: 1px 1px black
}
2 Likes
Unable to Animate (infinitely)
I have card-mod installed and working (using for other cards) but for some reason I’m not able to get the animation.
I can get the built in animation to work for when the value changes by adding:
animation:
state: 'on'
speed: 5
Any ideas jwelvaert or Ildar_Gabdullin?
Current YAML
type: custom:bar-card
entities:
- entity: sensor.heat_pump_water_heater_available_hot_water
name: Hot Water Available
columns: '0'
positions:
icon: inside
indicator: 'off'
severity:
- color: Blue
from: 0
to: 10
- color: Orange
from: 11
to: 40
- color: Red
from: 41
to: 100
visibility:
- condition: numeric_state
entity: sensor.heat_pump_water_heater_available_hot_water
below: 100
- condition: or
conditions:
- condition: state
entity: sensor.heat_pump_water_heater_available_hot_water
state_not: unavailable
- condition: state
entity: sensor.heat_pump_water_heater_available_hot_water
state_not: unknown
- condition: state
entity: binary_sensor.heat_pump_water_heater_running
state: 'on'
card_mod:
style: |
bar-card-row bar-card-card bar-card-background bar-card-targetbar {
{% if is_state('binary_sensor.heat_pump_water_heater_running','on') %}
animation: filling 5s linear infinite;
{% endif %}
--bar-percent: 0 !important;
}
@keyframes filling {
0% {
--bar-target-percent: 0;
}
10% {
--bar-target-percent: 10%;
}
20% {
--bar-target-percent: 20%;
}
30% {
--bar-target-percent: 30%;
}
40% {
--bar-target-percent: 40%;
}
50% {
--bar-target-percent: 50%;
}
60% {
--bar-target-percent: 60%;
}
70% {
--bar-target-percent: 70%;
}
80% {
--bar-target-percent: 80%;
}
90% {
--bar-target-percent: 90%;
}
100% {
--bar-target-percent: 100%;
}
}
bar-card-row bar-card-card bar-card-background bar-card-markerbar {
display: none;
}
My code is STILL working.
Get rid of anything you added and then add it one by one to find a possible culprit.
Does anyone know how to modify this card so that it will change the battery icon color to be the same as the severity?
I can modify the ha-icon style with a specific color, but I’m not sure how to get the current severity color.
Here is my current code:
type: vertical-stack
cards:
- type: custom:auto-entities
card:
type: custom:bar-card
animation: true
height: 40px
positions:
indicator: 'off'
name: outside
value: inside
width: 60%
columns: 1
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: |
bar-card-value {
color: white !important;
}
bar-card-name {
font-weight: normal;
}
ha-icon {
color: {{ states(entity) | int <= 10 ? 'red' :
states(entity) | int <= 20 ? 'darkred' :
states(entity) | int <= 30 ? 'darkorange' :
states(entity) | int <= 40 ? 'orange' :
states(entity) | int <= 50 ? 'yellow' :
states(entity) | int <= 60 ? 'yellowgreen' :
states(entity) | int <= 70 ? 'lightgreen' :
states(entity) | int <= 80 ? 'limegreen' :
states(entity) | int <= 90 ? 'green' :
'darkgreen' }} !important;
}
unit_of_measurement: '%'
filter:
include:
- entity_id: sensor.*batt*
state: <=100
exclude:
- entity_id: sensor.*battery_temp*
- entity_id: sensor.*battery_pow*
- entity_id: sensor.*battery_type*
- entity_id: sensor.*battery_+*
sort:
method: state
numeric: true
reverse: false
show_empty: false
columns: 1
Ok, it took me a little while, but I figured it out. Below is my current battery status card which uses custom:bar-card, chooses entities with names containing sensor.*_battery, excludes some entities, sorts by by remaining battery life, and color-codes the battery icons.
I used the HA-Battery-Notes integration to automatically add the battery type attribute to each battery.
I really wanted to display the battery type on this dashboard, so it would be easy to just grab the right batteries and change them out.
A future enhancement would be to create an input text helper containing a dictionary of battery sensors and their corresponding battery types in order to include additional battery sensors whose entity names don’t end with _battery .
Code is below. If anyone has suggestions for improving this, please post.
- 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 %}
}
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
- entity_id: sensor.device_tracker_iphone_battery
sort:
method: state
numeric: true
reverse: false
show_empty: false
4 Likes
Probably not the most elegant or efficient but I managed to get this working using this;
(Edit: I tidied this up a bit since my initial reply to just use 2 variables, the list of days and the current getDay value. Only had it working for a day or so but seems to be working so far.
type: custom:config-template-card
variables:
- - Mon
- Tues
- Weds
- Thur
- Fri
- Sat
- Sun
- Mon
- Tues
- Weds
- Thur
- Fri
- Sat
- Sun
- ((new Date()).getDay())
entities:
- entity: sensor.solcast_pv_forecast_forecast_today
- entity: sensor.solcast_pv_forecast_forecast_tomorrow
- entity: sensor.solcast_pv_forecast_forecast_day_3
- entity: sensor.solcast_pv_forecast_forecast_day_4
- entity: sensor.solcast_pv_forecast_forecast_day_5
- entity: sensor.solcast_pv_forecast_forecast_day_6
- entity: sensor.solcast_pv_forecast_forecast_day_7
card:
type: custom:bar-card
entities:
- entity: sensor.solcast_pv_forecast_forecast_today
name: Today
- entity: sensor.solcast_pv_forecast_forecast_tomorrow
name: ${vars[0][vars[1]]}
- entity: sensor.solcast_pv_forecast_forecast_day_3
name: ${vars[0][vars[1] + 1]}
- entity: sensor.solcast_pv_forecast_forecast_day_4
name: ${vars[0][vars[1] + 2]}
- entity: sensor.solcast_pv_forecast_forecast_day_5
name: ${vars[0][vars[1] + 3]}
- entity: sensor.solcast_pv_forecast_forecast_day_6
name: ${vars[0][vars[1] + 4]}
- entity: sensor.solcast_pv_forecast_forecast_day_7
name: ${vars[0][vars[1] + 5]}
title: PV Forecast
direction: up
height: 100
stack: horizontal
max: 40
unit_of_measurement: ' '
positions:
icon: 'off'
decimal: 1
card_mod:
style: |-
ha-card {
--ha-card-header-font-size: 14px;
transform-origin: 0 0;
}
bar-card-backgroundbar {
background: linear-gradient(green 35%, yellow 65%, orange 75%, red 85%);
border-radius: 8px
}
bar-card-currentbar {
background: linear-gradient(green 35%, yellow 65%, orange 75%, red 85%);
clip-path: polygon(0 100%, 100% 100%, 100% calc(100% - var(--bar-percent)), 0 calc(100% - var(--bar-percent)));
border-radius: 8px
}
bar-card-name {
text-shadow: 1px 1px black
}
bar-card-value {
text-shadow: 2px 2px black
}
}
2 Likes
Beautiful!
thanks for posting
Ive done away with bar-card, but this gets me tempted reinstalling it again 
For my usecase I redid your design to a regular entities card with the ‘mimick’ bars Ive posted before, and the result is also nice (although I admit it needs more detail especially in the icon which Ive set to the same colors and because of that dont stand out enough inside the bar).
If you ask for improvements in your code: yes, check out the template for the ha-icon and compare to my code in the yaml below. It can be shortened significantly by setting the var in the top
I didnt touch the icon itself, because the core icons suffice for me, but you could template that identically as I do here with --card-mod-icon-color, and then use --card-mod-icon
Question: where did you get the battery type entities you use in the secondary line. I am aware we can add an attribute as is done in Use for loops to get a notification for each device with low battery and the battery type - #2 by pedolsky but yo seem to have a separate entity?
From Bar to Entities
type: custom:auto-entities
card:
title: Battery Status
type: entities
card_mod:
class: class-header-margin
style:
hui-sensor-entity-row:
$: |
hui-generic-entity-row {
height: 25px;
padding: 0px 16px;
border-radius: var(--ha-card-border-radius);
border: 1px groove var(--primary-color);
}
.: |
ha-card {
color: vcar(--primary-color);
/*--mdc-icon-size: 40px;*/
font-weight: 400;
}
.card-content {
max-height: 450px;
overflow-y: scroll;
}
state_color: false
show_header_toggle: false
filter:
include:
- entity_id: sensor.*_battery
options:
card_mod: &perc
style: |
hui-generic-entity-row {
background:
{% set perc = states(config.entity)|float(0) %}
{% set rest = 100 - perc %}
{% if perc <= 10 %} {% set bar = '255,0,0' %}
{% elif perc <= 20 %} {% set bar = '128,0,0' %}
{% elif perc <= 30 %} {% set bar = '255,140,0' %}
{% elif perc <= 40 %} {% set bar = '255,165,0' %}
{% elif perc <= 50 %} {% set bar = '255,255,0' %}
{% elif perc <= 60 %} {% set bar = '154,205,5' %}
{% elif perc <= 70 %} {% set bar = '144,238,144' %}
{% elif perc <= 80 %} {% set bar = '50,205,50' %}
{% elif perc <= 90 %} {% set bar = '0,128,0' %}
{% else %} {% set bar = '0,100,0' %}
{% endif %}
/*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/
linear-gradient(to right, rgb({{bar}},0.9) 0%, rgb({{bar}},0.6) {{perc}}%,
rgba({{bar}},0.3){{perc}}%, rgba({{bar}},0.1) 100%);
}
:host {
--card-mod-icon-color:
{% set perc = states(config.entity)|float(0) %}
{% if perc <= 10 %} red
{% elif perc <= 20 %} darkred
{% elif perc <= 30 %} darkorange
{% elif perc <= 40 %} orange
{% elif perc <= 50 %} yellow
{% elif perc <= 60 %} yellowgreen
{% elif perc <= 70 %} lightgreen
{% elif perc <= 80 %} limegreen
{% elif perc <= 90 %} green
{% else %} darkgreen
{% endif %};
}
sort:
method: state
numeric: true
reverse: false
show_empty: false
# green #0, 128, 0
# darkgreen #0, 100, 0
# limegreen 50, 205, 50
# gold 255, 215, 0
# brown # 165, 42, 42
# orange #255, 165, 0
# darkorange #255, 140, 0
# orangered #255, 69, 0
# tomato # 255, 99, 71
# maroon #128, 0, 0
# red #255, 0, 0
Dark theme
Lighter theme
3 Likes
@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.