Lovelace: Bar Card

MisterTFM · April 9, 2022, 10:04pm

Thank you very much, saved me a lot of time.

Ildar_Gabdullin · April 9, 2022, 10:32pm

Alternatively, this may be achieved by card-mod based on this cool method from a card-mod-theme cookbook:

  - type: custom:auto-entities
    card:
      type: entities
    entities: []
    sort:
      method: state
      numeric: true
    filter:
      include:
        - entity_id: input_number.test_level_*
          options:
            card_mod:
              style: |
                :host {
                  {% set battery = states(config.entity) %}
                  background: linear-gradient(to right, rgba(0,255,0,0.5), {{battery}}%, white {{battery}}%);
                }

For real battery sensors their states will be displayed instead of sliders.

schneemensch · April 14, 2022, 7:55pm

no success so far. Thomas, would you mind sharing your code? best Florian

MisterTFM · April 17, 2022, 6:40pm

See above posted code by [Ildar_Gabdullin]

schneemensch · April 18, 2022, 8:36am

Well, that’s what I did. So I thought looking at a second configuration might help in order to figure out what I will have to change. never mind…

MisterTFM · April 18, 2022, 2:16pm

duittenb · April 20, 2022, 10:04am

Team,

Is it possible to have 3 bars and give one a different background-bar color? (and possibly label-font-color)

Example:

Current config (all with the same color):

type: custom:bar-card
entities:
  - entity: sensor.temphum_blokhut_temp
    name: Cabin
  - entity: sensor.motion_x_frontdoor_temp
    name: Outside
  - entity: sensor.temp_rfx_garage_temperature
    name: Garage
direction: up
height: 200px
min: 0
max: 28
stack: horizontal

Ildar_Gabdullin · April 20, 2022, 12:42pm

Use card-mod

mcarlosro · April 25, 2022, 5:33pm

To monitor my raspberry, I have a vertical stack + bar-card, but I have the problem that every bar takes different size depending on the value as shown below:

Is there a way to have them with the same size?

Current code is:

              - type: vertical-stack
                cards:
                  # CPU
                  - type: custom:bar-card
                    positions:
                      name: outside
                      value: outside
                      indicator: 'off'
                    height: 20px
                    width: 60%
                    entities:
                      - entity: sensor.cpu_usage_raspi4
                        name: CPU
                        icon: mdi:speedometer
                        severity:
                          - color: rgb(26,204,147,0.33)
                            from: 0
                            to: 10.9
                          - color: rgb(206,133,0,0.60)
                            from: 11
                            to: 25
                          - color: rgb(163,0,0,0.60)
                            from: 26
                            to: 150
                  # Temperature
                  - type: custom:bar-card
                    positions:
                      name: outside
                      value: outside
                      indicator: 'off'
                    height: 20px
                    width: 60%
                    entities:
                      - entity: sensor.temperature_raspi4
                        name: Temp
                        icon: mdi:thermometer
                        severity:
                          - color: rgb(26,204,147,0.33)
                            from: 0
                            to: 69.9
                          - color: rgb(206,133,0,0.60)
                            from: 70
                            to: 85
                          - color: rgb(163,0,0,0.60)
                            from: 85
                            to: 150
                  # Disk
                  - type: custom:bar-card
                    positions:
                      name: outside
                      value: outside
                      indicator: 'off'
                    height: 20px
                    width: 60%
                    entities:
                      - entity: sensor.disk_use_raspi4
                        name: SSD
                        icon: mdi:harddisk
                        severity:
                          - color: rgb(26,204,147,0.33)
                            from: 0
                            to: 69.9
                          - color: rgb(206,133,0,0.60)
                            from: 70
                            to: 85
                          - color: rgb(163,0,0,0.60)
                            from: 85
                            to: 150

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.