No you have to change the type of bar-card in the resources config to Javascript Module instead of Javascript File.
1 Like
Cool that worked. So now my card is different.
First row one is bigger than the rest and have those eye icons on the left now.
Hereās my Lovelace code for reference:
cards:
- entities:
- sensor.homeserver_ping_google
font_size: 60
height: 20
hours_to_show: 168
line_width: 2
name: Ping Google
points_per_hour: 0.25
show:
extrema: true
fill: true
icon: false
name: true
state: false
type: 'custom:mini-graph-card'
- entities:
- entity: sensor.homeserver_up_time
name: Up Time
- entity: sensor.homeserver_c_drive_used
from: left
height: 30px
max: 100
min: 0
name: C Drive Used
rounding: 5px
saturation: 50%
severity:
- color: Green
from: 0
to: 50
- color: Orange
from: 51
to: 79
- color: Red
from: 80
to: 100
style:
'--paper-card-background-color': 'rgba(84, 95, 108, 0.7)'
border-radius: 8px
left: 1%
overflow: hidden
top: 37.5%
transform: none
width: 48%
type: 'custom:bar-card'
- entity: sensor.homeserver_d_drive_used
from: left
height: 30px
max: 100
min: 0
name: D Drive Used
rounding: 5px
saturation: 50%
severity:
- color: Green
from: 0
to: 50
- color: Orange
from: 51
to: 79
- color: Red
from: 80
to: 100
style:
'--paper-card-background-color': 'rgba(84, 95, 108, 0.7)'
border-radius: 8px
left: 1%
overflow: hidden
top: 37.5%
transform: none
width: 48%
type: 'custom:bar-card'
- entity: sensor.homeserver_e_drive_used
from: left
height: 30px
max: 100
min: 0
name: E Drive Used
rounding: 5px
saturation: 50%
severity:
- color: Green
from: 0
to: 50
- color: Orange
from: 51
to: 79
- color: Red
from: 80
to: 100
style:
'--paper-card-background-color': 'rgba(84, 95, 108, 0.7)'
border-radius: 8px
left: 1%
overflow: hidden
top: 37.5%
transform: none
width: 48%
type: 'custom:bar-card'
- entity: sensor.homeserver_f_drive_used
from: left
height: 30px
max: 100
min: 0
name: F Drive Used
rounding: 5px
saturation: 50%
severity:
- color: Green
from: 0
to: 50
- color: Orange
from: 51
to: 79
- color: Red
from: 80
to: 100
style:
'--paper-card-background-color': 'rgba(84, 95, 108, 0.7)'
border-radius: 8px
left: 1%
overflow: hidden
top: 37.5%
transform: none
width: 48%
type: 'custom:bar-card'
- entity: sensor.homeserver_memory_used
from: left
height: 30px
max: 100
min: 0
name: Memory Used
rounding: 5px
saturation: 50%
severity:
- color: Green
from: 0
to: 50
- color: Orange
from: 51
to: 79
- color: Red
from: 80
to: 100
style:
'--paper-card-background-color': 'rgba(84, 95, 108, 0.7)'
border-radius: 8px
left: 1%
overflow: hidden
top: 37.5%
transform: none
width: 48%
type: 'custom:bar-card'
- entity: sensor.homeserver_cpu_used
from: left
height: 30px
max: 100
min: 0
name: CPU Used
rounding: 5px
saturation: 50%
severity:
- color: Green
from: 0
to: 50
- color: Orange
from: 51
to: 79
- color: Red
from: 80
to: 100
style:
'--paper-card-background-color': 'rgba(84, 95, 108, 0.7)'
border-radius: 8px
left: 1%
overflow: hidden
top: 37.5%
transform: none
width: 48%
type: 'custom:bar-card'
title: HomeServer
type: vertical-stack
NOTE: Just noticed the icon: off option in the docs which either is new or wasnāt showing before. So I added that to each section and itās gone now but now I have whitespace on the left side. Think this update makes it standard with how HA normally works? Not that I like that it doesnāt adjust but think Iāve seen other things in Lovelace do that. Kind of the this is where the icon goes, if you donāt want one, this is still where the icon goes.
Youāre making it much more complicated that it needs to be and you have a couple of things in there that wonāt even work at all. This should probably do what you want:
entities:
- entity: sensor.example
name: Up Time
- entity: sensor.example
name: C Drive Used
- entity: sensor.example
name: D Drive Used
- entity: sensor.example
name: E Drive Used
- entity: sensor.example
name: F Drive Used
- entity: sensor.example
name: Memory Used
- entity: sensor.example
name: CPU Used
type: 'custom:bar-card'
height: 30px
positions:
icon: 'off'
severity:
- color: Green
from: 0
to: 50
- color: Orange
from: 51
to: 79
- color: Red
from: 80
to: 100
You da man. Thanks Lucas that works out much better.
Am I doing something wrong, expecting too much or is there a bug?
- type: custom:bar-card
entities:
- sensor.loungemotion_battery_level
- sensor.kitchendoor_battery_level
- sensor.kitchendoorlock_battery_level
severity:
- color: firebrick
from: 0
to: 10
- color: darkorange
from: 11
to: 28
- color: gold
from: 39
to: 69
- color: Green
from: 70
to: 100
I get the following:
The icons are eyes, whereas the actual icons for the entities are batteries at various levels of discharge e.g.
Shouldnāt the entity icon be used?
Iām not really sure. The icons are part of the custom-card-helpers module, Iāll have to look into that. For now I guess the best option is to just set the icon for the bar.
Thanks - ideally Iād like to use the entity icon, it automagically reduces as the battery level does.
For now, Iāll probs just turn it off.
Great card though, it works fine for a number of other scenarios.
Hi,
How do I get the bar card to have the same dimensions (hxw) as the other cards in a stack ?
title: Nieuw
panel: true
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- !include
- '../templates/graph.yaml'
- entity: sensor.verbruik_water_uur
line_color: red
icon: mdi:water
aggregate_func: "max"
points_per_hour: 1
name: "Water/uur"
show_name: true
show_icon: true
align_icon: "right"
- !include
- '../templates/graph.yaml'
- entity: sensor.zonneboiler_temperatuur
line_color: red
icon: mdi:thermometer
name: "Boiler"
show_name: true
show_icon: true
align_icon: "right"
- !include
- '../templates/button.yaml'
- entity: sensor.verbruik_water_huidige_douche
name: Alarm
- type: 'custom:bar-card'
positions:
icon: 'off'
indicator: 'off'
name: 'off'
entities:
- sensor.verbruik_douche_min_3
- sensor.verbruik_douche_min_2
- sensor.verbruik_douche_min_1
- sensor.verbruik_water_huidige_douche
# title: Direction
direction: up
stack: horizontal
style: |-
bar-card-card {
height: 100%;
}
Hmmā¦ so a variable changed with the latest updateā¦ ok fixed that. But the % value has jumped down the bottom again. I am using this css:
style: |-
bar-card-value {
margin-top: auto;
margin-bottom: auto;
font-weight: bold;
}
I want the percentage in the middle of the bar. It is also ignoring the font-weight.
Hi thank you for the work, just updated to the last version and i notice that if several bars are listed (not entity row) there is only 1 indicator for 1 bar, the other bars doest have it.
Yeah mine all went to pit also, managed to correct the value position manually with adjusting the top position.
The indicator only shows up when the value has changed, so thatās probably why you donāt see it on all bars?
Should be fixed in 3.1.2. I had removed the ha-card element when the card is being used as an entity_row however this caused issues with card-mod. So now Iāve just hidden the ha-card element instead.
1 Like
Since updating ot the most recent version I am getting āCustom element doesnāt exist: bard-cardā in the front end and this error in my log. Any suggestions:
Log Details (ERROR)
Logger: frontend.js.latest.202004072
Source: components/system_log/__init__.py:209
First occurred: 12:32:49 PM (5 occurrences)
Last logged: 12:49:30 PM
http://192.168.10.25:32500/hacsfiles/frontend-20200422201603.js:1:17185 Uncaught NotSupportedError: Failed to execute 'define' on 'CustomElementRegistry': the name "hacs-frontendbase" has already been used with this registry
http://192.168.10.25:32500/hacsfiles/bar-card/bar-card.js:5332:1 Uncaught SyntaxError: Unexpected token 'export'
http://192.168.10.25:32500/hacsfiles/custom-header/custom-header.js:1:15191 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
http://192.168.10.25:32500/hacsfiles/bar-card/bar-card.js:5332:1 Uncaught SyntaxError: Unexpected token export
since latest update Iām unable to use card-mod for following elements
bar-card-title:
bar-card-targetmarker:
I used to use the bar-card-background to adjust them but that no longer works the way it used either.
Also the width: has no bearing the bar just auto scales the card.
@Gluwc any chance to get in some future version bar gradient? Something like is implemented for horse-shoe-card? Iām currently working on Ookla (speedtest.net) inspired theme and it would be fantastic!
1 Like
Iāll have a look, I had to change the way the CSS is applied so some things a slightly more tricky to get working (or are hard-coded as element style which should be fixed anyway). Could you post your config for one of the bars so I can debug it?