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
10 Likes
Card for liquid
Fluid-level-background-card - card for showing levels for liquids etc
Card for showing Liquids (fluid-level-background-card)
Dynamically fill entity picture?
How to graphically represent gas bottle contents
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

6 Likes
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.
8

OK, then fix a formatting of the posted code.

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.

11

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

I have tried adjusting the values that say adjust these values but this doesn’t seam to make any difference to the card please can someone point me in the right direction?

Thanks In Advance

12

Mass-deleting your posts which were answered by other users is a bad practice.

13

Ok was just cleaning the page up and cleaning up the mistake i made. Any chance you could point me in the direction of some help on my issue?

14

Yes, but 1st we need to clean up a posted code.
It lost indentation((((

15

How can modify width ?

edit:
actually I haven’t managed to modify cards width
edit2:
This is my card with modified height. I tried everything to change width with mo luck.

type: custom:fluid-level-background-card
card:
  show_name: false
  show_icon: false
  show_state: true
  type: glance
  entities:
    - entity: sensor.water_level_cm_preserved
      tap_action:
        action: none
      hold_action:
        action: none
  columns: 1
  state_color: false
full_value: "330"
fill_entity: switch.esphome_web_ec22ad_relay_underwater_pump
entity: sensor.water_level_cm_preserved
severity: []
tap_action:
  action: navigate
  navigation_path: /lovelace/water-volume
hold_action:
  action: none
background_color:
  - 226
  - 223
  - 223
card_mod:
  style: |
    ha-card {
      --ha-card-header-font-size: 16px !important;
      height: 200px !important;
    }
    .card-header {
     justify-content: center !important;
    }
    .name {
     overflow: unset !important;
    }
16

I believe you can edit old posts instead of deleting them, for future options…

For this last post, it could be edited for example. The code block is great, but the text pasted in needs to have proper indentation as it would in Home Assistant. If you’ve lost your indentation in the card I’d probably start over and migrate your tweaks into a blank slate so you have the proper indentation.

18

This is excellent. Please can you share the card code?

Are you using a transparent gif?

19

I am trying to get this working, but really struggling.
I have created a card with the empty fluid tank.
Another card for this animation, which shows a moving fluid with the correct percentage. How do I put them together?

Is there a simple set of instructions on how to configure it from scratch?

I tried googling for examples of code, but none helped. Also searched on this HA forum for examples, again no decent examples to work from of the code needed.

20

Hi thanks for your great work.

I created my own water heater card.

Like this.

image
image348×416 49.6 KB

Hope this message can help others to enjoy this wonderful card.

My simple config is:

type: custom:fluid-level-background-card
card:
  show_state: true
  show_name: false
  camera_view: auto
  type: picture-entity
  image: local/tank.svg
  entity: sensor.hybrid_water_heater_tank_level
entity: sensor.hybrid_water_heater_tank_level
fill_entity: sensor.hybrid_water_heater_tank_level
background_color:
  - 254
  - 254
  - 254
full_value: 100
grid_options:
  rows: 3
  columns: 3
1 Like
21

I am trying out this card and it’s great but I have a problem with my image. I downloaded a water tank image and made the inner part transparent. However the fluid level doesn’t match the actual level - it appears to show the tank more full than it is. I think this is down to my image. Can anyone have a look at my image and advise what the problem is? Many Thanks.

watertank3
watertank31214×1313 59.6 KB

22

Hi,
I am a noob and recently joined the HA movement to improve and automate life…
programming skills & understanding software architecture is still at beginner level
but after many hours I manage to get things to work.

I really like this project…
A lot of thanks to the peeps involvement and discussions in this project.
I managed to put some code together to show the background and then
the animated water and show the statically placed % value.

Then I had a brain wave and wanted to vertically shift the % value
riding on the vertically shifting water meniscus.

Got inspired with the idea to program a button with the % value for the vertical shift
which now works and shifts on its own
But somehow the water animation (vertical shift and waves) is missing in action…

Instead of the expected water animation in the window either
all is transparent or
all white shows or
all white shows with green waves moving at the bottom.

Cannot seem to get the water animation vertical movement and related water color to show.
I am using a png background of a simple jar outline which is transparent in and out of the jar outline to make sure the water is not obscured .

My question is… is it actually possible to code this idea or do I need to look at a
different implementation or tool to use to implement or is there a layer system followed
that has to be re-ordered?

I would really appreciate any constructive help and
happy to help clarify doubts in my query…

Thanks

23

Hello, I’mnot sure I understand what you would like to achieve.
I towuld be nice to see some screenshots or drawing so I understand

24

I’d like to know if it’s possible to make the background transparent… I’m having trouble.

My code, my image. I’d also like to know if it’s possible to reduce the thickness of the card… It’s “thick”.

> type: custom:fluid-level-background-card
> entity: sensor.percentual_de_combustivel
> min: 0
> max: 100
> shape: rect
> wave:
>   animated: true
>   speed: 1.2
>   amplitude: 16
> fill:
>   color: "#00c8ff"
>   background: transparent
> card:
>   type: entity
>   entity: sensor.percentual_de_combustivel
>   name: Combustível
>   icon: mdi:gas-station
>   state_color: false
> card_mod:
>   style: |
>     ha-card {
>       background: transparent !important;
>       box-shadow: none !important;
>       border: none !important;
>       margin-right: 10px;
>       border-radius: 20px;
>       overflow: hidden;
>     }

image
image1703×529 56.4 KB