Card for showing Liquids (fluid-level-background-card)

Configuration Frontend
21

Hi! I’m a bit stuck… I’m not able to change the font size of the value.
I want to show “-4890” but it’s only showing a few caracters.
2024-11-29 22_16_15-Overzicht – Home Assistant
I allready modified the font size but it’s not changing anything.

card_mod:
          style: |
            ha-card {
              --ha-card-header-font-size: 13px;
              height: 225px !important;
            }
            .card-header {
             justify-content: center !important;
            }
            .name {
             overflow: unset !important;
            }

Thanks

22

value is negative. -4.89
and also paste complete template code. and if you just want to change the font-size kindly read card-mod docs

23

Resolved!
I had to enter “important!” when changing font size…

1 Like
24

Thanks alot for share , would you upload the png file for the tank .thanks

25

Sure, but I also got this here :
https://community.home-assistant.io/t/card-for-showing-liquids-fluid-level-background-card/758558/6?u=donder24

26

can you share cylinder3.png pls

27

can share the tank image.png
pls

28

Hi All,

hoping someone can help me fix this card not quiet showing correctly
the value doesn’t seam to be rounding to whole numbers only resalting in it getting cut off.

image

type: picture-elements
elements:
  - type: custom:fluid-level-background-card
    entity: input_number.homeseer_2056
    style:
      z-index: 1
      top: 50%
      left: 50%
      transform: translate(-50%, -50%)
      width: 100%
      height: 100%
    card_mod:
      style: |
        ha-card {
          text-align: center;
          --ha-card-border-color: transparent !important;
          box-shadow: none !important;
          background: none !important;
          border-radius: 50px;
          overflow: hidden;
        }  
        #container, .container {
          width: 23.3% !important;
          height: 70% !important;
          position: relative !important;
          border-radius: 14px !important;
          margin-left: 38.2%;
          margin-top: 8%;
          # transform: translate(150%, -50%);
          opacity: 0.9;
          overflow: hidden;
        }
    level_color:
      - 82
      - 171
      - 255
    severity:
      - color:
          - 255
          - 71
          - 71
        value: 0
      - color:
          - 112
          - 200
          - 255
        value: 20
      - color:
          - 56
          - 179
          - 255
        value: 50
      - color:
          - 0
          - 145
          - 255
        value: 80
    fill_entity: null
    full_value: "100"
    card:
      type: custom:card-templater
      card:
        type: entity
        entity: input_number.homeseer_2056
        title_template: "{{states(''input_number.homeseer_2056'')|round(0)}}% "
        show_header_toggle: false
        show_name: false
        show_icon: false
        icon: mdi.water
        position:
          value: "off"
        card_mod:
          style: |
            ha-card {
             --ha-card-header-font-size: 14px;
               height: 225px !important;
               
            }
            .card-header {
             justify-content: center !important;
            }
            .name {
             overflow: unset !important;
            }
title: Water Tank
image: /api/image/serve/3162060fd25ddc962f6f6d4da1148cde/512x512
card_mod:
  style:
    hui-image $: |
      img {
        z-index: 1 !important;
        position: relative !important;
        right: 0px;
        top: 0px;
        width: 100% !important;
        opacity: 1
      }
29

Helo
I’m a beginner on HA. I want to add Fluid Level to my water tank. I added Lovelace Fluid Level Background Card but I don’t know how to use it. Can you please help me understand how to install this card? Thank you in advance

30

The easiest way to install a custom card is by using HACS.

31

Thank you very much for your replay. I finally managed to
install it. I have an EPTTECH TS0601 Liquid Level Probe. I use the entity sonsensor.0x583bc2fffe031a6f_liquid_depth which measures the depth of the liquid but on my map the wave level does not move. I used lots of configurations but without result. I don’t understand where the problem is. Attached photo and my code.

ScreenShot 01

type: custom:fluid-level-background-card
card:
  type: entity
  entity: sensor.0x583bc2fffe031a6f_liquid_depth
needle: true
severity: []
max: 130
name: Niveau
full_value: "110"
entity: sensor.0x583bc2fffe031a6f_liquid_depth
fill_entity: sensor.0x583bc2fffe031a6f_liquid_depth
32

I’ve had similar problem days ago, when i started with this card. The point is (perhaps a bit too hidden) that by default it assumes percents, so full is 100 and empty is 0. If you want to take into account real numbers, you must define full_value according to your needs. In your case you have current level 0,91m and full_value set to 110, that’s why level is at the bottom. If you change full_value to, say, 5 (for test) it will clime.
(EDIT: i don’t think “max” is used in this card…)

Also note that severity settings assumes percents even if you have full_value set. So, for example if you have set your full_value to 10 and you want red color below, say, 2 then: 2 is 20% from 10, so set severity to 20.

33

I have a sensor in % but it always remains at 100% so it cannot be used with this card. Is it possible to convert the value of my “sensor.0x583bc2fffe031a6f_installation_height” which is in mm into % in another probe?

34

This option does not belong here.

Better to check with an increased height of this card.

35

I would like to convert my volume entity (mm) into %. Is there any way to do it me with a code to perform this task ?

36

Hello,

I am trying to implement this great fluid-level card, but the graphic image is not loading for me. Could you tell me if i need to download an image and store it to my local folder, or if the card should automatically download the image from the web?
Thank you

38

Right click on the image Ftown1404 posted Aug 24. Save Image As …
It should download as a .png image.
Give it a name for example watertank.png
In Home Assistant, go into ‘File editor’.
Browse to the folder /www/
Create a folder eg. /icons/
Go into that folder
Click the upload button (arrow up)
Select choose file
Browse (on your local computer) to the image file you downloaded and renamed to ‘watertank.png’
Upload
In the YAML, for the img-path type:
/local/icons/watertank.png

40

Thank you very much.

41

I’m really struggling to get this to do what I need. At the moment I can see a very narrow border thats changing level, nothing over the main image, What am I doing wrong and how can I get a proper water level over the jar?

type: custom:fluid-level-background-card
card:
  type: picture
  image: local/icons/fueltank.png
entity: number.oil_oil_tank_remaining
style:
  z-index: 1
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  width: 100%
  height: 100%
  fill_entity: null
  full_value: "100"
severity:
  - color:
      - 82
      - 171
      - 255
    value: 0
  - color:
      - 112
      - 200
      - 255
    value: 20
  - color:
      - 56
      - 179
      - 255
    value: 50
  - color:
      - 0
      - 145
      - 255
    value: 80
full_value: "100"
42

Are you using this card inside picture-elements?
If yes - then the “style” option cannot contain this:

Also, playing with “z-index” - is it needed? Or did you just copy/pasted this code from somewhere?