Having the name and value like that requires some custom CSS, however you can get the layout very easily by putting all the entities in a single barcard and setting columns to 4.
After some fiddling around, I was able to get this:
Only two things missing now. To add a shadow to the sensor itself and to make the indicator arrow to be on the right side.
1 Like
mind sharing your code?
Ok here you go
- type: custom:bar-card
entities:
- entity: sensor.yatak_sicaklik_offset
name: Yatak Odası
- entity: sensor.banyo_sicaklik_offset
name: Banyo
- entity: sensor.hol_sicaklik_offset
name: Hol
- entity: sensor.kurutma_sicaklik_offset
name: Kurutma
- entity: sensor.calisma_sicaklik_offset
name: Çalışma
- entity: sensor.mutfak_sicaklik_offset
name: Mutfak
- entity: sensor.broadlink_sensor_temperature
name: Salon
- entity: sensor.camasir_sicaklik_offset
name: Çamaşır
- entity: sensor.kapi_onu_sicaklik_offset
name: Kapı Önü
- entity: sensor.dark_sky_temperature
name: Hava
- entity: sensor.balkon_dis_fark
name: Fark
min: -30
max: 30
severity:
- from: -30
to: -3
color: '#4095bf'
- from: -3
to: 3
color: '#40bf40'
- from: 3
to: 30
color: '#a93636'
- entity: sensor.balkon_sicaklik_offset
name: Balkon
- entity: sensor.purifier_aqi
name: Air Quality
min: 0
max: 300
severity:
- from: 0
to: 50
color: '#40bf40'
- from: 50
to: 150
color: '#4095bf'
- from: 150
to: 300
color: '#a93636'
- entity: sensor.dark_sky_humidity
name: Hava Nem
min: 0
max: 100
severity:
- from: 0
to: 40
color: '#a93636'
- from: 40
to: 85
color: '#ffbf40'
- from: 85
to: 100
color: '#40bf40'
- entity: sensor.holbme_air_quality
name: Hol Hava Kalite
min: 10000
max: 25000
severity:
- from: 10000
to: 15000
color: '#40bf40'
- from: 15000
to: 20000
color: '#ffbf40'
- from: 20000
to: 25000
color: '#a93636'
animations:
state: 'on'
positions:
icon: 'off'
title: inside
value: inside
style: |-
.contentbar-direction-right {
flex-direction: column;
}
.min-direction-right {
margin: 0px;
margin-bottom: -20px;
bottom: 10px;
}
bar-card-value {
margin: 0px;
font-size: 13px;
margin-left: auto;
margin-right: auto;
font-weight: bold;
text-shadow: 1px 1px #0005;
}
bar-card-name {
margin: 0px;
margin-top: 5px;
font-size: 14px;
font-weight: bold;
text-shadow: 1px 1px #0005;
}
bar-card-max {
margin: 0px;
margin-left: auto;
margin-top: -20px;
top: 10px;
}
bar-card-divider {
display: none;
}
ha-card {
background-color: #383C45;
}
width: 100%
min: -10
max: 40
columns: 4
severity:
- from: -10
to: 16
color: '#4095bf'
- from: 16
to: 26
color: '#40bf40'
- from: 26
to: 40
color: '#a93636'
1 Like
I’m running HASSIO and everything was fine until a couple of updates ago. Since then all my bar-cards have stopped being displayed. Now I just get the big red box of doom saying;
Custom element doesn’t exist: bar-card
I’m using the custom:layout-card by Thomas Lovren. Bar cards displayed outside of this appear to work fine.
Any ideas what’s wrong & how to fix it?
Thanks.
Same here after updating to 0.109.1.
bars sitting inside a custom vertical-stack-in-card
1 Like
That’s how I am using it too!
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