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