joe/qrtransfer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Beautify

Browse Source
This commit is contained in:
Joe Tretter
2022-09-05 11:24:51 -05:00
parent c904b5ffef
commit 95e7968516
1 changed files with 30 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
Client/index.html
View File

@@ -2,44 +2,46 @@
<html> <html>
<head> <head>
<title>QRTransfer</title> <title>QRTransfer</title>
<style>
input {
position: absolute;
left: 150px;
}
</style>
<script src="qrenc-4.0.0.js" type="text/javascript"></script> <script src="qrenc-4.0.0.js" type="text/javascript"></script>
<script type="text/javascript"> <script type="text/javascript">
let fileData, let fileDataB64,
chunkSize, chunkSize,
segmentPosition, dataPosition,
timoutHandle, timoutHandle,
activeCanvas = 0; // double buffering. activeCanvas = 0; // double buffering.
const $ = (ele) => document.getElementById(ele); const $ = (ele) => document.getElementById(ele);
const serveCodes = () => { const serveCodes = () => {
let numChunks = Math.ceil(fileData.length / chunkSize); let numChunks = Math.ceil(fileDataB64.length / chunkSize);
let currChunk = Math.ceil(segmentPosition / chunkSize) + 1; let currChunk = Math.ceil(dataPosition / chunkSize) + 1;
let delay = Number($("delay").value); let delay = Number($("delay").value);
let minLeft = ((numChunks - currChunk) * delay) / 1000 / 60; let minLeft = ((numChunks - currChunk) * delay) / 1000 / 60;
$("status").innerText = `${currChunk}/${numChunks}/${((currChunk / numChunks) * 100).toFixed(2)}% (${minLeft.toFixed(2)} min left.)`; $("status").innerText = `${currChunk}/${numChunks}/${((currChunk / numChunks) * 100).toFixed(2)}% (${minLeft.toFixed(2)} min left.)`;
displayQR( displayQR(currChunk + "|" + fileDataB64.substring(dataPosition, dataPosition + chunkSize), Number($("qrSize").value), Number($("ecc").value));
currChunk + "|" + fileData.substring(segmentPosition, segmentPosition + chunkSize), dataPosition += chunkSize;
Number($("qrSize").value),
Number($("ecc").value)
);
segmentPosition += chunkSize;
if (segmentPosition < fileData.length) { if (dataPosition < fileDataB64.length) {
timoutHandle = window.setTimeout(serveCodes, delay); timoutHandle = window.setTimeout(serveCodes, delay);
} }
}; };
const displayQR = (data, size, ecc) => { const displayQR = (data, size, ecc) => {
window.scrollTo(0, 0);
var qr = new QR($("qrcanv" + activeCanvas), data, size, size, ecc); var qr = new QR($("qrcanv" + activeCanvas), data, size, size, ecc);
$("qrcanv" + (activeCanvas === 0 ? 1 : 0)).style.display = "none"; $("qrcanv" + (activeCanvas === 0 ? 1 : 0)).style.display = "none";
$("qrcanv" + activeCanvas).style.display = "block"; $("qrcanv" + activeCanvas).style.display = "block";
activeCanvas = activeCanvas === 0 ? 1 : 0; activeCanvas = activeCanvas === 0 ? 1 : 0;
}; };
const getFile = (fileName) => { const startAction = (fileName) => {
chunkSize = Number($("chunkSize").value); chunkSize = Number($("chunkSize").value);
segmentPosition = Number($("startChunk").value * chunkSize); dataPosition = Number($("startChunk").value * chunkSize);
timoutHandle && window.clearTimeout(timoutHandle);
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open("GET", fileName, true); xhr.open("GET", fileName, true);
@@ -47,12 +49,13 @@
xhr.onload = (e) => { xhr.onload = (e) => {
tgt = e.currentTarget; tgt = e.currentTarget;
if (tgt.status == 200) { if (tgt.status == 200) {
let uInt8Array = new Uint8Array(tgt.response); let allCharCodes = new Uint8Array(tgt.response);
let binaryString = new Array(uInt8Array.length); let allChars = new Array(allCharCodes.length);
uInt8Array.map((x, idx) => (binaryString[idx] = String.fromCharCode(x))); allCharCodes.map((x, idx) => (allChars[idx] = String.fromCharCode(x)));
// it seems that the qr library doesn't support binary data - converting to base64 // it seems that the qr library doesn't support binary data - converting to base64
fileData = window.btoa(binaryString.join("")); fileDataB64 = window.btoa(allChars.join(""));
window.scrollTo(0, 0);
timoutHandle && window.clearTimeout(timoutHandle);
timoutHandle = window.setTimeout(serveCodes, 3000); timoutHandle = window.setTimeout(serveCodes, 3000);
} }
}; };
@@ -61,25 +64,15 @@
</script> </script>
</head> </head>
<body> <body>
<center> <center><canvas id="qrcanv0"></canvas><canvas id="qrcanv1"></canvas></center>
<canvas id="qrcanv0"></canvas>
<canvas id="qrcanv1"></canvas>
</center>
<hr /> <hr />
Status:<span id="status">...</span> Status:<span id="status">...</span> <button onclick="startAction($('inputFileName').value)">Start(3 sec delay)</button>
<hr /> <hr />
Filename:<input type="text" id="inputFileName" value="testInput/5K.dat" /> Filename:<input type="text" id="inputFileName" value="testInput/5K.dat" /> <br />
<br /> ECC (1-4):<input type="number" value="4" id="ecc" /> <br />
ECC (1-4):<input type="number" value="4" id="ecc" /> Qr-Size:<input type="number" value="800" id="qrSize" /> <br />
<br /> Chunk-Size<input type="number" value="1200" id="chunkSize" /> <br />
Qr-Size:<input type="number" value="800" id="qrSize" /> Start-Chunk:<input type="number" value="0" id="startChunk" /> <br />
<br />
Chunk-Size<input type="number" value="1200" id="chunkSize" />
<br />
Start-Chunk:<input type="number" value="0" id="startChunk" />
<br />
Delay:<input type="number" value="1500" id="delay" /> Delay:<input type="number" value="1500" id="delay" />
<br />
<button onclick="getFile($('inputFileName').value)">Read</button>
</body> </body>
</html> </html>