From c336174a231889319ca4cf601454054a185ddf67 Mon Sep 17 00:00:00 2001 From: Taylor Courage Date: Wed, 22 Jan 2025 12:52:24 -0500 Subject: [PATCH] Added a summary display to show total and average reductions, etc. Bugfixes, including removing elements from the graph when removing entries, and three-decimal formatting our inches. Layout changes, in both code and webpage. Some edits to the print layout to improve printing and readability --- analyser.css | 77 +++++++++++++++++ analyser.js | 237 ++++++++++++++++++++++++++++++++++++++++++--------- index.html | 19 +++-- 3 files changed, 287 insertions(+), 46 deletions(-) diff --git a/analyser.css b/analyser.css index 1901e87..8a88938 100644 --- a/analyser.css +++ b/analyser.css @@ -89,6 +89,17 @@ } .footer { + display: inline; + position: relative; + bottom: 15px; + width: 100%; + font-size: 75%; + margin: auto; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +.printFooter { + display: none; position: relative; bottom: 15px; width: 100%; @@ -117,6 +128,57 @@ text-align: center; } +#spacer1 { + display: none; +} + +#spacer2 { + display: none; +} + +#spacer3 { + display: none; +} + +#statistics { + font-size: 90%; +} + +#statistics h5 { + font-size: 100%; +} + +#statsSummaryHeader { + color: rgba(0,0,0,0.5); +} + +#statsTable { + margin: auto; +} + +#statsCol1 { + text-align: right; +} + +#statsCol2 { + text-align: left; + padding-left: 2%; +} + +#statsCol3 { + width: 20%; +} + +#statsCol4 { + text-align: right; +} + +#statsCol5 { + text-align: left; + padding-left: 2%; +} + + @media print { @page { margin-top: 0; @@ -133,4 +195,19 @@ .printHeader { display: inline; } + .footer { + display: none; + } + .printFooter { + display: inline; + } + .output { + font-size:80%; + } + #statistics { + font-size: 68%; + } + .content { + margin-top: 5%; + } } \ No newline at end of file diff --git a/analyser.js b/analyser.js index d3ed000..ab9c3a4 100644 --- a/analyser.js +++ b/analyser.js @@ -1,5 +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 +var outputVisible = 0; // Status of whether the output is displayed or not // Arrays to store values for graphs var dieCount = []; @@ -68,6 +68,12 @@ function addReduction() { function removeReduction() { // function to remove the last row numDies --; document.getElementById("data").deleteRow(-1); // delete the last row in the table + + // Remove the last item in each array to remove the tick from the graph + dieCount.splice(-1); + dataROA.splice(-1); + dataElong.splice(-1); + dataDelta.splice(-1); if (outputVisible == 1) { // Check if out output is visible and update immediately when adding dies doMath(); @@ -91,23 +97,23 @@ function doMath() { var row = []; row[0] = outputTable.insertRow(0); row[0].id = "outputHeader"; // set the header row - var r1c1 = row[0].insertCell(0); //blank - var r1c2 = row[0].insertCell(1); // "Start -> Finish" - var r1c3 = row[0].insertCell(2); // "ROA" - var r1c4 = row[0].insertCell(3); // "Elong" - var r1c5 = row[0].insertCell(4); // "Delta" + var cell1 = row[0].insertCell(0); //blank + var cell2 = row[0].insertCell(1); // "Start -> Finish" + var cell3 = row[0].insertCell(2); // "ROA" + var cell4 = row[0].insertCell(3); // "Elong" + var cell5 = row[0].insertCell(4); // "Delta" // Create the header of the table - r1c1.innerHTML = "Draft"; - r1c1.id = "reductionNumHeader"; - r1c2.innerHTML = "Start -> Finish"; - r1c2.id = "startFinish"; - r1c3.innerHTML = "ROA (%)"; - r1c3.id = "roa"; - r1c4.innerHTML = "Elong (%)"; - r1c4.id = "elong"; - r1c5.innerHTML = "Δ Factor"; - r1c5.id = "delta"; + cell1.innerHTML = "Draft"; + cell1.id = "reductionNumHeader"; + cell2.innerHTML = "Start -> Finish"; + cell2.id = "startFinish"; + cell3.innerHTML = "ROA (%)"; + cell3.id = "roa"; + cell4.innerHTML = "Elong (%)"; + cell4.id = "elong"; + cell5.innerHTML = "Δ Factor"; + cell5.id = "delta"; for (var i = 1; i < numDies + 1; i++) { inSize = document.getElementById("die" + (i - 1)).value; // the input size @@ -136,25 +142,25 @@ function doMath() { // 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 = row[i].insertCell(0); cell1.id = "reductionNum"; - var cell2 = row[i].insertCell(1); + cell2 = row[i].insertCell(1); cell2.id = "startFinish"; - var cell3 = row[i].insertCell(2); + cell3 = row[i].insertCell(2); cell3.id = "roa"; - var cell4 = row[i].insertCell(3); + cell4 = row[i].insertCell(3); cell4.id = "elong"; - var cell5 = row[i].insertCell(4); + cell5 = row[i].insertCell(4); cell5.id = "delta"; // 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; + dataROA[i - 1] = (Math.round(getReduction(inSize, outSize) * 100) / 100).toFixed(2); + dataElong[i - 1] = (Math.round(getElongation(inSize, outSize) * 100) / 100).toFixed(2); + dataDelta[i - 1] = (Math.round(getDelta(inSize, outSize, angle) * 100) / 100).toFixed(2); // Set the values of the cells in our table cell1.innerHTML = "#" + i + ":   "; - cell2.innerHTML = inSize + "\" (" + toMillimetres(inSize) + " mm) -> " + outSize + "\" (" + toMillimetres(outSize) + " mm)"; + cell2.innerHTML = inSize.toFixed(3) + "\" (" + toMillimetres(inSize) + " mm) -> " + outSize.toFixed(3) + "\" (" + toMillimetres(outSize) + " mm)"; cell3.innerHTML = dataROA[i - 1]; cell4.innerHTML = dataElong[i - 1]; cell5.innerHTML = dataDelta[i - 1]; @@ -162,6 +168,12 @@ function doMath() { dieCount[i - 1] = i; } drawGraph(); + getStatistics(); + + // Add spacers + document.getElementById("spacer1").style.display = 'block'; + document.getElementById("spacer2").style.display = 'block'; + document.getElementById("spacer3").style.display = 'block'; } function drawGraph() { @@ -257,6 +269,145 @@ function drawGraph() { }); } +function getStatistics() { + // Get data from page + var div = document.getElementById("statistics"); + var startSize = formatCheck(document.getElementById("die0").value); + var finalSize = formatCheck(document.getElementById("die" + numDies).value); + + // Check if the start size is metric/rod and convert to inches + if (document.getElementById("metric").checked == true) { + startSize = toInches(startSize); + } + + // We'll do a lot of the heavy math-lifting here to make things easier to read below + var avgDelta = 0; + var avgROA = 0; + var avgElong = 0; + var totalROA = Math.round(getReduction(startSize, finalSize) * 100) / 100; + var totalElong = Math.round(getElongation(startSize, finalSize) * 100) / 100; + + // Get average ROA + for (var i = 0; i < numDies; i++) { + avgROA += Number(dataROA[i]); + } + avgROA = (Math.round((avgROA / numDies) * 100) / 100).toFixed(2); + + // Get average Elong + for (var i = 0; i < numDies; i++) { + avgElong += Number(dataElong[i]); + } + avgElong = (Math.round((avgElong / numDies) * 100) / 100).toFixed(2); + + // Get average delta + for (var i = 0; i < numDies; i++) { + avgDelta += Number(dataDelta[i]); + } + avgDelta = (Math.round((avgDelta / numDies) * 100) / 100).toFixed(2); + + // Create the table to display statistics + div.innerHTML = "

Summary
"; + + var statsTable = document.getElementById("statsTable"); + + + //// ROW 1 //// + var row = statsTable.insertRow(0); + + var c1 = row.insertCell(0); + var c2 = row.insertCell(1); + var c3 = row.insertCell(2); + var c4 = row.insertCell(3); + var c5 = row.insertCell(4); + + // COL 1 + c1.innerHTML = "# Of Reductions: "; + c1.id = "statsCol1"; + c2.innerHTML = numDies; + c2.id = "statsCol2"; + // + c3.innerHTML = " "; + c3.id = "statsCol3"; + // COL 2 + c4.innerHTML = "Avg. Δ Factor: "; + c4.id = "statsCol4"; + c5.innerHTML = avgDelta; + c5.id = "statsCol5"; + + + //// ROW 2 //// + row = statsTable.insertRow(1); + + c1 = row.insertCell(0); + c2 = row.insertCell(1); + c3 = row.insertCell(2); + c4 = row.insertCell(3); + c5 = row.insertCell(4); + + // COL 1 + c1.innerHTML = "Total R. Of Diameter: "; + c1.id = "statsCol4"; + c2.innerHTML = (Math.round((startSize - finalSize) * 1000) / 1000).toFixed(3) + "\""; + c2.id = "statsCol5"; + // + c3.innerHTML = " "; + c3.id = "statsCol3"; + // COL 2 + c4.innerHTML = "------"; + c4.id = "statsCol4"; + c5.innerHTML = "---"; + c5.id = "statsCol5"; + + + //// ROW 3 //// + row = statsTable.insertRow(2); + + c1 = row.insertCell(0); + c2 = row.insertCell(1); + c3 = row.insertCell(2); + c4 = row.insertCell(3); + c5 = row.insertCell(4); + + // COL 1 + c1.innerHTML = "Total R. Of Area: "; + c1.id = "statsCol1"; + c2.innerHTML = totalROA + "%"; + c2.id = "statsCol2"; + // + c3.innerHTML = " "; + c3.id = "statsCol3"; + // COL 2 + c4.innerHTML = "Avg. R. of Area: "; + c4.id = "statsCol4"; + c5.innerHTML = avgROA + "%"; + c5.id = "statsCol5"; + + + //// ROW 4 //// + row = statsTable.insertRow(3); + + c1 = row.insertCell(0); + c2 = row.insertCell(1); + c3 = row.insertCell(2); + c4 = row.insertCell(3); + c5 = row.insertCell(4); + + // COL 1 + c1.innerHTML = "Total Elong.: "; + c1.id = "statsCol1"; + c2.innerHTML = totalElong + "%"; + c2.id = "statsCol2"; + // + c3.innerHTML = " "; + c3.id = "statsCol3"; + // COL 2 + c4.innerHTML = "Avg. Elongation: "; + c4.id = "statsCol4"; + c5.innerHTML = avgElong + "%"; + c5.id = "statsCol5"; + +} + function clearScreen() { // Reset variables back to defaults numDies = 0; @@ -278,6 +429,14 @@ function clearScreen() { outputGraph = document.getElementById("outputChart"); outputGraph.innerHTML = ""; + statistics = document.getElementById("statistics"); + statistics.innerHTML = ""; + + // Delete the spacers + document.getElementById("spacer1").style.display = 'none'; + document.getElementById("spacer2").style.display = 'none'; + document.getElementById("spacer3").style.display = 'none'; + // Add two fresh entries addReduction(); addReduction(); @@ -294,32 +453,23 @@ function printScreen() { // Get input size, and format it var inputSize = document.getElementById("die0").value; - if (inputSize < 10.0 && inputSize > 0) { // If we have a 'proper' number i.e. ".130" - inputSize = Number(inputSize); - } else { // re-format the number if it's 'wrong' i.e. "130" - inputSize = inputSize / 1000; - } + // If our start size is metric show that, otherwise swap them to show 'murican first if (document.getElementById("metric").checked) { var inputText = inputSize + " mm (" + toInches(inputSize) + "\")"; } else { - var inputText = inputSize + "\" (" + toMillimetres(inputSize) + " mm)"; + var inputText = formatCheck(inputSize) + "\" (" + toMillimetres(formatCheck(inputSize)) + " mm)"; } // Get the final size and format it var outputSize = document.getElementById("die" + numDies).value; - if (outputSize < 10.0 && outputSize > 0) { // If we have a 'proper' number i.e. ".130" - outputSize = Number(outputSize); - } else { // re-format the number if it's 'wrong' i.e. "130" - outputSize = outputSize / 1000; - } - var outputText = outputSize + "\" (" + toMillimetres(outputSize) + " mm)"; + outputSize = formatCheck(outputSize).toFixed(3); + var outputText = (outputSize) + "\" (" + toMillimetres(outputSize) + " mm)"; // Create and set the header subtitle.innerHTML = "For " + inputText + " to " + outputText; - reductionCount.innerHTML = "Across " + numDies + " reductions"; // Change the name of the window to save the file with the same var pageTitle = document.getElementById("pageTitle"); @@ -331,4 +481,13 @@ function printScreen() { // Reset the page title back to normal pageTitle.innerHTML = title; -} \ No newline at end of file +} + +function formatCheck(value) { + if (value < 10.0 && value > 0) { // If we have a 'proper' number i.e. ".130" + value = Number(value); + } else { // re-format the number if it's 'wrong' i.e. "130" + value = value / 1000; + } + return value; +} diff --git a/index.html b/index.html index 9b0e23f..f648b8b 100644 --- a/index.html +++ b/index.html @@ -14,11 +14,8 @@

Taylor Courage's

-

Draft Analysis

-

-

-

─

-

+

Draft Analysis

+

Taylor Courage's

@@ -54,11 +51,19 @@

 

+

-

 

-

+

+
+

+
+

+
+

 

+

© 2025 Taylor Courage

+

 

© 2025 Taylor Courage