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