Lovelace: Bar Card

BambamNZ · July 20, 2024, 11:34pm

Bit more work completed on my version based on inspiration.

Also updated the ha-icon template @Mariusthvdb

Updated Code here:

type: custom:auto-entities
card:
  type: entities
  state_color: false
  show_header_toggle: false
filter:
  include:
    - entity_id: sensor.*battery
      options:
        type: custom:bar-card
        max: 100
        height: 45px
        positions:
          name: inside
          icon: outside
          value: inside
          indicator: 'off'
        unit_of_measurement: '%'
        severity:
          - value: null
            from: 0
            to: 10
            color: red
            icon: mdi:battery-alert
          - value: null
            from: 11
            to: 20
            color: darkred
            icon: mdi:battery-10
          - value: null
            from: 21
            to: 30
            color: darkorange
            icon: mdi:battery-20
          - value: null
            from: 31
            to: 40
            color: orange
            icon: mdi:battery-30
          - value: null
            from: 41
            to: 50
            color: yellow
            icon: mdi:battery-40
          - value: null
            from: 51
            to: 60
            color: yellowgreen
            icon: mdi:battery-50
          - value: null
            from: 61
            to: 70
            color: lightgreen
            icon: mdi:battery-60
          - value: null
            from: 71
            to: 80
            color: limegreen
            icon: mdi:battery-70
          - value: null
            from: 81
            to: 90
            color: green
            icon: mdi:battery-80
          - value: null
            from: 91
            to: 100
            color: darkgreen
            icon: mdi:battery
        card_mod:
          style: |
            ha-card {
              border-style: hidden;
            } 
            .card-content {
              padding: 1px;
            }
            bar-card-card {
              height: 45px;
            }
            bar-card-value {
              color: white;
            }
            bar-card-name:after {
              content: "\A Battery Type: {{ states(config.entity + '_type') }}";
              white-space: pre;
              font-size: 12px;
              color: black;
              font-weight: bold;
            }
            bar-card-name {
              width: 250px;   
              font-size: 13px;
            }
            bar-card-currentbar { 
              border-radius: 12px;
              margin-top: 1px;
            }
            :host {
              --card-mod-icon-color:
                {% set perc = states(config.entity)|float(0) %}
                {% if perc <= 10 %} red
                {% elif perc <= 20 %} darkred
                {% elif perc <= 30 %} darkorange
                {% elif perc <= 40 %} orange
                {% elif perc <= 50 %} yellow
                {% elif perc <= 60 %} yellowgreen
                {% elif perc <= 70 %} lightgreen
                {% elif perc <= 80 %} limegreen
                {% elif perc <= 90 %} green
                {% else %} darkgreen
                {% endif %};
              }
            hui-generic-entity-row {
                background:
                {% set perc = states(config.entity)|float(0) %}
                {% set rest = 100 - perc %}
                {% if perc <= 10 %} {% set bar = '255,0,0' %}
                {% elif perc <= 20 %} {% set bar = '128,0,0' %}
                {% elif perc <= 30 %} {% set bar = '255,140,0' %}
                {% elif perc <= 40 %} {% set bar = '255,165,0' %}
                {% elif perc <= 50 %} {% set bar = '255,255,0' %}
                {% elif perc <= 60 %} {% set bar = '154,205,5' %}
                {% elif perc <= 70 %} {% set bar = '144,238,144' %}
                {% elif perc <= 80 %} {% set bar = '50,205,50' %}
                {% elif perc <= 90 %} {% set bar = '0,128,0' %}
                {% else %} {% set bar = '0,100,0' %}
                {% endif %}
                /*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/
                linear-gradient(to right, rgb({{bar}},0.9) 0%, rgb({{bar}},0.6) {{perc}}%,
                                          rgba({{bar}},0.3){{perc}}%, rgba({{bar}},0.1) 100%);                  
            }
            bar-card-backgroundbar { 
            border-radius: 12px;
            margin-top: 1px;
            opacity: 50%;
            } 
  exclude: null
sort:
  method: state
  numeric: true
  reverse: false
show_empty: false

Mariusthvdb · July 21, 2024, 9:07am

nice indeed.

just so you are aware: the

{% set rest = 100 - perc %}

and a bit later the commented

 /*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/

are not used, and can in fact be taken out. or, at least also comment the setter. No need to use the extra memory resources

cinghialino · August 1, 2024, 2:33pm

shouldn’t the colors be reversed? (with the green close to 100%)

cinghialino · August 1, 2024, 2:49pm

@Gluwc would it be possible to have a sensor dictate the value in the “target” option? I mean have a dynamic value in there

craigmcfly · August 5, 2024, 10:02am

I’m missing something fundamental when it comes to doing custom styles on the bars. I’m using something simple like the following

type: custom:bar-card
entities: 
  - entity: sensor.whatever
    style: |-
      bar-card-currentbar {
         border-radius: 8px;
       }

and it has no effect on the code. I’ve got the card_mod js listed in my configuration.yaml. Can someone help?

Ildar_Gabdullin · August 5, 2024, 11:28pm

First, re-check docs for cardmod about a proper syntax, you got a keyword “card_mod” missing.

craigmcfly · August 6, 2024, 11:01pm

I’m using the documentation at GitHub - custom-cards/bar-card: Customizable Animated Bar card for Home Assistant Lovelace

Ildar_Gabdullin · August 7, 2024, 12:30am

card-mod is a SEPARATE plugin

craigmcfly · August 7, 2024, 8:15am

I get that, but I’m using the examples provided on the bar-card documentation.

I’ve also tried the documentation on the card-mod page.

I’m asking for help from someone as to the structure, not a critique of my process thus far

Ildar_Gabdullin · August 7, 2024, 9:33am

All card-mod-related info on a bar-card readme may not reflect latest changes in card-mod. That is why I suggested to check docs on a card-mod github.
And as I already said -

craigmcfly · August 7, 2024, 10:59am

I’ve tried various permutations. I think I’m going to give up for now, until bar-card’s documentation is updated to reflect the latest card-mod.

Ildar_Gabdullin · August 7, 2024, 11:03am

This may never happen.
Suggest to ask a question in the main card-mod thread.
Besides, the 1st post of that thread contains a link (in the end) which leads to a list of examples, find there examples for bar-card, might be useful.
In general, card-mod should be used as

type: custom:bar-card
...
card_mod:
  style: ....

Not that it is defined on a card’s level, not per-entity; and also note that missing “card_mod” keyword.

craigmcfly · August 7, 2024, 11:28am

The first post of that thread doesn’t actually instantiate card-mod, it just goes straight to style, which is what I worked from and then was corrected by you.

I’ve found the problem, now. The per-card card editor on Safari is randomly removing chunks of my config. It’s only when I go into the dashboard editor that I can actually see everything. I’d use Chrome, but that has its own issues.

I’ve got a starting point now, at least:

card_mod:
  style: |
    bar-card-currentbar {
      border-radius: 20px;
    }

and I can work out how to slot that in the right place for all the cards I want to tweak. Thanks for the help.

Ildar_Gabdullin · August 7, 2024, 11:48am

Do not understand you, but nevermind, good if you sorted it out.

killtux · August 21, 2024, 2:57pm

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):

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: Battery Charge
  height: 40px
  positions:
    indicator: inside
    name: outside
    value: inside
  width: 60%
  columns: 1
  target: '${vars[0].state}'
  severity:
    - value: null
      from: 0
      to: 10
      color: red
      icon: mdi:battery-alert
    - value: null
      from: 11
      to: 20
      color: darkred
      icon: mdi:battery-10
    - value: null
      from: 21
      to: 30
      color: darkorange
      icon: mdi:battery-20
    - value: null
      from: 31
      to: 40
      color: orange
      icon: mdi:battery-30
    - value: null
      from: 41
      to: 50
      color: yellow
      icon: mdi:battery-40
    - value: null
      from: 51
      to: 60
      color: yellowgreen
      icon: mdi:battery-50
    - value: null
      from: 61
      to: 70
      color: lightgreen
      icon: mdi:battery-60
    - value: null
      from: 71
      to: 80
      color: limegreen
      icon: mdi:battery-70
    - value: null
      from: 81
      to: 90
      color: green
      icon: mdi:battery-80
    - value: null
      from: 91
      to: 100
      color: darkgreen
      icon: mdi:battery
  card_mod:
    style: |
      bar-card-value {
        color: white !important;
      }
      bar-card-name {
        font-weight: normal;
      }
      ha-icon {
        color: {{ states(entity) | int <= 10 ? 'red' :
                  states(entity) | int <= 20 ? 'darkred' :
                  states(entity) | int <= 30 ? 'darkorange' :
                  states(entity) | int <= 40 ? 'orange' :
                  states(entity) | int <= 50 ? 'yellow' :
                  states(entity) | int <= 60 ? 'yellowgreen' :
                  states(entity) | int <= 70 ? 'lightgreen' :
                  states(entity) | int <= 80 ? 'limegreen' :
                  states(entity) | int <= 90 ? 'green' :
                  'darkgreen' }} !important;
      }

Ildar_Gabdullin · August 21, 2024, 6:16pm

Suggest to define “sensor.tesla_charge_limit_soc” as monitored by config-template-card, i.e. add it into the “entities” section, otherwise the card will be not updated after changing this helper.

killtux · August 22, 2024, 7:51am

thanks, i corrected the code.

do you know what is need to have the indicator shown? do i understand it right: it should indicated if the battery is getting charged?

couldn’t find any information at the repo of the bar card mod

Ildar_Gabdullin · August 22, 2024, 9:19am

If by “indicator” you mean a small “triangle” (like an arrow) - it is shown when an entity is constantly changing (up, down). I do not know the exact algorithm - but probably the card tracks a value’s gradient within some fixed time period; if the gradient is not 0 → show an indicator. So the indicator sometimes is displayed, sometimes not.
I am not using the indicator myself; imho it is not very informative.

killtux · August 22, 2024, 9:43am

ok that makes sense. thanks for your explanation.
if the algorythm is working like that, it may be a too long timespan for the big car battery to increase to the next percent. So maybe thats the reason it is never shown for me.
would be a nice feature to see if it is charging. so maybe i’ll replace the icon with cardmod to show if its plugged in in and acutal charging.

Ildar_Gabdullin · August 22, 2024, 9:55am

You may analyse a “binary_sensor.charging” (or whatever): if it is ON → colorize the icon by card-mod as you suggested yourself (ask in the main card-mod thread for details if needed).