curve.html

<style>

	#container button {
		margin: .5rem 0;
	}

/* table */

	th {
		text-align: left;
	}
	th:first-child, td:first-child {
		padding-right: 1rem;
	}
	td > * {
		display: block;
	}

/* plot */

	canvas {
		background-color: black;
	}
	#plot {
		display: none;
	}
	#plot td:first-child {
		color: #5d9300;
	}
	#plot td:last-child {
		text-align: right;
	}

</style>
<div>
	<h1>System Head Curve</h1>
	<div >
		Choose two points for <strong>head</strong> and <strong>flow</strong>:
	</div>
	<table id=points style='margin:1rem 0rem'>
		<tr>
			<th></th>			
			<th>Flow</th>
			<th>Head</th>			
		</tr>
		<tr>
			<td><select onchange='selCond(this)'><option selected disabled>Choose</option></select></td>			
			<td><input name=f1></td>
			<td><input name=h1></td>			
		</tr>
		<tr>
			<td><select onchange='selCond(this)'><option selected disabled>Choose</option></select></td>			
			<td><input name=f2></td>
			<td><input name=h2></td>			
		</tr>
	</table>
	Loss exponent<br>
	<input name=C size=10><br>	
	<button id=plot_btn class='prime' onclick='plot()'>PLOT</button><br>
	<div id=plot>
		<table>
			<tr>
				<td>Static Head:</td><td id=Hs></td>		
			</tr>
			<tr>
				<td>Loss coefficient K:</td><td id=K></td>
			</tr>
		</table>
		<canvas width="700" height="500"></canvas>
	</div>
</div>

<script>//# sourceURL=*curve

	function selCond(e) {// select condition
		const cond = $(e).find(':selected').data('cond'),
				tr = $(e).parent().parent(),
				inp = nmAll(tr);

		Curve[inp.first().attr('name')] = cond.flow;
		Curve[inp.last().attr('name')] = cond.head;
		setCtls(Curve,tr)
		
		$('#plot').hide();
		pg('button').show();

		save();
	}

// plot

	function steps(v1,v2) {
		const max = Math.max(v1,v2),
				m10 = Math.pow(10, Math.floor(Math.log10(max / 15))),
				step = Math.round(max / 15 / m10) * m10;
		return [step, Math.ceil(max / step)];
	}
	function plot() {		
		const {f1, h1, f2, h2, C} = Curve,  
				hS = h1-(Math.pow(f1,1.9) * (h2-h1) / (Math.pow(f2,C) - Math.pow(f1,C))),
				k = (h2-h1)/(Math.pow(f2,C)-Math.pow(f1,C));							

		P = {
			padX: 25,
			padY: 50
		};
		[P.stepX,P.cntX] = steps(f1,f2);
		[P.stepY,P.cntY] = steps(h1,h2);

		$('#Hs').text(rnd(hS));
		$('#K').text(rnd(k,6));

		setupPlot('FLOW RATE','HEAD');
		curve(x => hS+k*Math.pow(x,C));				
	}

// init 

	Conds.forEach(c => {
	  pg('select').append($(`<option>${c.name}</option>`).data('cond',c));		
	});
	
	pg('input').change(ev => {
		vdRng(ev.target);
		$('#plot').hide();
		pg('button').show();
		setFromCtl(Curve,ev.target);
		save();
	});

	// clear select on input change
	pg('#points input').change(ev => {
		pg('select :disabled')[parIdx(ev.target.parentElement,-1)].selected=true;
	});

	function showUnit(txt,u) {
		pg(`th:contains(${txt})`).append(em(unit(u)));
	}
	showUnit('Flow',FLOW);
	showUnit('Head',DIST);

	setCtls(Curve);
	
</script>