Try reversing the severity order from low to high, otherwise I don’t see anything wrong with your config.
@Gluwc low to high makes the bars that are green yellow, but the other bars show
Fixed it, had to set the value for green to 100.
Currently you can only set min and max values for the bar, but not for the target. I’ll consider adding a min and max for the target.
First time I am trying use a custom card since before lovelace and I can’t seem to get the card to work I am getting ‘No Card Type Found’ error.
I have followed instructions on github readme and rebooted home-assistant on my PI but keep getting same error message.
These are installation notes on github.
resources: - url: /local/custom-lovelace/bar-card/bar-card.js?v=1.0.0 type: js
Add a custom card to your
- type: custom:bar-card entity: sensor.example
Placement of bar-card.js in my home-assistant
Code added to top of Lovelace
Attempting to create card
Slight alteration to card code, still no joy.
I am gathering it has something to do with the base of the url but I don’t know what to change it too is local meaning the www folder which is where you can see above in the screen grab the folder/file is.
Please format correctly the code, otherwise will be difficult to help you.
First of all replace
customcards. It will link to
You have to do a correct indentation, use a text editor that supports yaml so that it will be easy to format.
I cannot seem to find a way to disable the animation of the bar-card. I have the following config:
- type: custom:bar-card entity: sensor.battery_voltage title: Battery Voltage animation: off height: 50px icon: mdi:gauge show_icon: true align: split min: 49 max: 57 severity: - value: 50.5 color: '#FF4500' - value: 52 color: '#FFA500' - value: 56.6 color: '#40bf40'
Any suggestions on how to disable the animation?
Yes this is most likely an issue with the resource. It’s possible you don’t have the raw version of the .js file. Double check the contents of this file it should start with
class BarCard extends HTMLElement.
off in HA yaml files it needs to be quoted like so
'off', same goes for
'on'. I’ve updated the documentation to include this.
Thanks - that works perfectly!
Cool I have opened up my notepad++ and had a look at spacing which is all good and I had a re-read of the how to ask good question guide (I was wondering how to indent on the forum for code now I got it).
I found the issue to be that I downloaded the .js file from github and chrome kindly added html markup to the header of the bar-card.js file, I just copied the code from github and replaced the existing code in my file and restarted hass and now my bar is working .
There is post above which says customcards only applies to those who have installed and activated custom_updater in configuration.yaml which I haven’t done yet, but looks like good idea. I have left my url as /local/custom-lovelace/bar-card/bar-card.js?v=1.1.0 and all is good now.
resources: - type: js url: /customcards/custom-lovelace/bar-card/bar-card.js?v=1.0.0
Release 1.2.0 adds the option to set the position of the icon to be outside of the bar. To avoid double config options
show_icon has been replaced by
icon_positionconfig option. Set this to
insideto replace the removed
maxper entity config defaulting to
100when no main
maxcard config is set.
- type: custom:bar-card entity: sensor.example title: Icon title_position: inside icon_position: left align: split icon: mdi:eye
I don’t get any icon at all…
- type: entities show_header_toggle: false entities: - type: custom:bar-card entity: sensor.phone_battery title_position: 'off' icon_position: left align: center indicator: 'off' height: 26px icon: mdi:eye card_style: border-radius: 0px background: 'rgba(0, 0, 0, 0.0)' box-shadow: 'inset 2px 2px 3px 1px rgba(0, 0, 0, 0.0)' background_style: background: 'black' severity: - value: 25 color: red - value: 50 color: orange - value: 100 color: green
This is showing two bars each in a
vertical-stack both of which are in a
horizontal-stack (if that is relevant).
One of them has an explicit icon defined (for testing) the other doesn’t (but the entity itself does).
@klogg Can’t reproduce. You sure it’s not just a caching issue again?
- type: custom:vertical-stack-in-card cards: - type: horizontal-stack cards: - type: custom:bar-card entity: sensor.test_value1 title_position: 'off' icon_position: left align: center indicator: 'off' height: 26px icon: mdi:eye severity: - value: 25 color: red - value: 50 color: orange - value: 100 color: green - type: custom:bar-card entity: sensor.test_value1 title_position: 'off' icon_position: left align: center indicator: 'off' height: 26px icon: mdi:eye severity: - value: 25 color: red - value: 50 color: orange - value: 100 color: green
You think I’d have learnt by now…
No worries, I don’t think you’re the only one forgetting about cache.
I’d recommend using custom updater and tracker card. This allows you to set the resource url to redirect to
customcards instead of
local, which makes it so you don’t have to add versioning to the resource url and just updates the cache whenever you update a card.
Wait, what? I do use custom updater and tracker card. Are you saying that means I shouldn’t have to be constantly pressing F5? That is why I am so
surprised embarrassed at forgetting.
Mine don’t seem to (always) update the cache. I’m using F5 the whole time!
it doesn’t always do it. ctrl+f5 will do it all, all the time. Or if you have dev tools open, just a regular old f5.
I’m not sure, there might be cases where it doesn’t always work. But afaik if you use
customcards instead of
local in the resource url it should update the cache if you refresh the page.
Hi! I am trying to get mine to show like this;
But how do i add list on entities that i can individual config options per defined entity?
My code looks like this
- type: custom:card-modder card: type: custom:bar-card entities: - sensor.disk_free - sensor.disk_use_percent - sensor.disk_use title_position: 'off' icon_position: left columns: 2 align: right title: Harddisk show_icon: true icon: mdi:harddisk
And this is the result:
Hope you can help with a sample code i can use.