Lovelace: Bar Card

And the second picture … new users are only allowed to put one picture in one post. :wink:2022-06-12 11_02_41-Window

Since bar-card does not support displaying entity_picture for an item, you should:

  1. Create an FR for the bar-card for this functionality.
  2. Meanwhile - use card-mod to display a picture:
type: vertical-stack
title: entity_picture
cards:
  - type: custom:bar-card
    columns: 1
    entities:
      - entity: sensor.processor_use
        min: '0'
        max: '100'
  - type: custom:bar-card
    columns: 1
    entities:
      - entity: sensor.processor_use
        min: '0'
        max: '100'
        icon: mdi:blank
        positions:
          indicator: 'off'
    style: |
      ha-icon {
        --mdc-icon-size: 40px;
        background: url("/local/images/persons/ildar.png");
        background-size: 100% 100%;
      }

image

You may also add border-radius: 10%; to get rounded corners.

2 Likes

:smiley:
Great, thanks for the quick help! That’s how it works!2022-06-12 17_59_04-Window

2 Likes

hi! I’m just starting to play with the card, it looks awesome.
I’m wondering, is there an option to keep the indicator arrow always displayed/always “on”? I’d like to always see the last trend on some temperature bars.
Thanks!

Hi all.

I’m trying to get something working. I have 6 entities for different elements of my PV array. I’m using bar cards but I want to get the bottom three bar cards to butt up against each other. I have changed the size of the bar but they just stay in the same place.

I’ve played with card-mod but cannot figure it out. I’m sure that this is a really simple thing as I’ve seen examples in some of the comments in this thread.

Any ideas? I would post code but I don’t have much in place, yet.

Cheers

Using bar-card as a chart

Suppose there is a sensor with attributes representing some forecast or historical data.
Here is a bar chart for these data:

image

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_number.test_bar_graph_1
      - input_number.test_bar_graph_2
      - input_number.test_bar_graph_3
      - input_number.test_bar_graph_4
      - input_number.test_bar_graph_5
  - type: custom:auto-entities
    card:
      type: custom:bar-card
      direction: up
      columns: 5
      height: 100px
      width: 100%
      positions:
        icon: off
        name: outside
        indicator: off
      card_mod:
        style: |
          bar-card-backgroundbar {
            background-color: transparent;
          }
    filter:
      template: |-
        {% set SENSOR = 'sensor.test_bar_graph' -%}
        {%- for attr in states[SENSOR].attributes -%}
          {%- set ATTR_VALUE = states[SENSOR].attributes[attr] -%}
          {%- if is_number(ATTR_VALUE) -%}
          {{
            {
              'entity': SENSOR,
              'attribute': attr,
              'name': attr
            }
          }},
          {%- endif -%}
        {%- endfor %}
input_number:
  test_bar_graph_1: &ref_test_bar_graph
    min: 0
    max: 100
    step: 1
    mode: slider
  test_bar_graph_2: *ref_test_bar_graph
  test_bar_graph_3: *ref_test_bar_graph
  test_bar_graph_4: *ref_test_bar_graph
  test_bar_graph_5: *ref_test_bar_graph

#############################################################################

template:
  - sensor:
      - name: test_bar_graph
        state: xyz
        attributes:
          attr_1: >-
            {{states("input_number.test_bar_graph_1")}}
          attr_2: >-
            {{states("input_number.test_bar_graph_2")}}
          attr_3: >-
            {{states("input_number.test_bar_graph_3")}}
          attr_4: >-
            {{states("input_number.test_bar_graph_4")}}
          attr_5: >-
            {{states("input_number.test_bar_graph_5")}}
1 Like

Hi All

got a bit of a funny one - i cant seem to make this card not transparent.

and code:

title: Windows Server 2016
type: custom:bar-card
columns: 2
entity_row: true
entities:
  - entity: sensor.win_atalrhao5tb_cpu_usage
    name: CPU
    icon: mdi:cpu-64-bit
    height: 30px
  - entity: sensor.win_atalrhao5tb_memory_usage
    name: RAM
    icon: mdi:brain
    height: 30px
  - entity: sensor.win_atalrhao5tb_storage_c_usage
    name: Drive C
    icon: mdi:harddisk
    height: 30px
  - entity: sensor.win_atalrhao5tb_storage_d_usage
    name: Drive D
    icon: mdi:harddisk
    height: 30px
  - entity: sensor.win_atalrhao5tb_intel_xeon_e5_2650_v2_temperatures_cpu_core_1
    name: Core 1
    icon: mdi:temperature-celsius
    height: 30px
  - entity: sensor.win_atalrhao5tb_intel_xeon_e5_2650_v2_temperatures_cpu_core_2
    name: Core 2
    icon: mdi:temperature-celsius
    height: 30px
  - entity: sensor.win_atalrhao5tb_intel_xeon_e5_2650_v2_temperatures_cpu_core_3
    name: Core 3
    icon: mdi:temperature-celsius
    height: 30px
  - entity: sensor.win_atalrhao5tb_intel_xeon_e5_2650_v2_temperatures_cpu_core_4
    name: Core 4
    icon: mdi:temperature-celsius
    height: 30px
  - entity: sensor.win_atalrhao5tb_intel_xeon_e5_2650_v2_temperatures_cpu_core_5
    name: Core 5
    icon: mdi:temperature-celsius
    height: 30px
  - entity: sensor.win_atalrhao5tb_intel_xeon_e5_2650_v2_temperatures_cpu_core_6
    name: Core 6
    icon: mdi:temperature-celsius
    height: 30px
severity:
  - to: '60'
    color: rgb(26,204,147,0.33)
    from: '0'
  - from: '61'
    to: '80'
    color: rgb(255,140,0,0.60)
  - from: '81'
    to: '100'
    color: rgb(163,0,0,0.60)
positions:
  indicator: 'off'
  style: |-
    bar-card-title {
      text-shadow: 1px 1px 5px black;
     }
1 Like

Try removing entity_row.

1 Like

That did it! thank you

Hello.

I was wondering if it there,s a way to use a template or an entity attribute in the target option?

My use would be this simple: I have an sensor from bodymiscale component that the state is my weight and the attribute is my ideal weight. I use the state for a horizontal bar and i want to use the attribute ideal weight for the target.

update: i read older posts and used the custom:config-template-card ( great help for use templates in the dashboard) to achieve this.

Hi everyone would it be possible to install the component without HACS?
Thank you

PS sorry this is an online translation

For some reason, the previous code doesn’t seem to work anymore (since a month or 2?)

type: custom:bar-card
entities:
  - entity: sensor.temp_a
    name: Garage
  - entity: sensor.temp_b
    name: Outside
  - entity: sensor.temp_c
    name: Living
direction: up
height: 200px
stack: horizontal
card_mod:
  style: |
    bar-card-row bar-card-card:nth-of-type(2) {
      --bar-card-color:
        {% if states('sensor.temp_a') | float < states('sensor.temp_b') | float %}
          #03a9f4;
        {% else %}
          red;
        {% endif %}
    }

It feels like something in the structure or CSS has changed causing the bar-card-color not to be applied.
Any idea how I can (now) change the color of a bar, based on entity states (value)?

The test below doesn’t work but could be a great feature?

  - entity: sensor.temp_a
    name: Living
    severity:
      - color: red
        from: {% state('sensor.temp_b') | float %} 
        to: 99

(result: if the temperature of temp_a if higher than temp_b, the bar would turn red)

It was NEVER supposed to work since you got a wrong path.
Compare with my original example.

Hello @Ildar_Gabdullin ,

It was NEVER supposed to work since you got a wrong path.

This worked fine for quite a while.
What do you mean by wrong path?
Keep in mind that I’m using vertical bars, not horizontal. In the CSS it looks like this:

Horizontal bars:
_bar-card-ROW
___bar-card-card
_bar-card-ROW
___bar-card-card
Multiple rows, each with 1 card:

bar-card-row:nth-of-type(1) {

Vertical bars:
_bar-card-ROW
___bar-card-card
___bar-card-card
___bar-card-card
1 row, multiple cards:

bar-card-row bar-card-card:nth-of-type(1) {

Unfortunately, right now it looks like I can’t get any CSS change to work :slight_smile:

1 Like

You are absolutely right!
That was a hasty conclusion from my side.
A bit later will check what could be wrong in your code.

1 Like

This color in my default dark theme looks same as a standard bar color.
Replaced it by another color for test.

Seems to work, check this:

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_boolean.test_boolean
      - input_number.test_level_1
  - type: custom:bar-card
    <<: &ref_settings
      entities:
        - entity: input_number.test_level_1
          name: Garage
        - entity: input_number.test_level_1
          name: Outside
      direction: up
      height: 200px
      stack: horizontal
    card_mod:
      style: |
        bar-card-row bar-card-card:nth-of-type(1) {
          --bar-card-color: green;
        }
        bar-card-row bar-card-card:nth-of-type(2) {
          --bar-card-color: red;
        }
  - type: custom:bar-card
    <<: *ref_settings
    card_mod:
      style: |
        bar-card-row bar-card-card:nth-of-type(2) {
          --bar-card-color:
            {%- if is_state('input_boolean.test_boolean','on') -%}
            #ffff00;
            {%- else -%}
            red;
            {%- endif %}
        }
  - type: custom:bar-card
    <<: *ref_settings
    card_mod:
      style: |
        bar-card-row {
          --bar-card-color: #ffff00;
        }

Hi mate.

One of my battery sensors reports back as low middle and high, how can I colour severity this please if possible ?

Thanks

Thank you @Ildar_Gabdullin for your sample code. It works perfectly.

GUESS WHAT…

IF, in my sample code, sensor.temp_a in the IF statement does not exist,
the entire card-mod style section is skipped.
All tests would fail as long as this if statement contained an invalid entity :frowning:

Learned a lot and it’s working! :slight_smile:

Then you probably should add some more checks like "if states.sensor.my_non_existing_sensor is defined"

looks classy …can you share your ui code?