Added delta calculation
This commit is contained in:
parent
31aa6f0849
commit
4c3a190e72
31
analyser.css
31
analyser.css
@ -21,6 +21,24 @@
|
||||
color: black;
|
||||
}
|
||||
|
||||
#data {
|
||||
table-layout: fixed;
|
||||
width: 40%;
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
border: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
#data tr {
|
||||
border:solid;
|
||||
border-width: 1px 0;
|
||||
}
|
||||
#data td {
|
||||
|
||||
padding-bottom: 5px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
#output {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
@ -29,15 +47,25 @@
|
||||
#output td {
|
||||
position: relative;
|
||||
border: 1px solid;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
#outputHeader {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
#reductionNum {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#reductionNumHeader {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#headerSpacer {
|
||||
width: 18%;
|
||||
width: 16%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#startFinish {
|
||||
@ -57,6 +85,7 @@
|
||||
|
||||
#delta {
|
||||
width: 12%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer {
|
||||
|
||||
75
analyser.js
75
analyser.js
@ -1,4 +1,5 @@
|
||||
var numDies = 0; // master counter for our number of dies
|
||||
var outputVisible = 0; // Status of whether the output graph is displayed or not
|
||||
|
||||
// This function gets the reduction of area with two provided sizes, and returns it
|
||||
function getReduction(startSize, finalSize) {
|
||||
@ -13,30 +14,54 @@ function getElongation(startSize, finalSize) {
|
||||
return (Math.pow(startSize / finalSize, 2) - 1) * 100;
|
||||
}
|
||||
|
||||
function addReduction() {
|
||||
numDies ++;
|
||||
function getDelta(startSize, finalSize, angle) {
|
||||
angle = (angle * 0.5) * (Math.PI / 180); // Convert to semi-angle and radians
|
||||
return ((startSize + finalSize) / (startSize - finalSize)) * Math.sin(angle);
|
||||
}
|
||||
|
||||
// format our HTML
|
||||
var html = ""; // start with an empty html
|
||||
html += "<label for=\"die" + numDies + "\">Finish " + (numDies) + ": </label>";
|
||||
html += "<input id=\"die" + numDies + "\" type=\"text\" autocomplete=\"off\" value=\"0.000\" size=\"4\" onchange=\"doMath()\" />";
|
||||
function addReduction() {
|
||||
numDies ++; // Increment our die count
|
||||
|
||||
// Create the data going into the row
|
||||
var inputLabel = "<label for=\"die" + numDies + "\" style=\"text-align:right;\">#" + (numDies) + ": </label>";
|
||||
var inputSize = "<input id=\"die" + numDies + "\" type=\"text\" autocomplete=\"off\" value=\"0.000\" size=\"4\" onchange=\"doMath()\" />";
|
||||
var inputAngle = "<input id=\"angle" + numDies + "\" type=\"text\" autocomplete=\"off\" value=\"16\" size=\"2\" onchange=\"doMath()\" style=\"text-align:center;\"/>";
|
||||
|
||||
// create the row
|
||||
var table = document.getElementById("data");
|
||||
var row = table.insertRow(-1);
|
||||
var cell1 = row.insertCell(0);
|
||||
cell1.innerHTML = html;
|
||||
var table = document.getElementById("data"); // get table ID
|
||||
var row = table.insertRow(-1); // Insert a new row (the -1 means we add to the END of the table)
|
||||
var cell1 = row.insertCell(0); // Create and add a cell to the table
|
||||
var cell2 = row.insertCell(1);
|
||||
var cell3 = row.insertCell(2);
|
||||
cell1.innerHTML = inputLabel; // Set the values of the cells we've created
|
||||
cell2.innerHTML = inputSize
|
||||
cell3.innerHTML = inputAngle;
|
||||
|
||||
if (outputVisible == 1) { // Check if out output is visible and update immediately when adding dies
|
||||
doMath();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function removeReduction() { // function to remove the last row
|
||||
numDies --;
|
||||
document.getElementById("data").deleteRow(-1); // delete the last row in the table
|
||||
|
||||
if (outputVisible == 1) { // Check if out output is visible and update immediately when adding dies
|
||||
doMath();
|
||||
}
|
||||
}
|
||||
|
||||
function doMath() {
|
||||
outputVisible = 1; // set visible status to enabled
|
||||
outputTable = document.getElementById("output"); // Select our output data table
|
||||
outputTable.innerHTML = "";
|
||||
|
||||
|
||||
var dataROA = [];
|
||||
var dataElong = [];
|
||||
var dataDelta = [];
|
||||
|
||||
var row = [];
|
||||
row[0] = outputTable.insertRow(0);
|
||||
row[0].id = "outputHeader"; // set the header row
|
||||
@ -47,20 +72,21 @@ function doMath() {
|
||||
var r1c5 = row[0].insertCell(4); // "Delta"
|
||||
|
||||
// Create the header of the table
|
||||
r1c1.innerHTML = "";
|
||||
r1c1.id = "headerSpacer";
|
||||
r1c1.innerHTML = "Reduction";
|
||||
r1c1.id = "reductionNumHeader";
|
||||
r1c2.innerHTML = "Start -> Finish";
|
||||
r1c2.id = "startFinish";
|
||||
r1c3.innerHTML = "ROA (%)";
|
||||
r1c3.id = "roa";
|
||||
r1c4.innerHTML = "Elong (%)";
|
||||
r1c4.id = "elong";
|
||||
r1c5.innerHTML = "Delta**";
|
||||
r1c5.innerHTML = "Delta";
|
||||
r1c5.id = "delta";
|
||||
|
||||
for (var i = 1; i < numDies + 1; i++) {
|
||||
inSize = document.getElementById("die" + (i - 1)).value; // the input size
|
||||
outSize = document.getElementById("die" + i).value; // output size
|
||||
angle = document.getElementById("angle" + i).value;
|
||||
|
||||
if (i == 1 && document.getElementById("metric").checked == true) {
|
||||
// If this is the first die in the setup, check if it's a metric/rod start and convert it
|
||||
@ -79,26 +105,37 @@ function doMath() {
|
||||
outSize = outSize / 1000;
|
||||
}
|
||||
|
||||
console.log(inSize + " " + outSize);
|
||||
row[i] = outputTable.insertRow(i); // Add a new row to the END of the table
|
||||
|
||||
row[i] = outputTable.insertRow(i);
|
||||
|
||||
// Add all our cells to the table
|
||||
// We also give them HTML ID's to format things with CSS nicely
|
||||
var cell1 = row[i].insertCell(0);
|
||||
cell1.id = "reductionNum";
|
||||
var cell2 = row[i].insertCell(1);
|
||||
cell2.id = "startFinish";
|
||||
var cell3 = row[i].insertCell(2);
|
||||
cell3.id = "roa";
|
||||
var cell4 = row[i].insertCell(3);
|
||||
cell4.id = "elong";
|
||||
var cell5 = row[i].insertCell(4);
|
||||
cell5.id = "delta";
|
||||
|
||||
cell1.innerHTML = "Reduction " + i + ":";
|
||||
// These next lines calculate and round the data to two decimal places
|
||||
dataROA[i - 1] = Math.round(getReduction(inSize, outSize) * 100) / 100;
|
||||
dataElong[i - 1] = Math.round(getElongation(inSize, outSize) * 100) / 100;
|
||||
dataDelta[i - 1] = Math.round(getDelta(inSize, outSize, angle) * 100) / 100;
|
||||
|
||||
// Set the values of the cells in our table
|
||||
cell1.innerHTML = "#" + i + ": ";
|
||||
cell2.innerHTML = inSize + "\" (" + toMillimetres(inSize) + " mm) -> " + outSize + "\" (" + toMillimetres(outSize) + " mm)";
|
||||
cell3.innerHTML = Math.round(getReduction(inSize, outSize) * 100) / 100;
|
||||
cell4.innerHTML = Math.round(getElongation(inSize, outSize) * 100) / 100;
|
||||
|
||||
cell3.innerHTML = dataROA[i - 1];
|
||||
cell4.innerHTML = dataElong[i - 1];
|
||||
cell5.innerHTML = dataDelta[i - 1];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function toMillimetres(size) { //convert to mm
|
||||
size = Math.round((size * 100) * 25.4) / 100;
|
||||
return size;
|
||||
|
||||
12
index.html
12
index.html
@ -4,12 +4,14 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<script src="analyser.js"></script>
|
||||
<script src="analyser.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
|
||||
<link rel="stylesheet" href="analyser.css" />
|
||||
<title>Wiredraw Setup Analyser</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p> </p>
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
<p id="vanity">Taylor Courage's</p>
|
||||
@ -19,13 +21,18 @@
|
||||
</div>
|
||||
<div class="body" id="body">
|
||||
<label for="die0">Start: </label>
|
||||
<input type="text" id="die0" autocomplete="off" value="0.0" size="4" />
|
||||
<input type="text" id="die0" autocomplete="off" value="0.0" size="4" onchange="doMath()"/>
|
||||
<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>
|
||||
<p></p>
|
||||
<table id="data">
|
||||
<tr style="font-size: 75%;">
|
||||
<td><p></p>Reduction<p></p></td>
|
||||
<td>Exit Dia.</td>
|
||||
<td>Angle (2α)</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p></p>
|
||||
<button name="Add Reduction" id="addReduction" onclick="addReduction()">Add</button>
|
||||
@ -38,7 +45,6 @@
|
||||
<p></p>
|
||||
<table class="output" id="output">
|
||||
</table>
|
||||
<p style="font-size:60%">**Coming soon!</p>
|
||||
<p> </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user