Lovelace: Bar Card

[ferbulous (Shaq)]

It does mention number but I only see example for a fixed value.
Or is there another way around this?

[Ildar_Gabdullin]

It does clearly say “number” in a table of properties - which is “123”.
Your workaround is either using a forked version of this card supporting entities for this property (if this fork exists) or using a custom card supporting templates like config-template-card etc.

[ferbulous (Shaq)]

Ok, I think I got it working now using config-card thanks to this post

Lovelace: Bar Card

i figured it out how to use target with the value from an entity with the suggested config-template-card: here’s an example code with the Tesla Car Battery and target value from the Charging Limit that is currently set in the Tesla App (80% in the picture): [image] type: 'custom:config-template-card' variables: - states['sensor.tesla_charge_limit_soc'] entities: - sensor.tesla_charge_limit_soc card: type: custom:bar-card entities: - entity: sensor.tesla_battery_level name: B…

Only issue I have now is the bar exceed the column it’s in
Anyway I can edit this so it stays inside?
Also how do I reduce the numbers (remove .0 or %) display so each bar width is smaller?

type: custom:config-template-card
variables:
  - states['number.mmwave_g0_still_threshold_2']
  - states['number.mmwave_g1_still_threshold_2']
  - states['number.mmwave_g2_still_threshold_2']
  - states['number.mmwave_g3_still_threshold_2']
  - states['number.mmwave_g4_still_threshold_2']
  - states['number.mmwave_g5_still_threshold_2']
  - states['number.mmwave_g6_still_threshold_2']
  - states['number.mmwave_g7_still_threshold_2']
  - states['number.mmwave_g8_still_threshold_2']
entities:
  - sensor.mmwave_g2_still_energy_2
card:
  type: custom:bar-card
  title: Still Energy
  icon: "no"
  height: 100px
  width: 100%
  direction: up
  positions:
    indicator: inside
    name: inside
    value: inside
  columns: 9
  entities:
    - entity: sensor.mmwave_g0_still_energy_2
      name: ${vars[0].state}
      target: ${vars[0].state}
      severity:
        - color: Blue
          from: 0
          to: ${vars[0].state}
        - color: Red
          from: ${vars[0].state}
          to: 100
    - entity: sensor.mmwave_g1_still_energy_2
      name: ${vars[1].state}
      target: ${vars[1].state}
      severity:
        - color: Blue
          from: 0
          to: ${vars[1].state}
        - color: Red
          from: ${vars[1].state}
          to: 100
    - entity: sensor.mmwave_g2_still_energy_2
      name: ${vars[2].state}
      target: ${vars[2].state}
      severity:
        - color: Blue
          from: 0
          to: ${vars[2].state}
        - color: Red
          from: ${vars[2].state}
          to: 100
    - entity: sensor.mmwave_g3_still_energy_2
      name: ${vars[3].state}
      target: ${vars[3].state}
      severity:
        - color: Blue
          from: 0
          to: ${vars[3].state}
        - color: Red
          from: ${vars[3].state}
          to: 100
    - entity: sensor.mmwave_g4_still_energy_2
      name: ${vars[4].state}
      target: ${vars[4].state}
      severity:
        - color: Blue
          from: 0
          to: ${vars[4].state}
        - color: Red
          from: ${vars[4].state}
          to: 100
    - entity: sensor.mmwave_g5_still_energy_2
      name: ${vars[5].state}
      target: ${vars[5].state}
      severity:
        - color: Blue
          from: 0
          to: ${vars[5].state}
        - color: Red
          from: ${vars[5].state}
          to: 100
    - entity: sensor.mmwave_g6_still_energy_2
      name: ${vars[6].state}
      target: ${vars[6].state}
      severity:
        - color: Blue
          from: 0
          to: ${vars[6].state}
        - color: Red
          from: ${vars[6].state}
          to: 100
    - entity: sensor.mmwave_g7_still_energy_2
      name: ${vars[7].state}
      target: ${vars[7].state}
      severity:
        - color: Blue
          from: 0
          to: ${vars[7].state}
        - color: Red
          from: ${vars[7].state}
          to: 100
    - entity: sensor.mmwave_g8_still_energy_2
      name: ${vars[8].state}
      target: ${vars[8].state}
      severity:
        - color: Blue
          from: 0
          to: ${vars[8].state}
        - color: Red
          from: ${vars[8].state}
          to: 100

[Ildar_Gabdullin]

1. Never ever post an unformatted code. Place a code into triple backquotes.
2. Your card-mod code missing a “card_mod” keyword. Check docs for card-mod.

[viniciusmbs (Vinicius - Brasil)]

I’m sorry. I’ve never posted on the forum. I can do it, my card is great. How do I post codes?

custom:bar-card
title: Produção Solar
entities:
  - entity: sensor.sonoff_1000916c58_power
    name: Produção Atual
    color: rgba(33, 150, 243, 0.6)
    max: 3450
    show_state: true
    show_icon: false
  - entity: sensor.sonoff_1000916c58_energy
    name: Produção Dia
    color: rgba(33, 150, 243, 0.6)
    max: 24
    show_state: true
    show_icon: false
  - entity: input_number.producao_mensal_total
    name: Produção Mês
    color: rgba(33, 150, 243, 0.6)
    max: 650
    show_state: true
    show_icon: false
direction: up
height: 200px
stack: horizontal
width: 100%
style: |
  ha-card {
    background: none;
    border: none;
  }
card_mod:
  style: |
    bar-card-backgroundbar {
      background-image: url('/local/PainelHoy3.png'); /* Imagem do painel solar */
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      border-radius: 0px; /* Sem bordas arredondadas */
    }
    bar-card-currentbar {
      background: rgba(33, 150, 243, 0.6); /* Cor atual da barra */
      border-radius: 0px; /* Sem bordas arredondadas */
      clip-path: polygon(0 100%, 100% 100%, 100% calc(100% - var(--bar-percent)), 0 calc(100% - var(--bar-percent))); /* Ajusta o preenchimento da barra */
    }
    bar-card-name, bar-card-value {
      text-shadow: 1px 1px black;
    }

[Kugelblitz]

Just like to share my Barcard LCARS Template Navigation

type: custom:bar-card
entities:
  - entity: sensor.aktuelle_temperatur_waschekeller_mittelwert
    name: Wäschekeller
    tap_action:
      action: navigate
      navigation_path: /dashboard-lcars/waschekeller
  - entity: sensor.hk_ug_bad_temperatur
    name: Bad Keller
    tap_action:
      action: navigate
      navigation_path: /dashboard-lcars/bad-keller
  - entity: sensor.hk_ug_werkkeller_temperatur
    name: Werkkelle
    tap_action:
      action: navigate
      navigation_path: /dashboard-lcars/werkkeller
unit_of_measurement: °C
attribute: false
background_style: false
card_style: false
charge_entity: false
decimal: 0
direction: up
show_icon: true
animation:
  state: "on"
severity:
  - from: "0"
    to: "10"
    color: navy
  - from: "10.1"
    to: "15"
    color: mediumslateblue
  - from: "15.1"
    to: "18.9"
    color: skyblue
  - from: "19"
    to: "21"
    color: seagreen
  - from: "21.1"
    to: "22.9"
    color: tomato
  - from: "23"
    to: "40"
    color: crimson
positions:
  icon: inside
  indicator: "off"
  minmax: "off"
  name: inside
  value: inside
min: 0
max: 40
target: 21
stack: horizontal
card_mod:
  style: |
    bar-card-value, bar-card-name {
      font-weight: bold;
      margin-left: auto;
      margin-right: auto; 
      text-shadow: 1px 1px 2px #0009;      
    } 
      bar-card-name {
      font-size: 1rem;
      line-height:1.5rem;
      margin-top: 1.85rem;
      text-transform:uppercase;
    }  

    bar-card-value { 
      font-size: 1.25rem;
      line-height:.1.3rem;
      margin-bottom: 0.75rem;
    }

    .card-content { text-align: start; padding: 0px; margin: 0px; margin-bottom:
    0px; }

    ha-card { box-shadow: none;}

    ha-icon {
      width: auto;
      height: auto;
      margin-top:2rem;
      margin-left:auto;
      margin-right:auto;
    }  

    bar-card-row {
        --primary-text-color: white;
        font-size: 1rem;
    }

    bar-card-backgroundbar {
        border-radius:30px;
    }

    ha-card {
      --card-mod-icon-color: white;
      --mdc-icon-size: 4rem;
    }
  class: middle-right
grid_options:
  columns: 12
  rows: 2

[emerym (Mark Emery)]

Hi! Loving this card, thanks! I set up another for my UPS last night. How can I close up the gaps between the bars? I’ve tried a number of style options shown elsewhere and none work.

[Ildar_Gabdullin]

1. There is an option (cannot name it exactly) in bar-card to remove some paddings.
2. Card-mod can be also used for styling.

[emerym (Mark Emery)]

Can card-mod be used? The docs I’ve read say it can’t work on a grid card. If anyone can find the option I need to add I’ll be grateful, as I can’t.

[Ildar_Gabdullin]

@emerym

it can’t work on a grid card

There is a bar-card on your screenshot.

@emerym

The docs I’ve read say it can’t work on a grid card

Wrong, card-mod definitely works for a stock Grid card (if you mean this card), there is nothing about a Grid card in Docs for card-mod. (it is only mentioned that cards w/o “ha-card” should be styled by using mod-card - and it is related to Grid card)

[emerym (Mark Emery)]

I don’t recall where I got the example from, but it was nested inside a grid card. Clearly wrong. I’ve cut down my card to just two sensors and tried to style it. Any idea what I’m doing wrong, please? If I go into Inspect mode, add ‘height: 22px;’ to the bar-card-card:last-child{} style, the results look great. I just can’t get the style to work via config.

type: custom:bar-card
height: 25px
style: |
  bar-card-card:last-child {
      margin-right: 0px;
      height: 22px;
  }
entities:
  - type: sensor
    entity: sensor.office_ups_ups_battery_charge
    name: UPS Battery Charge
    severity:
      - from: "0"
        to: "33"
        color: Red
      - from: "33"
        to: "66"
        color: Amber
      - from: "66"
        to: "100"
        color: Green
  - type: sensor
    entity: sensor.office_ups_ups_battery_runtime
    name: UPS Battery Runtime
    max: 30
    severity:
      - from: "0"
        to: "10"
        color: Red
      - from: "10"
        to: "20"
        color: Orange
      - from: "20"
        to: "30"
        color: Green
square: false
columns: 1

[Ildar_Gabdullin]

You copy-pasted this card. You can clearly see a card-mod code. Have you read docs for card-mod?
If not - this is wrong absolutely. Using HA needs reading docs. In short - card-mod code is wrong since it lacks a “card_mod” keyword.

[emerym (Mark Emery)]

I had. I have the entry for it in configuration.yaml, restarted everything. I tried this at one point and it didn’t work either.

card_mod:
  style: |
    bar-card-card:last-child {
      margin-right: 0px;
      height: 22px;
    }

I looked at other examples which didn’t show the card_mod: so I tried that. That’s one annoying thing about using the Internet, there’s plenty wrong examples to muddy the waters.

[Ildar_Gabdullin]

As for absence of “card_mod” keyword - could be another case: this keyword became mandatory on 2022 (or 2021?).

[Ildar_Gabdullin]

@emerym

tried this at one point and it didn’t work either.

Cannot test it myself now. Try asking in the main card-mod thread.

[emerym (Mark Emery)]

Doh! This works, after a while away from it and a chance for the cache to clear.

[Ildar_Gabdullin]

So, what was a reason of a failure, why it did not work?

[emerym (Mark Emery)]

I honestly have no idea, other than maybe something being stuck in a cache? I’d saved the YAML, didn’t see the results I wanted, so got on with some home DIY. A good while later I unlocked my phone to do something unrelated and saw the card had changed. Frustrating!

[Ildar_Gabdullin]

Do you have the latest version of card-mod installed?

[Bezzaee (Mark B)]

@arnocl

card_mod:
  style: >
    {% set entity = { 
      "state": states('counter.regenwater_filter') | int(9999999999),
      "name": "Levensduur",
      "unit": " d"
      }
    %} {% set severity = { 
      "green": 0,
      "orange": 180,
      "red": 240
      }
    %} {% set colors = { 
      "green": "76,175,80",
      "orange": "255,152,0",
      "red": "244,67,54"
      }
    %}

    ha-card .card-content {
      padding: 12px!important;
      cursor: pointer;
    }

    ha-card {
      transition-duration: 0.05s;
    }

    ha-card:hover {
      {% if entity.state == 9999999999 %}
        background-color: rgba(200,200,200, 0.02);
      {% elif entity.state < severity.orange %}
        background-color: rgba({{colors.green}}, 0.02);
      {% elif entity.state < severity.red %}
        background-color: rgba({{colors.orange}}, 0.02);
      {%- else -%}
        background-color: rgba({{colors.red}}, 0.02);
      {%- endif %}
    }

    bar-card-background {
      margin-left: 13px !important;
    }

    bar-card-backgroundbar, bar-card-currentbar, bar-card-contentbar, 
    bar-card-targetbar {
      border-radius: 8px;
    }

    bar-card-currentbar, bar-card-backgroundbar, bar-card-contentbar,
    bar-card-targetbar, bar-card-animationbar {
      {% if entity.state == 9999999999 %}
        left: 1.5em !important;
        width: calc(100% - 1.5em);
      {% else %}
        {% set state_width = 1 + (entity.state|string|count + entity.unit|count) * 0.4 %}
        left: {{state_width}}em !important;
        width: calc(100% - {{state_width}}em);
      {%- endif %}
    } 

    bar-card-markerbar {
      display: none;
    } 

    bar-card-background::before {
      content: "{{ entity.name }}";
      display: flex;
      font-family: Roboto, sans-serif;
      font-size: 14px;
      font-weight: 500;
      height: 20px;
      letter-spacing: 0.1px;
      line-height: 20px;
      margin-bottom: 6px;
    }

    bar-card-background::after {
      {% if entity.state == 9999999999 %}
        content: "N/A"
      {%- else %}
        content: "{{ entity.state }}{{ entity.unit}}";
      {%- endif %}
      font-family: Roboto, Noto, sans-serif;
      font-size: 12px;
      font-weight: 400;
      height: 16px;
      letter-spacing: 0.4px;
      line-height: 16px;
      display: inline-block;
      position: absolute;
      margin-top: -4px;
      width: fit-content;
    }

    bar-card-iconbar {
      {% if entity.state == 9999999999 %}
        color: rgba(200,200,200, 1);
        background-color: rgba(200,200,200, 0.2);
      {% elif entity.state < severity.orange %}
        color: rgba({{colors.green}}, 1);
        background-color: rgba({{colors.green}}, 0.2);
      {% elif entity.state < severity.red %}
        color: rgba({{colors.orange}}, 1);
        background-color: rgba({{colors.orange}}, 0.2);
      {%- else -%}
        color: rgba({{colors.red}}, 1);
        background-color: rgba({{colors.red}}, 0.2);
      {%- endif %}
      border-radius: 50%;
    }

Love these, they look fab.