Doh. Worked it out. Re-read the documentation and noticed that the default for “Hide” is “false”.
This does what I need:
- hide: true
from: -7
to: 0
Hi all,
I saw on this reply (Lovelace: Bar Card) that the version 0.1.0 enable the possibility to use an entity as max value.
But when i try to use this feature, it doesn’t seems to work, it show me NaN.
Here is my current configuration :
type: 'custom:bar-card'
entities:
- entity: sensor.sma_current_month_production
limit_value: true
unit_of_measurement: kWh
max: sensor.sma_last_month_production
I’m doing wrong ?
I’m using use the latest version 3.1.6
Thanks.
Hi,
Need some help with border-radius, please look at picture below:
i want the border also below to be like above. how can it be done?
This is my code:
- type: custom:bar-card
style: |-
bar-card-current, bar-card-backgroundbar {
border-radius: 15px;
}
direction: up
height: 200px
stack: horizontal
entities:
- entity: sensor.processor_use
name: CPU
- entity: sensor.memory_use_percent
name: Memory
- entity: sensor.disk_use_percent_home
name: Disk
# - entity: sensor.swap_use_percent
# name: Swap Use
severity:
- color: '#009900'
from: 0
to: 33
- color: '#FFB732'
from: 34
to: 50
- color: '#e67e00'
from: 51
to: 80
- color: '#d11919'
from: 81
to: 100
Tx,
1 Like
Replace bar-card-current with bar-card-currentbar
if you are using a theme you can add this line in the theme you’re using:
bar-card-border-radius: "15px"
4 Likes
Is it possible to fully customize all 4 bar colors used by bar-card? I mean background above traget, background below target, bar below target and bar over target? At the moment it seems to use some combinations/shades of primary bar color, but having possibility to play freely with these colors would open whole new are for card usage…
No, don’t think so.
Maybe you can ask the original author for an enhancement on github:
https://github.com/custom-cards/bar-card/issues
Good evening, following upgrade to HA 111 im getting this error
2020-06-10 21:44:20 ERROR (MainThread) [hacs] Tried to serve up '/config/www/community/bar-card/index.m.js.map' but it does not exist
which incidentally seems to affect browser_mod; the pop-up feature doesnt work, but when I remove bar-card it works.
anyone else experieincing this?
Yes it’s been doing this for the last few releases. I don’t know that it is really bar-card causing it though.
thank you for your feedback.
Very nice !
1 Like
Hello, I use the Bar card since a long time, and I wanted to change, but I have a little issue : The icon isn’t in the same position if you use the inside or outside position :
The icon is lower than in the first screenshot.
Do you have the same thing ?
Hello, I juste installed this card but I have some problems :
- I haven’t round corner in the bar
- lovelace ui configurator of the card is buggy
Did I miss something ?
You need card-mod to be able to style them.
It’s installed 
Did I need to put specific code in the card ? (round corners are not configurable in the UI)
Hey,
Out of interest how did you end up doing this? I can’t decide on colours etc to best indicate whats happening with my power at a glance. This is what I have so far:
card:
entities:
- direction: right
entity: sensor.p_grid
height: 60px
max: '5'
min: '-3.6'
name: Power From Grid
positions:
icon: 'off'
indicator: inside
name: inside
value: inside
severity:
- color: Green
from: '-3.6'
to: '-2.6'
- color: LightGreen
from: '-2.6'
to: '-1'
- color: Yellow
from: '-1'
to: '0'
- color: Orange
from: '0'
to: '1.5'
- color: Red
from: '1.5'
to: '2.5'
- color: Maroon
from: '2.5'
to: '5'
- entity: sensor.p_pv
height: 60px
max: '3.7'
min: '0'
positions:
icon: 'off'
indicator: inside
value: inside
severity:
- color: Yellow
from: '0'
to: '1'
- color: LightGreen
from: '1'
to: '2'
- color: Green
from: '2'
to: '3.7'
- entity: sensor.p_load
height: 60px
max: '-5'
min: '0'
positions:
icon: 'off'
indicator: inside
value: inside
severity:
- color: Green
from: '-1'
to: '0'
- color: Orange
from: '-2'
to: '-1'
- color: Red
from: '-2'
to: '-3'
- color: Maroon
from: '-4'
to: '-5'
style: |-
bar-card-value {
margin-right: auto;
font-size: 35px;
font-weight: bold;
}
bar-card-name {
margin-right: auto;
font-size: 18px;
font-weight: bold;
}
entity_row: true
type: 'custom:bar-card'
conditions:
- entity: input_boolean.solar
state: 'on'
type: conditional
So similar to this I put blue as any value lower than 0W to indicate exporting power.
Then green->yelow->red for anything over 0W
@dave122 I did eventually work it out. I have two bars for Net Power, the positive bar is hidden when net power is less than zero and the negative bar is hidden when net power is equal to or greater than zero.
entities:
- animation:
state: 'on'
decimal: '2'
entity: sensor.envoy_net_power
icon: 'mdi:power-socket-au'
max: '6'
min: '0'
name: Net Power+
positions:
value: inside
severity:
- color: Yellow
from: 0
to: 1.5
- color: Orange
from: 1.5
to: 3
- color: Red
from: 3
to: 7
- from: -7
hide: true
to: 0
target: '0'
- animation:
state: 'on'
decimal: '2'
entity: sensor.envoy_net_power
icon: 'mdi:power-socket-au'
max: '-5'
min: '0'
name: Net Power-
positions:
value: inside
severity:
- color: Lime
from: -7
to: 0
- from: 0
hide: true
to: 7
target: '0'
I’ve also created a sensor, called Power Export, that only displays negative values of Net Power, converting the output to an absolute value to make it appear positive. The next step is to work out how to create a sensor for “Exported Today” which I can use IFTTT to export to a spreadsheet each day to help work out the economics of adding a battery to the system.
1 Like
Hi,
Is there a way to display or not to display an icon on the bar depends on other sensor value?
For example, I’m displaying bars with kids tablets battery percentage. I would like to show charging icon in case tablet is being charged, have a separate sensor for that.
Thanks in advance.