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

Simplify client code

Browse Source
This commit is contained in:
Joe Tretter
2022-09-04 16:18:10 -05:00
parent ee0b9de38b
commit d0453a4d7c
1 changed files with 37 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
Client/index.html
View File

@@ -1,38 +1,34 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<style type="text/css">
body {
background: lightgray;
}
</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 $ = (ele) => document.getElementById(ele); let $ = (ele) => document.getElementById(ele);
let fileData; let fileData,
let chunkSize; chunkSize,
let segmentPosition = 0; segmentPosition = 0,
activeCanvas = 0;
let serveCodes = () => { let serveCodes = () => {
$("status").value = `${fileData.length}/${segmentPosition}/${(segmentPosition / fileData.length).toFixed(2)}%`; let numChunks = fileData.length / chunkSize;
doqr( let currChunk = segmentPosition / chunkSize;
$("startChunk").value + "|" + fileData.substring(segmentPosition, segmentPosition + chunkSize), let delay = Number($("delay").value);
Number($("qrSize").value), let minLeft = ((numChunks - currChunk) * delay) / 1000 / 60;
Number($("ecc").value)
); $("status").innerText = `${currChunk}/${Math.ceil(numChunks)}/${(currChunk / numChunks).toFixed(2)}% (${minLeft.toFixed(2)} minutes left.)`;
doqr(currChunk + "|" + fileData.substring(segmentPosition, segmentPosition + chunkSize), Number($("qrSize").value), Number($("ecc").value));
segmentPosition += chunkSize; segmentPosition += chunkSize;
$("startChunk").value = segmentPosition / chunkSize;
if (segmentPosition < fileData.length) { if (segmentPosition < fileData.length) {
//window.setTimeout(serveCodes, 1000); window.setTimeout(serveCodes, delay);
} }
}; };
let doqr = (data, size, ecc) => { let doqr = (data, size, ecc) => {
var qr = new QR($("qrcanv"), data, size, size, ecc); 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;
}; };
let getFile = (fileName) => { let getFile = (fileName) => {
chunkSize = Number($("chunkSize").value); chunkSize = Number($("chunkSize").value);
@@ -47,7 +43,7 @@
let uInt8Array = new Uint8Array(tgt.response); let uInt8Array = new Uint8Array(tgt.response);
let binaryString = new Array(uInt8Array.length); let binaryString = new Array(uInt8Array.length);
uInt8Array.map((x, idx) => (binaryString[idx] = String.fromCharCode(x))); uInt8Array.map((x, idx) => (binaryString[idx] = String.fromCharCode(x)));
// it seems that the qr library doesn't support binary data - converting to base64
fileData = window.btoa(binaryString.join("")); fileData = window.btoa(binaryString.join(""));
serveCodes(); serveCodes();
} }
@@ -57,22 +53,25 @@
</script> </script>
</head> </head>
<body> <body>
<div> <center>
Filename:<input type="text" value="input.dat" id="inputFileName" /> <canvas id="qrcanv0"></canvas>
<br /> <canvas id="qrcanv1"></canvas>
ECC (1-4):<input type="number" value="4" id="ecc" /> </center>
<br /> <hr />
Qr-Size:<input type="number" value="400" id="qrSize" /> Status:<span id="status">...</span>
<br /> <hr />
Chunk-Size:<input type="number" value="1200" id="chunkSize" /> Filename:<input type="text" value="input.dat" id="inputFileName" />
<br /> <br />
Start-Chunk:<input type="number" value="0" id="startChunk" /> ECC (1-4):<input type="number" value="4" id="ecc" />
<br /> <br />
<button onclick="getFile($('inputFileName').value)">Read</button> Qr-Size:<input type="number" value="800" id="qrSize" />
<hr /> <br />
<canvas id="qrcanv"></canvas> Chunk-Size<input type="number" value="1200" id="chunkSize" />
<hr /> <br />
<input type="text" id="status" /> Start-Chunk:<input type="number" value="0" id="startChunk" />
</div> <br />
Delay:<input type="number" value="1500" id="delay" />
<br />
<button onclick="getFile($('inputFileName').value)">Read</button>
</body> </body>
</html> </html>