that makes sense, thanks!
Released version 0.0.4
- added checks to avoid animation being restarted by front-end updating (causing crashes on fast updates)
- added card_style
- reworked CSS for bar and title layout
p.s. This update also fixes performance issues on lower end devices like phones or tablets.
1 Like
This is awesome. Managed to save some room with this. Took a bit of farting around to get it to work nice as a row in an entities card, but I got there.
And the end result is rather nice.
2 Likes
Great updates, got this with version 0.0.4:
Code for single row:
cards:
- bar_style:
padding-left: 2px
text-align: left
entity: sensor.inside_temperature
height: 40px
max: 50
min: 0
severity:
- hue: '200'
value: 23
- hue: '100'
value: 27
- hue: '50'
value: 100
title: In temp
title_position: inside
type: 'custom:bar-card'
- bar_style:
padding-left: 2px
text-align: left
entity: sensor.outside_temperature
height: 40px
max: 50
min: 0
severity:
- hue: '200'
value: 23
- hue: '100'
value: 27
- hue: '50'
value: 100
title: Out temp
title_position: inside
type: 'custom:bar-card'
- bar_style:
padding-left: 2px
text-align: left
entity: sensor.plug_main_pc_power
height: 40px
max: 500
min: 0
severity:
- hue: '100'
value: 200
- hue: '50'
value: 300
- hue: '0'
value: 500
title: PC power
title_position: inside
type: 'custom:bar-card'
- bar_style:
padding-left: 2px
text-align: left
entity: sensor.plug_main_ac_power
height: 40px
max: 1000
min: 0
severity:
- hue: '100'
value: 200
- hue: '50'
value: 700
- hue: '0'
value: 1000
title: AC power
title_position: inside
type: 'custom:bar-card'
type: horizontal-stack
Two things Iâm trying to solve, when text is on left side, it overlaps left arrow so I thought to leave just the right arrow, looks like this:
And another thing is so minor but this pixel hurt my eyes 
distance between right side of bar and button border, it is smaller than left side, tried âpadding-rightâ in âbar_styleâ but this is itâs 0 point, increasing moves it more right and it is not accepting negative value, looks like this:
1 Like
I feel your pain. 
Hereâs release 0.0.5
- added indicator option to set left, right, off or auto
- fixed an issue where the bar in charge mode wouldnât increase or decrease until refresh
- fixed bar direction issues for âinsideâ option
Your pixel difference is coming from scaling the cards so small, I donât seem to be able to fix this for some reason. However with the recently added card_style you can set padding-right to set the padding for the card background, which should be able fix your issue.
1 Like
very nice, could you be kind to show the code of this card? thank you
This is the entire card as it stands right now. Itâs a normal entities card and I used the trick of adding cards as an entity (This doesnât work with all cards and can have varying results from card to card).
The custom:vertical-stack-in-card is needed to allow the horizontal-stack to work (Iâve never been able to use a horizontal-stack on its own in an entities card). From there itâs just a normal horizontal stack. I removed the background and box shadow and that allowed me to make itâwork with my entities card style using card-modder.
Iâve made a change since I posted that screenshot to make the text align to the left with padding-left of 2px. I havenât added any severity values as yet either.
- type: custom:card-modder
card:
type: entities
title: Pi 3
entities:
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:bar-card
title: CPU
title_position: inside
entity: sensor.glances_cpu_load
card_style:
background: none
box-shadow: none
bar_style:
padding-left: 2px
text-align: left
- type: custom:bar-card
title: RAM
title_position: inside
entity: sensor.glances_ram_percentage
card_style:
background: none
box-shadow: none
bar_style:
padding-left: 2px
text-align: left
- type: custom:bar-card
title: Disk
title_position: inside
entity: sensor.glances_disk_percentage
card_style:
background: none
box-shadow: none
bar_style:
padding-left: 2px
text-align: left
- sensor.cpu_temp_2
- sensor.server_uptime
- sensor.rpi_power_status
- type: section
- type: weblink
name: Glances
url: http://192.168.1.195:61208
icon: mdi:biohazard
show_header_toggle: false
style:
background-repeat: no-repeat
background-color: rgba(50,50,50,0.3)
background-size: 100% 100%
border-radius: 10px
border: solid 1px rgba(100,100,100,0.3)
color: "#999999"
box-shadow: 3px 3px rgba(0,0,0,0.4)
1 Like
Hi there,
thanks for this amazing piece of code 
I would like to ask if it would be possible to define the up/down arrows on charging/discharging colors.
Those two arrow colors would be nice if they depend on the bar color if itâs âfullâ or âemptyâ
This because, on dark theme the up arrow is not showing untill the phone (in my case) is not actually almost fully charged:
So in this case would be very nice to have the up arrow to be same color as the bar, until the bar reach it, then it can change back to a dark color .
Not sure I have explained myself properly, I hope so
Thanks for the feedback 
. I had been thinking about doing something like this, however depending on the scaling of the bar itâs a bit hard for me to figure out exactly when the bar is reaching the indicator. I will try to look into it a bit more to see if itâs doable.
However currently you have some other options available to make the indicator more visible. You could use the indicator option to always have the indicator on the left side, or alternatively you could use the indicator_style option to change the CSS style to a brighter color.
Thank you very much for your response
I do understand the trouble of âknowingâ when the bar is âthereâ, so I was thinking, how about an option to simply change the color without using css style (not sure what good use would be have css there, but I might be wrong 
) ?
Unless I can define a color depending if is discharing and charging with CSS, in that case, would you mind helping me with that? (for now I was simply able to set a color, which is valid for both)
Also, I think you have two typos (that I noticed) in your docs
There currently is no difference between increase and decrease for the indicator. The main reason for having a CSS style for the indicator is so you can adjust more than just the color. With the CSS style you can also change the size, opacity or blend mode for example.
Also I think Iâve found a decent way of getting the indicator to be more visible, but will need a bit of time to clean up my code.
p.s. Thanks for letting me know about the typos
1 Like
Release 0.0.6 should fix the indicator issues on dark themes.
- indicator will now be the inverse of the bar color making bar increase more visible
1 Like
That was quick!!
Thanks a lot! I will test it straight away!
Works perfectly!
Thank you very much for this very quick fix
Andrea
LIke it nice idea
but I think I miss something
Im getting this
FIX IT
I WAS THE PROBLEM
I have a question, probably dumb.
What if I want to have the bar for a battery that will never be charged (because can only be replaced= and I want still to see the arrow and the animation?
Should I create a static (false) binary_sensor for ânot chargingâ or there is a way it can be defined somehow?
Thanks
Yes youâd have to set the animation to charge, make an entity (sensor) set the state to false and use that as the charge_entity.
Thanks for confirming
An idea⌠Would it be possible to have some sort of overlay for a target temp or set point that could be displayed?
For example for my pool automation I have a pool temp set point, as well as the current temp.
I would like to show this in one bar, where the set point would be a line across the bar and the actual the bar itself
This could also be helpful for other temperature or other applications
Also a big thank you; this card has replaced a lot of ugly gauges
1 Like
This sounds like a pretty good idea, Iâll definitely look into it.