Initial commit

README.md

@@ -0,0 +1,11 @@
+# Setup Analyser
+
+## Introduction
+
+This web app is to be used to calculate and visualise the setup of wiredraw machinery
+
+## How it works
+
+The user enters the measured finished size of material, adding and removing sizes as necessary. The final results print in a table below the entered data.
+
+See it in operation [here](https://analyser.taylorcourage.net)

analyser.css

@@ -0,0 +1,84 @@
+
+.content {
+    display: flex;
+    flex-direction: column;
+    max-width: 650px;
+    min-height: 250px;
+    position: relative;
+    border: 1px solid black;
+    border-radius: 5px;
+    padding-left: 17px;
+    padding-right: 17px;
+    margin: auto;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.body {
+    flex-grow: 1;
+    flex-shrink: 1;
+    margin: 0;
+    padding: 0;
+    color: black;
+}
+
+#output {
+    table-layout: fixed;
+    width: 100%;
+}
+
+#output td {
+    position: relative;
+    border: 1px solid;
+}
+
+#outputHeader {
+    font-size: 75%;
+    text-align: center;
+}
+
+#headerSpacer {
+    width: 18%;
+}
+
+#startFinish {
+    width: 300px;
+    text-align: center;
+}
+
+#roa {
+    width: 12%;
+    text-align: center;
+}
+
+#elong {
+    width: 12%;
+    text-align: center;
+}
+
+#delta {
+    width: 12%;
+}
+
+.footer {
+    position: relative;
+    bottom: 15px;
+    width: 100%;
+    font-size: 75%;
+    margin: auto;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.results {
+    font-size: 200%;
+    margin: auto;
+}
+
+.results h1 {
+    font-family:'Courier New', Courier, monospace;
+}
+
+#vanity {
+    font-family: serif;
+    font-style: oblique;
+    font-size: 0.8em;
+}

analyser.js

@@ -0,0 +1,111 @@
+var numDies = 0; // master counter for our number of dies
+
+// 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));
+    var finalArea = Math.PI * ((finalSize / 2) * (finalSize / 2));
+
+    return ((startArea - finalArea) / startArea) * 100;
+}
+
+// This function gets the elongation
+function getElongation(startSize, finalSize) {
+    return (Math.pow(startSize / finalSize, 2) - 1) * 100;
+}
+
+function addReduction() {
+    numDies ++;
+
+    // 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()\" />";
+
+    // create the row
+    var table = document.getElementById("data");
+    var row = table.insertRow(-1);
+    var cell1 = row.insertCell(0);
+    cell1.innerHTML = html;
+
+}
+
+function removeReduction() { // function to remove the last row
+    numDies --;
+    document.getElementById("data").deleteRow(-1); // delete the last row in the table
+}
+
+function doMath() {
+    outputTable = document.getElementById("output"); // Select our output data table
+    outputTable.innerHTML = "";
+    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"
+
+    // Create the header of the table
+    r1c1.innerHTML = "";
+    r1c1.id = "headerSpacer";
+    r1c2.innerHTML = "Start -> Finish";
+    r1c2.id = "startFinish";
+    r1c3.innerHTML = "ROA (%)";
+    r1c3.id = "roa";
+    r1c4.innerHTML = "Elong (%)";
+    r1c4.id = "elong";
+    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
+
+        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
+            inSize = toInches(inSize);
+        }
+            
+        // Format our numbers to prevent maximum user stupidity
+        if (inSize < 10.0 && inSize > 0) {  // If we have a 'proper' number i.e. ".130"
+            inSize = Number(inSize);
+        } else {  // re-format the number if it's 'wrong' i.e. "130"
+            inSize = inSize / 1000;
+        }
+        if (outSize < 10.0 && outSize > 0) {  // If we have a 'proper' number i.e. ".130"
+            outSize = Number(outSize);
+        } else {  // re-format the number if it's 'wrong' i.e. "130"
+            outSize = outSize / 1000;
+        }
+
+        console.log(inSize + " " + outSize);
+
+        row[i] = outputTable.insertRow(i);
+
+        var cell1 = row[i].insertCell(0);
+        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";
+
+        cell1.innerHTML = "Reduction " + 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;
+
+    }
+}
+
+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;
+}

index.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+    <script src="analyser.js"></script>
+    <link rel="stylesheet" href="analyser.css" />
+    <title>Wiredraw Setup Analyser</title>
+</head>
+
+<body>
+    <div class="content">
+        <div class="header">
+            <p id="vanity">Taylor Courage's</p>
+            <h1>Setup Analyser</h1>
+            <p>Use this tool to visualize the setup of wiredraw machinery</p>
+            <p>&HorizontalLine;</p>
+        </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="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">
+            </table>
+            <p></p>
+            <button name="Add Reduction" id="addReduction" onclick="addReduction()">Add</button>
+            <button name="Remove Reduction" id="removeReduction" onclick="removeReduction()">Remove</button>
+            <button name="Calculate" id="calculateButton" onclick="doMath()">Calculate!</button>
+            <script>addReduction()</script>
+            <script>addReduction()</script>
+
+            <p>&HorizontalLine;</p>
+            <p></p>
+            <table class="output" id="output">
+            </table>
+            <p style="font-size:60%">**Coming soon!</p>
+            <p>&nbsp;</p>
+        </div>
+    </div>
+    <div class="footer" align="center">
+        <p>&nbsp;</p>
+        <p>&copy; 2025 <a href="http://git.taylorcourage.net/Taylor">Taylor Courage</a></p>
+    </div>
+</body>
+
+</html>