Lovelace: Bar Card

Three · May 6, 2019, 4:00am

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

Gluwc:

If you’re using custom updater you should use the customcards path instead of local . If you’re not using custom updater make sure you add the version number to the resource to force a cache update.

Using custom updater
 - url: /customcards/custom-lovelace/bar-card/bar-card.js
Non custom updater
 - url: /local/custom-lovelace/bar-card/bar-card.js?v=0.1.9

Gluwc · May 19, 2019, 10:42pm

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

klogg · May 20, 2019, 12:36pm

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

Gluwc · May 20, 2019, 1:02pm

@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

klogg · May 20, 2019, 2:22pm

You think I’d have learnt by now…

Gluwc · May 20, 2019, 3:27pm

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.

klogg · May 20, 2019, 4:49pm

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!

petro · May 20, 2019, 5:02pm

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.

Gluwc · May 20, 2019, 5:47pm

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.

7even · May 23, 2019, 11:44am

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.

Gluwc · May 23, 2019, 11:52am

Here’s an example of how you can set up per entity config in an entity list:

- type: custom:bar-card
  columns: 2
  color: green
  height: 30px
  entities:
    - entity: sensor.example
      title: Example
      min: 25
      max: 75
      target: 50
    - sensor.example
    - sensor.example

However the example you’re referencing is not using per entity config, it’s using vertical stack in card. I’m not sure if it’s possible to set the 3rd bar too 100% width.

You probably want something like this:

- type: horizontal-stack
  cards:      
  - type: custom:bar-card
    entity: sensor.example
  - type: custom:bar-card
    entity: sensor.example
- type: custom:bar-card
  entity: sensor.example

7even · May 24, 2019, 7:20am

Thanks… That did the trick

Dino-Tech · May 24, 2019, 9:45pm

My apologies if I have skipped this somewhere and it’s already possible, but I’m in the process of condensing my LL yaml file and was wondering is it possible to have one main config for the styles, title, css, etc… and assign different severity levels to the entities. Case use being battery, CPU, temp and humidity are set to different severity and colors, so currently I am having to repeat the code 4 times to set the differences between them. Everything works as expected in my displays, just thought I’d ask, and thank you for the incredible contribution, I see this getting included as a standard card IMO. @Gluwc

Alexxander0 · May 24, 2019, 9:50pm

@7even How did you manage to get the icon inside the bar ?
I Would like to get the “Align Split + Icon” mode

in the readme it says:
- type: custom:bar-card
entity: sensor.example
title: Align Split + Icon
title_position: inside
show_icon: true
icon: mdi:eye
align: split

but this doenst work for me (not showing any icon)

Dino-Tech · May 24, 2019, 9:58pm

@Alexxander0

Alexxander0 · May 24, 2019, 10:00pm

Thanks @Dino-Tech :

        - type: custom:bar-card
          entity: sensor.118i_remaining_range_fuel
          title: test
          title_position: inside
          icon_position: inside
          icon: mdi:eye
          align: split

this still produces such output for me:

I would like to have the text be centered. Am i doing something wrong?

Dino-Tech · May 24, 2019, 10:02pm

Curious…what box-shadow settings are you using? if you don’t mind…like that look

Dino-Tech · May 24, 2019, 10:06pm

Not sure if you can have both icon inside and title centered. Maybe icon outside then title centered. I don’t use icons, so not much help, but the docs are pretty clear from what I’ve read.

Gluwc · May 24, 2019, 10:42pm

This is most likely a bug, but I can’t reproduce it on my side. This is probably an issue that was fixed in 1.2.1, so make sure you’re running the latest version.

Gluwc · May 24, 2019, 10:54pm

Well you do have an option to use custom entity attributes to set the config of the bar using the entity_config option. But that still requires you to set these options in customize.yaml.
The other option only really works when you define an entities list, which allows you to share the main card config between every entity in the list.

- type: custom:bar-card
  severity:
    - value: 25
      color: red
    - value: 50 
      color: orange
    - value: 100
      color: green
  entities:
    - entity: sensor.living_room_plant_1_battery
      min: 0
      max: 300
      target: 75
      title_position: 'off'
      icon_position: inside
      icon: mdi:eye
      align: right-split
      icon_style:
        color: red
      severity:
      - value: 25
        color: pink
      - value: 50 
        color: yellow
      - value: 100
        color: purple
    - sensor.living_room_plant_2_battery
    - sensor.living_room_plant_3_battery