Added a print button to output a nicely formatted display

Fixed clear-screen button when there were several reductions on screen

analyser.css

@@ -111,3 +111,20 @@
     font-style: oblique;
     font-size: 0.8em;
 }
+
+.printHeader {
+    display: none;
+    text-align: center;
+}
+
+@media print {
+    #inputArea {
+        display: none;
+    }
+    .header {
+        display: none;
+    }
+    .printHeader {
+        display: inline;
+    }
+}

analyser.js

@@ -1,6 +1,14 @@
 var numDies = 0; // master counter for our number of dies
 var outputVisible = 0; // Status of whether the output graph is displayed or not
 
+// Arrays to store values for graphs
+var dieCount = [];
+var dataROA = [];
+var dataElong = [];
+var dataDelta = [];
+
+///// START OF MATHS FUNCTIONS /////
+
 // 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));
@@ -19,6 +27,20 @@ function getDelta(startSize, finalSize, angle) {
     return ((startSize + finalSize) / (startSize - finalSize)) * Math.sin(angle);
 }
 
+function toMillimetres(size) { //convert to mm
+    size = Math.round((size * 100) * 25.4) / 100;
+    return size;
+}
+
+function toInches(size) { //convert to inches
+    size = Math.round((size * 1000) / 25.4) / 1000;
+    return size;
+}
+
+///// END OF MATHS SECTION /////
+
+///// START OF DISPLAY SECTION /////
+
 function addReduction() {
     numDies ++; // Increment our die count
 
@@ -52,15 +74,19 @@ function removeReduction() { // function to remove the last row
     }
 }
 
+///// END OF DISPLAY SECTION /////
+
+///// START OF ALGORITHMS SECTION /////
+
 function doMath() {
     outputVisible = 1; // set visible status to enabled
     outputTable = document.getElementById("output"); // Select our output data table
     outputTable.innerHTML = "";
 
+    // Make the output graph visible
+    outputGraph = document.getElementById("outputChart");
+    outputGraph.innerHTML = "<canvas id=\"outputData\"></canvas>";
 
-    var dataROA = [];
-    var dataElong = [];
-    var dataDelta = [];
 
     var row = [];
     row[0] = outputTable.insertRow(0);
@@ -72,7 +98,7 @@ function doMath() {
     var r1c5 = row[0].insertCell(4); // "Delta"
 
     // Create the header of the table
-    r1c1.innerHTML = "Reduction";
+    r1c1.innerHTML = "Draft";
     r1c1.id = "reductionNumHeader";
     r1c2.innerHTML = "Start -> Finish";
     r1c2.id = "startFinish";
@@ -80,7 +106,7 @@ function doMath() {
     r1c3.id = "roa";
     r1c4.innerHTML = "Elong (%)";
     r1c4.id = "elong";
-    r1c5.innerHTML = "Delta";
+    r1c5.innerHTML = "Δ Factor";
     r1c5.id = "delta";
 
     for (var i = 1; i < numDies + 1; i++) {
@@ -132,17 +158,168 @@ function doMath() {
         cell3.innerHTML = dataROA[i - 1];
         cell4.innerHTML = dataElong[i - 1];
         cell5.innerHTML = dataDelta[i - 1];
+
+        dieCount[i - 1] = i;
     }
+    drawGraph();
+}
+
+function drawGraph() {
+    // Documentation for the following chart-building command can be found at https://chartjs.org
+    const outputData = new Chart("outputData", {
+        type: "line",
+        data: {
+            labels: dieCount,
+            datasets: [{
+                data: dataROA,
+                label: "Reduction of Area",
+                borderColor: "green",
+                fill: false,
+                pointStyle: 'circle',
+                pointRadius: 4,
+                pointHoverRadius: 7,
+                yAxisID: 'y',
+                tension: 0
+            },{
+                data: dataElong,
+                label: "Elongation",
+                borderColor: "blue",
+                fill: false,
+                pointStyle: 'rect',
+                pointRadius: 5,
+                pointHoverRadius: 8,
+                yAxisID: 'y',
+                tension: 0
+            },{
+                data: dataDelta,
+                label: "Δ Factor",
+                borderColor: "red",
+                fill: false,
+                pointStyle: 'triangle',
+                pointRadius: 5,
+                pointHoverRadius: 8,
+                yAxisID: 'y1',
+                tension: 0
+            }],
+        },
+        options: {
+            responsive: true,
+            interaction: {
+                mode: 'index',
+                intersect: false,
+            },
+            stacked: false,
+            plugins: {
+                title: {
+                    display: true,
+                    text: "Draft Analysis"
+                },
+                legend: {
+                    labels: {
+                        usePointStyle: true
+                    }
+                }
+            },
+            scales: {
+                y: {
+                    type: 'linear',
+                    display: true,
+                    position: 'left',
+                    title: {
+                        display: true,
+                        text: "% (RoA/Elong)"
+                    },
+                    suggestedMin: 0,
+                    suggestedMax: 30,
+                }, 
+                y1: {
+                    type: 'linear',
+                    display: true,
+                    position: 'right',
+                    title: {
+                        display: true,
+                        text: "Δ Factor"
+                    },
+                    suggestedMin: 0,
+                    suggestedMax: 6,
+                    grid: {
+                      drawOnChartArea: false
+                    }
+                },
+                x: {
+                    title: {
+                        display: true,
+                        text: "Draft #"
+                    },
+                }
+            },
+        },
+      });
+}
+
+function clearScreen() {
+    // Reset variables back to defaults
+    numDies = 0;
+    outputVisible = 0;
+
+    // Clear and reset inputs
+    var inputStart = document.getElementById("die0");
+    inputStart.value = "0.0";
+    var unitsType = document.getElementById("metric");
+    unitsType.checked = true;
+    var inputTable = document.getElementById("data");
+    inputTable.innerHTML = "<tr style=\"font-size: 75%;\"><td><p></p>Draft<p></p></td><td>Exit Dia.</td><td>Angle (2α)</td></tr>";
+
+    // Delete the output table
+    var outputTable = document.getElementById("output");
+    outputTable.innerHTML = "";
+
+    // Delete the output graph
+    outputGraph = document.getElementById("outputChart");
+    outputGraph.innerHTML = "";
+
+    // Add two fresh entries
+    addReduction();
+    addReduction();
 }
 
 
-function toMillimetres(size) { //convert to mm
+///// END OF ALGORITHMS SECTION /////
-    size = Math.round((size * 100) * 25.4) / 100;
-    return size;
 
-}
+///// EXTRA SECTION  /////
 
-function toInches(size) { //convert to inches
+function printScreen() {
-    size = Math.round((size * 1000) / 25.4) / 1000;
+    var subtitle = document.getElementById("subtitle");
-    return size;
+    var reductionCount = document.getElementById("numReductions");
+
+    // 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)";
+    }
+
+
+    // 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;
+    }
+    console.log(outputSize);
+    var outputText = outputSize + "\" (" + toMillimetres(outputSize) + " mm)";
+    
+
+    subtitle.innerHTML = "For " + inputText + " to " + outputText;
+    reductionCount.innerHTML = "Across " + numDies + " reductions";
+    window.print();
 }

index.html

@@ -5,14 +5,21 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
     <script src="analyser.js"></script> 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> 
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <link rel="stylesheet" href="analyser.css" />
+    <link rel="stylesheet" href="analyser.css" type="text/css" />
     <title>Wiredraw Setup Analyser</title>
 </head>
 
 <body>
-    <p>&nbsp;</p>
     <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>
+        </div>
         <div class="header">
             <p id="vanity">Taylor Courage's</p>
             <h1>Setup Analyser</h1>
@@ -20,6 +27,7 @@
             <p>&HorizontalLine;</p>
         </div>
         <div class="body" id="body">
+            <div id="inputArea">
                 <label for="die0">Start: </label>
                 <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 />
@@ -27,25 +35,28 @@
                 <input type="radio" name="units" id="inches" value="in" tabindex=-1 />
                 <label for="inches">in</label>
                 <p></p>
+                <button name="Add Draft" id="addReduction" onclick="addReduction()">Add</button>
+                <button name="Remove Draft" id="removeReduction" onclick="removeReduction()">Remove</button>
+                <p></p>
                 <table id="data">
                     <tr style="font-size: 75%;">
-                    <td><p></p>Reduction<p></p></td>
+                        <td><p></p>Draft<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>
+                <button name="Calculate" id="calculateButton" onclick="doMath()">Recalculate</button>
-            <button name="Remove Reduction" id="removeReduction" onclick="removeReduction()">Remove</button>
+                <button name="Clear" id="clearButton" onclick="clearScreen()">Clear</button>
-            <button name="Calculate" id="calculateButton" onclick="doMath()">Calculate!</button>
+                <button name="Print" id="printButton" onclick="printScreen()">Print</button>
                 <script>addReduction()</script>
                 <script>addReduction()</script>
-
-            <p>&HorizontalLine;</p>
-            <p></p>
-            <table class="output" id="output">
-            </table>
                 <p>&nbsp;</p>
+                <p></p>
+            </div>
+            <table class="output" id="output"></table>
+            <p>&nbsp;</p>
+            <p id="outputChart"></p>
         </div>
     </div>
     <div class="footer" align="center">