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

@ -111,3 +111,20 @@
font-style: oblique; font-style: oblique;
font-size: 0.8em; 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() { function clearScreen() {
// Reset variables back to defaults // Reset variables back to defaults
numDies = 2; numDies = 0;
outputVisible = 0; outputVisible = 0;
// Delete the table // Clear and reset inputs
outputTable = document.getElementById("output"); 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 = ""; outputTable.innerHTML = "";
// Delete the output graph // Delete the output graph
outputGraph = document.getElementById("outputChart"); 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();
}

16
index.html
View File

@ -6,12 +6,20 @@
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<script src="analyser.js"></script> <script src="analyser.js"></script>
<script src="https://cdn.jsdelivr.net/npm/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> <title>Wiredraw Setup Analyser</title>
</head> </head>
<body> <body>
<div class="content"> <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"> <div class="header">
<p id="vanity">Taylor Courage's</p> <p id="vanity">Taylor Courage's</p>
<h1>Setup Analyser</h1> <h1>Setup Analyser</h1>
@ -19,6 +27,7 @@
<p>&HorizontalLine;</p> <p>&HorizontalLine;</p>
</div> </div>
<div class="body" id="body"> <div class="body" id="body">
<div id="inputArea">
<label for="die0">Start: </label> <label for="die0">Start: </label>
<input type="text" id="die0" autocomplete="off" value="0.0" size="4" onchange="doMath()"/> <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 /> <input type="radio" name="units" id="metric" value="mm" checked tabindex=-1 />
@ -39,14 +48,15 @@
<p></p> <p></p>
<button name="Calculate" id="calculateButton" onclick="doMath()">Recalculate</button> <button name="Calculate" id="calculateButton" onclick="doMath()">Recalculate</button>
<button name="Clear" id="clearButton" onclick="clearScreen()">Clear</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>
<script>addReduction()</script> <script>addReduction()</script>
<p>&nbsp;</p> <p>&nbsp;</p>
<p></p> <p></p>
</div>
<table class="output" id="output"></table> <table class="output" id="output"></table>
<p>&nbsp;</p> <p>&nbsp;</p>
<p id="outputChart">&nbsp;</p> <p id="outputChart"></p>
</div> </div>
</div> </div>
<div class="footer" align="center"> <div class="footer" align="center">