Add QR support (via HSKRK)

Modified version of HackerspaceKRK:printer-web-interface

src/index.html

@@ -662,7 +662,11 @@
   <div class="tool_button" id="tool_eyedropper" data-mode="eyedropper" title="Eyedropper Tool [E]">
     <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="2 2 20 20" width="27" style="transform: scale(-1, 1)"><path d="M20.71 5.63l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-3.12 3.12-1.93-1.91-1.41 1.41 1.42 1.42L3 16.25V21h4.75l8.92-8.92 1.42 1.42 1.41-1.41-1.92-1.92 3.12-3.12c.4-.4.4-1.03.01-1.42zM6.92 19L5 17.08l8.06-8.06 1.92 1.92L6.92 19z"/></svg>
   </div>
-  
+
+  <div class="tool_button" id="tool_qr" data-mode="qr" title="QR Code">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-qr-code"><rect width="5" height="5" x="3" y="3" rx="1"/><rect width="5" height="5" x="16" y="3" rx="1"/><rect width="5" height="5" x="3" y="16" rx="1"/><path d="M21 16h-3a2 2 0 0 0-2 2v3"/><path d="M21 21v.01"/><path d="M12 7v3a2 2 0 0 1-2 2H7"/><path d="M3 12h.01"/><path d="M12 3h.01"/><path d="M12 16v.01"/><path d="M16 12h1"/><path d="M21 12v.01"/><path d="M12 21v-1"/></svg>
+  </div>
+
   <div id="color_tools">
         <div id="tool_switch" title="Switch stroke and fill colors [X]">
           <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'><path d='M3.01 2A6 6 0 019 8h1.83l-2.91 2.91L5 8h2a4 4 0 00-3.99-4v1.93L.1 3.02 3.01.1V2z' /></svg>
@@ -749,6 +753,7 @@
   <script type="text/javascript" src="js/loading.js"></script>
   <!-- endbuild -->
   <!-- build:js all.js -->
+  <script type="text/javascript" src="js/lib/qrcode.min.js"></script>
   <script type="text/javascript" src="js/lib/jquery-3.5.1.min.js"></script>
   <script type="text/javascript" src="js/lib/pathseg.js"></script>
   <script type="text/javascript" src="js/lib/jquery.hotkeys.min.js"></script>

src/js/Toolbar.js

@@ -1,8 +1,27 @@
 MD.Toolbar = function(){
 
   // tools left
-  $("#tools_left .tool_button").on("click", function(){ 
+  $("#tools_left .tool_button").on("click", function(){
     const mode = this.getAttribute("data-mode");
+
+    if (mode === "qr") {
+      const contents = prompt("Enter QR contents:", "");
+      if (!contents) return;
+
+      var svgNode = QRCode({
+        msg :  contents,
+        dim :   100,
+        pad :   6,
+        mtx :   7,
+        ecl :  "H",
+        ecb :   0,
+        pal : ["#000000", "#ffffff"],
+        vrb :   1,
+      });
+      const svg = new XMLSerializer().serializeToString(svgNode);
+      svgCanvas.importSvgString(svg, true);
+    }
+
     state.set("canvasMode", mode)
     if (mode === "shapelib") showShapeLib()
   });
@@ -19,4 +38,4 @@ MD.Toolbar = function(){
   }
 
   this.setMode = setMode;
-}
+}