Client/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>QRTransfer</title>
    <script src="qrenc-4.0.0.js" type="text/javascript"></script>
    <script type="text/javascript">
      let fileData,
        chunkSize,
        segmentPosition,
        timoutHandle,
        activeCanvas = 0; // double buffering.

      const $ = (ele) => document.getElementById(ele);
      const serveCodes = () => {
        let numChunks = Math.ceil(fileData.length / chunkSize);
        let currChunk = Math.ceil(segmentPosition / 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 + "|" + fileData.substring(segmentPosition, segmentPosition + chunkSize),
          Number($("qrSize").value),
          Number($("ecc").value)
        );
        segmentPosition += chunkSize;

        if (segmentPosition < fileData.length) {
          timoutHandle = window.setTimeout(serveCodes, delay);
        }
      };
      const 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;
      };
      const getFile = (fileName) => {
        chunkSize = Number($("chunkSize").value);
        segmentPosition = Number($("startChunk").value * chunkSize);

        timoutHandle && window.clearTimeout(timoutHandle);

        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);
            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>
    <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" />
    <br />
    <button onclick="getFile($('inputFileName').value)">Read</button>
  </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>`
Initial 2022-09-04 13:23:53 -05:00			`<script src="qrenc-4.0.0.js" type="text/javascript"></script>`
			`<script type="text/javascript">`
Simplify client code 2022-09-04 16:18:10 -05:00			`let fileData,`
			`chunkSize,`
add test payloads and clean up client 2022-09-04 16:52:21 -05:00			`segmentPosition,`
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 = () => {`
			`let numChunks = Math.ceil(fileData.length / chunkSize);`
			`let currChunk = Math.ceil(segmentPosition / 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.)`;
add test payloads and clean up client 2022-09-04 16:52:21 -05:00			`displayQR(`
Fix counting of the segments to be easier Add test for exact test file 2022-09-05 10:36:27 -05:00			`currChunk + "\|" + fileData.substring(segmentPosition, segmentPosition + chunkSize),`
add test payloads and clean up client 2022-09-04 16:52:21 -05:00			`Number($("qrSize").value),`
			`Number($("ecc").value)`
			`);`
Initial 2022-09-04 13:23:53 -05:00			`segmentPosition += chunkSize;`

			`if (segmentPosition < fileData.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) => {`
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			`};`
Fix counting of the segments to be easier Add test for exact test file 2022-09-05 10:36:27 -05:00			`const getFile = (fileName) => {`
Initial 2022-09-04 13:23:53 -05:00			`chunkSize = Number($("chunkSize").value);`
			`segmentPosition = Number($("startChunk").value * chunkSize);`

Introduce delay before displaying QR code... 2022-09-05 10:53:10 -05:00			`timoutHandle && window.clearTimeout(timoutHandle);`

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) {`
			`let uInt8Array = new Uint8Array(tgt.response);`
			`let binaryString = new Array(uInt8Array.length);`
			`uInt8Array.map((x, idx) => (binaryString[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`
Initial 2022-09-04 13:23:53 -05:00			`fileData = window.btoa(binaryString.join(""));`
add test payloads and clean up client 2022-09-04 16:52:21 -05:00			`window.scrollTo(0, 0);`
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>`
Simplify client code 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 />`
Introduce delay before displaying QR code... 2022-09-05 10:53:10 -05:00			`Filename:<input type="text" id="inputFileName" value="testInput/5K.dat" />`
Simplify client code 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>`
Initial 2022-09-04 13:23:53 -05:00			`</body>`
			`</html>`