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>
<html>
<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 type="text/javascript">
let $ = (ele) => document.getElementById(ele);
let fileData;
let chunkSize;
let segmentPosition = 0;
let fileData,
chunkSize,
segmentPosition = 0,
activeCanvas = 0;
let serveCodes = () => {
$("status").value = `${fileData.length}/${segmentPosition}/${(segmentPosition / fileData.length).toFixed(2)}%`;
doqr(
$("startChunk").value + "|" + fileData.substring(segmentPosition, segmentPosition + chunkSize),
Number($("qrSize").value),
Number($("ecc").value)
);
let numChunks = fileData.length / chunkSize;
let currChunk = segmentPosition / chunkSize;
let delay = Number($("delay").value);
let minLeft = ((numChunks - currChunk) * delay) / 1000 / 60;
$("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;
$("startChunk").value = segmentPosition / chunkSize;
if (segmentPosition < fileData.length) {
//window.setTimeout(serveCodes, 1000);
window.setTimeout(serveCodes, delay);
}
};
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) => {
chunkSize = Number($("chunkSize").value);
@@ -47,7 +43,7 @@
let uInt8Array = new Uint8Array(tgt.response);
let binaryString = new Array(uInt8Array.length);
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(""));
serveCodes();
}
@@ -57,22 +53,25 @@
</script>
</head>
<body>
<div>
Filename:<input type="text" value="input.dat" id="inputFileName" />
<br />
ECC (1-4):<input type="number" value="4" id="ecc" />
<br />
Qr-Size:<input type="number" value="400" id="qrSize" />
<br />
Chunk-Size:<input type="number" value="1200" id="chunkSize" />
<br />
Start-Chunk:<input type="number" value="0" id="startChunk" />
<br />
<button onclick="getFile($('inputFileName').value)">Read</button>
<hr />
<canvas id="qrcanv"></canvas>
<hr />
<input type="text" id="status" />
</div>
<center>
<canvas id="qrcanv0"></canvas>
<canvas id="qrcanv1"></canvas>
</center>
<hr />
Status:<span id="status">...</span>
<hr />
Filename:<input type="text" value="input.dat" id="inputFileName" />
<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>