This is why I mentioned a little more work 
The way I wrote the code was to make it a bit clearer
Yea sure haha, I though I could handle it 
I can usually nut my way though it once I have a base to work from.
1 Like
keep going, we can fix it
Yea its just alignment, i figured that would be what needed to be changed due to different layouts etc,
I’m just trying to adjust top and bottom margins, but change bottom margin has no effect.
Post your current card code and specify top and bottom margins based off your shared pics
Sure, I am not sure what the top and bottom would be other than just playing around with it, but here is what I have.
type: custom:button-card
entity: input_number.number
entity_picture: /local/images/bottle.png
show_entity_picture: true
show_label: true
size: 5em
styles:
entity_picture:
- z-index: 0
custom_fields:
level:
card:
type: custom:button-card
entity: sensor.camper_gas_weight_left_bottle_2
icon: mdi:battery
tap_action: more-info
show_state: true
show_name: false
show_icon: false
styles:
card:
- left: "-76px"
- 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 'lime';
if (states['sensor.camper_gas_weight_left_bottle_2'].state >= 20) return 'orange';
if (states['sensor.camper_gas_weight_left_bottle_2'].state >= 0) return 'red';
else return 'black';
]]]
- 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: 10px
- margin-bottom: "-10px"
- border: none
- z-index: 0
icon:
- color: transparent
Switch the z-index on the entity picture to 1 to ensure it sits on top of the colored fill
type: custom:button-card
entity: input_number.num2
entity_picture: /local/pics/bottle2.png
show_entity_picture: true
show_label: true
size: 5em
styles:
entity_picture:
- z-index: 1
custom_fields:
level:
card:
type: custom:button-card
entity: input_number.num2
icon: mdi:battery
tap_action: more-info
show_state: true
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 '-160px';
if (states['input_number.num2'].state >= 0) return '-110px';
else return '0px';
]]]
- position: absolute
- 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';
]]]
- z-index: 0
- height: |
[[[
if (states['input_number.num2'].state >= 30) return '180px';
if (states['input_number.num2'].state >= 20) return '100px';
if (states['input_number.num2'].state >= 0) return '50px';
else return '0px';
]]]
- width: 59px
- border-radius: 10px
- margin-bottom: "-10px"
- border: none
- z-index: 0
icon:
- color: transparent
Let me make it more dynamic. but feel free to keep editing the code to your liking.
We can correlate the color and specific height to the sensor’s output.
Yea, I guess 100% is just to the very top of the bottle, and ideally starts from the bottom, leaving no gaps, because of my OCD haha
I’m the same. My input_number is on a different scale so it’s not exactly apples to apples.
Adjust the heights and top settings if you want, but I have a cleaner method. Just had a lot going on this evening…
1 Like
Ok thanks I fell asleep.
I’ll have another crack at it
Got it pretty locked in now,
The only problem now is,
It appears that the spacing on the app and in the browser is different,
I can get the spacing right on my app and in browser (but on in edit mode) as soon as I leave edit mode, the spacing is out on my browser, but perfect on my phone.
The tank is leaking…
Yea I think I drilled a hole in one of the tanks during installation…
The problem is that the fill changes when I change screen sizes etc, it pushes it all out of alignment.
It seems to be when I put 2 in a horizonal-stack
Hey Dean!
Great work on this.
I’ve been keen to do something like this too.
Would you mind sharing your code and photos of the wiring etc please?
Phil.
(Auckland, NZ)
One option is to create image of 2 tanks side by side vs using a horizontal-stack. I will give you an example.
1 Like
Using the scales purchased above, here is my code.
I used the HX711 along side the load cell. I have to be honest, when it came to wiring the load cell I had to guess. And I bough 4 of these scales, and 2 were different (slightly) to the other two, but the wiring between both these scales load cells were different so I had to just wire and test with each combination until I got readings.
As for calibration, I just weighed objects with a different scale, then placed them on my load cell scale, and added the value it read to the calibrate_linear filter…
I still need to get a full bottle reading, but I figure the more calibration points you can add the better for accuracy. I am still in testing stages with this as I cannot calibrate my high point due to not having a brand new full bottle.
Once my UI and all is done, I will go through and do all calibration points, I have 4 bottles to do so I wanted to test with the first two to start with so I am not yet done.
filters:
- calibrate_linear:
- 8020 -> 0
- -350339 -> 14 # Output in KG
- -630216 -> 20
sensor:
- platform: hx711
name: "Right Bottle"
id: right_bottle
dout_pin: 21
clk_pin: 16
gain: 128
unit_of_measurement: kg
accuracy_decimals: 1
update_interval: 5s
filters:
- calibrate_linear:
- 8020 -> 0
- -350339 -> 14
- -630216 -> 20
- sliding_window_moving_average:
window_size: 10
send_every: 1
- platform: hx711
name: "Left Bottle"
id: left_bottle
dout_pin: 19 # DT PIN on HX711
clk_pin: 17 # SCK PIN on HX711
gain: 128
unit_of_measurement: kg
accuracy_decimals: 1
update_interval: 5s
filters:
- calibrate_linear:
- 8020 -> 0
- -350339 -> 14
- -1188416 -> 45
- sliding_window_moving_average:
window_size: 10
send_every: 1