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

Added a print button to output a nicely formatted display

Browse Source 
Fixed clear-screen button when there were several reductions on screen
This commit is contained in:
Taylor Courage 2025-01-21 12:43:55 -05:00
parent 5e2d5ba19d
commit 98e0a1ffdb
3 changed files with 108 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
analyser.css
View File

@ -110,4 +110,21 @@
font-family: serif;
font-style: oblique;
font-size: 0.8em;
}
.printHeader {
display: none;
text-align: center;
}
@media print {
#inputArea {
display: none;
}
.header {
display: none;
}
.printHeader {
display: inline;
}
}

59
analyser.js
View File

@ -259,18 +259,67 @@ function drawGraph() {
function clearScreen() {
// Reset variables back to defaults
numDies = 2;
numDies = 0;
outputVisible = 0;
// Delete the table
outputTable = document.getElementById("output");
// 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 = "&nbsp;";
outputGraph.innerHTML = "";
// Add two fresh entries
addReduction();
addReduction();
}
///// START OF ALGORITHMS SECTION /////
///// END OF ALGORITHMS SECTION /////
///// EXTRA SECTION /////
function printScreen() {
var subtitle = document.getElementById("subtitle");
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();
}

64
index.html
View File

@ -6,12 +6,20 @@
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<script src="analyser.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>
<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>
@ -19,34 +27,36 @@
<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" onchange="doMath()"/>
<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>
<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>Draft<p></p></td>
<td>Exit Dia.</td>
<td>Angle (2α)</td>
</tr>
</table>
<p></p>
<button name="Calculate" id="calculateButton" onclick="doMath()">Recalculate</button>
<button name="Clear" id="clearButton" onclick="clearScreen()">Clear</button>
<script>addReduction()</script>
<script>addReduction()</script>
<p>&nbsp;</p>
<p></p>
<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 />
<label for="metric">mm</label>
<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>Draft<p></p></td>
<td>Exit Dia.</td>
<td>Angle (2α)</td>
</tr>
</table>
<p></p>
<button name="Calculate" id="calculateButton" onclick="doMath()">Recalculate</button>
<button name="Clear" id="clearButton" onclick="clearScreen()">Clear</button>
<button name="Print" id="printButton" onclick="printScreen()">Print</button>
<script>addReduction()</script>
<script>addReduction()</script>
<p>&nbsp;</p>
<p></p>
</div>
<table class="output" id="output"></table>
<p>&nbsp;</p>
<p id="outputChart">&nbsp;</p>
<p id="outputChart"></p>
</div>
</div>
<div class="footer" align="center">