The very first post is about a similar case.
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
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"
You need to use picture-elements card like was proposed in the 1st post.
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
That I don’t know, still appears on mine.
This looks brilliant.
What are you using for the graphs?
apexcharts card
type: custom:mod-card
style: |
ha-card {
border: 2px solid rgba(92, 100, 127, 0.2); /* Hvid ramme */
border-radius: 20px; /* Afrundede hjørner */
padding: 2px; /* Indvendig margin */
background-color: rgba(92, 100, 127, 0.1)
}}
card:
type: custom:fluid-level-background-card
card:
show_state: true
show_name: true
camera_view: auto
type: picture-entity
image: local/vandtankpalle12.png
entity: sensor.resterende_vand_i_tanken
card_mod:
style: |
ha-card {
position: absolute;
top: 10%;
left: -2%;
width: 105%;
height: 80%;
}
entity: sensor.resterende_vand_i_tanken
fill_entity: sensor.resterende_vand_i_tanken
severity:
- color:
- 82
- 171
- 255
value: 0
- color:
- 112
- 200
- 255
value: 20
- color:
- 56
- 179
- 255
value: 50
- color:
- 20
- 145
- 255
value: 80
full_value: 1100
grid_options:
columns: 9
rows: 1
2 Likes
Please share a png image, many people use these cubes in gardens.
Does anyone have any suggestions for a reliable water level sensor that I could use with this card? I’d like to install one in the reservoir of my hydroponics system.
Water container and pellet stove
site : Redirecting...
outdoor:
https://esphome.io/components/sensor/jsn_sr04thttps://esphome.io/components/sensor/jsn_sr04t
indoors
https://esphome.io/components/sensor/ultrasonic
VANDING BEHOLDER:
esphome:
name: vanding-beholder-indhold
esp8266:
board: d1_mini
# Enable login
logger:
# Enable Home Assistant API
api:
ota:
password: "1234564k4j4k4j4k4k4lm4jl4lj4lj4lj4"
wifi:
ssid: !secret wifi_ssid
password: !secret wifi_password
# Enable fallback hotspot (captive portal) in case wifi connection fails
ap:
ssid: "Vanding-Beholder-Indhold"
password: "h4hh4h4k4"
sensor:
- platform: wifi_signal
name: "WiFi Signal Sensor"
update_interval: 120s #to display WiFi signal strength
- platform: ultrasonic
trigger_pin: D5
echo_pin: D6
unit_of_measurement: "%"
icon: "mdi:water-percent"
accuracy_decimals: 0
update_interval: 20000ms
name: "Sweet Water storage" #You may change the tank name
filters:
- lambda: return (1-((x-.13)/0.90))*100;
- filter_out: nan
- platform: ultrasonic
trigger_pin: D5
echo_pin: D6
update_interval: 20000ms #5 minutes. You can change this value
name: "Resterende vand i tanken"
unit_of_measurement: "l"
accuracy_decimals: 0
filters:
- lambda: return (1-((x-.13)/0.90))*1000;
- filter_out: nan
It’s all laid up
Thanks so much for providing the simplified code and image.
I was also struggling with the original image posted which I want to use but it’s not transparent.
Has any got a transparent version of the cylinder image which can be used so the fluid level shows?
Hi,
is there a secret how to get the picture transparent? I can see the image and you can also guess from the edge that the water level is displayed in the background. However, it seems that the image covers everything. What am I doing wrong?
Thanks for the support!
Regards,
Tobias
One option is to use a free background remover
https://www.adobe.com/express/feature/image/remove-background
I didn’t know that one yet, years ago I found Lunapic at LunaPic.com Photo Editor Load tool, and still return if I need it…
what they do with all of that info you throw at them…
Saved your link and appreciate the info!
1 Like
Does anyone have a link to a horizontal oil tank png file and/or the yaml code to use with fluid level background card?
Thank you