Thank you very much, saved me a lot of time.
1 Like
Alternatively, this may be achieved by card-mod based on this cool method from a card-mod-theme cookbook:
- type: custom:auto-entities
card:
type: entities
entities: []
sort:
method: state
numeric: true
filter:
include:
- entity_id: input_number.test_level_*
options:
card_mod:
style: |
:host {
{% set battery = states(config.entity) %}
background: linear-gradient(to right, rgba(0,255,0,0.5), {{battery}}%, white {{battery}}%);
}
For real battery sensors their states will be displayed instead of sliders.
1 Like
no success so far. Thomas, would you mind sharing your code? best Florian
See above posted code by [Ildar_Gabdullin]
Well, that’s what I did. So I thought looking at a second configuration might help in order to figure out what I will have to change. never mind…
1 Like
Team,
Is it possible to have 3 bars and give one a different background-bar color? (and possibly label-font-color)
Example:
Current config (all with the same color):
type: custom:bar-card
entities:
- entity: sensor.temphum_blokhut_temp
name: Cabin
- entity: sensor.motion_x_frontdoor_temp
name: Outside
- entity: sensor.temp_rfx_garage_temperature
name: Garage
direction: up
height: 200px
min: 0
max: 28
stack: horizontal
Use card-mod
To monitor my raspberry, I have a vertical stack + bar-card, but I have the problem that every bar takes different size depending on the value as shown below:
Is there a way to have them with the same size?
Current code is:
- type: vertical-stack
cards:
# CPU
- type: custom:bar-card
positions:
name: outside
value: outside
indicator: 'off'
height: 20px
width: 60%
entities:
- entity: sensor.cpu_usage_raspi4
name: CPU
icon: mdi:speedometer
severity:
- color: rgb(26,204,147,0.33)
from: 0
to: 10.9
- color: rgb(206,133,0,0.60)
from: 11
to: 25
- color: rgb(163,0,0,0.60)
from: 26
to: 150
# Temperature
- type: custom:bar-card
positions:
name: outside
value: outside
indicator: 'off'
height: 20px
width: 60%
entities:
- entity: sensor.temperature_raspi4
name: Temp
icon: mdi:thermometer
severity:
- color: rgb(26,204,147,0.33)
from: 0
to: 69.9
- color: rgb(206,133,0,0.60)
from: 70
to: 85
- color: rgb(163,0,0,0.60)
from: 85
to: 150
# Disk
- type: custom:bar-card
positions:
name: outside
value: outside
indicator: 'off'
height: 20px
width: 60%
entities:
- entity: sensor.disk_use_raspi4
name: SSD
icon: mdi:harddisk
severity:
- color: rgb(26,204,147,0.33)
from: 0
to: 69.9
- color: rgb(206,133,0,0.60)
from: 70
to: 85
- color: rgb(163,0,0,0.60)
from: 85
to: 150
Hello,
Having problems to get different colors for each bar.
Background: I want to show colors of ink filled from my printer and display it with appropriate color.
Thanks for help, Ralf
Use card-mod
This works but with a caveat.
With card-mod I can change the colors but not one of the 3 bars.
So in the above scenario with 3 bars I had to use a horizontal-stack with 3 separate bars of which the middle one gets a different color.
Let me clarify.
The bar-card may include a list of bars (or just one bar).
Card-mod may be specified for all bars or some particular.
Card-mod may be specified for all bars or some particular.
Do you mean you can have a single bar-card with 3 bars and use card-mod to change the color of 1 of these bars? (vs. adding 3 bar-cards of which 1 uses card-mod)
Tnx!
DJ
type: custom:bar-card
title: different styles
entities:
- entity: sensor.memory_use_percent
min: '0'
max: '100'
- entity: sensor.memory_use_percent
min: '0'
max: '100'
- entity: sensor.memory_use_percent
min: '0'
max: '100'
card_mod:
style: |
bar-card-row:nth-of-type(1) bar-card-name {
color: orange;
}
bar-card-row:nth-of-type(2) bar-card-name {
color: red;
}
2 Likes
Thank you Ildar!
With your example I was able to make it work for my bars.
- The CSS had to be changed as I use
direction:upandstack:horizontal - The actual bar color is stored in a CSS variable so this had to be changed:
--bar-card-color
Result:
CODE:
type: custom:bar-card
entities:
- entity: sensor.motion_x_garage_temp
name: Garage
- entity: sensor.motion_x_frontdoor_temp
name: Outside
- entity: sensor.temp_x_living_temp
name: Living
title: Temperature comparison
direction: up
height: 200px
min: 0
max: 28
stack: horizontal
card_mod:
style: |
bar-card-row bar-card-card:nth-of-type(2) {
--bar-card-color: red;
}
As you can see I had to
- go to
bar-card-row(with a horizontal stack you only have 1 row) - Go through the
bar-card-card's and use:nth-of-type(2)to modify the 2nd one.
Then…
…a crazy idea came to mind: why not use severity colors?
A short version of your example would look like this:
type: custom:bar-card
title: different styles
entities:
- entity: sensor.memory_use_percent
- entity: sensor.memory_use_percent
severity:
- color: Red
from: 1
to: 99999
- entity: sensor.memory_use_percent
resulting in 3 bars with the middle one being red.
I still like the one with card_mod better, just because I can 
ILDAR )
Mmm, may be, I was not thinking about settings for bars, just wanted to show how to style particular bars.
1 Like
Can someone help me on how to change the bar color (or hide it) if the entity state is “unknown”?
Kind of this:
type: custom:bar-card
entities:
- entity: sensor.battery_samsung_p6800
direction: right
name: Battery
icon: mdi:battery
card_mod:
style: |
bar-card-row {
{% if states("sensor.battery_samsung_p6800") in ['unavailable','unknown'] %}
--bar-card-color: var(--disabled-text-color);
{% endif %}
}
Hide what?
Thanks, that works. By hiding it, I meant hiding the bar itself. I found that the “severity” option can have a “hide” option, but how do I format the boolean? hide: {{ is_state('sensor.tpms_f1a819c8', 'unknown') }} doesn’t seem to work.
- Check this example:
- type: custom:bar-card
entities:
- entity: sensor.battery_samsung_p6800
direction: right
name: Battery
icon: mdi:battery
severity:
- from: 10
to: 20
color: var(--disabled-text-color)
icon: mdi:battery-alert
- from: 21
to: 30
hide: true
Then change a value of the sensor.battery_samsung_p6800:
And if the value = 29:
In some cases this “hiding the bar” may not look fine for you due to it’s vertical sizes.
Probably, if the bar-card is placed between entity-rows the hiding will look better, check it by yourself.
- You cannot use this:
severity:
- from: unknown
to: unknown
- Here you are trying to use a template:
which is not supported.
- How to hide by using “card-mod”:
Let’s consider a bar-card inside a stack:
type: vertical-stack
cards:
- type: entities
entities:
- sun.sun
- type: custom:bar-card
entities:
- entity: sensor.battery_samsung_p6800
direction: right
name: Battery
icon: mdi:battery
card_mod:
style: |
ha-card {
{% if states("sensor.battery_samsung_p6800") in ['unavailable','unknown'] %}
display: none;
{% endif %}
}
- type: entities
entities:
- sun.sun
Now change a value of the sensor to "unknown":
The card is not displayed but still there is vertical spacing after the hidden card - which leads to a DOUBLE spacing.
Also you may try using a custom:state-switch card.
1 Like