Lovelace: Bar Card

Ralf · April 26, 2022, 7:55am

Hello,

Having problems to get different colors for each bar.
Background: I want to show colors of ink filled from my printer and display it with appropriate color.

Thanks for help, Ralf

duittenb · May 4, 2022, 11:40am

Use card-mod

This works but with a caveat.
With card-mod I can change the colors but not one of the 3 bars.
So in the above scenario with 3 bars I had to use a horizontal-stack with 3 separate bars of which the middle one gets a different color.

Ildar_Gabdullin · May 4, 2022, 3:27pm

Let me clarify.
The bar-card may include a list of bars (or just one bar).
Card-mod may be specified for all bars or some particular.

duittenb · May 13, 2022, 12:13pm

Card-mod may be specified for all bars or some particular.

Do you mean you can have a single bar-card with 3 bars and use card-mod to change the color of 1 of these bars? (vs. adding 3 bar-cards of which 1 uses card-mod)

Tnx!
DJ

Ildar_Gabdullin · May 13, 2022, 12:31pm

type: custom:bar-card
title: different styles
entities:
  - entity: sensor.memory_use_percent
    min: '0'
    max: '100'
  - entity: sensor.memory_use_percent
    min: '0'
    max: '100'
  - entity: sensor.memory_use_percent
    min: '0'
    max: '100'
card_mod:
  style: |
    bar-card-row:nth-of-type(1) bar-card-name {
        color: orange;
    }
    bar-card-row:nth-of-type(2) bar-card-name {
        color: red;
    }

duittenb · May 13, 2022, 2:59pm

Thank you Ildar!

With your example I was able to make it work for my bars.

The CSS had to be changed as I use direction:up and stack:horizontal
The actual bar color is stored in a CSS variable so this had to be changed: --bar-card-color

Result:

CODE:

type: custom:bar-card
entities:
  - entity: sensor.motion_x_garage_temp
    name: Garage
  - entity: sensor.motion_x_frontdoor_temp
    name: Outside
  - entity: sensor.temp_x_living_temp
    name: Living
title: Temperature comparison
direction: up
height: 200px
min: 0
max: 28
stack: horizontal
card_mod:
  style: |
    bar-card-row bar-card-card:nth-of-type(2) {
        --bar-card-color: red;
    }

As you can see I had to

go to bar-card-row (with a horizontal stack you only have 1 row)
Go through the bar-card-card's and use :nth-of-type(2) to modify the 2nd one.

Then…

…a crazy idea came to mind: why not use severity colors?
A short version of your example would look like this:

type: custom:bar-card
title: different styles
entities:
  - entity: sensor.memory_use_percent
  - entity: sensor.memory_use_percent
    severity:
      - color: Red
        from: 1
        to: 99999
  - entity: sensor.memory_use_percent

resulting in 3 bars with the middle one being red.

I still like the one with card_mod better, just because I can

Ildar_Gabdullin · May 13, 2022, 3:39pm

ILDAR )

Mmm, may be, I was not thinking about settings for bars, just wanted to show how to style particular bars.

gabter · May 25, 2022, 2:02pm

Can someone help me on how to change the bar color (or hide it) if the entity state is “unknown”?

Ildar_Gabdullin · May 25, 2022, 2:44pm

Kind of this:

type: custom:bar-card
entities:
  - entity: sensor.battery_samsung_p6800
    direction: right
    name: Battery
    icon: mdi:battery
card_mod:
  style: |
    bar-card-row {
      {% if states("sensor.battery_samsung_p6800") in ['unavailable','unknown'] %}
      --bar-card-color: var(--disabled-text-color);
      {% endif %}
    }

Hide what?

gabter · May 25, 2022, 2:59pm

Ildar_Gabdullin:

card_mod:
  style: |
    bar-card-row {
      {% if states("sensor.battery_samsung_p6800") in ['unavailable','unknown'] %}
      --bar-card-color: var(--disabled-text-color);
      {% endif %}
    }

Thanks, that works. By hiding it, I meant hiding the bar itself. I found that the “severity” option can have a “hide” option, but how do I format the boolean? hide: {{ is_state('sensor.tpms_f1a819c8', 'unknown') }} doesn’t seem to work.

Ildar_Gabdullin · May 25, 2022, 3:23pm

Check this example:

  - type: custom:bar-card
    entities:
      - entity: sensor.battery_samsung_p6800
        direction: right
        name: Battery
        icon: mdi:battery
    severity:
      - from: 10
        to: 20
        color: var(--disabled-text-color)
        icon: mdi:battery-alert
      - from: 21
        to: 30
        hide: true

Then change a value of the sensor.battery_samsung_p6800:

And if the value = 29:

In some cases this “hiding the bar” may not look fine for you due to it’s vertical sizes.
Probably, if the bar-card is placed between entity-rows the hiding will look better, check it by yourself.

You cannot use this:

    severity:
      - from: unknown
        to: unknown

Here you are trying to use a template:

which is not supported.

How to hide by using “card-mod”:
Let’s consider a bar-card inside a stack:

type: vertical-stack
cards:
  - type: entities
    entities:
      - sun.sun
  - type: custom:bar-card
    entities:
      - entity: sensor.battery_samsung_p6800
        direction: right
        name: Battery
        icon: mdi:battery
    card_mod:
      style: |
        ha-card {
          {% if states("sensor.battery_samsung_p6800") in ['unavailable','unknown'] %}
          display: none;
          {% endif %}
        }
  - type: entities
    entities:
      - sun.sun

Now change a value of the sensor to "unknown":

The card is not displayed but still there is vertical spacing after the hidden card - which leads to a DOUBLE spacing.

Also you may try using a custom:state-switch card.

gabter · May 25, 2022, 3:54pm

Cool! Thanks so much for the help.
Another question, if I may: it seems that the bar-card cannot display the label, or any other attributes of the entity. What would be the best way to go to display for example the label below the name? I am experimenting with vertical stack, but I do not want a spacing (card borders) between the name and the label.
Forever in your debt

Ildar_Gabdullin · May 25, 2022, 4:33pm

Please give a picture made in MS Paint or whatever of your desired design))

gabter · May 25, 2022, 5:49pm

Something like this. Obviously with the temperature sensor for each wheel.

Ildar_Gabdullin · May 25, 2022, 5:55pm

1st bar - what is on the top, what is on the bottom? What is added?

gabter · May 25, 2022, 6:01pm

Sorry, you’re right.
The bar card is the tpms sensor, name is on bottom, value (state) is on top, the card has min-max value set to 200-300 kPa.
I’d like to add the temperature and potentially a last_changed value at the bottom for each sensor. The temperature is an attribute of the corresponding tpms sensor.

Ildar_Gabdullin · May 25, 2022, 6:08pm

Additional info may be added by using card-mod.
See examples here.

These are examples for horizontal bars, a similar method may be used for vertical bars to add smth below bottom labels on your picture.

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.