79 lines
3.2 KiB
HTML
79 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<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 fileDataB64,
|
|
chunkSize,
|
|
dataPosition,
|
|
timoutHandle,
|
|
activeCanvas = 0; // double buffering.
|
|
|
|
const $ = (ele) => document.getElementById(ele);
|
|
const serveCodes = () => {
|
|
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 + "|" + fileDataB64.substring(dataPosition, dataPosition + chunkSize), Number($("qrSize").value), Number($("ecc").value));
|
|
dataPosition += chunkSize;
|
|
|
|
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 startAction = (fileName) => {
|
|
chunkSize = Number($("chunkSize").value);
|
|
dataPosition = 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 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
|
|
fileDataB64 = window.btoa(allChars.join(""));
|
|
|
|
timoutHandle && window.clearTimeout(timoutHandle);
|
|
timoutHandle = window.setTimeout(serveCodes, 3000);
|
|
}
|
|
};
|
|
xhr.send();
|
|
};
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<center><canvas id="qrcanv0"></canvas><canvas id="qrcanv1"></canvas></center>
|
|
<hr />
|
|
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 />
|
|
Delay:<input type="number" value="1500" id="delay" />
|
|
</body>
|
|
</html>
|