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

Configuration Frontend
63

Install the File Editor add-in, then you can upload the file within that (in a browser)

64

brilliant, i will try that, thank you!

65

this is great, am getting there but struggeling to get the OilTank.png being recognised.

Up to now I have the level showing but I dont have a background.

Where should that /local/icons/OilTank.png be copied too? many thanks!

66

You need a folder in www called icons and the png should be stored there

image
image578×834 15.1 KB

local=www

67

many thanks. just tried and uploaded to www/icons/OilTank.png and copied Blue407’s code and adapted the entity name to what i use. . the preview in the visual editor shows the right litres but not the png…

Clearly i am doing something dumb, just not sure what…

Screenshot 2025-03-12 130927
Screenshot 2025-03-12 130927607×505 15.1 KB

type: custom:fluid-level-background-card
card:
  show_state: true
  show_name: false
  camera_view: auto
  type: picture-entity
  image: local/icons/OilTank.png
  entity: sensor.oil_volumeft
entity: sensor.oil_volumeft
fill_entity: sensor.oil_volumeft
background_color:
  - 61
  - 114
  - 62
severity:
  - value: 20
    color: red
  - value: 25
    color: yellow
  - value: 40
    color: blue
full_value: 100
grid_options:
  rows: 5
  columns: 9
68

Try clearing your browser cache and restart HA.

69

thank you for trying to help me! I just tried both but no luck.

70

You need to add / to image: /local/icons/OilTank.png

71

Thanks Zenia, I understood that my www folder is the same as /local/ as per LiQuid_cOOleds reponse? https://community.home-assistant.io/t/card-for-showing-liquids-fluid-level-background-card/758558/66?u=theragingfury

72

Did you fix it?
Here is mine ( snapshot)

image
image1456×1107 96.4 KB

73

no, i did not manage.
My png is in the www/icons/OilTank.png where, as i understand, www represents local.

My code

Screenshot 2025-03-12 162649
Screenshot 2025-03-12 162649574×751 62.2 KB

I notice that you mentioned the pdg shoudl be uploaded to /local/icons/png but your code has only /local/***png (without the /icons/ maybe that is my error?

74

I mean, it was missing backslash symbol / in front of local, but now I can see in your screenshot it is there.

75

it works. I uploaded the png via the configuration using the upload function rather that the file i manually copied using file editor.

Thank you both!

2 Likes
77

this isnt a transparent image just a heads up. Do you have the transparent png?

78

I think this image should be used as non-transparent in a picture-elements card: perhaps this image stands for the “main” image and the fluid-card is shown ON it. Please check how the author uses this image.

79

I would have to respectfully disagree. I can use the red propane tank image just fine in the setup and shows as it should. This water cylinder does not.

80

Just checked the image once again, you seem to be right, some central part of the image should be transparent.

81

Is it possible to dynamically fill this gas bottle with this integration?

bottle
bottle207×634 3.2 KB

Thanks

82

See examples above.

83

Sorry one thing I dont understand is how does this card know where to fill.

I can remove the inside of the bottle in GIMP, but will the integration just know where to add the fill effect?

What am I missing? I have not done this before by the way.

Thanks