Fluid Level (Animated) Background Card [original]

Share your Projects! Dashboards & Frontend
1

Tired of boring, static backgrounds in your Home Assistant Lovelace UI?

Want to add a touch of dynamism and visual interest?

Introducing the lovelace-fluid-level-background-card, a custom card that renders a mesmerizing animated fluid level behind any other card in your Lovelace UI.

This card is perfect for:

  • Visualizing sensor data in a captivating way, like water tank levels or battery gauges.
  • Creating unique and eye-catching dashboards.
  • Adding a touch of personality to your Home Assistant setup.

Key features:

  • Fully customizable fluid-level animation.
  • Works seamlessly with any other card type.
  • Easy to configure with a variety of options.

https://github.com/swingerman/lovelace-fluid-level-background-card/raw/master/docs/assets/grid-cards.gif?raw=true(image larger than 3 MB)

Configurable options

Options can be configured in the UI or 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 colour of the fluid level
  • background_color - the colour of the background
  • severity - a list of severity levels that will change the colour of the fluid level based on the value of the sensor entity
6 Likes
2

This looks beautiful! Should work great with my kettle’s water level sensor.
Seems it doesn’t fully support card resizing in the new Sections view. I hope it’ll be fixed in the future though.

3

Amazing!

I found this animation on a javascript library and hoping someone could implement it on HA as well and you did, congratzz!!

4

Awesome Work, Man :slight_smile:
water-tank-2-gif
water-tank-on-roof-transparent

2 Likes