Data point Scaler

hayden_AUS

Hi all,

Some of you already would have a calculator like this, but for those who don't, here is an HTML app I wrote to scale data points in Mango.
Just copy all the code, and save it as "scaler.html", or some other name. Then double click to open in browser.

Must have for adding analog data points to Mango.

H

<!DOCTYPE html>
<html>
	<script>
		function calculate()
            {
            var outMax=document.getElementById("outMax").value;
			var outMin=document.getElementById("outMin").value;
			var inMax=document.getElementById("inMax").value;
			var inMin=document.getElementById("inMin").value;
			var testVal=document.getElementById("testVal").value;
			var rate = ((Number(outMax)-Number(outMin))/(Number(inMax)-Number(inMin)));
			var offset = (Number(outMin) - (Number(inMin)*rate));
			var testOutput = ((Number(testVal) * rate)+ offset);
			document.getElementById("rate").innerHTML = "Multiplier = " + rate;
			document.getElementById("offset").innerHTML = "Offset = " + offset;
			document.getElementById("testOutput").innerHTML = "Test Output = " + testOutput;
            }
	</script>		
	<body>
		<div>
			<table style="color:white;" bgcolor="#00004d">
				<tr>
					<td style="font-size:200%" colspan="2">DATA POINT SCALER</td>
				</tr>			
				<tr>
					<td>Output Maximum Value: </td>
					<td><input type="number" id="outMax" value="100" onchange="calculate"();></td>
				</tr>
				<tr>
					<td>Output Minimum Value:</td> 
					<td><input type="number" id="outMin" value="0" onchange="calculate"();> </td>
				</tr>
				<tr>
					<td>Input Maximum Value:</td>
					<td><input type="number" id="inMax" value="65535" onchange="calculate"();> </td>
				</tr>
				<tr>
					<td>Input Minimum Value:</td>
					<td><input type="number" id="inMin" value="0" onchange="calculate"();> </td>
				</tr>
				<tr>
					<td>Input Test Value:</td>
					<td><input type="number" id="testVal" value="23456" onchange="calculate"();> </td>
				</tr>
				<tr>
					<td colspan="2" style="text-align:center;"><button type="button" style="font-size:165%;" onclick="calculate()">CALCULATE</button></td>
				</tr>
				<tr>
					<td colspan="2" id="rate">Multiplier - Click Calculate Button</td>
				</tr>
				<tr>
					<td colspan="2" id="offset">Offset - Click Calculate Button</td>
				</tr>
				<tr>
					<td colspan="2" id="testOutput">Test Output - Click Calculate Button</td>
				</tr>
			</table>
			<p id="rate"></p>
			<p id="offset"></p>
			<p id="testOutput"></p>
		</div>
	</body>
</html>

Jared Wiltshire

Thanks for sharing @hayden_AUS

You could also just stick this straight into a custom page. Just remove the <html> and <body> tags.

Jared Wiltshire

Also if you wanted to use Angular, you could do it like this -


<table style="color:white;" bgcolor="#00004d" ng-init="page = {outMax: 100, outMin: 0, inMax: 65535, inMin: 0}">
	<tr>
		<td style="font-size:200%" colspan="2">DATA POINT SCALER</td>
	</tr>			
	<tr>
		<td>Output Maximum Value: </td>
		<td><input type="number" ng-model="page.outMax"></td>
	</tr>
	<tr>
		<td>Output Minimum Value:</td> 
		<td><input type="number" ng-model="page.outMin"> </td>
	</tr>
	<tr>
		<td>Input Maximum Value:</td>
		<td><input type="number" ng-model="page.inMax"> </td>
	</tr>
	<tr>
		<td>Input Minimum Value:</td>
		<td><input type="number" ng-model="page.inMin"> </td>
	</tr>
	<tr>
		<td colspan="2" id="rate">Multiplier: {{(page.outMax - page.outMin) / (page.inMax - page.inMin)}}</td>
	</tr>
	<tr>
		<td colspan="2" id="offset">Offset: {{page.outMin - ((page.outMax - page.outMin) / (page.inMax - page.inMin)) * page.inMin}}</td>
	</tr>
</table>

Jared Wiltshire

@hayden_AUS I incorporated a calculator directly into the data point editor for modbus points -
https://forum.infiniteautomation.com/topic/4477/release-notes-for-modbus-3-6-4