2022-09-04 13:23:53 -05:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2022-09-04 16:52:21 -05:00
|
|
|
<title>QRTransfer</title>
|
2022-09-04 13:23:53 -05:00
|
|
|
<script src="qrenc-4.0.0.js" type="text/javascript"></script>
|
|
|
|
|
<script type="text/javascript">
|
2022-09-04 16:18:10 -05:00
|
|
|
let fileData,
|
|
|
|
|
chunkSize,
|
2022-09-04 16:52:21 -05:00
|
|
|
segmentPosition,
|
|
|
|
|
activeCanvas = 0; // double buffering.
|
2022-09-04 13:23:53 -05:00
|
|
|
|
2022-09-05 10:36:27 -05:00
|
|
|
const $ = (ele) => document.getElementById(ele);
|
|
|
|
|
const serveCodes = () => {
|
|
|
|
|
let numChunks = Math.ceil(fileData.length / chunkSize);
|
|
|
|
|
let currChunk = Math.ceil(segmentPosition / chunkSize) + 1;
|
2022-09-04 16:18:10 -05:00
|
|
|
let delay = Number($("delay").value);
|
|
|
|
|
let minLeft = ((numChunks - currChunk) * delay) / 1000 / 60;
|
|
|
|
|
|
2022-09-05 10:36:27 -05:00
|
|
|
$("status").innerText = `${currChunk}/${numChunks}/${((currChunk / numChunks) * 100).toFixed(2)}% (${minLeft.toFixed(2)} min left.)`;
|
2022-09-04 16:52:21 -05:00
|
|
|
displayQR(
|
2022-09-05 10:36:27 -05:00
|
|
|
currChunk + "|" + fileData.substring(segmentPosition, segmentPosition + chunkSize),
|
2022-09-04 16:52:21 -05:00
|
|
|
Number($("qrSize").value),
|
|
|
|
|
Number($("ecc").value)
|
|
|
|
|
);
|
2022-09-04 13:23:53 -05:00
|
|
|
segmentPosition += chunkSize;
|
|
|
|
|
|
|
|
|
|
if (segmentPosition < fileData.length) {
|
2022-09-04 16:18:10 -05:00
|
|
|
window.setTimeout(serveCodes, delay);
|
2022-09-04 13:23:53 -05:00
|
|
|
}
|
|
|
|
|
};
|
2022-09-05 10:36:27 -05:00
|
|
|
const displayQR = (data, size, ecc) => {
|
2022-09-04 16:18:10 -05:00
|
|
|
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;
|
2022-09-04 13:23:53 -05:00
|
|
|
};
|
2022-09-05 10:36:27 -05:00
|
|
|
const getFile = (fileName) => {
|
2022-09-04 13:23:53 -05:00
|
|
|
chunkSize = Number($("chunkSize").value);
|
|
|
|
|
segmentPosition = Number($("startChunk").value * chunkSize);
|
|
|
|
|
|
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
|
|
|
xhr.open("GET", fileName, true);
|
|
|
|
|
xhr.responseType = "arraybuffer";
|
|
|
|
|
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)));
|
2022-09-04 16:18:10 -05:00
|
|
|
// it seems that the qr library doesn't support binary data - converting to base64
|
2022-09-04 13:23:53 -05:00
|
|
|
fileData = window.btoa(binaryString.join(""));
|
2022-09-04 16:52:21 -05:00
|
|
|
window.scrollTo(0, 0);
|
2022-09-04 13:23:53 -05:00
|
|
|
serveCodes();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
xhr.send();
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2022-09-04 16:18:10 -05:00
|
|
|
<center>
|
|
|
|
|
<canvas id="qrcanv0"></canvas>
|
|
|
|
|
<canvas id="qrcanv1"></canvas>
|
|
|
|
|
</center>
|
|
|
|
|
<hr />
|
|
|
|
|
Status:<span id="status">...</span>
|
|
|
|
|
<hr />
|
2022-09-05 10:36:27 -05:00
|
|
|
Filename:<input type="text" id="inputFileName" value="testInput/matchSeg.dat" />
|
2022-09-04 16:18:10 -05:00
|
|
|
<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>
|
2022-09-04 13:23:53 -05:00
|
|
|
</body>
|
|
|
|
|
</html>
|
