Lovelace: Bar Card

This means you’re not loading the card as a module. You can fix this in the Lovelace resources config panel.

2 Likes

@Gluwc: There is another problem. Since the rewrite, the level is displayed with 100% if the attribute is not available, e.g. the brightness level of Z-Wave lamps when they are switched off. Can you please change this to the previous behaviour?

Thanks. That was what broke my cards.
How did that change all of a sudden?

bar-card used in picture-element as curtain states for each rooms. (blue means curatin are opened)
after update direction for right/down are not working anymore. ( refer center blue bar … only work for left )
Is there any posibillity to used old method?

        - type: custom:bar-card
          entity: sensor.curtain_livingroom_current_position
          height: 4px
          width: 100%
          color: '#99d3ff'
          direction: left
          entity_row: true
          positions:
            icon: 'off'
            name: 'off'
            value: 'off'
            indicator: 'off'
          style:
            top: 86.6%
            left: 42.5%
            width: 15%
        - type: custom:bar-card
          entity: sensor.curtain_livingroom_current_position
          height: 4px
          width: 100%
          color: '#99d3ff'
          direction: right
          entity_row: true
          positions:
            icon: 'off'
            name: 'off'
            value: 'off'
            indicator: 'off'
          style:
            top: 86.6%
            left: 58%
            width: 15%

Currently not directly supported but you could use card-mod to rotate the bar:

style: |-
  bar-card-background {
    transform: rotate(180deg); 
  }

@Gluwc I’m back my friend a new issue since either latest version of your card or ha v 0.109 unsure as I upgraded both at the same time :frowning: . The gap between entities on a multi-entity bar card is huge now.

Before

image

After

2 Likes

Hi @Gluwc

did you get a chance to check this yet? https://github.com/custom-cards/bar-card/issues/79

not sure if HA update or Barcard update caused the error, so hope you can fix this?

thanks!

thx that fixed it for me too, indeed strange this changed

Whatever I do, the custom bar card can’t be found. I import via:

- url: /local/bar-card.js
  type: module
- type: custom:vertical-stack-in-card
        title: EPSON XP 830
        cards:
          - type: custom:bar-card
            columns: 5
            direction: up
            entities:
              - color: MediumTurquoise
                entity: sensor.epson_xp_830_series_cyan_ink
              - color: MediumOrchid
                entity: sensor.epson_xp_830_series_magenta_ink
              - color: Gold
                entity:  sensor.epson_xp_830_series_yellow_ink
              - color: Black
                entity:  sensor.epson_xp_830_series_black_ink
              - color: Black
                entity:  sensor.epson_xp_830_series_photo_black_ink
            height: 200px
            max: 100
            min: 0
            padding: 2px
            target: 20
            title_position: bottom
            icon_position: inside
            unit_of_measurement: '%'
            width: 100%

Erorr:

Custom element doesn't exist: bar-card.
type: 'custom:bar-card'
columns: 5
direction: up
entities:
  - color: MediumTurquoise
    entity: sensor.epson_xp_830_series_cyan_ink
  - color: MediumOrchid
    entity: sensor.epson_xp_830_series_magenta_ink
  - color: Gold
    entity: sensor.epson_xp_830_series_yellow_ink
  - color: Black
    entity: sensor.epson_xp_830_series_black_ink
  - color: Black
    entity: sensor.epson_xp_830_series_photo_black_ink
height: 200px
max: 100
min: 0
padding: 2px
target: 20
title_position: bottom
icon_position: inside
unit_of_measurement: '%'
width: 100%

the ink levels is very cool, @Mariusthvdb - do you have the code in github, or can you share it?

sure:

type: entities
title: Epson printer
show_header_toggle: false
entities:
  - device_tracker.epson_printer
  - entity: script.update_epson_cartridge_sensors
    action_name: Update
  - type: custom:hui-glance-card
    style: |
      ha-card {box-shadow:none;}
    entities:
      - entity: sensor.epson_ink_level_black
        name: Black
      - entity: sensor.epson_ink_level_cyan
        name: Cyan
      - entity: sensor.epson_ink_level_magenta
        name: Magenta
      - entity: sensor.epson_ink_level_yellow
        name: Yellow
      - entity: sensor.epson_ink_level_waste
        name: Waste

  - type: custom:bar-card
    style: |
      ha-card {box-shadow:none;}
      bar-card-value {color:darkgrey;}
      bar-card-title {word-break:break-all;}
    stack: horizontal
    entity_row: true
    direction: up
    entities:
       - color: black
         entity: sensor.epson_ink_level_black
         name: Black
       - color: cyan
         entity: sensor.epson_ink_level_cyan
         name: Cyan
       - color: magenta
         entity: sensor.epson_ink_level_magenta
         name: Magenta
       - color: yellow
         entity: sensor.epson_ink_level_yellow
         name: Yellow
       - color: grey
         entity: sensor.epson_ink_level_waste
         name: Waste
    height: 150px
    max: 100
    min: 0
    target: 20
    unit_of_measurement: '%'
    width: 100%
    positions:
      icon: 'off'

  - input_number.ink_level
  - automation.printer_ink_alert

  - type: custom:fold-entity-row
    head:
      type: section
      label: Low ink levels
    padding: 0
    entities:
      - type: custom:hui-glance-card
        style: |
          ha-card {
            box-shadow: none;
            background-image: url('/local/devices/epson/official/epson_background.png');
            background-size: cover;
          }
        entities:
          - entity: binary_sensor.ink_level_black_threshold
            name: Black
          - entity: binary_sensor.ink_level_cyan_threshold
            name: Cyan
          - entity: binary_sensor.ink_level_magenta_threshold
            name: Magenta
          - entity: binary_sensor.ink_level_yellow_threshold
            name: Yellow
          - entity: binary_sensor.ink_level_waste_threshold
            name: Waste

be ware though, the bottom section for the glance card isn’t yet styled as I want it, (to use the full width of the card) Apparently Glance card behaves differently when styling is concerned.

1 Like

thanks mate…

I get an error I can’t resolve with the Bar Card… has anyone seen this before? doesn’t matter what I do with “indicator” it throws this error. was also throwing an error for title_position and rounding… Home Assistant running non-HASSIO on Raspbian - I suspect I’m missing a dependency but the logs aren’t telling me as much

From reading the documentation, aren’t inside, outside and off the only possible settings for indicator:? I’m probably wrong, but it might be choking on your use of auto.

it’s also supposed to have a default, but fails if I leave it blank as well…

Straight from the repo these are the valid options for postions

image

so you either need to select one of these or don’t put it in there at all if you want it auto

@Gluwc just want to say bar card is awesome I use it in so many of my cards





12 Likes

Is there anyway to increase the gap between the bar and the value? I can’t relly get it to work.


        - type: 'custom:bar-card'
          entity: sensor.glances_ram_used_percent_2
          positions:
            indicator: off
            value: outside
            name: outside
          width: 70%
          height: 15px
          style: |
            bar-card-card	 {
              margin-right: auto;
              margin-left: auto;
              margin-bottom: 0px;
              margin-top: -50px;
            }
        - type: 'custom:bar-card'
          entity: sensor.glances_data_used_percent
          positions:
            indicator: off
            value: outside
            name: outside
          width: 70%
          height: 15px
          style: |
            bar-card-card	 {
              margin-right: auto;
              margin-left: auto;
              margin-bottom: auto;
              margin-top: -50px;
            }

and I want to steal your usage for my own cards, hurry up and share :wink:

1 Like
                bar-card-value   {
                  padding-left: 5px;
                }
2 Likes

I’m working on that right now

1 Like