I just wanted to share a card that isn’t talked about very much. If you need to visualize a liquid level you can use a bar card, but this looks so much nicer in my opinion. The developer is active and constantly making updates and even taking suggestions and adding them when possible. In the past week it was suggested to update the color to allow RGBA (basically allow opacity). It opens up the ability to make some even more amazing cards. Here is an example from my dashboard for my Aquarium so I can monitor the levels of the things I dose.
The animation with the card is much smoother and…fluid ( 
) also it does not ‘reset’ like in the gif.
The basic fluid in a bar card is simple, but took me some times to get it lined up to the image. I’m sure there is a simpler way, but below is how I did it. Also, had to add callouts for the different resolutions to get them to line up for my phone, table, or PC.
Code for simple bar card style.
type: custom:fluid-level-background-card
entity: sensor.doser1_container_percentage
card_mod:
style: |
ha-card {
--ha-card-header-font-size: 12px;
text-align: center;
}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
dismissable: true
autoclose: false
data:
content:
type: entities
entities:
- entity: input_number.reefdoser1_pump1_millilitres_total
name: Refill Volume
icon: mdi:hydraulic-oil-level
- entity: script.doser1_refill
name: Refill
secondary_info: none
- entity: sensor.doser1
icon: kuf:time_graph
name: Remaining
level_color:
- 0
- 0
- 255
card:
type: custom:bar-card
title: Pump 1
color: rgb(0,0,0,0)
direction: up
decimal: 0
height: 70px
positions:
icon: 'off'
name: 'off'
entities:
- entity: sensor.doser1_container_percentage
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
dismissable: true
autoclose: false
data:
content:
type: entities
entities:
- entity: input_number.reefdoser1_pump1_millilitres_total
name: Refill Volume
icon: mdi:hydraulic-oil-level
- entity: script.doser1_refill
name: Refill
secondary_info: none
- entity: sensor.doser1
icon: kuf:time_graph
name: Remaining
Code for the examples at the top are a lot more in depth. Especially for me since I can’t code, can read it for the most part, but not ‘speak’ it. I did use a lot of AI, which I realized is not as good as you would think. There were times I had to fix the code once it could get some what close enough. I’m sure there are better an easier ways to accomplish what I did below, but I’m just starting to try to learn JS in my free time.
Side note, just got this working, and still ironing out some of the alignment, so for my S9 FE Tab and PC(4K res) they line up. Still tweaking some stuff on my PC
type: picture-elements
image: /local/cylinder3.png
card_mod:
style:
hui-image $: |
img {
z-index: 1 !important;
position: relative !important;
right: 0px;
top: 0px;
width: 100% !important;
opacity: 1
}
elements:
- type: custom:fluid-level-background-card
entity: sensor.doser1_container_percentage
style:
z-index: 1
card_mod:
style: |
ha-card {
text-align: center;
--ha-card-border-color: #ff000000 !important;
}
#container, .container {
width: 110px !important;
height: 180px !important;
position: relative !important;
transform: translate(220%, -75%);
opacity: 0.8;
}
@media (max-width: 600px) {
#container, .container {
width: 42px !important;
height: 72px !important;
transform: translate(225%, -74%);
}
}
@media (min-width: 601px) and (max-width: 900px) {
#container, .container {
width: 85px !important;
height: 150px !important;
transform: translate(211%, -70%);
}
}
@media (min-width: 901px) and (max-width: 1440px) {
#container, .container {
width: 52px !important;
height: 82px !important;
transform: translate(220%, -74%);
}
}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
dismissable: true
autoclose: false
data:
content:
type: entities
entities:
- entity: input_number.reefdoser1_pump1_millilitres_total
name: Refill Volume
icon: mdi:hydraulic-oil-level
- entity: script.doser1_refill
name: Refill
secondary_info: none
- entity: sensor.doser1
icon: kuf:time_graph
name: Remaining
level_color: rgba(0,0,255,1)
card:
type: custom:card-templater
card:
type: entities
entity: sensor.doser1_container_percentage
title_template: '{{states(''sensor.doser1_container_percentage'')|round(0)}}% '
show_header_toggle: false
show_name: true
card:
type: custom:bar-card
color: rgba(0,0,0,1)
position:
value: 'off'
card_mod:
style: |
ha-card {
--ha-card-header-font-size: 11px;
height: 225px !important;
}
.card-header {
justify-content: center !important;
}
.name {
overflow: unset !important;
}
Any questions, I’ll attempt to help the best I can.
Here is the github for the card
https://github.com/swingerman/lovelace-fluid-level-background-card
Thanks to @swingerman for this awesome card.
The developer has definitely worked hard on it and is great about supporting it and it’s users.
