Added a print button to output a nicely formatted display
Fixed clear-screen button when there were several reductions on screen
This commit is contained in:
parent
5e2d5ba19d
commit
98e0a1ffdb
17
analyser.css
17
analyser.css
@ -110,4 +110,21 @@
|
|||||||
font-family: serif;
|
font-family: serif;
|
||||||
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
59
analyser.js
@ -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 = " ";
|
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
64
index.html
@ -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>─</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,34 +27,36 @@
|
|||||||
<p>─</p>
|
<p>─</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="body" id="body">
|
<div class="body" id="body">
|
||||||
<label for="die0">Start: </label>
|
<div id="inputArea">
|
||||||
<input type="text" id="die0" autocomplete="off" value="0.0" size="4" onchange="doMath()"/>
|
<label for="die0">Start: </label>
|
||||||
<input type="radio" name="units" id="metric" value="mm" checked tabindex=-1 />
|
<input type="text" id="die0" autocomplete="off" value="0.0" size="4" onchange="doMath()"/>
|
||||||
<label for="metric">mm</label>
|
<input type="radio" name="units" id="metric" value="mm" checked tabindex=-1 />
|
||||||
<input type="radio" name="units" id="inches" value="in" tabindex=-1 />
|
<label for="metric">mm</label>
|
||||||
<label for="inches">in</label>
|
<input type="radio" name="units" id="inches" value="in" tabindex=-1 />
|
||||||
<p></p>
|
<label for="inches">in</label>
|
||||||
<button name="Add Draft" id="addReduction" onclick="addReduction()">Add</button>
|
<p></p>
|
||||||
<button name="Remove Draft" id="removeReduction" onclick="removeReduction()">Remove</button>
|
<button name="Add Draft" id="addReduction" onclick="addReduction()">Add</button>
|
||||||
<p></p>
|
<button name="Remove Draft" id="removeReduction" onclick="removeReduction()">Remove</button>
|
||||||
<table id="data">
|
<p></p>
|
||||||
<tr style="font-size: 75%;">
|
<table id="data">
|
||||||
<td><p></p>Draft<p></p></td>
|
<tr style="font-size: 75%;">
|
||||||
<td>Exit Dia.</td>
|
<td><p></p>Draft<p></p></td>
|
||||||
<td>Angle (2α)</td>
|
<td>Exit Dia.</td>
|
||||||
</tr>
|
<td>Angle (2α)</td>
|
||||||
</table>
|
</tr>
|
||||||
<p></p>
|
</table>
|
||||||
<button name="Calculate" id="calculateButton" onclick="doMath()">Recalculate</button>
|
<p></p>
|
||||||
<button name="Clear" id="clearButton" onclick="clearScreen()">Clear</button>
|
<button name="Calculate" id="calculateButton" onclick="doMath()">Recalculate</button>
|
||||||
<script>addReduction()</script>
|
<button name="Clear" id="clearButton" onclick="clearScreen()">Clear</button>
|
||||||
<script>addReduction()</script>
|
<button name="Print" id="printButton" onclick="printScreen()">Print</button>
|
||||||
|
<script>addReduction()</script>
|
||||||
<p> </p>
|
<script>addReduction()</script>
|
||||||
<p></p>
|
<p> </p>
|
||||||
|
<p></p>
|
||||||
|
</div>
|
||||||
<table class="output" id="output"></table>
|
<table class="output" id="output"></table>
|
||||||
<p> </p>
|
<p> </p>
|
||||||
<p id="outputChart"> </p>
|
<p id="outputChart"></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer" align="center">
|
<div class="footer" align="center">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user