From d0453a4d7c2a3900142e1618bf7eccb41df435e3 Mon Sep 17 00:00:00 2001
From: Joe Tretter <j.tretter@gmail.com>
Date: Sun, 4 Sep 2022 16:18:10 -0500
Subject: [PATCH] Simplify client code

---
 Client/index.html | 75 +++++++++++++++++++++++------------------------
 1 file changed, 37 insertions(+), 38 deletions(-)
diff --git a/Client/index.html b/Client/index.html
index d651220..f649c4a 100644
--- a/Client/index.html
+++ b/Client/index.html
@@ -1,38 +1,34 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-touch-fullscreen" content="yes" />
-    <style type="text/css">
-      body {
-        background: lightgray;
-      }
-    </style>
     <script src="qrenc-4.0.0.js" type="text/javascript"></script>
     <script type="text/javascript">
       let $ = (ele) => document.getElementById(ele);
 
-      let fileData;
-      let chunkSize;
-      let segmentPosition = 0;
+      let fileData,
+        chunkSize,
+        segmentPosition = 0,
+        activeCanvas = 0;
 
       let serveCodes = () => {
-        $("status").value = `${fileData.length}/${segmentPosition}/${(segmentPosition / fileData.length).toFixed(2)}%`;
-        doqr(
-          $("startChunk").value + "|" + fileData.substring(segmentPosition, segmentPosition + chunkSize),
-          Number($("qrSize").value),
-          Number($("ecc").value)
-        );
+        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.)`;
+        doqr(currChunk + "|" + fileData.substring(segmentPosition, segmentPosition + chunkSize), Number($("qrSize").value), Number($("ecc").value));
         segmentPosition += chunkSize;
-        $("startChunk").value = segmentPosition / chunkSize;
 
         if (segmentPosition < fileData.length) {
-          //window.setTimeout(serveCodes, 1000);
+          window.setTimeout(serveCodes, delay);
         }
       };
       let doqr = (data, size, ecc) => {
-        var qr = new QR($("qrcanv"), data, size, 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);
@@ -47,7 +43,7 @@
             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(""));
             serveCodes();
           }
@@ -57,22 +53,25 @@
     </script>
   </head>
   <body>
-    <div>
-      Filename:<input type="text" value="input.dat" id="inputFileName" />
-      <br />
-      ECC (1-4):<input type="number" value="4" id="ecc" />
-      <br />
-      Qr-Size:<input type="number" value="400" id="qrSize" />
-      <br />
-      Chunk-Size:<input type="number" value="1200" id="chunkSize" />
-      <br />
-      Start-Chunk:<input type="number" value="0" id="startChunk" />
-      <br />
-      <button onclick="getFile($('inputFileName').value)">Read</button>
-      <hr />
-      <canvas id="qrcanv"></canvas>
-      <hr />
-      <input type="text" id="status" />
-    </div>
+    <center>
+      <canvas id="qrcanv0"></canvas>
+      <canvas id="qrcanv1"></canvas>
+    </center>
+    <hr />
+    Status:<span id="status">...</span>
+    <hr />
+    Filename:<input type="text" value="input.dat" id="inputFileName" />
+    <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>
