Lovelace: Bar Card

Just found it. Thanks. All working again. Just got to fix the visuals. Seems they have changed a little since my last bar-card update thanks for the help everyone!

Wow thats awesome :slight_smile:

1 Like

Awesome card, as advertised by Dr Zzs today :slight_smile:
I wanted to use a bar for my “Net Power” sensor, which can be positive or negative. Initially I tried setting a min of -5000 and max of 6000, but it didn’t look great.

Then I saw the “hide” option under Severity, but I can’t work out from the documentation how to configure it. I thought I could create two bars, one for positive “Net Power” and another for negative “Net Power” and have only one showing at a time, with the positive bar hidden if the “Net Power” value is less than zero and the negative bar hidden if the “Net Power” value is over 0.

The below didn’t work (and Lovelace appears to have added the “null”?).

      - hide: null
        from: 0
        to: -7

Doh. Worked it out. Re-read the documentation and noticed that the default for “Hide” is “false”.
This does what I need:

- hide: true
        from: -7
        to: 0

Hi all,

I saw on this reply (Lovelace: Bar Card) that the version 0.1.0 enable the possibility to use an entity as max value.
But when i try to use this feature, it doesn’t seems to work, it show me NaN.
Here is my current configuration :

type: 'custom:bar-card'
entities:
  - entity: sensor.sma_current_month_production
    limit_value: true
unit_of_measurement: kWh
max: sensor.sma_last_month_production

I’m doing wrong ?
I’m using use the latest version 3.1.6

Thanks.

Hi,

Need some help with border-radius, please look at picture below:


i want the border also below to be like above. how can it be done?

This is my code:

                  - type: custom:bar-card
                    style: |-
                      bar-card-current, bar-card-backgroundbar {
                        border-radius: 15px;
                      }
                    direction: up  
                    height: 200px
                    stack: horizontal
                    entities:
                      - entity: sensor.processor_use
                        name: CPU
                      - entity: sensor.memory_use_percent
                        name: Memory                      
                      - entity: sensor.disk_use_percent_home
                        name: Disk
                      # - entity: sensor.swap_use_percent
                        # name: Swap Use
                    severity:
                      - color: '#009900'
                        from: 0
                        to: 33
                      - color: '#FFB732'
                        from: 34
                        to: 50
                      - color: '#e67e00'
                        from: 51
                        to: 80
                      - color: '#d11919'
                        from: 81
                        to: 100

Tx,

1 Like

Replace bar-card-current with bar-card-currentbar

if you are using a theme you can add this line in the theme you’re using:
bar-card-border-radius: "15px"

3 Likes

Is it possible to fully customize all 4 bar colors used by bar-card? I mean background above traget, background below target, bar below target and bar over target? At the moment it seems to use some combinations/shades of primary bar color, but having possibility to play freely with these colors would open whole new are for card usage…

No, don’t think so.
Maybe you can ask the original author for an enhancement on github:
https://github.com/custom-cards/bar-card/issues

Good evening, following upgrade to HA 111 im getting this error

2020-06-10 21:44:20 ERROR (MainThread) [hacs] Tried to serve up '/config/www/community/bar-card/index.m.js.map' but it does not exist

which incidentally seems to affect browser_mod; the pop-up feature doesnt work, but when I remove bar-card it works.

anyone else experieincing this?

Yes it’s been doing this for the last few releases. I don’t know that it is really bar-card causing it though.

thank you for your feedback.

Very nice !

1 Like

Hello, I use the Bar card since a long time, and I wanted to change, but I have a little issue : The icon isn’t in the same position if you use the inside or outside position :
image

image
The icon is lower than in the first screenshot.
Do you have the same thing ?

didn’t see it mentioned here yet, but the issue has been fixed with the latest update

1 Like

Hello, I juste installed this card but I have some problems :

  • I haven’t round corner in the bar
  • lovelace ui configurator of the card is buggy

Did I miss something ?

You need card-mod to be able to style them.

It’s installed :wink:
Did I need to put specific code in the card ? (round corners are not configurable in the UI)


A another thing, If I start a new bar-card, I put entity but nothing appears

1 Like

Hey,

Out of interest how did you end up doing this? I can’t decide on colours etc to best indicate whats happening with my power at a glance. This is what I have so far:

card:
  entities:
    - direction: right
      entity: sensor.p_grid
      height: 60px
      max: '5'
      min: '-3.6'
      name: Power From Grid
      positions:
        icon: 'off'
        indicator: inside
        name: inside
        value: inside
      severity:
        - color: Green
          from: '-3.6'
          to: '-2.6'
        - color: LightGreen
          from: '-2.6'
          to: '-1'
        - color: Yellow
          from: '-1'
          to: '0'
        - color: Orange
          from: '0'
          to: '1.5'
        - color: Red
          from: '1.5'
          to: '2.5'
        - color: Maroon
          from: '2.5'
          to: '5'
    - entity: sensor.p_pv
      height: 60px
      max: '3.7'
      min: '0'
      positions:
        icon: 'off'
        indicator: inside
        value: inside
      severity:
        - color: Yellow
          from: '0'
          to: '1'
        - color: LightGreen
          from: '1'
          to: '2'
        - color: Green
          from: '2'
          to: '3.7'
    - entity: sensor.p_load
      height: 60px
      max: '-5'
      min: '0'
      positions:
        icon: 'off'
        indicator: inside
        value: inside
      severity:
        - color: Green
          from: '-1'
          to: '0'
        - color: Orange
          from: '-2'
          to: '-1'
        - color: Red
          from: '-2'
          to: '-3'
        - color: Maroon
          from: '-4'
          to: '-5'
  style: |-
    bar-card-value {
      margin-right: auto;
      font-size: 35px;
      font-weight: bold;
    }
    bar-card-name {
      margin-right: auto;
      font-size: 18px;
      font-weight: bold;
    }
  entity_row: true
  type: 'custom:bar-card'
conditions:
  - entity: input_boolean.solar
    state: 'on'
type: conditional

image