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 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
level_color:
      - 68
      - 115
      - 159

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 level
6. 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.

Support

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