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
7 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

4 Likes
5

Can someone help me please i have tried following the code online for this card but when i do the water level bar sits off the card to the bottom left and i cannot get the bar to move back please see my code below.
I have tried adjusting the px values and nothing changes.
error

type: picture-elements
image: /local/Picture.png
card_mod:
style:
hui-image $: |
img {
z-index: 1 !important;
position: relative !important;
right: 0px;
top: 0px;
width: 100% !important;
opacity: 1;
}
elements:

  • type: custom:fluid-level-background-card
    entity: sensor.pressure_sensor_percentage
    style:
    z-index: 1;
    position: absolute;
    left: 50%; # Adjust these values
    top: 50%; # Adjust these values
    transform: translate(-50%, -50%);
    card_mod:
    style: |
    ha-card {
    text-align: center;
    –ha-card-border-color: #ff000000 !important;
    }
    #container, .container {
    width: 110px !important;
    height: 180px !important;
    position: relative !important;
    opacity: 0.8;
    }
    @media (max-width: 600px) {
    #container, .container {
    width: 42px !important;
    height: 72px !important;
    left: 30%; # Adjust these values
    top: 40%; # Adjust these values
    }
    }
    @media (min-width: 601px) and (max-width: 900px) {
    #container, .container {
    width: 85px !important;
    height: 150px !important;
    left: 35%; # Adjust these values
    top: 45%; # Adjust these values
    }
    }
    @media (min-width: 901px) and (max-width: 1440px) {
    #container, .container {
    width: 52px !important;
    height: 82px !important;
    left: 40%; # Adjust these values
    top: 50%; # Adjust these values
    }
    }level_color: rgba(0,0,255,1);
    card:
    type: custom:card-templater
    card:
    type: entities
    entity: sensor.pressure_sensor_percentage
    title_template: ‘{{states(’‘sensor.pressure_sensor_percentage’')|round(0)}}% ’
    show_header_toggle: false
    show_name: true
    card:
    type: custom:bar-card
    color: rgba(0,0,0,1);
    position:
    value: ‘off’;
    card_mod:
    style: |
    ha-card {
    –ha-card-header-font-size: 11px;
    height: 225px !important;
    }
    .card-header {
    justify-content: center !important;
    }
    .name {
    overflow: unset !important;
    }
6
  1. Post a code according to Community rules.
  2. Your code contains 4 different cards and card-mod. This thread is just for one of them. I would suggest you “isolate” your issue by solving issues with ONE particular fluid card. If you found this code in Internet and trying to use it blindly - not a proper way for a beginner.
7

I have got the fluid card working correctly it is just off the card to the bottom left.
I haven’t just blindly starting using the code I have been trying to work with it.
the cards you see pictures of in this page also use multiple cards to achieve the look.

8

OK, then fix a formatting of the posted code.

9

Can you point me in the right direction that i would learn how to do that bit please.

10

You’re welcome.

Community rules are here.

Here is about posting a code.
I usually post a code placing it between triple backticks:
image
where that “backtick” button is located right below an “ESC” button on a keyboard (may be different on Apple keyboards).

Posting a properly formatted code is crucial to get a support. Note that many “helpers” copy/paste a code into their setups to help with an issue.