Try using stack-in-card instead. Afaik vertical-stack-in-card is no longer being maintained.
1 Like
Update: issue #75 created.
Iām having the same issue, I switched to stack-in-card, doesnāt help.
When I move the card outside of the stack-in-card, this error is in the log:
http://192.168.xxx.yyy:8123/local/community/bar-card/bar-card.js:5349:1 Uncaught SyntaxError: Unexpected token 'export'
Bar-card == v3.1.5
This means youāre not loading the card as a module. You can fix this in the Lovelace resources config panel.
2 Likes
@Gluwc: There is another problem. Since the rewrite, the level is displayed with 100% if the attribute is not available, e.g. the brightness level of Z-Wave lamps when they are switched off. Can you please change this to the previous behaviour?
Thanks. That was what broke my cards.
How did that change all of a sudden?
bar-card used in picture-element as curtain states for each rooms. (blue means curatin are opened)
after update direction for right/down are not working anymore. ( refer center blue bar ā¦ only work for left )
Is there any posibillity to used old method?
- type: custom:bar-card
entity: sensor.curtain_livingroom_current_position
height: 4px
width: 100%
color: '#99d3ff'
direction: left
entity_row: true
positions:
icon: 'off'
name: 'off'
value: 'off'
indicator: 'off'
style:
top: 86.6%
left: 42.5%
width: 15%
- type: custom:bar-card
entity: sensor.curtain_livingroom_current_position
height: 4px
width: 100%
color: '#99d3ff'
direction: right
entity_row: true
positions:
icon: 'off'
name: 'off'
value: 'off'
indicator: 'off'
style:
top: 86.6%
left: 58%
width: 15%
Currently not directly supported but you could use card-mod to rotate the bar:
style: |-
bar-card-background {
transform: rotate(180deg);
}
@Gluwc Iām back my friend a new issue since either latest version of your card or ha v 0.109 unsure as I upgraded both at the same time 
. The gap between entities on a multi-entity bar card is huge now.
Before
After
2 Likes
Hi @Gluwc
did you get a chance to check this yet? https://github.com/custom-cards/bar-card/issues/79
not sure if HA update or Barcard update caused the error, so hope you can fix this?
thanks!
thx that fixed it for me too, indeed strange this changed
Whatever I do, the custom bar card canāt be found. I import via:
- url: /local/bar-card.js
type: module
- type: custom:vertical-stack-in-card
title: EPSON XP 830
cards:
- type: custom:bar-card
columns: 5
direction: up
entities:
- color: MediumTurquoise
entity: sensor.epson_xp_830_series_cyan_ink
- color: MediumOrchid
entity: sensor.epson_xp_830_series_magenta_ink
- color: Gold
entity: sensor.epson_xp_830_series_yellow_ink
- color: Black
entity: sensor.epson_xp_830_series_black_ink
- color: Black
entity: sensor.epson_xp_830_series_photo_black_ink
height: 200px
max: 100
min: 0
padding: 2px
target: 20
title_position: bottom
icon_position: inside
unit_of_measurement: '%'
width: 100%
Erorr:
Custom element doesn't exist: bar-card.
type: 'custom:bar-card'
columns: 5
direction: up
entities:
- color: MediumTurquoise
entity: sensor.epson_xp_830_series_cyan_ink
- color: MediumOrchid
entity: sensor.epson_xp_830_series_magenta_ink
- color: Gold
entity: sensor.epson_xp_830_series_yellow_ink
- color: Black
entity: sensor.epson_xp_830_series_black_ink
- color: Black
entity: sensor.epson_xp_830_series_photo_black_ink
height: 200px
max: 100
min: 0
padding: 2px
target: 20
title_position: bottom
icon_position: inside
unit_of_measurement: '%'
width: 100%
sure:
type: entities
title: Epson printer
show_header_toggle: false
entities:
- device_tracker.epson_printer
- entity: script.update_epson_cartridge_sensors
action_name: Update
- type: custom:hui-glance-card
style: |
ha-card {box-shadow:none;}
entities:
- entity: sensor.epson_ink_level_black
name: Black
- entity: sensor.epson_ink_level_cyan
name: Cyan
- entity: sensor.epson_ink_level_magenta
name: Magenta
- entity: sensor.epson_ink_level_yellow
name: Yellow
- entity: sensor.epson_ink_level_waste
name: Waste
- type: custom:bar-card
style: |
ha-card {box-shadow:none;}
bar-card-value {color:darkgrey;}
bar-card-title {word-break:break-all;}
stack: horizontal
entity_row: true
direction: up
entities:
- color: black
entity: sensor.epson_ink_level_black
name: Black
- color: cyan
entity: sensor.epson_ink_level_cyan
name: Cyan
- color: magenta
entity: sensor.epson_ink_level_magenta
name: Magenta
- color: yellow
entity: sensor.epson_ink_level_yellow
name: Yellow
- color: grey
entity: sensor.epson_ink_level_waste
name: Waste
height: 150px
max: 100
min: 0
target: 20
unit_of_measurement: '%'
width: 100%
positions:
icon: 'off'
- input_number.ink_level
- automation.printer_ink_alert
- type: custom:fold-entity-row
head:
type: section
label: Low ink levels
padding: 0
entities:
- type: custom:hui-glance-card
style: |
ha-card {
box-shadow: none;
background-image: url('/local/devices/epson/official/epson_background.png');
background-size: cover;
}
entities:
- entity: binary_sensor.ink_level_black_threshold
name: Black
- entity: binary_sensor.ink_level_cyan_threshold
name: Cyan
- entity: binary_sensor.ink_level_magenta_threshold
name: Magenta
- entity: binary_sensor.ink_level_yellow_threshold
name: Yellow
- entity: binary_sensor.ink_level_waste_threshold
name: Waste
be ware though, the bottom section for the glance card isnāt yet styled as I want it, (to use the full width of the card) Apparently Glance card behaves differently when styling is concerned.
1 Like
thanks mateā¦
I get an error I canāt resolve with the Bar Cardā¦ has anyone seen this before? doesnāt matter what I do with āindicatorā it throws this error. was also throwing an error for title_position and roundingā¦ Home Assistant running non-HASSIO on Raspbian - I suspect Iām missing a dependency but the logs arenāt telling me as much
From reading the documentation, arenāt inside, outside and off the only possible settings for indicator:? Iām probably wrong, but it might be choking on your use of auto.
itās also supposed to have a default, but fails if I leave it blank as wellā¦
Straight from the repo these are the valid options for postions
so you either need to select one of these or donāt put it in there at all if you want it auto
Is there anyway to increase the gap between the bar and the value? I canāt relly get it to work.
- type: 'custom:bar-card'
entity: sensor.glances_ram_used_percent_2
positions:
indicator: off
value: outside
name: outside
width: 70%
height: 15px
style: |
bar-card-card {
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
margin-top: -50px;
}
- type: 'custom:bar-card'
entity: sensor.glances_data_used_percent
positions:
indicator: off
value: outside
name: outside
width: 70%
height: 15px
style: |
bar-card-card {
margin-right: auto;
margin-left: auto;
margin-bottom: auto;
margin-top: -50px;
}
and I want to steal your usage for my own cards, hurry up and share 
1 Like