Lovelace: Bar Card

Share your Projects! Dashboards & Frontend
172

Try reversing the severity order from low to high, otherwise I don’t see anything wrong with your config.

173

@Gluwc low to high makes the bars that are green yellow, but the other bars show --bar-color:undefined still.

174

Fixed it, had to set the value for green to 100.

175

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.

176

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.

Step 1

Copy bar-card.js to <config directory>/www/custom-lovelace/bar-card/bar-card.js .

Step 2

Add bar-card resource to ui-lovelace.yaml .

resources: - url: /local/custom-lovelace/bar-card/bar-card.js?v=1.0.0 type: js

Step 3

Add a custom card to your ui-lovelace.yaml .

  • type: custom:bar-card entity: sensor.example

configurator
Placement of bar-card.js in my home-assistant

lovelace-ui
lovelace-ui799×134 14.3 KB

Code added to top of Lovelace

bar-card1
bar-card11075×390 29.6 KB

Attempting to create card

bar-card2
bar-card21028×302 29.5 KB

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.

177

Please format correctly the code, otherwise will be difficult to help you.

https://community.home-assistant.io/t/how-to-help-us-help-you-or-how-to-ask-a-good-question/114371

First of all replace local with customcards. It will link to www as local

You have to do a correct indentation, use a text editor that supports yaml so that it will be easy to format.

1 Like
178

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?

179

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.

180

When using 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.

181

Thanks - that works perfectly!

182

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 :face_with_raised_eyebrow:.

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
2 Likes
183

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_position.

Breaking Change

  • Removed show_icon config option.

Updates

  • Added icon_position config option. Set this to inside to replace the removed show_icon true config option.

Fixes

  • Fixed min/max per entity config defaulting to 0/100 when no main min/max card config is set.

Examples

icon_position

- type: custom:bar-card
  entity: sensor.example
  title: Icon
  title_position: inside
  icon_position: left
  align: split
  icon: mdi:eye
2 Likes
184

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

image

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).

185

@klogg Can’t reproduce. You sure it’s not just a caching issue again?
bars

- 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
1 Like
186

:flushed: You think I’d have learnt by now…

3 Likes
187

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.

1 Like
188

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!

189

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.

1 Like
190

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.

191

Hi! I am trying to get mine to show like this;
image

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:
image
Hope you can help with a sample code i can use.