84 lines
3.0 KiB
HTML
84 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>QRTransfer</title>
|
|
<script src="qrenc-4.0.0.js" type="text/javascript"></script>
|
|
<script type="text/javascript">
|
|
let $ = (ele) => document.getElementById(ele);
|
|
|
|
let fileData,
|
|
chunkSize,
|
|
segmentPosition,
|
|
activeCanvas = 0; // double buffering.
|
|
|
|
let serveCodes = () => {
|
|
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.)`;
|
|
displayQR(
|
|
currChunk + 1 + "|" + fileData.substring(segmentPosition, segmentPosition + chunkSize),
|
|
Number($("qrSize").value),
|
|
Number($("ecc").value)
|
|
);
|
|
segmentPosition += chunkSize;
|
|
|
|
if (segmentPosition < fileData.length) {
|
|
window.setTimeout(serveCodes, delay);
|
|
}
|
|
};
|
|
let displayQR = (data, 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);
|
|
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)));
|
|
// it seems that the qr library doesn't support binary data - converting to base64
|
|
fileData = window.btoa(binaryString.join(""));
|
|
window.scrollTo(0, 0);
|
|
serveCodes();
|
|
}
|
|
};
|
|
xhr.send();
|
|
};
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<center>
|
|
<canvas id="qrcanv0"></canvas>
|
|
<canvas id="qrcanv1"></canvas>
|
|
</center>
|
|
<hr />
|
|
Status:<span id="status">...</span>
|
|
<hr />
|
|
Filename:<input type="text" id="inputFileName" value="input.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>
|