From 4c3a190e7204d4a5ea1529021390c539fa5f456f Mon Sep 17 00:00:00 2001 From: Taylor Courage Date: Tue, 21 Jan 2025 02:42:11 -0500 Subject: [PATCH] Added delta calculation --- analyser.css | 31 +++++++++++++++++++++- analyser.js | 75 +++++++++++++++++++++++++++++++++++++++------------- index.html | 12 ++++++--- 3 files changed, 95 insertions(+), 23 deletions(-) diff --git a/analyser.css b/analyser.css index 27d1c6e..50fdbde 100644 --- a/analyser.css +++ b/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 { diff --git a/analyser.js b/analyser.js index c6f0d88..1396c7a 100644 --- a/analyser.js +++ b/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 += ""; - html += ""; +function addReduction() { + numDies ++; // Increment our die count + + // Create the data going into the row + var inputLabel = ""; + var inputSize = ""; + var inputAngle = ""; // 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; diff --git a/index.html b/index.html index 6eeed3b..c41dee0 100644 --- a/index.html +++ b/index.html @@ -4,12 +4,14 @@ - + + Wiredraw Setup Analyser +

 

Taylor Courage's

@@ -19,13 +21,18 @@
- +

+ + + + +

Reduction

Exit Dia.Angle (2α)

@@ -38,7 +45,6 @@

-

**Coming soon!