@maurizio53 @MarH I’ve added the attribute config option back in 3.0.5. I’m a bit more hesitant now to add features (this was already an old feature), but this does make things much easier to config and doesn’t take much code wise to maintain. So I’ve decided to put it back in.
Also this is how you do proper development right? Take something away and then put it back in later to make people happy that it’s back? 
.
@Gluwc: Thanks for your great work!
Since 3.0.0 I’ve a problem with max values: entity id doesn’t work anymore as max value.
- type: 'custom:bar-card'
entity_row: true
decimal: 2
positions:
title: 'off'
minmax: inside
style: |-
bar-card-value, bar-card-minvalue, bar-card-maxvalue {
color: #cccccc;
font-weight: bold;
text-shadow: 1px 1px #0005;
}
bar-card-title {
color: var(--secondary-text-color)
font-weight: bold;
}
entities:
- entity: sensor.internet_transmission_rate_down
max: sensor.internet_max_rate_down
- entity: sensor.internet_transmission_rate_up
max: sensor.internet_max_rate_up
This was removed from the card since the code was a bit messy and there’s better ways of doing it now. Have a look at https://github.com/iantrich/config-template-card this allows you to use templates for any config value in any card including min/max.
Thx for your fast reply.
No chance to get it back? From the docs: “The maximum entity value to be displayed, accepts entity id or attribute object value.”
Don’t understand how to use this. Could you pls give an example?
I probably won’t be adding this back in, however here’s an example using template card
type: "custom:config-template-card"
variables:
- states['sensor.internet_max_rate_down'].state
- states['sensor.internet_max_rate_up'].state
entities:
- sensor.internet_max_rate_down
- sensor.internet_max_rate_up
card:
type: 'custom:bar-card'
entity_row: true
decimal: 2
positions:
title: 'off'
minmax: inside
style: |-
bar-card-value, bar-card-minvalue, bar-card-maxvalue {
color: #cccccc;
font-weight: bold;
text-shadow: 1px 1px #0005;
}
bar-card-title {
color: var(--secondary-text-color)
font-weight: bold;
}
entities:
- entity: sensor.internet_transmission_rate_down
max: '${vars[0]}'
- entity: sensor.internet_transmission_rate_up
max: '${vars[1]}'
Thx again. Thanks to your example I’ve understood how it works. Unfortunately
entities:
- sensor.internet_max_rate_down
- sensor.internet_max_rate_up
don’t refresh the schown values.
I did test this before, but I’ll have another look to see if it’s not broken later today.
How you get those two sensors?
Share the code?
I get these sensors from “AVM FRITZ!Box Net Monitor”: https://www.home-assistant.io/integrations/fritzbox_netmonitor/
Just double checked and it does actually work. This is the config I used, when I update sensor.debug it updates the max value of the bar. Make sure all the variables and entities in the template card are correct.
type: 'custom:config-template-card'
variables:
- 'states[''sensor.debug''].state'
- 'states[''sensor.debug''].state'
entities:
- sensor.debug
- sensor.debug
card:
type: 'custom:bar-card'
entity_row: true
decimal: 2
positions:
title: 'off'
minmax: inside
style: |-
bar-card-value, bar-card-minvalue, bar-card-maxvalue {
color: #cccccc;
font-weight: bold;
text-shadow: 1px 1px #0005;
}
bar-card-title {
color: var(--secondary-text-color)
font-weight: bold;
}
entities:
- entity: sensor.battery_phone_lucas
max: '${vars[0]}'
- entity: sensor.battery_phone_lucas
max: '${vars[1]}'
Ok, thanks
Hello guys,
The new 3.0.5 update changed the visual effect of the card. can someone help me adapt the code that I have always used for my batteries? I tried to play with style: but I can’t, I’m not practical. Cheers
cards:
- card:
attribute: battery_level
bar_style:
border-radius: 20px
card_style:
box-shadow: 0 0
columns: 1
device_class: battery
height: 15px
indicator_style:
border-radius: 20px
padding: 0px 15px 3px 15px
rounding: 10px
saturation: 50%
severity:
- color: '#fa0505'
value: 10
- color: '#fa6b05'
value: 35
- color: '#fab905'
value: 50
- color: '#ddfa05'
value: 75
- color: '#40bf40'
value: 100
title_position: left
type: 'custom:bar-card'
unit_of_measurement: '%'
width: 60%
filter:
exclude:
- entity_id: device_tracker.*
- entity_id: binary_sensor.switch_*
- entity_id: binary_sensor.motion_*
- entity_id: sensor.salotto_*
- entity_id: sensor.temperature_*
- entity_id: sensor.humidity_*
- entity_id: sensor.pressure_*
- entity_id: sensor.illumination_*
- entity_id: switch.plug_*
- entity_id: sensor.salotto_humidity
include:
- attributes:
battery_level: <=100
type: 'custom:auto-entities'
title: Batterie Porte & Finestre
type: 'custom:vertical-stack-in-card'
Trying to replicate my bar card as it was before but can’t seem to figure out how to align components (here’s before and after):
This is my configuration:
entity: sensor.temp
positions:
icon: 'off'
indicator: outside
title: outside
width: 85%
decimal: 1
min: 0
max: 42
severity:
- color: blue
from: 0
to: 12
- color: green
from: 12.1
to: 24
- color: red
from: 24.1
to: 42
style: |-
ha-card {
padding: 4px;
height: 38px;
}
bar-card-title {
color: orange;
font-family: Roboto;
font-size: 15px;
font-weight: bold;
}
bar-card-value {
color: white;
font-family: Roboto;
font-size: 24px;
font-weight: bold;
}
type: 'custom:bar-card'
entity_row: true
By default the card is now displayed with an HA card background.
It depends on what it looked like before.
Unfortunately, it’s not working for me. The second and third bargraphs have a manually set maximum value of 10 and the current value is updated there as expected. The fourth and fifth which are created using a template are never updated unless you use page refresh.
Thanks for the help, but I’m still a little lost as to how car-mod implementation works. Why is the background bar (dark red) not lined up with the actual bar…?
This is my config:
decimal: 1
entity: sensor.temp
entity_row: true
max: 42
min: 0
positions:
icon: 'off'
indicator: inside
title: outside
severity:
- color: blue
from: 0
to: 12
- color: green
from: 12.1
to: 24
- color: red
from: 24.1
to: 42
style: |-
ha-card {
padding: 16px;
height: 30px;
background: red !important;
}
bar-card-tragetmarker {
position: absolute;
margin-top: 4px;
}
bar-card-current {
position: absolute;
margin-top: 4px;
}
bar-card-value {
margin-top: 10px;
}
bar-card-title {
color: orange;
font-family: Roboto;
font-size: 15px;
font-weight: bold;
position: absolute;
}
bar-card-value {
color: white;
font-family: Roboto;
font-size: 24px;
font-weight: bold;
margin-right: auto;
margin-top: auto;
}
type: 'custom:bar-card'
width: 80%
I’m not really sure what you’re trying to do, but I think you’re over complicating things.
type: entities
entities:
- decimal: 1
entity: sensor.example
entity_row: true
max: 42
min: 0
positions:
icon: 'off'
indicator: inside
title: outside
severity:
- color: blue
from: 0
to: 12
- color: green
from: 12.1
to: 24
- color: red
from: 24.1
to: 42
type: 'custom:bar-card'
width: 80%
style: |-
bar-card-title {
color: orange;
font-family: Roboto;
font-size: 15px;
font-weight: bold;
}
bar-card-value {
color: white;
font-family: Roboto;
font-size: 24px;
font-weight: bold;
margin-right: auto;
}
Edit: Actually you can do this:
decimal: 1
entity: sensor.example
max: 42
min: 0
positions:
icon: 'off'
indicator: inside
title: outside
severity:
- color: blue
from: 0
to: 12
- color: green
from: 12.1
to: 24
- color: red
from: 24.1
to: 42
type: 'custom:bar-card'
width: 80%
style: |-
bar-card-title {
color: orange;
font-family: Roboto;
font-size: 15px;
font-weight: bold;
}
bar-card-value {
color: white;
font-family: Roboto;
font-size: 24px;
font-weight: bold;
margin-right: auto;
}
#states {
padding: 0px;
}
#states > * {
margin: 8px;
}