Lovelace: Bar Card

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.

@daistuckio Thank you for sharing your dashboard and code. I love the gradient bars!

1 Like

see Lovelace: Bar Card - #899 by Mariusthvdb and the dedicated post I did on it in the link below it)

Right, I found that one yesterday and installed it, I now have these _battery_type entities too :wink:

use device_class: battery?

Yes it does? you just need to specify a separate dash

filter:
  include:
    - device_class: battery
    - entity_id: *_battery_level
    - entity_id: '*_some_battery*'

you could also add a label: battery to those entities, and then select the label (but beware, in my setup that really hits hard on the system aka kills it, so I only use those with auto-entities in a template using {{label_entities('battery')}} )
and, not sure about Bard-card templates (never used it) but you can c&p any complete yaml block in an anchor.

edit
I read on, and now see that you list that as Yaml template at the bottom of your postā€¦ yep thats it.

but I think you donā€™t need that in the end, if you setup your filters alright

also, I am experimenting with the template-entity-row card and am almost ready, but the state doesnt colorize as I want it, so Ill first post that effort in card-mod, but the main body will be:

    - type: entities
      entities:
        - type: custom:template-entity-row
          entity: sensor.studenten_hygro_temp_battery
          state: >
            {{states(config.entity,with_unit=True)}}
          secondary: >
            Battery type: {{states(config.entity ~'_type')}}

and then feed that to auto-entities

edit

fixed itā€¦ :wink: I had a typo there.

1 Like

Thanks to @royf007, @Mariusthvdb and others contributing, Iā€™ve always wanted to improve my battery display use colour and be representative of the battery state. Wanted the bigger bar with colour also the colour based Icon but outside the bar.

Taking snippets of code from all the posts and what I had, created the following for my Zigbee sensors

Here is the code if anyone is interested
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
        animation: true
        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-backgroundbar { 
              border-radius: 12px;
              margin-top: 1px;
              background: grey;
              opacity: 50%;
            } 
            bar-card-currentbar { 
              border-radius: 12px;
              margin-top: 1px;
            }
            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: null
sort:
  method: state
  numeric: true
  reverse: false
show_empty: false

hehe, yes, but you didnt fix the ha-icon templateā€¦ :wink:

2 Likes

Thanks @Mariusthvdb Looks like we are inspiring others :slight_smile:

@BambamNZ Glad you were able to upgrade your dashboard. Looks nice :slight_smile:

1 Like

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
1 Like

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

2 Likes

shouldnā€™t the colors be reversed? (with the green close to 100%)

@Gluwc would it be possible to have a sensor dictate the value in the ā€œtargetā€ option? I mean have a dynamic value in there

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?

First, re-check docs for cardmod about a proper syntax, you got a keyword ā€œcard_modā€ missing.

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

card-mod is a SEPARATE plugin

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

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 -