Lovelace: Bar Card

QbaF · October 16, 2020, 11:26am

@Gluwc Is there a chance that target option could be entity value instead of number?

jolly · November 16, 2020, 11:06am

hi guys, is there a way to have the bar that refers to a value with respect to that of the entity? let me explain; I would like to have the bar that shows the hours or days and the entity that measures electricity consumption for example. it’s possible?

jchasey · December 14, 2020, 2:49pm

I’m combining the button card and bar card and largely happy with the results, just one minor niggle as per this graphic.

As you can see the middle two bars are longer given the text to the right is shorter - I can’t seem to discover what settings would make the bars the same width irrespective of the value?

The code for the bar-card section is below:

              type: 'custom:bar-card'
              height: 11
              width: 60
              positions:
                value: outside
                indicator: outside
                icon: off
                name: off
              entities:
                - entity: sensor.epson_wf_3520_series_black_ink
                  color: Black
                  name: Black
                - entity: sensor.epson_wf_3520_series_cyan_ink
                  color: MediumTurquoise
                  name: Cyan
                - entity: sensor.epson_wf_3520_series_magenta_ink
                  color: MediumOrchid
                  name: Magenta
                - entity: sensor.epson_wf_3520_series_yellow_ink
                  color: Gold
                  name: Yellow
              style: |
                ha-card { background-color: transparent; box-shadow: none;}
                bar-card-card { margin-left: -10px; margin-bottom: -3px; margin-top: -3px; }
                bar-card-currentbar, bar-card-backgroundbar { border-radius: 0.5em; }
                bar-card-value { overflow; visible; padding-left: 10px; margin: 0px; }
                .card-content { text-align: start; padding: 0px; }

GlennHA · December 14, 2020, 5:16pm

[quote=“jchasey, post:572, topic:87503”]

I copied your code and made no changes except for my printer entities and this is how mine looks:
ink
This is viewing with FireFox.

type: 'custom:bar-card'
height: 11
width: 60
positions:
  value: outside
  indicator: outside
  icon: 'off'
  name: 'off'
entities:
  - entity: sensor.hp_officejet_pro_8620_black_ink
    color: Black
    name: Black
  - entity: sensor.hp_officejet_pro_8620_cyan_ink
    color: MediumTurquoise
    name: Cyan
  - entity: sensor.hp_officejet_pro_8620_magenta_ink
    color: MediumOrchid
    name: Magenta
  - entity: sensor.hp_officejet_pro_8620_yellow_ink
    color: Gold
    name: Yellow
style: |
  ha-card { background-color: transparent; box-shadow: none;}
  bar-card-card { margin-left: -10px; margin-bottom: -3px; margin-top: -3px; }
  bar-card-currentbar, bar-card-backgroundbar { border-radius: 0.5em; }
  bar-card-value { overflow; visible; padding-left: 10px; margin: 0px; }
  .card-content { text-align: start; padding: 0px; }

jchasey · December 14, 2020, 5:24pm

I think will only become apparent when one of the numbers drops below 10% to become a single digit.

GlennHA · December 14, 2020, 5:27pm

I also added to a vertical-stack just to see and it still shows the same:
ink

type: vertical-stack
cards:
  - entities:
      - entity: binary_sensor.ping_hp_officejet_8625
      - entity: sensor.hp_officejet_pro_8620
    title: Printer
    type: entities
    state_color: true
  - type: 'custom:bar-card'
    height: 11
    width: 60
    positions:
      value: outside
      indicator: outside
      icon: 'off'
      name: 'off'
    entities:
      - entity: sensor.hp_officejet_pro_8620_black_ink
        color: Black
        name: Black
      - entity: sensor.hp_officejet_pro_8620_cyan_ink
        color: MediumTurquoise
        name: Cyan
      - entity: sensor.hp_officejet_pro_8620_magenta_ink
        color: MediumOrchid
        name: Magenta
      - entity: sensor.hp_officejet_pro_8620_yellow_ink
        color: Gold
        name: Yellow
    style: >
      ha-card { background-color: transparent; box-shadow: none;}

      bar-card-card { margin-left: -10px; margin-bottom: -3px; margin-top: -3px;
      }

      bar-card-currentbar, bar-card-backgroundbar { border-radius: 0.5em; }

      bar-card-value { overflow; visible; padding-left: 10px; margin: 0px; }

      .card-content { text-align: start; padding: 0px; }

GlennHA · December 14, 2020, 5:29pm

ah, ok
Let me play around then. Quick fix might be formatting the percent to with a forward 0 (I’ve never tried this but might work.)

GlennHA · December 14, 2020, 6:45pm

Not the best fix but if you change positions\value: to inside it will keep a constant line width.
I changed the indicator to inside also to make it more compact.

    positions:
      value: inside
      indicator: inside
      icon: 'off'
      name: 'off'

ink

RedWheiler · January 19, 2021, 3:12pm

Edit: nevermind

ViperRNMC · January 21, 2021, 1:35pm

I used it this way

type: 'custom:button-card'
entity: sensor.hp_laserjet_100_colormfp_m175nw
name: HP 100
color: gray
show_state: true
styles:
  card:
    - padding: 0 5px 5px 0
  grid:
    - grid-template-areas: '"i barcard" "n s"'
  custom_fields:
    barcard: null
custom_fields:
  barcard:
    card:
      type: 'custom:bar-card'
      entities:
        - entity: sensor.hp_laserjet_100_colormfp_m175nw_imaging_drum_hp_ce314a
          color: Grey
          name: Drum
        - entity: sensor.hp_laserjet_100_colormfp_m175nw_black_cartridge_hp_ce310a
          color: Black
          name: Black
        - entity: sensor.hp_laserjet_100_colormfp_m175nw_cyan_cartridge_hp_ce311a
          color: MediumTurquoise
          name: Cyan
        - entity: sensor.hp_laserjet_100_colormfp_m175nw_magenta_cartridge_hp_ce313a
          color: MediumOrchid
          name: Magenta
        - entity: sensor.hp_laserjet_100_colormfp_m175nw_yellow_cartridge_hp_ce312a
          color: Gold
          name: Yellow
      width: 50px
      direction: up
      columns: '5'
      entity_row: true
      positions:
        icon: null
        indicator: inside
        name: null
        value: outside
      style: |
        bar-card-currentbar, bar-card-backgroundbar { border-radius: 0.5em; }
        bar-card-value { overflow; visible; padding-left: 5px; margin: 0px; }
        .card-content { text-align: start; padding: 1px; }

RedWheiler · January 22, 2021, 12:43am

I’m updating a lot of stuff at the moment, and it seems this won’t work anymore at all?

    severity:
      - color: '#6CA51F'
        value: Er is iemand thuis
      - color: '#EF1107'
        value: We zijn allebei weg

Schermafbeelding 2021-01-22 014311

I loved this option, with the colours it was pretty easy to see states very quick (like red = alarm / orange is warning…)

Abbadon89 · January 22, 2021, 10:18am

Helo, i found a problem with bar-card and config-template-card.
I use barcard to show temperature in room and target option to visualize current setpoint of thermostat

When i use cards together target option is working fine but there is a problem with refreshing bar, i noticed that temperare values changes but not updates

When i remove config-template card everything is working fine. To be honest old method of target entity was waaay beter (or charging entity)
Code below:

edit: for some reason github is not parsing code well so i remove it and put on pastebin

Gluwc · January 22, 2021, 1:50pm

You need to add the entities you’re watching to the entities list of config-template-card or they won’t update.

Abbadon89 · January 22, 2021, 5:10pm

Point, bar is updating but animation is not working.

delete · January 29, 2021, 11:59pm

+1 , animation seem to be broken?

Veuchez · February 10, 2021, 1:24pm

Has anyone managed a timer with the bar card?
I have converted the timer into seconds but the remaining time does not update in real time but only when the timer is paused.

benm7 · March 31, 2021, 1:46am

I can’t for the life of me figure out why the names of my entities are still showing as per the below!

            - type: 'custom:bar-card'
              style: |
                  ha-card {
                    border-radius: 12px;
                    box-shadow: none;
                    background-image: none;
                    background-color: transparent;
                    color: var(--primary-color)
                  }
              stack: horizontal
              height: 8
              entities:
              - sensor.robomac_battery_level
              - sensor.robomac_filter
              - sensor.robomac_brush
              positions:
                name: 'off'
                minmax: 'off'
                indicator: 'off'
                title: 'off'
                value: inside
                icon: outside
              unit_of_measurement: '%'
              severity:
              - value: 70
                color: var(--primary-color)
              - value: 85
                color: var(--light-primary-color)
              - value: 95
                color: var(--primary-color)
              - value: 100
                color: '#F5AB98'

No matter what I change in the positions: code they don’t disappear. Have reset cache and everything.
Help!

Ildar_Gabdullin · March 31, 2021, 5:23am

Your code is strange.
First, in my setup (default theme) it looks like this:

Second, there are errors in the code:

The "title" is not supposed to be inside the "positions" section (https://github.com/custom-cards/bar-card#positions-options).
The "severity"section is wrong - https://github.com/custom-cards/bar-card#severity-options

benm7 · March 31, 2021, 5:30am

Thanks for the feedback. Strange that even using my code on yours it looks different to what I am getting.
I’ll rebuild it from the ground up and see what’s going on!

Ildar_Gabdullin · March 31, 2021, 5:32am

Try to:

clean browser’s cashe
check if “bar-card” is updated