[Example] Auto-Entity Battery Card with Sliders

[Zerosignal84]

With the new slider update now showing battery states as a percentage of the bar I decided to switch my old auto populated battery card over to bubble!

Cards & Integrations used:

1. The excellent Battery Notes integration - https://github.com/andrew-codechimp/HA-Battery-Notes
2. Lovelace auto entities card - https://github.com/thomasloven/lovelace-auto-entities
3. Bubblecard 2.5 Beta 9

This is what the current auto population looks like, I might play around with the styling some more or maybe event take some advice from the gurus here.

Hope somebody finds this useful!

type: custom:auto-entities
card:
  square: false
  type: grid
  columns: 1
card_param: cards
filter:
  include:
    - entity_id: sensor.*battery_plus*
      options:
        type: custom:bubble-card
        card_type: button
        button_type: slider
        show_last_changed: true
        show_state: true
        read_only_slider: true
        scrolling_effect: false
        sub_button:
          - show_state: false
            show_icon: false
            state_background: false
            show_background: false
            show_attribute: true
            attribute: battery_type_and_quantity
        modules:
          - default
  exclude: []
sort:
  method: state
  numeric: true
  reverse: false
show_empty: true

[MetalOnes]

I like this, thanks!
I added conditional backgrounds by adding this style to the cards. Adjust the thresholds and RGB values as desired.

.bubble-range-fill {  
  background-color: rgba(${state > 50.0 ?  '39, 174, 96' : state > 20.0 ? '243, 156, 18' : '192, 57, 43'}, 0.4) !important;
}

[viatro]

For those who want to automatically get rid of 'Battery+' part of entity name, here is template filter version:

type: custom:auto-entities
card:
  type: vertical-stack
card_param: cards
filter:
  template: >-
    {% for state in states.sensor if "battery_plus" in state.entity_id -%}
      {{
        {
          "type": "custom:bubble-card",
          "card_type": "button",
          "button_type": "slider",
          "entity": state.entity_id,
          "name": state.attributes.friendly_name.split(' Battery')[0],
          "show_last_changed": true,
          "show_state": true,
          "read_only_slider": true,
          "scrolling_effect": false,
          "sub_button": [
            {
              "show_state": false,
              "show_icon": false,
              "state_background": false,
              "show_background": false,
              "show_attribute": true,
              "attribute": "battery_type_and_quantity"
            }
          ],
          "modules": [
            "default"
          ]
        }
      }},
    {%- endfor %}
sort:
  method: state
  numeric: true
  reverse: false
show_empty: true

[palhaca]

i had some trouble so i leave my version for those that had the same problem:

type: custom:auto-entities
card:
  square: false
  type: grid
  columns: 1
card_param: cards
filter:
  include:
    - entity_id: sensor.*battery*
      options:
        type: custom:bubble-card
        card_type: button
        button_type: slider
        show_last_changed: true
        show_state: true
        read_only_slider: true
        scrolling_effect: false
        styles: |-
          .bubble-range-fill {  
            background-color: rgba(${state > 50.0 ?  '39, 174, 96' : state > 20.0 ? '243, 156, 18' : '192, 57, 43'}, 0.4) !important;
          }
        sub_button:
          - show_state: false
            show_icon: false
            state_background: false
            show_background: false
            show_attribute: true
            attribute: battery_type_and_quantity
        modules:
          - default
  exclude: []
sort:
  method: state
  numeric: true
  reverse: false
  ip: false
  ignore_case: false
show_empty: true
visibility:
  - condition: state
    state_not: ""