Lovelace: Bar Card

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:

7 Likes

hi how do you add variables to the theme?

can you post full code please?

Using any code editor open your theme file located inside the folder “theme” inside the “config” volume of your Home Assistant installation. and simply paste the variables at the end of the file.

hey did you ever get this working?

Have you tried smth like

    type: custom:bar-card
    entity: ...
    card_mod:
      style: |
        bar-card-card {
          border-radius: ...;
        }

???

How to apply a gradient to only one card? This is what’ve got now but it applies to all cards.

image

type: custom:bar-card
title: Printer
entities:
  - entity: sensor.hp_officejet_5252_color_ink_cartridge_level
    color: Cyan
    name: Color
  - entity: sensor.hp_officejet_5252_black_ink_cartridge_level
    color: Black
    name: Black
  - entity: sensor.hp_printer_cartridge_moisture
    name: Moisture
    icon: mdi:water-percent
direction: up
height: 200
stack: horizontal
positions:
  icon: inside
  name: inside
  indicator: 'off'
card_mod:
  style: |-
    ha-card {
      bar-card-backgroundbar { 
        background: linear-gradient(green 5%, orange 50%, red 75%); 
        border-radius: 25px;      
       } 
      bar-card-currentbar { 
        background: linear-gradient(green 5%, yellow 25%, orange 50%, red 75%);       
        clip-path: polygon(0 100%, 100% 100%, 100% calc(100% - var(--bar-percent)), 0 calc(100% - var(--bar-percent)));
        border-radius: 12px;
       }
      bar-card-name {
        text-shadow: 1px 1px black
      }
      bar-card-value {
        text-shadow: 1px 1px black
      }
    } 

Almost there. As a workaround split the bars in a horizontal stack. Now only have to see why the Ink Moisture name gets justified left when the card renders to fit the screen.

image

type: horizontal-stack
title: Printer
cards:
  - type: custom:bar-card
    entities:
      - entity: sensor.hp_officejet_5252_color_ink_cartridge_level
        name: Color
    direction: up
    decimal: 0
    height: 200
    stack: horizontal
    positions:
      icon: inside
      name: 'off'
      indicator: 'off'
    card_mod:
      style: |-
        ha-card {
          bar-card-backgroundbar { 
            border-radius: 5px;      
           } 
          bar-card-currentbar { 
            background: linear-gradient(to right, cyan 33%, magenta 33% 66%, yellow 66%); 
            clip-path: polygon(0 100%, 100% 100%, 100% calc(100% - var(--bar-percent)), 0 calc(100% - var(--bar-percent)));
            border-radius: 5px;
           }
          bar-card-name {
            text-shadow: 1px 1px black
          }
          bar-card-value {
            text-shadow: 1px 1px black
          }
        } 
  - type: custom:bar-card
    entities:
      - entity: sensor.hp_officejet_5252_black_ink_cartridge_level
        color: Black
        name: Black
    direction: up
    decimal: 0
    height: 200
    stack: horizontal
    positions:
      icon: inside
      name: 'off'
      indicator: 'off'
    card_mod:
      style: |-
        ha-card{
          --bar-card-border-radius: 5px;
          border-radius: 12px;
        }
        bar-card-name {
          text-shadow: 1px 1px black
        }
        bar-card-value {
          text-shadow: 1px 1px black
        }    
  - type: custom:bar-card
    entities:
      - entity: sensor.hp_printer_cartridge_moisture
        name: Ink Moisture
        icon: mdi:water-percent
    direction: up
    height: 200
    stack: horizontal
    positions:
      icon: inside
      name: inside
      indicator: 'off'
    card_mod:
      style: |-
        ha-card{
          --bar-card-border-radius: 5px;
          border-radius: 12px;
        }
        bar-card-name {
          text-shadow: 1px 1px black
        }
        bar-card-value {
          text-shadow: 1px 1px black
        }
2 Likes

Unable to Animate (infinitely)

I have card-mod installed and working (using for other cards) but for some reason I’m not able to get the animation.

I can get the built in animation to work for when the value changes by adding:

animation:
  state: 'on'
  speed: 5

Any ideas jwelvaert or Ildar_Gabdullin?

Current YAML

type: custom:bar-card
entities:
  - entity: sensor.heat_pump_water_heater_available_hot_water
    name: Hot Water Available
columns: '0'
positions:
  icon: inside
  indicator: 'off'
severity:
  - color: Blue
    from: 0
    to: 10
  - color: Orange
    from: 11
    to: 40
  - color: Red
    from: 41
    to: 100
visibility:
  - condition: numeric_state
    entity: sensor.heat_pump_water_heater_available_hot_water
    below: 100
  - condition: or
    conditions:
      - condition: state
        entity: sensor.heat_pump_water_heater_available_hot_water
        state_not: unavailable
      - condition: state
        entity: sensor.heat_pump_water_heater_available_hot_water
        state_not: unknown
  - condition: state
    entity: binary_sensor.heat_pump_water_heater_running
    state: 'on'
card_mod:
  style: |
    bar-card-row bar-card-card bar-card-background bar-card-targetbar {
      {% if is_state('binary_sensor.heat_pump_water_heater_running','on') %}
      animation: filling 5s linear infinite;
      {% endif %}
      --bar-percent: 0 !important;
    }
    @keyframes filling {
      0% {
        --bar-target-percent: 0;
      }
      10% {
        --bar-target-percent: 10%;
      }
      20% {
        --bar-target-percent: 20%;
      }
      30% {
        --bar-target-percent: 30%;
      }
      40% {
        --bar-target-percent: 40%;
      }
      50% {
        --bar-target-percent: 50%;
      }
      60% {
        --bar-target-percent: 60%;
      }
      70% {
        --bar-target-percent: 70%;
      }
      80% {
        --bar-target-percent: 80%;
      }
      90% {
        --bar-target-percent: 90%;
      }
      100% {
        --bar-target-percent: 100%;
      }
    }
    bar-card-row bar-card-card bar-card-background bar-card-markerbar {
    display: none;
    }

My code is STILL working.
Get rid of anything you added and then add it one by one to find a possible culprit.

Does anyone know how to modify this card so that it will change the battery icon color to be the same as the severity?

I can modify the ha-icon style with a specific color, but I’m not sure how to get the current severity color.

Here is my current code:

type: vertical-stack
cards:
  - type: custom:auto-entities
    card:
      type: custom:bar-card
      animation: true
      height: 40px
      positions:
        indicator: 'off'
        name: outside
        value: inside
      width: 60%
      columns: 1
      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;
          }
    unit_of_measurement: '%'
    filter:
      include:
        - entity_id: sensor.*batt*
          state: <=100
      exclude:
        - entity_id: sensor.*battery_temp*
        - entity_id: sensor.*battery_pow*
        - entity_id: sensor.*battery_type*
        - entity_id: sensor.*battery_+*
    sort:
      method: state
      numeric: true
      reverse: false
    show_empty: false
    columns: 1

Ok, it took me a little while, but I figured it out. Below is my current battery status card which uses custom:bar-card, chooses entities with names containing sensor.*_battery, excludes some entities, sorts by by remaining battery life, and color-codes the battery icons.

I used the HA-Battery-Notes integration to automatically add the battery type attribute to each battery.

I really wanted to display the battery type on this dashboard, so it would be easy to just grab the right batteries and change them out.

A future enhancement would be to create an input text helper containing a dictionary of battery sensors and their corresponding battery types in order to include additional battery sensors whose entity names don’t end with _battery .

Code is below. If anyone has suggestions for improving this, please post.

      - type: custom:auto-entities
        card:
          title: Battery Status
          type: entities
          state_color: false
          show_header_toggle: false
        filter:
          include:
            - entity_id: sensor.*_battery
              options:
                type: custom:bar-card
                animation: true
                max: 100
                height: 40px
                positions:
                  name: outside
                  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: 0px;
                    }
                    bar-card-card {
                      height: 35px;
                    }
                    bar-card-value {
                      color: white;
                    }
                    bar-card-name:after {
                      content: "\A Battery Type: {{ states(config.entity + '_type') }}";
                      white-space: pre;
                      font-size: 12px;
                      color: green;
                      font-weight: bold;
                    }
                    bar-card-name {
                      width: 250px;   
                      font-size: 13px;
                    }
                    ha-icon {
                      {% if states(config.entity) | int <= 10 %}
                        color: red;
                      {% elif states(config.entity) | int <= 20 %}
                        color: darkred;
                      {% elif states(config.entity) | int <= 30 %}
                        color: darkorange;
                      {% elif states(config.entity) | int <= 40 %}
                        color: orange;
                      {% elif states(config.entity) | int <= 50 %}
                        color: yellow;
                      {% elif states(config.entity) | int <= 60 %}
                        color: yellowgreen;
                      {% elif states(config.entity) | int <= 70 %}
                        color: lightgreen;
                      {% elif states(config.entity) | int <= 80 %}
                        color: limegreen;
                      {% elif states(config.entity) | int <= 90 %}
                        color: green;
                      {% else %}
                        color: darkgreen;
                      {% endif %}
                    }
          exclude:
            - entity_id: sensor.west_side_battery
            - entity_id: sensor.south_east_battery
            - entity_id: sensor.south_west_battery
            - entity_id: sensor.front_door_battery
            - entity_id: sensor.device_tracker_iphone_battery
        sort:
          method: state
          numeric: true
          reverse: false
        show_empty: false

4 Likes

Probably not the most elegant or efficient but I managed to get this working using this;
(Edit: I tidied this up a bit since my initial reply to just use 2 variables, the list of days and the current getDay value. Only had it working for a day or so but seems to be working so far.

type: custom:config-template-card
variables:
  - - Mon
    - Tues
    - Weds
    - Thur
    - Fri
    - Sat
    - Sun
    - Mon
    - Tues
    - Weds
    - Thur
    - Fri
    - Sat
    - Sun
  - ((new Date()).getDay())
entities:
  - entity: sensor.solcast_pv_forecast_forecast_today
  - entity: sensor.solcast_pv_forecast_forecast_tomorrow
  - entity: sensor.solcast_pv_forecast_forecast_day_3
  - entity: sensor.solcast_pv_forecast_forecast_day_4
  - entity: sensor.solcast_pv_forecast_forecast_day_5
  - entity: sensor.solcast_pv_forecast_forecast_day_6
  - entity: sensor.solcast_pv_forecast_forecast_day_7
card:
  type: custom:bar-card
  entities:
    - entity: sensor.solcast_pv_forecast_forecast_today
      name: Today
    - entity: sensor.solcast_pv_forecast_forecast_tomorrow
      name: ${vars[0][vars[1]]}
    - entity: sensor.solcast_pv_forecast_forecast_day_3
      name: ${vars[0][vars[1] + 1]}
    - entity: sensor.solcast_pv_forecast_forecast_day_4
      name: ${vars[0][vars[1] + 2]}
    - entity: sensor.solcast_pv_forecast_forecast_day_5
      name: ${vars[0][vars[1] + 3]}
    - entity: sensor.solcast_pv_forecast_forecast_day_6
      name: ${vars[0][vars[1] + 4]}
    - entity: sensor.solcast_pv_forecast_forecast_day_7
      name: ${vars[0][vars[1] + 5]}
  title: PV Forecast
  direction: up
  height: 100
  stack: horizontal
  max: 40
  unit_of_measurement: ' '
  positions:
    icon: 'off'
  decimal: 1
  card_mod:
    style: |-
      ha-card {
           --ha-card-header-font-size: 14px;
           transform-origin: 0 0;
         }  

         bar-card-backgroundbar { 
          background: linear-gradient(green 35%, yellow 65%, orange 75%, red 85%); 
          border-radius: 8px   
         } 
        bar-card-currentbar { 
          background: linear-gradient(green 35%, yellow 65%, orange 75%, red 85%);       
          clip-path: polygon(0 100%, 100% 100%, 100% calc(100% - var(--bar-percent)), 0 calc(100% - var(--bar-percent)));
          border-radius: 8px
         }
        bar-card-name {
          text-shadow: 1px 1px black
        }
        bar-card-value {
          text-shadow: 2px 2px black
        }
      }

2 Likes

Beautiful!
thanks for posting

Ive done away with bar-card, but this gets me tempted reinstalling it again :wink:

For my usecase I redid your design to a regular entities card with the ‘mimick’ bars Ive posted before, and the result is also nice (although I admit it needs more detail especially in the icon which Ive set to the same colors and because of that dont stand out enough inside the bar).

If you ask for improvements in your code: yes, check out the template for the ha-icon and compare to my code in the yaml below. It can be shortened significantly by setting the var in the top

I didnt touch the icon itself, because the core icons suffice for me, but you could template that identically as I do here with --card-mod-icon-color, and then use --card-mod-icon

Question: where did you get the battery type entities you use in the secondary line. I am aware we can add an attribute as is done in Use for loops to get a notification for each device with low battery and the battery type - #2 by pedolsky but yo seem to have a separate entity?

From Bar to Entities
type: custom:auto-entities
card:
  title: Battery Status
  type: entities
  card_mod:
    class: class-header-margin
    style:
      hui-sensor-entity-row:
        $: |
          hui-generic-entity-row {
            height: 25px;
            padding: 0px 16px;
            border-radius: var(--ha-card-border-radius);
            border: 1px groove var(--primary-color);
          }
      .: |
        ha-card {
          color: vcar(--primary-color);
          /*--mdc-icon-size: 40px;*/
          font-weight: 400;
        }
        .card-content {
          max-height: 450px;
          overflow-y: scroll;
        }
  state_color: false
  show_header_toggle: false
filter:
  include:
    - entity_id: sensor.*_battery
      options:
        card_mod: &perc
          style: |
            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%);
            }
            :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 %};
              }
sort:
  method: state
  numeric: true
  reverse: false
show_empty: false
# 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

Dark theme

Lighter theme

Jul-17-2024 10-18-14

3 Likes

@Mariusthvdb thanks for the compliments and review! That is a great call to set the var in the top to simplify the icon color selection logic. I haven’t implemented this yet in the examples below.

Your dashboard looks nice. I moved my battery icons outside the bar as they were not too visible. Also, the I couldn’t read the sensor names with the white text very easily, so I moved this out as well. Possibly, I could change the text color to a high-contrast color, depending on the background of the bar if I wanted to have the text included inside the bar.

Do you have a link to your post where you used the ‘mimick’ bars? I’m not sure if your are referring to the hui-sensor-entity-row in your code?

So, I used the Battery Notes integration which discovers battery entities and automatically adds new sensors for each device for the battery level. It has a database for devices which is updated regularly.

I still need to find a better way to select all battery entities and corresponding battery types, as my custom entities filter is relying on entity names such as: entity_id: sensor.*_battery for my battery entities and for the battery type (created by the HA-Battery-Notes integration): states(config.entity + ‘_type’)

I have some additional Z-Wave battery entities that aren’t using the same naming convention.

The filter for auto-entities does not support OR conditions, so I can’t do anything like:

entity_id: sensor.*_battery OR sensor.some_battery_entity

It means that I would have to include multiple entities in the filter and then repeat the options for the bar-card, which is ugly:

Repeated bar-card Code for Different Entity Filters (not ideal)
views:
  - title: Batteries
    panel: false
    cards:
      - type: custom:auto-entities
        card:
          title: Battery Status
          type: entities
          state_color: false
          show_header_toggle: false
        filter:
          include:
            - entity_id: sensor.*_battery
              options:
                type: custom:bar-card
                animation: true
                max: 100
                height: 40px
                positions:
                  name: outside
                  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: 0px;
                    }
                    bar-card-card {
                      height: 35px;
                    }
                    bar-card-value {
                      color: white;
                    }
                    bar-card-name:after {
                      content: "\A Battery Type: {{ states(config.entity + '_type') }}";
                      white-space: pre;
                      font-size: 12px;
                      color: green;
                      font-weight: bold;
                    }
                    bar-card-name {
                      width: 250px;   
                      font-size: 13px;
                    }
                    ha-icon {
                      {% if states(config.entity) | int <= 10 %}
                        color: red;
                      {% elif states(config.entity) | int <= 20 %}
                        color: darkred;
                      {% elif states(config.entity) | int <= 30 %}
                        color: darkorange;
                      {% elif states(config.entity) | int <= 40 %}
                        color: orange;
                      {% elif states(config.entity) | int <= 50 %}
                        color: yellow;
                      {% elif states(config.entity) | int <= 60 %}
                        color: yellowgreen;
                      {% elif states(config.entity) | int <= 70 %}
                        color: lightgreen;
                      {% elif states(config.entity) | int <= 80 %}
                        color: limegreen;
                      {% elif states(config.entity) | int <= 90 %}
                        color: green;
                      {% else %}
                        color: darkgreen;
                      {% endif %}
                    }
            - entity_id: sensor.some_battery_entity
              options:
                type: custom:bar-card
                animation: true
                max: 100
                height: 40px
                positions:
                  name: outside
                  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: 0px;
                    }
                    bar-card-card {
                      height: 35px;
                    }
                    bar-card-value {
                      color: white;
                    }
                    bar-card-name:after {
                      content: "\A Battery Type: {{ states(config.entity + '_type') }}";
                      white-space: pre;
                      font-size: 12px;
                      color: green;
                      font-weight: bold;
                    }
                    bar-card-name {
                      width: 250px;   
                      font-size: 13px;
                    }
                    ha-icon {
                      {% if states(config.entity) | int <= 10 %}
                        color: red;
                      {% elif states(config.entity) | int <= 20 %}
                        color: darkred;
                      {% elif states(config.entity) | int <= 30 %}
                        color: darkorange;
                      {% elif states(config.entity) | int <= 40 %}
                        color: orange;
                      {% elif states(config.entity) | int <= 50 %}
                        color: yellow;
                      {% elif states(config.entity) | int <= 60 %}
                        color: yellowgreen;
                      {% elif states(config.entity) | int <= 70 %}
                        color: lightgreen;
                      {% elif states(config.entity) | int <= 80 %}
                        color: limegreen;
                      {% elif states(config.entity) | int <= 90 %}
                        color: green;
                      {% else %}
                        color: darkgreen;
                      {% endif %}
                    }
          exclude:
            - entity_id: sensor.west_side_battery
            - entity_id: sensor.south_east_battery
            - entity_id: sensor.south_west_battery
            - entity_id: sensor.front_door_battery
        sort:
          method: state
          numeric: true
          reverse: false
        show_empty: false
    icon: mdi:battery

Chat GPT suggested a method where I could define a map of battery entities and battery types with an input text helper:

Input Text Helper with Map of Battery Entities and Types
input_text:
  battery_type_dict:
    name: Battery Type Dictionary
    initial: >
      {
        "sensor.pool_patio_lights_switch_battery": "CR2032",
        "sensor.bedroom_hallway_lights_switch_battery": "3x AAA"
      }

And then use custom::auto-entities with the dictionary:

Custom auto-entities using map from Input Text Helper
type: custom:auto-entities
card:
  title: Battery Status
  type: entities
  state_color: false
  show_header_toggle: false
filter:
  template: |
    {% set sensors = states('input_text.battery_type_dict') | from_json %}
    {% for sensor, battery_type in sensors.items() %}
      {
        "entity": "{{ sensor }}",
        "type": "custom:bar-card",
        "animation": true,
        "name": "{{ state_attr(sensor, 'friendly_name') }} Battery",
        "max": 100,
        "height": "40px",
        "columns": 1,
        "positions": {
          "name": "outside",
          "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: 0;
            }      
            bar-card-card {
              height: 40px;
            }
            bar-card-value {
              color: white;
            }
            bar-card-contentbar {
              color: red;
              font-weight: bold;
            }
            bar-card-name:after {
              content: "\A Battery Type: {{ battery_type }}";
              white-space: pre;
              font-size: 12px;
              color: green;
              font-weight: bold;
            }
            bar-card-name {
              width: 160px;          
            }
            ha-icon {
              {% if states(sensor) | int <= 10 %}
                color: red;
              {% elif states(sensor) | int <= 20 %}
                color: darkred;
              {% elif states(sensor) | int <= 30 %}
                color: darkorange;
              {% elif states(sensor) | int <= 40 %}
                color: orange;
              {% elif states(sensor) | int <= 50 %}
                color: yellow;
              {% elif states(sensor) | int <= 60 %}
                color: yellowgreen;
              {% elif states(sensor) | int <= 70 %}
                color: lightgreen;
              {% elif states(sensor) | int <= 80 %}
                color: limegreen;
              {% elif states(sensor) | int <= 90 %}
                color: green;
              {% else %}
                color: darkgreen;
              {% endif %}
            }
        }
      }
      {% if not loop.last %},{% endif %}
    {% endfor %}
sort:
  method: state
  numeric: true
  reverse: false
show_empty: false

I haven’t tried this yet, but it looks promising. It would be awesome if I could use the above to choose a list of custom battery entities by ID and corresponding battery types by ID (in the map), in addition to using the HA-Battery-Notes automatic sensors.

To avoid repeating the bar-card options when using multiple include filters in auto-entities, Chat GPT suggested to make a reusable YAML template for the bar-card configuration:

bar_card_template.yaml
entities:
  - &bar_card_template
    type: custom:bar-card
    animation: true
    max: 100
    height: 20px;
    columns: 1
    positions:
      name: outside
      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: |
        :host {
          border-style: none;
          border: none;
        }
        .card-content {
            padding: 10px;
        }      
        bar-card-card {
          height: 20px;
        }
        bar-card-value {
          color: white;          
        }
        bar-card-contentbar {
          color: red;
          font-weight: bold;
        }
        bar-card-name {
          width: 100px;
        }
        ha-icon {
          {% if states(config.entity) | int <= 10 %}
            color: red;
          {% elif states(config.entity) | int <= 20 %}
            color: darkred;
          {% elif states(config.entity) | int <= 30 %}
            color: darkorange;
          {% elif states(config.entity) | int <= 40 %}
            color: orange;
          {% elif states(config.entity) | int <= 50 %}
            color: yellow;
          {% elif states(config.entity) | int <= 60 %}
            color: yellowgreen;
          {% elif states(config.entity) | int <= 70 %}
            color: lightgreen;
          {% elif states(config.entity) | int <= 80 %}
            color: limegreen;
          {% elif states(config.entity) | int <= 90 %}
            color: green;
          {% else %}
            color: darkgreen;
          {% endif %}
        }
      
# Reference this template for each sensor
entities:
  - <<: *bar_card_template
    entity: sensor.pool_patio_lights_switch_battery
    name: Pool Patio Battery
  - <<: *bar_card_template
    entity: sensor.bedroom_hallway_lights_switch_battery
    name: Bedroom Hallway Battery

And then the dashboard card configuration:

Lovelace Dashboard Card using YAML Template
entities:
  - &bar_card_template
    type: custom:bar-card
    animation: true
    max: 100
    height: 20px;
    columns: 1
    positions:
      name: outside
      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: |
        :host {
          border-style: none;
          border: none;
        }
        .card-content {
            padding: 10px;
        }      
        bar-card-card {
          height: 20px;
        }
        bar-card-value {
          color: white;          
        }
        bar-card-contentbar {
          color: red;
          font-weight: bold;
        }
        bar-card-name {
          width: 100px;
        }
        ha-icon {
          {% if states(config.entity) | int <= 10 %}
            color: red;
          {% elif states(config.entity) | int <= 20 %}
            color: darkred;
          {% elif states(config.entity) | int <= 30 %}
            color: darkorange;
          {% elif states(config.entity) | int <= 40 %}
            color: orange;
          {% elif states(config.entity) | int <= 50 %}
            color: yellow;
          {% elif states(config.entity) | int <= 60 %}
            color: yellowgreen;
          {% elif states(config.entity) | int <= 70 %}
            color: lightgreen;
          {% elif states(config.entity) | int <= 80 %}
            color: limegreen;
          {% elif states(config.entity) | int <= 90 %}
            color: green;
          {% else %}
            color: darkgreen;
          {% endif %}
        }
      
# Reference this template for each sensor
entities:
  - <<: *bar_card_template
    entity: sensor.pool_patio_lights_switch_battery
    name: Pool Patio Battery
  - <<: *bar_card_template
    entity: sensor.bedroom_hallway_lights_switch_battery
    name: Bedroom Hallway Battery

Anyway, I’m glad that this forum is here and we can exchange ideas and code. I’ll keep playing with it to see what I can come up with and then post any updates.