Lovelace: Bar Card

gabter · May 25, 2022, 7:33pm

I’ve tried reproducing something similar, but my second line of text is not showing. Here is my code:

card:
  type: custom:bar-card
  entity: sensor.tpms_f1a81549
  name: f1a81549
  direction: right
  entity_row: true
  height: 40px
  width: 100%
  min: '200'
  max: '300'
  positions:
    icon: 'off'
card_mod:
  style:
    mod-card:
      $:
        bar-card:
          $: |
            bar-card-name {
              line-height: 1.1rem;
            }
            bar-card-name::after {
              content: "{{ '\A' + relative_time(sensor.tpms_f1a81549.last_changed) + ' ago' }}";
              white-space: pre;
              font-size: 0.8rem;
            }

This is what I’m getting:

Can you check what I am doing wrong, or missing?

Ildar_Gabdullin · May 25, 2022, 7:45pm

states.sensor.tpms_f1a81549.last_changed
…may be there are some other errors

gabter · May 25, 2022, 7:50pm

There has to be. No matter what I write in content (even if it’s a fixed string), it won’t show.

Ildar_Gabdullin · May 25, 2022, 8:05pm

Because you copy/pasted this from a decluttering template.
Remove these selectors.

Seriously - you should NOT “just use” ready card-mod styling w/o understanding.

gabter · May 25, 2022, 8:13pm

I’m trying to understand this styling, but I’m struggling, it’s all new to me. I have yet to find a good page explaining styling. I found keywords in CSS pages, but I couldn’t yet get a grasp on the selectors. Any ideas on where to start?
What exactly do I need to remove from the code above? I guess I need card-mod: and style:, but still not getting results.

Ildar_Gabdullin · May 25, 2022, 9:52pm

Check this thread.
Learn this repo on Github.
Find a link at the bottom of the 1st post of the mentioned thread, it will lead you to some examples. But do not use them without thinking.

Ildar_Gabdullin · May 25, 2022, 10:05pm

Try that:

type: custom:bar-card
entities:
  - entity: ......
    ...
...
card_mod:
  style: |
    bar-card-name {
      line-height: 1.1rem;
    }
    bar-card-name::after {
      content: "{{ '\A ' + relative_time(states.sensor.tpms_f1a81549.last_changed) + ' ago' }}";
      white-space: pre;
      font-size: 0.8rem;
    }

Check again that post, made some corrections.

gabter · May 26, 2022, 6:02am

Thank you so much for your help! It works now. Now, I’ll try to figure out how to do it on a vertical bar.
I’ve read the card-mod pages, but I’m having problems with nested cards. I’ll do some more experimenting, but your help was very valuable. I’m learning from examples.

rathmannm · May 30, 2022, 10:57am

I am currently using the bar card to display the state of several batteries and I use the severity to color it accordingly. However once the battery reaches 0% the bar obviously disappears. Is there a way to color the background red at that state? Currently it’s not very visually apparent when a battery is completely flat:

seifertralf · June 12, 2022, 9:07am

Hi,

I am using the bar card for displaying some entities.

Now I have a question: how can I replace the default icons of the entities with my own entity-pictures? I have already assigned my own entity-pictures to the entities in customize.yaml. Displaying these pictures in other cards works also e.g. in the entities card. But unfortunately I didn’t find how to display these entity pictures also in the Bar-Card?

I hope you understand what I mean?
Does anyone have a tip for me here please? That would be great!

Thank you!
Ralf 2022-06-12 11_03_53-Window

seifertralf · June 12, 2022, 9:10am

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

Ildar_Gabdullin · June 12, 2022, 10:16am

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

Create an FR for the bar-card for this functionality.
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%;
      }

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

seifertralf · June 12, 2022, 3:59pm

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

libussa · June 13, 2022, 1:05am

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!

mooselinf · June 26, 2022, 4:50pm

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

Ildar_Gabdullin · July 21, 2022, 10:24pm

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:

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")}}

Silvrav · August 18, 2022, 11:26pm

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;
     }

Gluwc · August 19, 2022, 7:41am

Try removing entity_row.

Silvrav · August 19, 2022, 7:58am

That did it! thank you

finipini · August 19, 2022, 2:12pm

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.