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