@Gluwc absolute legend!!!
Adding entity_row:true to each entity got rid of the black space. Thanks heaps!
1 Like
This has been fixed in 3.1.1 to match the default margins of the standard HA cards for the rows inside #states. This means you only really have to reduce the #states padding to get the same result:
#states {
padding: 8px;
}Also having the bar-card doesn’t exist error. Should the install from the community store take care of installation changes? So what needs to physically be done? The concept that it needs to load as a “resource” not sure what that means. Are we saying it needs to be in our configuration.yaml or something?
The loading of resources for custom cards has been moved to Configuration>Lovelace Dashboards>Resources.
If you had this loaded a js file before this was moved to the config panel it’s probably still defaulting to js.
Thanks. So delete the www/community/barcard folder?
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