Client/index.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>
Initial 2022-09-04 13:23:53 -05:00			`<!DOCTYPE html>`
			`<html>`
			`<head>`
add test payloads and clean up client 2022-09-04 16:52:21 -05:00			`<title>QRTransfer</title>`
Beautify 2022-09-05 11:24:51 -05:00			`<style>`
			`input {`
			`position: absolute;`
			`left: 150px;`
			`}`
			`</style>`

Initial 2022-09-04 13:23:53 -05:00			`<script src="qrenc-4.0.0.js" type="text/javascript"></script>`
			`<script type="text/javascript">`
Beautify 2022-09-05 11:24:51 -05:00			`let fileDataB64,`
Simplify client code 2022-09-04 16:18:10 -05:00			`chunkSize,`
Beautify 2022-09-05 11:24:51 -05:00			`dataPosition,`
Introduce delay before displaying QR code... 2022-09-05 10:53:10 -05:00			`timoutHandle,`
add test payloads and clean up client 2022-09-04 16:52:21 -05:00			`activeCanvas = 0; // double buffering.`
Initial 2022-09-04 13:23:53 -05:00
Fix counting of the segments to be easier Add test for exact test file 2022-09-05 10:36:27 -05:00			`const $ = (ele) => document.getElementById(ele);`
			`const serveCodes = () => {`
Beautify 2022-09-05 11:24:51 -05:00			`let numChunks = Math.ceil(fileDataB64.length / chunkSize);`
			`let currChunk = Math.ceil(dataPosition / chunkSize) + 1;`
Simplify client code 2022-09-04 16:18:10 -05:00			`let delay = Number($("delay").value);`
			`let minLeft = ((numChunks - currChunk) * delay) / 1000 / 60;`

Fix counting of the segments to be easier Add test for exact test file 2022-09-05 10:36:27 -05:00			$("status").innerText = `${currChunk}/${numChunks}/${((currChunk / numChunks) * 100).toFixed(2)}% (${minLeft.toFixed(2)} min left.)`;
Beautify 2022-09-05 11:24:51 -05:00			`displayQR(currChunk + "\|" + fileDataB64.substring(dataPosition, dataPosition + chunkSize), Number($("qrSize").value), Number($("ecc").value));`
			`dataPosition += chunkSize;`
Initial 2022-09-04 13:23:53 -05:00
Beautify 2022-09-05 11:24:51 -05:00			`if (dataPosition < fileDataB64.length) {`
Introduce delay before displaying QR code... 2022-09-05 10:53:10 -05:00			`timoutHandle = window.setTimeout(serveCodes, delay);`
Initial 2022-09-04 13:23:53 -05:00			`}`
			`};`
Fix counting of the segments to be easier Add test for exact test file 2022-09-05 10:36:27 -05:00			`const displayQR = (data, size, ecc) => {`
Beautify 2022-09-05 11:24:51 -05:00			`window.scrollTo(0, 0);`
Simplify client code 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;`
Initial 2022-09-04 13:23:53 -05:00			`};`
Beautify 2022-09-05 11:24:51 -05:00			`const startAction = (fileName) => {`
Initial 2022-09-04 13:23:53 -05:00			`chunkSize = Number($("chunkSize").value);`
Beautify 2022-09-05 11:24:51 -05:00			`dataPosition = Number($("startChunk").value * chunkSize);`
Introduce delay before displaying QR code... 2022-09-05 10:53:10 -05:00
Initial 2022-09-04 13:23:53 -05:00			`var xhr = new XMLHttpRequest();`
			`xhr.open("GET", fileName, true);`
			`xhr.responseType = "arraybuffer";`
			`xhr.onload = (e) => {`
			`tgt = e.currentTarget;`
			`if (tgt.status == 200) {`
Beautify 2022-09-05 11:24:51 -05:00			`let allCharCodes = new Uint8Array(tgt.response);`
			`let allChars = new Array(allCharCodes.length);`
			`allCharCodes.map((x, idx) => (allChars[idx] = String.fromCharCode(x)));`
Simplify client code 2022-09-04 16:18:10 -05:00			`// it seems that the qr library doesn't support binary data - converting to base64`
Beautify 2022-09-05 11:24:51 -05:00			`fileDataB64 = window.btoa(allChars.join(""));`

			`timoutHandle && window.clearTimeout(timoutHandle);`
Introduce delay before displaying QR code... 2022-09-05 10:53:10 -05:00			`timoutHandle = window.setTimeout(serveCodes, 3000);`
Initial 2022-09-04 13:23:53 -05:00			`}`
			`};`
			`xhr.send();`
			`};`
			`</script>`
			`</head>`
			`<body>`
Beautify 2022-09-05 11:24:51 -05:00			`<center><canvas id="qrcanv0"></canvas><canvas id="qrcanv1"></canvas></center>`
Simplify client code 2022-09-04 16:18:10 -05:00			`<hr />`
Beautify 2022-09-05 11:24:51 -05:00			`Status:<span id="status">...</span> <button onclick="startAction($('inputFileName').value)">Start(3 sec delay)</button>`
Simplify client code 2022-09-04 16:18:10 -05:00			`<hr />`
Beautify 2022-09-05 11:24:51 -05:00			`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 />`
Simplify client code 2022-09-04 16:18:10 -05:00			`Delay:<input type="number" value="1500" id="delay" />`
Initial 2022-09-04 13:23:53 -05:00			`</body>`
			`</html>`