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

Configuration Frontend
84

The very first post is about a similar case.

85

So I feel like I am close,

But its filling the entire card still. My image is now transparent inside the gas tank.

Its not just filling inside the tank, the whole card background is filling?

Any ideas?

Thanks

image
image278×784 17 KB

type: custom:fluid-level-background-card
card:
  show_state: true
  show_name: false
  camera_view: auto
  type: picture-entity
  image: /local/images/bottle.png
  entity: sensor.camper_gas_weight_left_bottle_2
entity: sensor.camper_gas_weight_left_bottle_2
fill_entity: sensor.camper_gas_weight_left_bottle_2
background_color:
  - 0
  - 143
  - 81
severity:
  - value: 42
    color:
      - 255
      - 0
      - 0
full_value: "100"
86

You need to use picture-elements card like was proposed in the 1st post.

87

How do you get rid of the overlay on the outside of the card (specifically Mushroom)?

type: custom:fluid-level-background-card
card:
  type: picture-elements
  elements:
    - type: state-badge
      entity: sensor.smartoiltank
      style:
        color: transparent
        top: 54%
        left: 37%
      tap_action:
        action: none
      hold_action:
        action: none
  image: >-
    /media/local/OilTank_transparent3.png?authSig=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiI4OGI0ZDI4MzViNWQ0MjNiYmU2ZWRlMWMzNDc3ZjVjYiIsInBhdGgiOiIvbWVkaWEvbG9jYWwvT2lsVGFua190cmFuc3BhcmVudDMucG5nIiwicGFyYW1zIjpbXSwiaWF0IjoxNzQ0NTcxODQxLCJleHAiOjE3NDQ2NTgyNDF9.eyoi3r1pQkyZNsQFsovxBi9GGW0C6iXx7WQFl4UQ8Pc
entity: sensor.smartoiltank
fill_entity: sensor.smartoiltank
theme: mushroom
severity:
  - value: 187
    color: red
  - value: 180
    color: green
  - null
full_value: "330"
grid_options:
  columns: 6
  rows: auto

oil
oil453×373 15 KB