Taylor/ROA_Calc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit of working product

Browse Source
This commit is contained in:
Taylor Courage 2024-07-03 00:26:16 -04:00
commit e656a48f21
4 changed files with 132 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
README.md Normal file
View File

@ -0,0 +1,9 @@
# ROA Calculator
## Introduction
This web app is to be used to easily calculate an ROA, useful for single-capstan wire-draw machines to ensure the die(s) used is appropriate for the reduction in area.
## How it works
The machine operator simply enters the start and finish size of the material they are drawing. This will display the ROA.

52
index.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<script src="roacalc.js"></script>
<link rel="stylesheet" href="roacalc.css" />
<title>ROA Calculator</title>
</head>
<body>
<div class="content">
<div class="header">
<p id="vanity">Taylor Courage's</p>
<h1>ROA Calculator</h1>
<p>Use this tool to calculate reduction of area</p>
</div>
<div class="body" id="body">
<label for="startSize">Start size:</label>
<input autocomplete="off" id="startSize" type="text" value="0.0" size="4" />
<input type="radio" name="units" id="metric" value="mm" checked tabindex=-1 />
<label for="metric">mm</label>
<input type="radio" name="units" id="inches" value="in" tabindex=-1 />
<label for="inches">in</label>
<br />
<label for="finishSize">Final size:</label>
<input autocomplete="off" id="finalSize" type="text" value=".000" size="4" />
<br />
<input type="submit" id="submitButton" value="Calculate" onclick="getROA()" />
<script>
// This script is used to process the enter key input
var input = document.getElementById("body");
input.addEventListener("keypress", function (event) {
if (event.key === "Enter") {
event.preventDefault();
document.getElementById("submitButton").click();
}
});
</script>
&nbsp;
<br />
</div>
<div class="results" align="center">
<h4>Result:</h4>
<h1 id="result">--.--%</h1>
</div>
</div>
<div class="footer" align="center">
<p>&nbsp;</p>
<p>&copy; 2024 <a href="http://taylorcourage.net:30008/Taylor">Taylor Courage</a></p>
</div>
</body>
</html>

36
roacalc.css Normal file
View File

@ -0,0 +1,36 @@
.content {
position: relative;
border: 1px solid black;
padding-left: 17px;
padding-right: 17px;
max-width: 400px;
min-height: 400px;
margin: auto;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: large;
}
.footer {
position: relative;
bottom: 15px;
width: 100%;
font-size: 75%;
margin: auto;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.results {
font-size: 200%;
margin: auto;
}
.results h1 {
font-family:'Courier New', Courier, monospace;
}
#vanity {
font-family: serif;
font-style: oblique;
font-size: 0.8em;
}

35
roacalc.js Normal file
View File

@ -0,0 +1,35 @@
function getROA() {
// Get values from page
var startSize = document.getElementById("startSize").value;
var finalSize = document.getElementById("finalSize").value;
// If mm is selected we convert it to inches
if (document.getElementById("metric").checked == true) {
startSize = Math.round((startSize * 1000) / 25.4);
}
// Format our numbers to prevent maximum user stupidity
if (startSize < 1.0 && startSize > 0) { // If we have a 'proper' number i.e. ".130"
startSize = startSize * 1000;
} else { // re-format the number if it's 'wrong' i.e. "130"
startSize = Number(startSize);
}
if (finalSize < 1.0 && finalSize > 0) { // If we have a 'proper' number i.e. ".130"
finalSize = finalSize * 1000;
} else { // re-format the number if it's 'wrong' i.e. "130"
finalSize = Number(finalSize);
}
// Get area from diameter
var startArea = Math.PI * ((startSize / 2) * (startSize / 2));
var finalArea = Math.PI * ((finalSize / 2) * (finalSize / 2));
// Calculate reduction
var reduction = ((startArea - finalArea) / startArea) * 100;
// Round to two decimals
reduction = Math.round(reduction * 100) / 100;
// Display
document.getElementById("result").innerHTML = reduction + "%";
}