Initial commit of final product

This commit is contained in:
Taylor Courage 2024-07-02 22:59:00 -04:00
commit beea29786e
3 changed files with 363 additions and 0 deletions

51
diecalc.css Normal file
View File

@ -0,0 +1,51 @@
.content {
position: relative;
border: 1px solid black;
padding-left: 17px;
padding-right: 17px;
max-width: 600px;
min-height: 600px;
margin: auto;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.totals {
max-width: 600px;
margin: auto;
direction:rtl;
text-align:justify;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.dieSetup {
width: 98%;
margin: auto;
}
.dieSetup caption {
caption-side: bottom;
font-size: 130%;
}
.highlight {
text-align: left;
padding-left: 10px;
width: 32%;
font-weight: bold;
}
.footer {
position: relative;
bottom: 15px;
width: 100%;
font-size: 75%;
margin: auto;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.content table, td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}

214
diecalc.js Normal file
View File

@ -0,0 +1,214 @@
// Some constant variables
// Eventually these might become configuration options if this project gets complex enough
var MC_MAX_HEADS = 5;
// This function gets the reduction of area with two provided sizes, and returns it
function getReduction(startSize, finalSize) {
var startArea = Math.PI * ((startSize / 2) * (startSize / 2));
var finalArea = Math.PI * ((finalSize / 2) * (finalSize / 2));
var reduction = ((startArea - finalArea) / startArea) * 100;
return reduction;
}
// This function gets the elongation
function getElongation(startSize, finalSize) {
return (Math.pow(startSize / finalSize, 2) - 1) * 100;
}
// This function will get the average reduction, across a number of dies.
// Used to calculate how many dies we'll need
function getAverageReduction(startSize, finalSize, numDies) {
return (1 - Math.pow((Math.pow(finalSize / startSize, 2)), (1 / numDies))) * 100;
}
// This function gets us the number of dies we need, and returns it.
function getNumDies(startSize, finalSize) {
var reduction = getReduction(startSize, finalSize);
var numDies = 0;
while (reduction > document.getElementById("machineMaxReduction").value) {
numDies++;
reduction = getAverageReduction(startSize, finalSize, numDies);
if (reduction < document.getElementById("machineMaxReduction").value) {
if (numDies > MC_MAX_HEADS) {
numDies--;
reduction = getAverageReduction(startSize, finalSize, numDies);
reduction = Math.round(reduction * 100) / 100;
break;
}
reduction = Math.round(reduction * 100) / 100;
}
}
return numDies;
}
// This function calculates the die needed to go before the coiler
// This is the first die calcuated and dictates how the rest of the machine should be setup
function getPreCoilerDie(finalSize) {
var coilerTarget = document.getElementById("coilerTarget").value;
var s = 0; // this variable counts our steps to get a final pre-coiler die
var reduction = getReduction((finalSize + s), finalSize);
// Iterate until we pass the maximum allowed
while (reduction < coilerTarget) {
s++;
reduction = getReduction((finalSize + s), finalSize);
}
// Once we exceed the max we need to go back one size
if (reduction > coilerTarget) {
s--;
reduction = getReduction((finalSize + s), finalSize);
}
// Round it off and display it
document.getElementById("coilerROA").innerHTML = (Math.round(reduction * 10) / 10).toFixed(1);
document.getElementById("coilerElong").innerHTML = (Math.round(getElongation(finalSize + s, finalSize) * 10) / 10).toFixed(1);
return finalSize + s;
}
function getDies() {
clearScreen(); // "Clear" the screen right away
// Get our values from the web page
var startSize = document.getElementById("startSize").value;
var finalSize = document.getElementById("finalSize").value;
var maxMachineROA = document.getElementById("machineMaxReduction").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);
}
if (finalSize == 0 || finalSize == NaN || startSize == 0 || startSize == NaN) {
console.log("Zero");
return;
}
// Set our final size based on input
document.getElementById("coilerDie").innerHTML = "." + finalSize;
// Get the total Reduction Of Area of the run
var totalROA = getReduction(startSize, finalSize);
// Get the total elongation for the run
var totalElong = getElongation(startSize, finalSize);
// Get the die we need before the coiler
var preCoilerDie = getPreCoilerDie(finalSize);
// Get the rest of the dies...
// Start by calculating how many we need
var machineROA = getReduction(startSize, preCoilerDie);
var numDies = getNumDies(startSize, preCoilerDie);
if (numDies > MC_MAX_HEADS) {
// TODO THROW AN ERROR IF WE TRY OVERLOADING THE MACHINE
numDies = MC_MAX_HEADS;
}
var averageReduction = getAverageReduction(startSize, preCoilerDie, numDies);
// Create an array to store our die values
var dies = [];
dies.push(preCoilerDie);
var i = 0;
while (i < numDies - 1) {
dies[i + 1] = Math.round(dies[i] / Math.sqrt(1 - (averageReduction / 100)));
i++;
}
// This next section updates the webpage with our values //
///////////////////////////////////////////////////////////
for (var j = 0; j < numDies; j++) {
var curBlock = MC_MAX_HEADS - j;
if (numDies < 4) { // This helps formatting, if we have less than 4 blocks running then we need to skip block 5
curBlock--;
}
if (numDies < 3) { // If we only have two blocks running then we need to skip 4 as well as 5
curBlock--;
}
// Working die size
var htmlID = "block" + curBlock + "Working";
document.getElementById(htmlID).innerHTML = "." + dies[j];
// Guide dies
var htmlID = "block" + curBlock + "Guide";
if (dies[j + 1]) {
document.getElementById(htmlID).innerHTML = "." + (dies[j + 1] + 18);
} else { // This will check to see if it's our first die and change the guide to a pressure die
var temp = 10 + Math.floor(startSize / 5) * 5;
document.getElementById(htmlID).innerHTML = "." + temp;
document.getElementById(htmlID).style.fontWeight = "bold"; // Make our pressure die bold
}
// ROA
htmlID = "block" + curBlock + "ROA";
if (dies[j + 1]) {
document.getElementById(htmlID).innerHTML = (Math.round(getReduction(dies[j + 1], dies[j]) * 10) / 10).toFixed(1);
} else {
document.getElementById(htmlID).innerHTML = (Math.round(getReduction(startSize, dies[j]) * 10) / 10).toFixed(1);
}
// ELONGATION
htmlID = "block" + curBlock + "Elong";
if (dies[j + 1]) {
document.getElementById(htmlID).innerHTML = (Math.round(getElongation(dies[j + 1], dies[j]) * 10) / 10).toFixed(1);
} else {
document.getElementById(htmlID).innerHTML = (Math.round(getElongation(startSize, dies[j]) * 10) / 10).toFixed(1);
}
}
// Give the summary of the reduction under the table
if (document.getElementById("metric").checked == true) { // If metric, convert back to mm
document.getElementById("setupSummary").innerHTML = ("Generated die setup for " + (Math.round((startSize * 25.4) / 100) / 10) + " mm (." + startSize + "\") &#x1F80A; ." + finalSize + "\"");
} else { // If our input is imperial/inches then we'll just show it back
document.getElementById("setupSummary").innerHTML = ("Generated die setup for ." + startSize + "\" (" + (Math.round(((startSize) * 25.4) / 100) / 10) + " mm) &#x1F80A; ." + finalSize + "\"");
}
// Write our total ROA and total Elongation for the whole pull
document.getElementById("totalROAResult").innerHTML = ("Total ROA: " + (Math.round(totalROA * 100) / 100) + "%");
document.getElementById("totalElongResult").innerHTML = ("Total Elongation: " + (Math.round(totalElong * 100) / 100) + "%");
}
function clearScreen() {
// This function clears the table back to 'empty' or fresh or whatever you want to call it
for (var j = 1; j <= MC_MAX_HEADS; j++) {
var htmlID = "block" + j + "Working";
document.getElementById(htmlID).innerHTML = ("&nbsp;");
htmlID = "block" + j + "Guide";
document.getElementById(htmlID).innerHTML = ("");
htmlID = "block" + j + "ROA";
document.getElementById(htmlID).innerHTML = ("");
htmlID = "block" + j + "Elong";
document.getElementById(htmlID).innerHTML = ("");
document.getElementById("coilerDie").innerHTML = ("");
document.getElementById("coilerROA").innerHTML = ("");
document.getElementById("coilerElong").innerHTML = ("");
document.getElementById("totalROAResult").innerHTML = ("Total ROA: 0%");
document.getElementById("totalElongResult").innerHTML = ("Total Elongation: 0%");
document.getElementById("setupSummary").innerHTML = ("&nbsp;");
}
}

98
index.html Normal file
View File

@ -0,0 +1,98 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<script src="diecalc.js"></script>
<link rel="stylesheet" href="diecalc.css" />
<title>MC11 Die Calculator</title>
</head>
<body>
<div class="content">
<div class="header">
<h1>Machine 11 Die Calculator</h1>
<p>Use this calculator to create setups for machine 11</p>
</div>
<div class="body">
<input autocomplete="off" id="startSize" type="text" value="5.5" size="4" />
<label for="startSize"> - Start size</label>
<input type="radio" name="units" id="metric" value="mm" checked />
<label for="metric">mm</label>
<input type="radio" name="units" id="inches" value="in" />
<label for="inches">in</label>
<br />
<input autocomplete="off" id="finalSize" type="text" value=".000" size="4" />
<label for="finishSize"> - Final size</label>
<br />
<input autocomplete="off" id="coilerTarget" type="text" value="10" size="1" />
<label for="coilerTarget">% - Coiler Target ROA</label>
<br />
<input autocomplete="off" id="machineMaxReduction" type="text" value="20" size="1" />
<label for="machineMaxReduction">% - Machine Max ROA</label>
<br />
<input type="button" value="Create Setup" onclick="getDies()" />
<input type="button" value="Clear" onclick="clearScreen()" />
<br />
&nbsp;
<br />
<table class="dieSetup">
<caption id="setupSummary">&nbsp;</caption>
<tr style="font-weight: bold;">
<td class="highlight">Block</td>
<td style="width: 11%">1</td>
<td style="width: 11%">2</td>
<td style="width: 11%">3</td>
<td style="width: 11%">4</td>
<td style="width: 11%">5</td>
<td style="width: 11%">C</td>
</tr>
<tr style="font-weight: bold; font-size: 120%">
<td class="highlight" style="font-size: 80%;">Working</td>
<td id="block1Working">&nbsp;</td>
<td id="block2Working">&nbsp;</td>
<td id="block3Working">&nbsp;</td>
<td id="block4Working">&nbsp;</td>
<td id="block5Working">&nbsp;</td>
<td id="coilerDie">&nbsp;</td>
</tr>
<tr>
<td class="highlight">Guide</td>
<td id="block1Guide"></td>
<td id="block2Guide"></td>
<td id="block3Guide"></td>
<td id="block4Guide"></td>
<td id="block5Guide"></td>
<td></td>
</tr>
<tr>
<td class="highlight">ROA (%)</td>
<td id="block1ROA"></td>
<td id="block2ROA"></td>
<td id="block3ROA"></td>
<td id="block4ROA"></td>
<td id="block5ROA"></td>
<td id="coilerROA"></td>
</tr>
<tr>
<td class="highlight">Elongation (%)</td>
<td id="block1Elong"></td>
<td id="block2Elong"></td>
<td id="block3Elong"></td>
<td id="block4Elong"></td>
<td id="block5Elong"></td>
<td id="coilerElong"></td>
</tr>
</table>
<br />
</div>
<div class="totals">
<p id="totalROAResult">Total ROA: 0%</p>
<p id="totalElongResult">Total Elongation: 0%</p>
</div>
</div>
<div class="footer" align="center">
<p>&nbsp;</p>
<p>&copy; 2024 <a href="https://github.com/TaylorCourage/">Taylor Courage</a></p>
</div>
</body>
</html>