I have a slider/guage/bar component to select a value. As the slider is dragged it updates a value to give the user feedback:
currentValue = Math.round((componentHeight - draggedValue) / componentHeight * vesselVolume);
The slider gives its value from the top position of an absolute div inside an overflow hidden div parent, giving the illusion of a gauge that can be raised and lowered.
This all works fine.
The problem
I'm using the gauge to estimate the volume of liquid in a vessel. If the vessel has level, straight edges, fine, but it may not. A barrel, for example, will bulge out then back in.
I can use a mask over my guage to simulate the vessel being filled but it made me wonder if the task of being able to extract some some of volume filled of the vessel shown is ridiculously complicated or something approachable?
My current approach
I'll be using my own SVG graphics which could provide simple line data. I'm looking into whether there's a clipping or boolean operation possible on SVGs in vanilla javascript where I can clip the graphic where the top of the gauge reaches.
I presume I could then calculate the area of the resulting graphic, and present a volume of liquid if provide the volume of liquid that would have fit in the entire vessel.
I'm providing no depth information but it's currently safe for me to assume all vessels are symmetrical around the Y axis.
I'm a bit clueless at math involving shapes, is this task feasible? As a compromise, I would be ok to use crude formula that emulate various vessels if they approximately simulate edges diverging at a certain angle up to a certain height, etc.
