No worries! Thanks!
Hopefully you’re well rested 
I have a couple of the Mopeka units, & like them very much. Accuracy has been very good, when checked against analog tank gauge. Mopeka advertises them as accurate to +/- 1%, They have onboard temperature sensors to compensate for temp/volume changes.
I have Mopeka Pro on 20-lb vertical tanks (on barbecue grill and smoker). Mopeka Pro+ on the 500-gal horizontal bulk tank.
They attach magnetically to bottom of tank, & use ultrasonic (sonar) to find liquid level, Reporting is via long-range Bluetooth.
This is just a prototype. There will be quite a bit to adjust depending on what additional info you include on the card
type: picture-elements
image: /local/pics/bottle2.png
elements:
- type: custom:fluid-level-background-card
card:
type: glance
show_name: false
show_icon: false
show_state: false
entities:
- entity: input_number.number
state_color: false
entity: input_number.number
fill_entity: input_number.number
level_color: lime
severity:
- color: red
value: 1
- color: orange
value: 29
- color: lime
value: 59
card_mod:
style: |
ha-card {
--ha-card-border-color: #ff000000 !important;
}
#container {
background: none !important;
height: 160px;
width: 112%;
left: 30px;
top: -100px;
border-radius: 20px 20px 10px 10px !important;
}
background_color:
- 0
- 0
- 0
full_value: "105"
card_mod:
style:
hui-image $: |
img {
z-index: 1 !important;
position: relative !important;
right: 0px;
top: 0px;
width: 15% !important;
opacity: 1
}
.: |
ha-card {
background: black;
}
Damn thanks so much that looks so good.
Not working for me though, using this config. Image shows and all just no fill effect.
type: picture-elements
image: /local/images/bottle.png
elements:
- type: custom:fluid-level-background-card
card:
type: glance
show_name: false
show_icon: false
show_state: false
entities:
- entity: sensor.camper_gas_weight_right_bottle_2
state_color: false
entity: sensor.camper_gas_weight_right_bottle_2
fill_entity: sensor.camper_gas_weight_right_bottle_2
level_color: lime
severity:
- color: red
value: 1
- color: orange
value: 29
- color: lime
value: 59
card_mod:
style: |
ha-card {
--ha-card-border-color: #ff000000 !important;
}
#container {
background: none !important;
height: 160px;
width: 112%;
left: 30px;
top: -100px;
border-radius: 20px 20px 10px 10px !important;
}
background_color:
- 0
- 0
- 0
full_value: "105"
card_mod:
style:
hui-image $: |
img {
z-index: 1 !important;
position: relative !important;
right: 0px;
top: 0px;
width: 15% !important;
opacity: 1
}
.: |
ha-card {
background: black;
}
Oh, I dont have card-mod, hold the line.
Damn, is there a way to do this without card-mod?
Why what is going on with card_mod?
It completely messes up my dashboard, i’ve tried using it like 10 times now (because it allows awesomeness) but everytime, it just renders my lovelace literally unusable.
It is so slow. When I click on an entity, it can take like 1 minute for the more-info window to show up.
Also, when editing cards in lovelace, the edit dialog for that card will show up once, and then when I try edit it again, just nothing displays, nothing pops up when trying to edit the card,
And a while bunch of other issues. 
Without card_mod, I’m not sure there is an option to use the tank image.
One option may be custom:button card. I’ll explore that method as it does not really require card_mod to customize the card. It is JavaScript based
-
Do you have HACS installed?
-
Can you currently still able use custom cards?
I would your post card_mod issues here for help with this. Your experience is not normal and I’d say something is really off.
UPDATE
custom:button-card is definitely an option with no card_mod needed
Ahh yes, I know I NEED to sort this card-mod issue out, because it holds me back from some cool stuff,
But, if you can provide me with the button-card alternative for now that would be great.
Thank you!
This is the just the test code, but it can be significantly consolidated by controlling the gradient color off one sensor and making the card’s position static.
type: custom:button-card
entity: input_number.number
entity_picture: /local/pics/bottle2.png
show_entity_picture: true
show_label: true
size: 5em
name: Tank 1
styles:
entity_picture:
- z-index: 1
custom_fields:
level:
card:
type: custom:button-card
entity: input_number.num2
icon: mdi:battery
tap_action: none
show_state: false
show_name: false
show_icon: false
styles:
card:
- left: "-275px"
- top: |
[[[
if (states['input_number.num2'].state >= 30) return '-230px';
if (states['input_number.num2'].state >= 20) return '-210px';
if (states['input_number.num2'].state >= 0) return '-110px';
else return '0px';
]]]
- position: absolute
- background: |
[[[
if (states['input_number.num2'].state >= 30) return 'linear-gradient(rgba(0,0,0, .0) 0%, rgb(50, 205, 50)100%)';
if (states['input_number.num2'].state >= 20) return 'linear-gradient(rgba(0,0,0, .0) 30%, rgb(255, 165, 0)100%)';
if (states['input_number.num2'].state >= 0) return 'linear-gradient(rgba(0,0,0, .0) 10%, rgb(255, 0, 0)100%)';
else return 'black';
]]]
- z-index: 1
- height: |
[[[
if (states['input_number.num2'].state >= 30) return '180px';
if (states['input_number.num2'].state >= 20) return '150px';
if (states['input_number.num2'].state >= 0) return '50px';
else return '0px';
]]]
- width: 59px
- border-radius: 13px
- margin-bottom: "-90px"
- border: none
- z-index: 0
icon:
- color: transparent
I will provide a final resolution…
Thank you!
i get a syntax error? I think I replaced everything with the correct entities.
type: custom:button-card
entity: input_number.number
entity_picture: /local/images/bottle.png
show_entity_picture: true
show_label: true
size: 5em
name: Tank 1
styles:
entity_picture:
- z-index: 1
custom_fields:
level:
card:
type: custom:button-card
entity: sensor.camper_gas_weight_left_bottle_2
icon: mdi:battery
tap_action: none
show_state: false
show_name: false
show_icon: false
styles:
card:
- left: "-275px"
- top: |
[[[
if (states['sensor.camper_gas_weight_left_bottle_2'].state >= 30) return '-230px';
if (states['sensor.camper_gas_weight_left_bottle_2'].state >= 20) return '-210px';
if (states['sensor.camper_gas_weight_left_bottle_2].state >= 0) return '-110px';
else return '0px';
]]]
- position: absolute
- background: |
[[[
if (states['sensor.camper_gas_weight_left_bottle_2'].state >= 30) return 'linear-gradient(rgba(0,0,0, .0) 0%, rgb(50, 205, 50)100%)';
if (states['sensor.camper_gas_weight_left_bottle_2'].state >= 20) return 'linear-gradient(rgba(0,0,0, .0) 30%, rgb(255, 165, 0)100%)';
if (states['sensor.camper_gas_weight_left_bottle_2'].state >= 0) return 'linear-gradient(rgba(0,0,0, .0) 10%, rgb(255, 0, 0)100%)';
else return '0px';
]]]
- z-index: 1
- height: |
[[[
if (states['sensor.camper_gas_weight_left_bottle_2'].state >= 30) return '180px';
if (states['sensor.camper_gas_weight_left_bottle_2'].state >= 20) return '150px';
if (states['sensor.camper_gas_weight_left_bottle_2'].state >= 0) return '50px';
else return '0px';
]]]
- width: 59px
- border-radius: 13px
- margin-bottom: "-90px"
- border: none
- z-index: 0
icon:
- color: transparent
Shit ok sorry found it after posting with larger text!
Thanks this looks good, just a few alignment issues, but this is clean
1 Like
Missed a ' here
if (states['sensor.camper_gas_weight_left_bottle_2].state >= 0) return '-110px';
It will get cleaner
Yea sorry I actually saw that just as I posted, larger text.
Looking good, one more fine touch, is there a way to remove the gradient? So I can see the level more clearly?
Its looking good 
yes
- background: |
[[[
if (states['input_number.num2'].state >= 30) return 'lime';
if (states['input_number.num2'].state >= 20) return 'orange';
if (states['input_number.num2'].state >= 0) return 'red';
else return 'black';
]]]
Im also trying to reduce the bottom margin, but for some reason its not reducing
