stack-in-card + card-mod
or
layout-card
What is the code I use to get these rounded bars?
How do I place these rounded battery bars?
card_mod:
style: |-
ha-card{
--bar-card-border-radius: 10px;
border-radius: 10px;
box-shadow:
}
1 Like
I would like to have a duration shown in the bar card. The problem is that I have a duration created with history_stats like this:
platform: history_stats
name: wz_tv_time_today
entity_id: media_player.tv
state: 'on'
type: time
start: '{{ now().replace(hour=0, minute=0, second=0, microsecond=0) }}'
end: '{{ now() }}'
When I display this entity with custom:bar-card like this:
- type: custom:bar-card
entities:
- entity: sensor.wz_tv_time_today
name: TV Zeit heute
icon: mdi:television
max: 12
severity:
- color: green
from: 0
to: 1
- color: yellow
from: 1
to: 3
- color: red
from: 3
to: 24
height: 25px
positions:
icon: inside
indicator: inside
entity_row: true
style: |
bar-card-name { color: black}
bar-card-iconbar { color: white }
bar-card-value { padding-right: 10px; color: white; }
bar-card-currentbar, bar-card-backgroundbar { border-radius: 0.5em; }
bar-card-contentbar { font-size: 12px; }
bar-card-indicator { display: none; }
ha-card {
--mdc-icon-size: 18px;
}
I get this:
What I would like to get is not having a floating point value like 2.03, but 02:02 (0.03*60 = 1.8) instead. How can I achieve this? Is it possible to internally use the entity for calculation and then define something else to be displayed in the bar?
Your only option is using card-mod & “:after” pseudo class:
type: entities
entities:
- entity: input_number.test_level_1
- type: custom:bar-card
entities:
- entity: input_number.test_level_1
positions:
icon: off
indicator: off
value: inside
entity_row: true
style: |
bar-card-value {
font-size: 0px;
}
bar-card-value:after {
content: "00:20:00";
font-size: var(--mdc-typography-body1-font-size,1rem);
}
and you need to specify an appropriate template inside the “content” value, like:
content: "{% set xyz = ... -%}
{%- ... -%}
{{ ... }}";
How do I hide the border?
Hello, everyone. I’m having difficulty with entities in the ‘unavailable’ state using ‘states(config.entity)’ in the style.
My code:
type: custom:auto-entities
card:
title: Nível das Baterias
type: entities
filter:
template: |-
{% for state in states.sensor -%}
{%- if state.entity_id | regex_match("sensor.esp_kiwi_soil_sector_.*battery", ignorecase=False) -%}
{{
{
'entity_row': true,
'entity': state.entity_id,
'name': state.attributes.friendly_name.replace('ESP - Kiwi Soil ', '').replace(' Battery', ''),
'type': 'custom:bar-card',
'height': '32px',
'max': "100",
'positions': {
'name': 'inside',
'icon': "inside",
'value': 'inside',
'indicator': "off",
},
'card_mod': {
'style':
'bar-card-name, bar-card-value {
font-size: 14px !important;
font-weight: bold !important;
margin-right: 20px !important;
}
bar-card-currentbar, bar-card-targetbar, bar-card-backgroundbar {
border-radius: 10px !important;
}
bar-card-row {
margin-bottom: 2px !important;
}
bar-card-iconbar {
color: var(--bar-card-icon-color);
}
ha-card {
border: none !important;
}
ha-icon, bar-card-backgroundbar, bar-card-currentbar {
{% if states(config.entity) | int <= 10 %}
--card-mod-icon: mdi:battery-10 !important;
--bar-color: #FF1700 !important;
{% elif states(config.entity) | int <= 20 %}
--card-mod-icon: mdi:battery-20 !important;
--bar-color: #FF1700 !important;
{% elif states(config.entity) | int <= 30 %}
--card-mod-icon: mdi:battery-30 !important;
--bar-color: #FF1700 !important;
{% elif states(config.entity) | int <= 40 %}
--card-mod-icon: mdi:battery-40 !important;
--bar-color: #FF8E00 !important;
{% elif states(config.entity) | int <= 50 %}
--card-mod-icon: mdi:battery-50 !important;
--bar-color: #FF8E00 !important;
{% elif states(config.entity) | int <= 60 %}
--card-mod-icon: mdi:battery-60 !important;
--bar-color: #FFE400 !important;
{% elif states(config.entity) | int <= 70 %}
--card-mod-icon: mdi:battery-70 !important;
--bar-color: #FFE400 !important;
{% elif states(config.entity) | int <= 80 %}
--card-mod-icon: mdi:battery-80 !important;
--bar-color: #06FF00 !important;
{% elif states(config.entity) | int <= 90 %}
--card-mod-icon: mdi:battery-90 !important;
--bar-color: #06FF00 !important;
{% elif states(config.entity) | int <= 100 %}
--card-mod-icon: mdi:battery !important;
--bar-color: #06FF00 !important;
{% else %}
--card-mod-icon: mdi:battery-alert-variant !important;
--bar-color: #FF1700 !important;
{% endif %}
}
}'
},
}
}},
{%- endif -%}
{%- endfor %}
If I remove this part of the code, the style already works:
ha-icon, bar-card-backgroundbar, bar-card-currentbar {
{% if states(config.entity) | int <= 10 %}
--card-mod-icon: mdi:battery-10 !important;
--bar-color: #FF1700 !important;
{% elif states(config.entity) | int <= 20 %}
--card-mod-icon: mdi:battery-20 !important;
--bar-color: #FF1700 !important;
{% elif states(config.entity) | int <= 30 %}
--card-mod-icon: mdi:battery-30 !important;
--bar-color: #FF1700 !important;
{% elif states(config.entity) | int <= 40 %}
--card-mod-icon: mdi:battery-40 !important;
--bar-color: #FF8E00 !important;
{% elif states(config.entity) | int <= 50 %}
--card-mod-icon: mdi:battery-50 !important;
--bar-color: #FF8E00 !important;
{% elif states(config.entity) | int <= 60 %}
--card-mod-icon: mdi:battery-60 !important;
--bar-color: #FFE400 !important;
{% elif states(config.entity) | int <= 70 %}
--card-mod-icon: mdi:battery-70 !important;
--bar-color: #FFE400 !important;
{% elif states(config.entity) | int <= 80 %}
--card-mod-icon: mdi:battery-80 !important;
--bar-color: #06FF00 !important;
{% elif states(config.entity) | int <= 90 %}
--card-mod-icon: mdi:battery-90 !important;
--bar-color: #06FF00 !important;
{% elif states(config.entity) | int <= 100 %}
--card-mod-icon: mdi:battery !important;
--bar-color: #06FF00 !important;
{% else %}
--card-mod-icon: mdi:battery-alert-variant !important;
--bar-color: #FF1700 !important;
{% endif %}
}
Try to use this:
ha-card {
border: none !important;
}
1 Like
Do you want unavailable to even be shown? if not i would just filter them out in your initial for state bit:
{% for state in states.sensor
| rejectattr('state','in',['unavailable','unknown']) %}
if you have to/want to show them add a default to your int conversion as that is what is failing - cant convert unknown/unavailable/none/undefined, etc. to an int.
{% if states(config.entity) | int(default=0) <= 10 %}
--card-mod-icon: mdi:battery-10 !important;
--bar-color: #FF1700 !important;
{% elif states(config.entity) | int(default=0) <= 20 %}
--card-mod-icon: mdi:battery-20 !important;
--bar-color: #FF1700 !important;
{% elif states(config.entity) | int(default=0) <= 30 %}
--card-mod-icon: mdi:battery-30 !important;
--bar-color: #FF1700 !important;
{% elif states(config.entity) | int(default=0) <= 40 %}
--card-mod-icon: mdi:battery-40 !important;
--bar-color: #FF8E00 !important;
{% elif states(config.entity) | int(default=0) <= 50 %}
--card-mod-icon: mdi:battery-50 !important;
--bar-color: #FF8E00 !important;
{% elif states(config.entity) | int(default=0) <= 60 %}
--card-mod-icon: mdi:battery-60 !important;
--bar-color: #FFE400 !important;
{% elif states(config.entity) | int(default=0) <= 70 %}
--card-mod-icon: mdi:battery-70 !important;
--bar-color: #FFE400 !important;
{% elif states(config.entity) | int(default=0) <= 80 %}
--card-mod-icon: mdi:battery-80 !important;
--bar-color: #06FF00 !important;
{% elif states(config.entity) | int(default=0) <= 90 %}
--card-mod-icon: mdi:battery-90 !important;
--bar-color: #06FF00 !important;
{% elif states(config.entity) | int(default=0) <= 100 %}
--card-mod-icon: mdi:battery !important;
--bar-color: #06FF00 !important;
{% else %}
--card-mod-icon: mdi:battery-alert-variant !important;
--bar-color: #FF1700 !important;
{% endif %}
this should do it 
default = 0 just means that if an error occurs in the template it will default the if to be 0. so false, so it will be false all the way down until it reaches the else.
ran into the same problem when making my battery card too
need to update the post with the solution
1 Like
Thanks for your help it’s working now with a little bug. 
The else statement does not work as expected…
{% else %}
--card-mod-icon: mdi:battery-alert-variant !important;
--bar-color: #61677A !important;
The color and the icon not change the entities unavailable
It’s using the other statements in the code in this case:
{% if states(config.entity) | int(default=0) <= 10 %}
--card-mod-icon: mdi:battery-10 !important;
--bar-color: #FF1700 !important;
yes. my mistake i have misunderstood how the default works. you set a default and then you can test for that default so the default you can set to something like:
(default=unknown)
and then your very first if statement should be:
{% if states(config.entity) | int(default=unknown) == unknown %}
--card-mod-icon: mdi:battery-alert-variant !important;
--bar-color: #FF1700 !important;
you can then do the rest if your elifs without the default 
the default sets a default value rather than the default result of the if statement, i had misunderstood that bit
it just so happened that i had my error check at the top rather than at the bottom like you did.
1 Like
I’m almost finishing, and I have anothers obstacles.
-
Customizing the name ‘unavailable’ to something different, for example, ‘n/a.’ using bar-card-value
-
Adding another value from diferent entities.
In this code, it filters the entities of the batteries with their percentage values, and I have other entities that mention the voltage of the batteries. I would like to combine the values so that they appear on each bar. For example, on the right side of the bar, it should mention ‘100% - 4.2V’
type: custom:auto-entities
card:
title: Baterias
type: entities
filter:
template: |-
{% for state in states.sensor -%}
{%- if state.entity_id | regex_match("sensor.esp_kiwi_soil_sector_.*battery", ignorecase=False) -%}
{{
{
'entity_row': true,
'entity': state.entity_id,
'name': state.attributes.friendly_name.replace('ESP - Kiwi Soil ', '').replace(' Battery', ''),
'type': 'custom:bar-card',
'height': '34px',
'max': '100',
'positions': {
'name': 'inside',
'icon': 'inside',
'value': 'inside',
'indicator': 'off',
},
'card_mod': {
'style':
'bar-card-name, bar-card-value {
font-size: 14px !important;
font-weight: bold !important;
margin-right: 20px !important;
#text-shadow: 0px 0px 6px black;
}
bar-card-currentbar, bar-card-targetbar, bar-card-backgroundbar {
border-radius: 10px !important;
}
bar-card-row {
margin-bottom: 2px !important;
}
bar-card-iconbar {
color: var(--bar-card-icon-color);
}
ha-card {
border: none !important;
}
ha-icon, bar-card-backgroundbar, bar-card-currentbar {
{% if states(config.entity) | int(default=unknown) == unknown %}
--card-mod-icon: mdi:alert-circle-outline !important;
--bar-color: #9E9E9E !important;
{% elif states(config.entity) | int(default=0) <= 10 %}
--card-mod-icon: mdi:battery-off-outline !important;
--bar-color: #E74C3C !important;
{% elif states(config.entity) | int(default=0) <= 20 %}
--card-mod-icon: mdi:battery-20 !important;
--bar-color: #E74C3C !important;
{% elif states(config.entity) | int(default=0) <= 30 %}
--card-mod-icon: mdi:battery-30 !important;
--bar-color: #FF9800 !important;
{% elif states(config.entity) | int(default=0) <= 40 %}
--card-mod-icon: mdi:battery-40 !important;
--bar-color: #FF9800 !important;
{% elif states(config.entity) | int(default=0) <= 50 %}
--card-mod-icon: mdi:battery-50 !important;
--bar-color: #FFEB3B !important;
{% elif states(config.entity) | int(default=0) <= 60 %}
--card-mod-icon: mdi:battery-60 !important;
--bar-color: #FFEB3B !important;
{% elif states(config.entity) | int(default=0) <= 70 %}
--card-mod-icon: mdi:battery-70 !important;
--bar-color: #4CAF50 !important;
{% elif states(config.entity) | int(default=0) <= 80 %}
--card-mod-icon: mdi:battery-80 !important;
--bar-color: #4CAF50 !important;
{% elif states(config.entity) | int(default=0) <= 90 %}
--card-mod-icon: mdi:battery-90 !important;
--bar-color: #4CAF50 !important;
{% elif states(config.entity) | int(default=0) <= 100 %}
--card-mod-icon: mdi:battery !important;
--bar-color: #4CAF50 !important;
{% endif %}
}
}'
},
}
}},
{%- endif -%}
{%- endfor %}
Inserting the below should do this.
{% if states(config.entity) == "unavailable" %}
bar-card-value {
color: transparent !important;
}
bar-card-value::after {
content: "n/a";
color: var(--primary-text-color) !important;
}
{% endif %}
For this i would highly recommend you create a new template sensor that has the 2 states as attributes instead and then do your auto entities based on the new template sensors. You can then just combine the attributes of the same already filtered entity rather than trying to apply the state of one entity with the other (which will be almost impossible to do dynamically.)
To be clear the main state of your new template sensor should be your battery percentage, but it could have as an attribute the voltage as per your other entity.
1 Like
just overwrite it for the ones that are unavailable then
{% if states(config.entity) == "unavailable" %}
bar-card-value {
color: transparent !important;
#text-shadow: 0px 0px 6px transparent;
}
bar-card-value::after {
content: "n/a";
color: var(--primary-text-color) !important;
#text-shadow: 0px 0px 6px black;
}
{% endif %}
1 Like
With a bit of research and using the structure of your code, I arrived at this solution. Thank you!
{% if states(config.entity) == "unavailable" %}
bar-card-value {
visibility: hidden !important;
}
bar-card-value::after {
visibility: visible;
content: "n/a";
}
{% endif %}
1 Like
Hi,
I’m revisiting this post even though it’s old.
I would like to try using the gradient color but it displays it correctly, it colors the entire bar without considering the sensor percentage which is 63%.
I wonder if it is possible to share the card to understand how you did it.
thank you very much
You have to add the clip-path: