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
}
1 Like
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.
see Lovelace: Bar Card - #899 by Mariusthvdb and the dedicated post I did on it in the link below it)
Right, I found that one yesterday and installed it, I now have these _battery_type entities too
use device_class: battery?
Yes it does? you just need to specify a separate dash
filter:
include:
- device_class: battery
- entity_id: *_battery_level
- entity_id: '*_some_battery*'
you could also add a label: battery to those entities, and then select the label (but beware, in my setup that really hits hard on the system aka kills it, so I only use those with auto-entities in a template using {{label_entities('battery')}} )
and, not sure about Bard-card templates (never used it) but you can c&p any complete yaml block in an anchor.
edit
I read on, and now see that you list that as Yaml template at the bottom of your postā¦ yep thats it.
but I think you donāt need that in the end, if you setup your filters alright
also, I am experimenting with the template-entity-row card and am almost ready, but the state doesnt colorize as I want it, so Ill first post that effort in card-mod, but the main body will be:
- type: entities
entities:
- type: custom:template-entity-row
entity: sensor.studenten_hygro_temp_battery
state: >
{{states(config.entity,with_unit=True)}}
secondary: >
Battery type: {{states(config.entity ~'_type')}}
and then feed that to auto-entities
edit
fixed itā¦ I had a typo there.
1 Like
Thanks to @royf007, @Mariusthvdb and others contributing, Iāve always wanted to improve my battery display use colour and be representative of the battery state. Wanted the bigger bar with colour also the colour based Icon but outside the bar.
Taking snippets of code from all the posts and what I had, created the following for my Zigbee sensors
Here is the code if anyone is interested
type: custom:auto-entities
card:
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: 45px
positions:
name: inside
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: 1px;
}
bar-card-card {
height: 45px;
}
bar-card-value {
color: white;
}
bar-card-name:after {
content: "\A Battery Type: {{ states(config.entity + '_type') }}";
white-space: pre;
font-size: 12px;
color: black;
font-weight: bold;
}
bar-card-name {
width: 250px;
font-size: 13px;
}
bar-card-backgroundbar {
border-radius: 12px;
margin-top: 1px;
background: grey;
opacity: 50%;
}
bar-card-currentbar {
border-radius: 12px;
margin-top: 1px;
}
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: null
sort:
method: state
numeric: true
reverse: false
show_empty: false
hehe, yes, but you didnt fix the ha-icon templateā¦
2 Likes
