From 1c7abcae0782c79cddf0d00b6bed684a4bb078b5 Mon Sep 17 00:00:00 2001
From: Hugh Chen <hugh.chen1@gmail.com>
Date: Sun, 23 Jan 2022 09:41:29 -0800
Subject: [PATCH] Add functionality to modify white border length

---
 index.html | 25 +++++++++++++++++++++++++
 index.js   | 30 +++++++++++++++++++++++++-----
 2 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 3b464a9..ff7633b 100644
--- a/index.html
+++ b/index.html
@@ -81,6 +81,31 @@
 
 			<br />
 
+			<div class="tooltip">
+				Border Size:
+				<span class="tooltiptext"
+					>Size of white border around QR code. Typically need some
+					border around the code, but depending on your use case you
+					can get rid of it.</span
+				>
+				<span id="printBorderSize"></span>
+			</div>
+
+			<br /><br />
+
+			<div class="slidecontainer">
+				<input
+					type="range"
+					min="0"
+					max="5"
+					value="0"
+					class="slider"
+					id="borderSize"
+				/>
+			</div>
+
+			<br />
+
 			<button
 				class="w3-button w3-white w3-border w3-border-blue"
 				style="margin: 0 auto"
diff --git a/index.js b/index.js
index 0311327..960cf07 100644
--- a/index.js
+++ b/index.js
@@ -65,6 +65,17 @@ correctionSlider.oninput = function () {
   }
 };
 
+var borderSlider = document.getElementById("borderSize");
+var borderOutput = document.getElementById("printBorderSize");
+borderOutput.innerHTML = borderSlider.value; // Display the default slider value
+var borderSize = Number(borderSlider.value);
+
+// Update the current slider value (each time you drag the slider handle)
+borderSlider.oninput = function () {
+  borderOutput.innerHTML = this.value;
+  borderSize = Number(this.value);
+};
+
 /**
  * Check whether bit at current position should be full sized.
  *
@@ -75,11 +86,13 @@ correctionSlider.oninput = function () {
  */
 function isSafeBit(i, j, QRLength) {
   // Currently hard coding position bits
-  if (i < 8 && j < 8) {
+  lowerLimit = (8 + borderSize)
+  upperLimit = (QRLength - 8 + borderSize)
+  if (i < lowerLimit && j < lowerLimit) {
     return false;
-  } else if (i > QRLength - 8 && j < 8) {
+  } else if (i > upperLimit && j < lowerLimit) {
     return false;
-  } else if (i < 8 && j > QRLength - 8) {
+  } else if (i < lowerLimit && j > upperLimit) {
     return false;
   }
 
@@ -156,7 +169,7 @@ function makeCode() {
 
   // QR code sizing
   bitLength = 10;
-  canvasLength = bitLength * (QRLength + 2);
+  canvasLength = bitLength * (QRLength + borderSize * 2);
   canvas.width = canvasLength;
   canvas.height = canvasLength;
 
@@ -185,7 +198,14 @@ function makeCode() {
       } else {
         ctx.fillStyle = white;
       }
-      drawShape(ctx, i + 1, j + 1, bitLength, radiusRatio, QRLength);
+      drawShape(
+        ctx,
+        i + borderSize,
+        j + borderSize,
+        bitLength,
+        radiusRatio,
+        QRLength
+      );
     }
   }
 }