headtool.html

<style>
	strong {
		font-size: smaller;
		font-weight: bold;
	}
	#chg {
		display: flex;
		align-items: center;
	}
	strong {
		padding-right: 1.5rem;
		padding-left: .2rem;
	}
	table {
		border-collapse: collapse;
	}
	th {
		text-align: left;
	}		
	#results ~ :not(:last-child) {
		background-color: #C3C8C8;
	}
	#result {
		color: #5d9300;
		font-weight: bold;
	}
}
</style>
<h1>Head Tool</h1>
<label id=chg>	
	<input name=suc onchange='suction()' type=checkbox style='margin-right: .5rem'><div>Suction tank</div>
</label>
<img onload="size()">
<table>
	<tr>					
		<td>Specific Gravity</td>
		<td id="sg"/></td>
	</tr>
	<tr>					
		<td>Flow</td>
		<td id="flow"/></td>					
	</tr>
	<tr><td>&nbsp;</td></tr>
	<tr>
		<th></th>
		<th>Suction</th>
		<th>Discharge</th>
	</tr>
	<tr>
		<td>Pipe inner diameter</td>
		<td>						
			<input name=Ds data-vd-rng=.1>
		</td>
		<td>
			<input name=Dd data-vd-rng=.1>
		</td>
	</tr>
	<tr class="sucTank">
		<td>
			Tank gas overpressure
		</td>
		<td>
			<input name=Pg_s data-vd-rng=0><strong>Pg</strong>
		</td>
	</tr>
	<tr class="sucTank">
		<td>
			Tank fluid surface elevation
		</td>
		<td>
			<input name=Ztnk_s data-vd-rng=0><strong>Zs</strong>
		</td>
	</tr>	
	<tr>
		<td>Gauge pressure</td>
		<td>
			<div class=sucGauge>
				<input name=Ps data-vd-rng=0><strong>Ps</strong>
			</div>									
		</td>
		<td>						
			<input name=Pd data-vd-rng=0><strong>Pd</strong>
		</td>
	</tr>
	<tr>
		<td>Gauge elevation</td>
		<td>
			<div class=sucGauge>
				<input name=Zs data-vd-rng=0><strong>Zs</strong>
			</div>
		</td>
		<td>			
			<input name=Zd data-vd-rng=0><strong>Zd</strong>
		</td>
	</tr>
	<tr>
		<td>Line loss coefficients</td>
		<td>
			<input name=Ks data-vd-rng=0><strong>Ks</strong>
		</td>
		<td>			
			<input name=Kd data-vd-rng=0><strong>Kd</strong>
		</td>
	</tr>
	<tr><td>&nbsp;</td></tr>
	<tr id=results>					
		<th>Head</th>
		<th></th>
		<th>Result</th>
	</tr>
	<tr>
		<td>Differential elevation head</td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td>Differential pressure head</td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td>Differential velocity head</td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td>Estimated suction friction head</td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td>Estimated discharge friction head</td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td>Pump head</td>
		<td></td>
		<td id=result></td>
	</tr>				
	<tr>
		<td><button class=prime onclick='calc()'>CALCULATE</button></td>
		<td></td>
		<td><button class=prime id=accept onclick='accept()' style="display: none">ACCEPT</button></td>
	</tr>				
</table>		
<script>

	function accept() {
		Cond.head = Head;
		save();
		back();
	}

// dom

	function size() {
		pg().show();
		$('img').width(pg('table').width());
	}
	function suction() {
		if (dom(nm('suc')).checked) {
			pg('.sucGauge').hide();
			pg('.sucTank').show();
			pg('img').attr('src','headtool_b.png')
		} else {
			pg('img').attr('src','headtool_a.png');
			pg('.sucGauge').show();
			pg('.sucTank').hide();
		}
	}
	function r(txt,v) {// result
		$(`#results~ tr>td:contains(${txt})`).next().next().text(rnd(v).toLocaleString());
	}

// math

	function v(d,flow) {// velocity
		return flow / (Math.PI*(d/2)*(d/2));
	}
	function vHd(v,g) {// velocity head
		return v*v/2/g;
	}
	function calc() {
        let flowU, distF, g;
        if (unit(DIST)=='ft') {
			flowU='ft^3/s';
			g=32.1740;// gravity
			distF=12;
        } else {
			flowU='m^3/s';
			g=9.8065;
			distF = 1000;
        }
		let 
			flow = cvt(Cond.flow,FLOW,flowU),
			sucTnk = dom(nm('suc')).checked,// suction tank
			// elevation head
			elevHd = nm('Zd').val()-(sucTnk ? nm('Ztnk_s') : nm('Zs')).val(),
			presHd = cvt(nm('Pd').val()-(sucTnk ? nm('Pg_s') : nm('Ps')).val(),
				PRESSURE,unit(DIST))/Cond.specific_gravity,
			vHdS = vHd(v(nm('Ds').val()/distF,flow),g),// velocity head suction
			vHdD = vHd(v(nm('Dd').val()/distF,flow),g),// velocity head discharge
			vHdDif = vHdD - (sucTnk ? 0 : vHdS),// velocity head differential
			sucHd = nm('Ks').val()*vHdS,
			disHd = nm('Kd').val()*vHdD;
		Head = elevHd + presHd + vHdDif + sucHd + disHd;
		r('elevation',elevHd);
		r('pressure',presHd);
		r('velocity',vHdDif);
		r('suction',sucHd);
		r('discharge',disHd);
		r('Pump',Head);
		$('#accept').show();
	}

// init

	pg().hide();
	$('#flow').html(rnd(Cond.flow));
	$('#sg').text(Cond.specific_gravity);
	$('input').change(function () {
		pg('#results ~ :not(:last-child) :last-child').text('');
		pg('#accept').hide();
		setFromCtl(HeadTool,this);
		save();
	});
	setCtls(HeadTool);
	suction();
	setupVd();

// init - unit

	function setUnit(nm,s) {
		pg(`tr:not(#results ~) td:contains(${nm})`).append(em(txt));
	}
	txt = DIST_small[unit(DIST)];
	setUnit('diameter');
	txt = unit(DIST);
	setUnit('elevation');
	$('#results th').last().append(em(txt));
	txt = unit(PRESSURE);
	setUnit('pressure');	
	pg('td:contains("Flow")').append(em(unit(FLOW)));
	
</script>