{"id":13625238,"url":"https://github.com/swingerman/lovelace-fluid-level-background-card","last_synced_at":"2025-12-30T00:06:21.119Z","repository":{"id":36985721,"uuid":"431901513","full_name":"swingerman/lovelace-fluid-level-background-card","owner":"swingerman","description":"This card wraps any other cards and renders a fluid background behind them.","archived":false,"fork":false,"pushed_at":"2024-10-27T13:32:51.000Z","size":18339,"stargazers_count":39,"open_issues_count":6,"forks_count":7,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-27T15:14:18.071Z","etag":null,"topics":["custom-card","home-assistant","lovelace-card"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/swingerman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["swingerman"]}},"created_at":"2021-11-25T15:56:58.000Z","updated_at":"2024-10-27T13:32:53.000Z","dependencies_parsed_at":"2023-11-24T22:31:11.591Z","dependency_job_id":"85356d55-34fb-421f-a025-b700270f1542","html_url":"https://github.com/swingerman/lovelace-fluid-level-background-card","commit_stats":null,"previous_names":[],"tags_count":38,"template":false,"template_full_name":"custom-cards/boilerplate-card","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swingerman%2Flovelace-fluid-level-background-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swingerman%2Flovelace-fluid-level-background-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swingerman%2Flovelace-fluid-level-background-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swingerman%2Flovelace-fluid-level-background-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/swingerman","download_url":"https://codeload.github.com/swingerman/lovelace-fluid-level-background-card/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223700304,"owners_count":17188294,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-card","home-assistant","lovelace-card"],"created_at":"2024-08-01T21:01:52.889Z","updated_at":"2025-12-30T00:06:21.114Z","avatar_url":"https://github.com/swingerman.png","language":"TypeScript","funding_links":["https://github.com/sponsors/swingerman","https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=S6NC9BYVDDJMA\u0026source=url","https://www.buymeacoffee.com/swingerman"],"categories":["TypeScript"],"sub_categories":[],"readme":"# Lovelace Fluid Level Background Card by [@swingerman](https://www.github.com/swingerman)\n\n[![hacs_badge](https://img.shields.io/badge/HACS-Default-41BDF5.svg?style=for-the-badge)](https://github.com/swingerman/lovelace-fluid-level-background-card) ![GitHub release (latest by date)](https://img.shields.io/github/downloads/swingerman/lovelace-fluid-level-background-card/total?style=for-the-badge)\n![Release](https://img.shields.io/github/v/release/swingerman/lovelace-fluid-level-background-card?style=for-the-badge)\n\nA 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.\n\n\u003cimg style=\"border: 5px solid #767676;border-radius: 10px;box-sizing: border-box;\" src=\"https://github.com/swingerman/lovelace-fluid-level-background-card/blob/master/docs/assets/grid-cards.gif?raw=true\" alt=\"Demo\"\u003e\n\n[![Open your Home Assistant instance and open a repository inside the Home Assistant Community Store.](https://my.home-assistant.io/badges/hacs_repository.svg)](https://my.home-assistant.io/redirect/hacs_repository/?owner=swingerman\u0026repository=lovelace-fluid-level-background-card\u0026category=Plugin)\n\n\n## Configurable options\n\nOptions can be cofigured in the UI or in the card configuration. The following options are available:\n\n- `entity` - the entity that controls the fluid level\n- `fill_entity` - the entity that controls the fill state of the fluid level\n- `full_value` - the maximum value of the sensor entity\n- `level_color` - the color of the fluid level\n- `background_color` - the color of the background\n- `severity` - a list of severity levels that will change the color of the fluid level based on the value of the sensor entity\n- `top_margin` - a percentage (0-20%) margin from the top to prevent wave clipping at 100% level\n\n\n---\n\n\n[![Donate](https://img.shields.io/badge/Donate-PayPal-yellowgreen?style=for-the-badge\u0026logo=paypal)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=S6NC9BYVDDJMA\u0026source=url)\n[![Donate](https://img.shields.io/badge/-buy_me_a%C2%A0coffee-gray?style=for-the-badge\u0026logo=buy-me-a-coffee)](https://www.buymeacoffee.com/swingerman)\n\n\nThe fluid effect is an improved version of [@aarcorcaci](https://github.com/aarcoraci)'s [fluid-meter](https://github.com/aarcoraci/javascript-fluid-meter), improved and ported to typescript.\n\n\n### Example config\n\n```yaml\ntype: custom:fluid-level-background-card\ncard:\n    type: glance\n    entities:\n    - entity: person.john_doe\nentity: sensor.battery_level\nfill_entity: binary_sensor.charging\nfull_value: 100\nlevel_color:\n      - 68\n      - 115\n      - 159\n      - 1\nbackground_color:\n      - 255\n      - 255\n      - 0\n      - 1\nrandom_start: true\ntop_margin: 5\n```\n\n### Supported Color Formats\n\n```yaml\nlevel_color: [68,115,159,1]\nlevel_color:\n      - 255\n      - 255\n      - 0\n      - 1\nlevel_color: red\nlevel_color: 'red'\nlevel_color: '#ff0000'\nlevel_color: var(--red-color)\nlevel_color: 'var(--red-color)'\nlevel_color: rgb(242,142,28)\nlevel_color: 'rgb(242,142,28)'\nlevel_color: rgba(242,142,28,1)\nlevel_color: 'rgba(242,142,28,1)'\n```\n\nNote: RGBA alpha channel can be set only in the yaml configuration.\n\n## How To Install\n\nInstall it using HACS:\n\n1. Add custom repository: \u003chttps://github.com/swingerman/lovelace-fluid-level-background-card\u003e\n2. Reload lovelace\n\n## How To Use\n\nNote: 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)\n\n1. Add this card using the UI (serach for fluid level background card)\n2. Select the card you would like to render for your entities\n3. Select the level entity - this will control the level\n4. select a fill state entity - this will enable bubbles while on\n5. set the dsired color for the fluid leve\n6. set the desired color for the background\n7. 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.\n\n## Use sensor value instead percentage\n\nIf 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.\n\n## Severity\n\nYou can set the severity of the fluid level by using the `severity` property. The severity is a list of objects with the following properties:\n\n- `value`: The level at which the severity should be applied\n- `color`: The color of the severity. use can use any of the [supported color formats](#supported-color-formats)\n\n```yaml\nseverity:\n  - value: 20\n    color: red\n  - value: 50\n    color: yellow\n  - value: 80\n    color: green\n```\n\n## Randomly Delayed Start\n\nYou can set the `random_start` property to true to start the fluid level at a random delay. This could be useful when mnay cards are used in the same view and you want to avoid the same start time for all of them.\n\n```yaml\n\n## Support\n\nHey dude! Help me out for a couple of :beers: or a :coffee:!\n\n[![Donate](https://img.shields.io/badge/Donate-PayPal-yellowgreen?style=for-the-badge\u0026logo=paypal)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=S6NC9BYVDDJMA\u0026source=url)\n[![Donate](https://img.shields.io/badge/-buy_me_a%C2%A0coffee-gray?style=for-the-badge\u0026logo=buy-me-a-coffee)](https://www.buymeacoffee.com/swingerman)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswingerman%2Flovelace-fluid-level-background-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fswingerman%2Flovelace-fluid-level-background-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswingerman%2Flovelace-fluid-level-background-card/lists"}