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

Added a summary display to show total and average reductions, etc.

Browse Source 
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
This commit is contained in:
Taylor Courage 2025-01-22 12:52:24 -05:00
parent f98c616fc3
commit c336174a23
3 changed files with 287 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
analyser.css
View File

@ -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%;
}
}

237
analyser.js
View File

@ -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 + ": &nbsp;&nbsp;";
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 = "<p></p><h5 align=\"center\" id=\"statsSummaryHeader\">Summary</h5><table id=\"statsTable\"></table>";
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 = "&nbsp;";
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 = "&nbsp;";
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 = "&nbsp;";
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 = "&nbsp;";
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;
}
}
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;
}

19
index.html
View File

@ -14,11 +14,8 @@
<div class="content">
<div class="printHeader">
<p id="vanity">Taylor Courage's</p>
<h1>Draft Analysis</h1>
<h3 id="subtitle"></h3>
<p id="numReductions"></p>
<p>&HorizontalLine;</p>
<p></p>
<h2>Draft Analysis</h2>
<h4 id="subtitle"></h4>
</div>
<div class="header">
<p id="vanity">Taylor Courage's</p>
@ -54,11 +51,19 @@
<p>&nbsp;</p>
<p></p>
</div>
<p><hr id="spacer1" /></p>
<table class="output" id="output"></table>
<p>&nbsp;</p>
<p id="outputChart"></p>
<p><hr id="spacer2" /></p>
<div id="outputChart"></div>
<p><hr id="spacer3" /></p>
<div id="statistics"></div>
<p></p>
</div>
</div>
<div class="printFooter" align="center">
<p>&nbsp;</p>
<p>&copy; 2025 Taylor Courage</p>
</div>
<div class="footer" align="center">
<p>&nbsp;</p>
<p>&copy; 2025 <a href="http://git.taylorcourage.net/Taylor">Taylor Courage</a></p>