Ftown1404
August 11, 2024, 9:59pm
8
I have saw your post on the Github as well. I have been using it for a few months, but now that I’m getting everything working, I’m trying to polish and tweak for greater functionality and eye candy. I know when I first found the card, there was not a lot of info on it here in the forums and it didn’t have it’s own discussion post like most cards do. So I wanted to highlight it and show off it’s capabilities from someone who struggles outside of YAML
Hoping this will help shine a line on it and more people start using it and people way smarter than me can really make it shine.
1 Like
I would be happy if you create a new thread in “Share your projects” dedicated to this card. And you may post your nice example card there. Shame that this great card does not have it’s dedicated thread yet.
swingerman
August 12, 2024, 8:04am
10
Thanks, @Ftown1404 , for using and sharing my card. I am amazed at what you did with it.
3 Likes
Ftown1404
August 12, 2024, 1:41pm
11
You made it all possible, so thank you! Would love for an official post from you showcasing your card. That way everyone can show off, ask for help, etc. like most other cards. This card definetly deserves for you to show off.
Oh I like this for my sump pump well.
As I said - YOU may create this thread, call it “xxxxx card”, add a link to GitHub to the 1st post, then your example as the 2nd post.
Ftown1404
August 13, 2024, 2:22pm
14
No, I got what you said. My reply was to swingerman, the creator.
ArnisV
November 14, 2024, 5:18pm
16
hi,
my code
type: custom:fluid-level-background-card
card:
show_state: true
show_name: false
camera_view: auto
type: picture-entity
image: /api/image/serve/403d557dbc269e3587efba40051fcc21/512x512
entity: sensor.mi_10_battery_level
entity: sensor.mi_10_battery_level
fill_entity: sensor.mi_10_battery_level
background_color:
- 0
- 143
- 81
severity:
- value: 42
color:
- 255
- 0
- 0
full_value: "100"
I found gas tank on internet. with Gimp erased tank middle or change color to alpha. save as png
and entity: sensor.mi_10_battery_level is just testing for card. before I get up scale installation
roshi112
November 21, 2024, 2:57pm
17
there is absolutely no need to add media queries as you can do it more dynamic, I loved your creativity btw,…
type: picture-elements
elements:
- type: custom:fluid-level-background-card
entity: sensor.water_tank_pico_w_jsn_sr04t
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: input_boolean.water_tank_filling
full_value: "110"
card:
type: custom:card-templater
card:
type: entity
entity: sensor.water_tank_pico_w_jsn_sr04t
title_template: "{{states(''sensor.water_tank_pico_w_jsn_sr04t'')|round(0)}}% "
show_header_toggle: false
show_name: false
name: Water
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 Level
image: /api/image/serve/28c8b426342f41911f00efe171696668/512x512
card_mod:
style:
hui-image $: |
img {
z-index: 1 !important;
position: relative !important;
right: 0px;
top: 0px;
width: 100% !important;
opacity: 1
}
roshi112
November 25, 2024, 2:51am
18
roshi112
November 25, 2024, 7:07am
19
1 Like
The card’s author created this thread, can be used for discussing the card:
Tired of boring, static backgrounds in your Home Assistant Lovelace UI?
Want to add a touch of dynamism and visual interest?
Introducing the lovelace-fluid-level-background-card, a custom card that renders a mesmerizing animated fluid level behind any other card in your Lovelace UI.
This card is perfect for:
Visualizing sensor data in a captivating way, like water tank levels or battery gauges.
Creating unique and eye-catching dashboards.
Adding a touch of personality to your Home Assistant…
1 Like
Donder24
November 29, 2024, 9:24pm
21
Hi! I’m a bit stuck… I’m not able to change the font size of the value.
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
roshi112
December 1, 2024, 6:56am
22
value is negative. -4.89
Donder24
December 1, 2024, 10:40am
23
Resolved!
1 Like
Tambi
December 10, 2024, 6:43am
24
Thanks alot for share , would you upload the png file for the tank .thanks
Donder24
December 10, 2024, 7:44pm
25
can you share cylinder3.png pls
can share the tank image.png
The developer has definitely worked hard on it and is great about supporting it and it’s users.
