Lovelace Fluid Level Background Card by @swingerman

A card that wraps other card or cards and renders a fluid level background behind them. The fluid level is controlled by a sensor entity and the background color can be set to any color. The card is designed to be used with any other card, including grid and stack cards.

Configurable options

Options can be cofigured in the UI or in the card configuration. The following options are available:

• entity - the entity that controls the fluid level
• fill_entity - the entity that controls the fill state of the fluid level
• full_value - the maximum value of the sensor entity
• level_color - the color of the fluid level
• background_color - the color of the background
• severity - a list of severity levels that will change the color of the fluid level based on the value of the sensor entity

---

The fluid effect is an improved version of @aarcorcaci's fluid-meter, improved and ported to typescript.

Example config

type: custom:fluid-level-background-card
card:
    type: glance
    entities:
    - entity: person.john_doe
entity: sensor.battery_level
fill_entity: binary_sensor.charging
full_value: 100
level_color:
      - 68
      - 115
      - 159
background_color:
      - 255
      - 255
      - 0

Supported Color Formats

level_color: [68,115,159]
level_color:
      - 255
      - 255
      - 0
level_color: red
level_color: 'red'
level_color: '#ff0000'
level_color: var(--red-color)
level_color: 'var(--red-color)'
level_color: rgb(242,142,28)
level_color: 'rgb(242,142,28)'

Note: rgba values are not supported. The alpha chanel will be ignored.

How To Install

Install it using HACS:

1. Add custom repository: https://github.com/swingerman/lovelace-fluid-level-background-card
2. Reload lovelace

How To Use

Note: This card is a wrapper. This means that it's designed to wrap other existing lovelace cards, so you welcome to use any card (including grid and stack cards)

1. Add this card using the UI (serach for fluid level background card)
2. Select the card you would like to render for your entities
3. Select the level entity - this will control the level
4. select a fill state entity - this will enable bubbles while on
5. set the dsired color for the fluid leve
6. set the desired color for the background
7. set actions. Note: as this card is a wrapper only set actions if you aim to interact with the level entity, otherwise set actions to none.

Use sensor value instead percentage

If you want to use a sensor value instead of a percentage, you can use the full_value property to set the maximum value of the sensor. The card will then calculate the percentage based on the sensor value and the full_value property.

Severity

You can set the severity of the fluid level by using the severity property. The severity is a list of objects with the following properties:

• value: The level at which the severity should be applied
• color: The color of the severity. use can use any of the supported color formats

severity:
  - value: 20
    color: red
  - value: 50
    color: yellow
  - value: 80
    color: green

Support

Hey dude! Help me out for a couple of 🍻 or a ☕!