Lovelace: Bar Card

Here is what I’m using:

type: custom:config-template-card
entities:
  - sensor.energy_cost_4244_today_string
card:
  type: custom:bar-card
  max: 30
  severity:
    - color: Red
      from: 21
      to: 30
    - color: Orange
      from: 11
      to: 20
    - color: Green
      from: 0
      to: 10
  entities:
    - entity: sensor.energy_cost_4244_today
  card_mod:
    style: |
      bar-card-value {
        color: yellow;
      }

Which renders as:

image

Try

          - type: custom:bar-card
            title: prefix
            entities:
              - entity: input_number.test_level_1
            card_mod:
              style: |
                bar-card-value:before {content: "$ "}

изображение

This worked like a charm!! Thank you so much :slight_smile:

Btw - why do you use CTC (config-template-card) here?

Good catch! It was leftover from other attempts. I took it out and it looks great now:

style mod doesnt work :frowning: Whats wrong?
image

I want to have text rotate 270°…

type: custom:bar-card
stack: horizontal
name: retence
decimal: 0
max: 173
min: 0
direction: up
height: 200px
width: 35px
animation:
  state: 'on'
  speed: 2
positions:
  indicator: inside
  icon: 'off'
style: |-
  bar-card-name {
   font-size: 22px;
   transform-origin: 0 0;
   transform: rotate(270deg);
   text-shadow: 0px 0px #0008;
   white-space: nowrap;
   font-weight: bold !important;
  }
entities:
  - entity: sensor.retence_hladina

Check out this link: Custom Bar Card Vertical

Start with fixing a card-mod syntax, you are missing a “card_mod” keyword.

Thats what I use. It looks like same to my code, but my doesnt work…

When I try to add:

card_mod:

before the line with style: |- this lines under card_mod immediately dissapear.

style: |-
  bar-card-name {
   font-size: 22px;
   transform-origin: 0 0;
   transform: rotate(270deg);
   text-shadow: 0px 0px #0008;
   white-space: nowrap;
   font-weight: bold !important;
  }

That never happed to me, only in this bar-card…

It should be

...
card_mod:
  style: ....

If you observe a “card_mod code is automatically deleted in UI editor” behaviour:
yes, it happens with SOME cards in UI editor, there is an issue on card-mod github.
A humble advice: do not use a dashboard in a “storage mode” (i.e. managed in UI) as a “main” dashboard, use it ONLY for testing (i.e. use dashboards in “yaml mode” for basic ones) because all your cards (not a card-mod code only) may magically disappear.

Thanks! Whe I edit it in RAW mode it works.
But you scaring me … lost all in dashboard :frowning:
I use UI because it more clear for me. Especially with new Sections view type. Really like the easy way how you can reorganize sections and cards.
But I hope when I make a backup of entire dashboard via RAW configuration editor (simply copy the full code there to any external file) than its ok and I can restore it if something happend.

searched for “repository” and “maintained” in the thread without finding much so gonna ask,
is this the current repo you’re all using? GitHub - custom-cards/bar-card: Customizable Animated Bar card for Home Assistant Lovelace
it looks long dead since covid hit, the UI for adding cards is completely broken,
so are you all just hammering it around like a zombie to keep it working while it gets more broken and wonky after each HA release…?

I saw some forks but not sure if there is an official one

What is exactly “gets more broken and wonky after each HA release”?
As for “broken UI” - come on, nobody using UI except beginners.

I am a professional dev yet can use some GUI convenience every once and then, plus building on top of a dead repo is by definition fragile

It works more or less.
Again about UI: many experienced users use yaml mode dashboards and do not care about UI.

@arnocl

could you please share the whole code of this card
thx

The code should all be in my original post. To change everything to your own needs just change the yaml for the bar card itself, in the css code only the following items should be edited:

    {% 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"
      }
    %}

you’re right, Bar card repo seems abandoned and with that, UI editing suffers more getting out of touch when the core HA Dashboard progresses.

The core HA dashboard is getting more advanced with every release, and many advanced users rely on that. Given the new features in the automations scripting, and also the new Dashboard options, the UI is truly getting there. Many integrations migrate to the UI, so we need less Yaml with each and every release.

very important: keep providing positive feedback to the dev team, so they can advance even further, especially when you say you are a professional dev. Please do, and dont let anyone talk you out of it.

rebuilt my Home Assistant card to use regular entities card (because of the current bard-card being unmaintained.) It isnt the same, but it does have a nice ring to it. Picture needs some further tweaking (so it doesnt repeat and still is the correct size/proportion.)

and a variation with some tighter paddings, so the individual entities have a bit more space horizontally. can also change margins:

          padding: 0px 16px;
          /*margin: 0px -16px;*/

so do as you please there

Yaml
# green #0, 128, 0
# darkgreen #0, 100, 0
# limegreen 50, 205, 50
# gold 255, 215, 0
# brown # 165, 42, 42
# orange #255, 165, 0
# darkorange #255, 140, 0
# orangered #255, 69, 0
# tomato # 255, 99, 71
# maroon #128, 0, 0
# red #255, 0, 0


type: entities
card_mod:
  style: |
    ha-card {
      background:
        {% set dark = is_state('binary_sensor.donker_buiten','on') %}
         url('/local/homeassistant/homeassistant{{"-dark" if dark }}.png');
      color: white;
      --card-mod-icon-color: white;
      font-weight: bold;
      padding-top: 40px;
    }
entities:
  - entity: sensor.last_boot

  - entity: sensor.processor_use
    <<: &perc
      card_mod:
        style: |
          hui-generic-entity-row {
            padding: 0px 16px;
            border-radius: 24px;
            background:
              {% set perc = states(config.entity)|float(0) %}
              {% set rest = 100 - perc %}
              {% if perc >= 59 %} {% set bar = '255, 0, 0' %}
              {% elif perc >= 44 %} {% set bar = '128, 0, 0' %}
              {% elif perc >= 24 %} {% set bar = '255, 165, 0' %}
              {% elif perc >= 9 %} {% set bar = '0, 100, 0' %}
              {% else %} {% set bar = '0, 128, 0' %}
              {% endif %}
              /*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/
              linear-gradient(to right, rgb({{bar}}) 0%, rgb({{bar}}) {{perc}}%, rgba({{bar}},0.2) {{perc}}%, rgba({{bar}},0.2) 100%);
          }
    name: Cpu

  - entity: sensor.processor_temperature
    name: Temp
    card_mod:
      style: |
        hui-generic-entity-row {
          padding-right: 16px;
          padding-left: 16px;
          margin: 0px -16px;
          border-radius: 24px;
          background:
            {% set temp = states(config.entity)|float(0) %}
            {% set rest = 100 - temp %}
            {% if temp >= 85 %} {% set bar = '255, 0, 0' %}
            {% elif temp >= 75 %} {% set bar = '128, 0, 0' %}
            {% elif temp >= 65 %} {% set bar = '255, 99, 71' %}
            {% elif temp >= 55 %} {% set bar = '255, 69, 0' %}
            {% elif temp >= 45 %} {% set bar = '255, 140, 0' %}
            {% elif temp >= 35 %} {% set bar = '255, 165, 0' %}
            {% else %} {% set bar = '0, 128, 0' %}
            {% endif %}
            /*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{temp}}%);*/
            linear-gradient(to right, rgb({{bar}}) 0%, rgb({{bar}}) {{temp}}%, rgba({{bar}},0.2) {{temp}}%, rgba({{bar}},0.2) 100%);
        }

  - entity: sensor.memory_use_percent
    name: Memory
    card_mod:
      style: |
          hui-generic-entity-row {
            padding-right: 16px;
            padding-left: 16px;
            margin: 0px -16px;
            border-radius: 24px;
            background:
              {% set perc = states(config.entity)|float(0) %}
              {% set rest = 100 - perc %}
              {% if perc >= 85 %} {% set bar = '255, 0, 0' %}
              {% elif perc >= 75 %} {% set bar = '128, 0, 0' %}
              {% elif perc >= 60 %} {% set bar = '255, 165, 0' %}
              {% elif perc >= 50 %} {% set bar = '165, 42, 42' %}
              {% else %} {% set bar = '0, 128, 0' %}
              {% endif %}
              /*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/
              linear-gradient(to right, rgb({{bar}}) 0%, rgb({{bar}}) {{perc}}%, rgba({{bar}},0.2) {{perc}}%, rgba({{bar}},0.2) 100%);
          }

  - entity: sensor.disk_use_percent_home
    name: Disk
    <<: *perc

  - entity: sensor.swap_use
    name: Swap
    card_mod:
      style: |
        hui-generic-entity-row {
          padding-right: 16px;
          padding-left: 16px;
          margin: 0px -16px;
          border-radius: 24px;
          background:
            {% set swap = states(config.entity)|float(0) %}
            {% set rest = 1000 - swap %}
            {% set factor = 0.06 %}
            {% if swap >= 768 %} {% set bar = '255, 0, 0' %}
            {% elif swap >= 640 %} {% set bar = '255, 215, 0' %}
            {% else %} {% set bar = '50, 205, 50' %}
            {% endif %}
            /*linear-gradient(to left,ivory {{rest*factor}}%, {{bar}} {{swap*factor}}%);*/
            linear-gradient(to right, rgb({{bar}}) 0%, rgb({{bar}}) {{swap*factor}}%, rgba({{bar}},0.2) {{swap*factor}}%, rgba({{bar}},0.2) 100%);
        }

or add a bit of border, alike the original bar-card:

          border-radius: 24px; /*7pt*/;
          border: 2px solid rgb(49,150,207);
          border-shadow: 2pt;

final touch for now: add a bit more color to the rest bar, setting the percentage to 0.6 in the linear -gradient:

            linear-gradient(to right, rgb({{bar}}) 0%, rgb({{bar}}) {{perc}}%, rgba({{bar}},0.6) {{perc}}%, rgba({{bar}},0.2) 100%);

since this now is no longer a bar-card, I wont pursue here,

(I want some common mods that apply to all individual entities moved to the top card mod if possible) but given the fact the original was made with bar-card elements in the picture-elements card, I figured it to be relevant

well OMT then
yep, easy

Yaml for some common row height and icon size on the individual entities
type: entities
card_mod:
  style:
    hui-sensor-entity-row:
      $: |
        hui-generic-entity-row {
          height: 25px;
          padding: 0px 16px;
          border-radius: 24px;
          border: 2px solid rgb(49,150,207);
          border-shadow: 2pt;
        }
    .: |
      ha-card {
        background:
          {% set dark = is_state('binary_sensor.donker_buiten','on') %}
           url('/local/homeassistant/homeassistant{{"-dark" if dark }}.png');
        color: white;
        --card-mod-icon-color: white;
        --mdc-icon-size: 20px;
        font-weight: bold;
        padding-top: 40px;
      }

better:

5 Likes