feat+fix: added ui for select number of copies in printing tool and fixed images not found when cutting aids where added in local server (black.png and cuttingGuides.svg)

print/index.html

@@ -1,74 +1,307 @@
 <!-- START OF CONTENT -->
-    <h2 class='readable-background header-extension title center margin-bottom-large'>Printing Tool</h2>
+<h2
-    <div class='readable-background padding layer margin-bottom-large'>
+  class="readable-background header-extension title center margin-bottom-large"
-		<h4 class='collapsible collapsed center padding margin-bottom' onclick='toggleCollapse(event);'>Configure Page Settings</h4>
+>
+  Printing Tool
+</h2>
+<div class="readable-background padding layer margin-bottom-large">
+  <h4
+    class="collapsible collapsed center padding margin-bottom"
+    onclick="toggleCollapse(event);"
+  >
+    Configure Page Settings
+  </h4>
   <div>
-    		<h5 class='margin-bottom padding input-description'>Select your paper size</h5>
+    <h5 class="margin-bottom padding input-description">
-    		<select onchange='setPageSize(this.value.split(","));' class='input margin-bottom'>
+      Select your paper size
-    			<option value='8.5,11'>Letter (8.5 by 11)</option>
+    </h5>
-    			<option value='8.2667,11.6934'>A4</option>
+    <select
+      onchange='setPageSize(this.value.split(","));'
+      class="input margin-bottom"
+    >
+      <option value="8.5,11">Letter (8.5 by 11)</option>
+      <option value="8.2667,11.6934">A4</option>
     </select>
-            <h5 class='margin-bottom padding input-description'>Toggle the paper orientation (Portrait / Landscape)</h5>
+    <h5 class="margin-bottom padding input-description">
-            <button onclick='changeOrientation();' class='input margin-bottom'>Toggle orientation</button>
+      Toggle the paper orientation (Portrait / Landscape)
-            <h5 class='margin-bottom padding input-description'>Select a default card size</h5>
+    </h5>
-            <select onchange='setCardSize(this.value.split(","));' class='input margin-bottom'>
+    <button onclick="changeOrientation();" class="input margin-bottom">
-                <option value='2.5,3.5'>2.5 x 3.5 Inches</option>
+      Toggle orientation
-                <option value='2.48031,3.46457'>63 x 88 mm</option>
+    </button>
+    <h5 class="margin-bottom padding input-description">
+      Select a default card size
+    </h5>
+    <select
+      onchange='setCardSize(this.value.split(","));'
+      class="input margin-bottom"
+    >
+      <option value="2.5,3.5">2.5 x 3.5 Inches</option>
+      <option value="2.48031,3.46457">63 x 88 mm</option>
     </select>
-            <h5 class='margin-bottom padding input-description'>Or enter your own card size</h5>
+    <h5 class="margin-bottom padding input-description">
-            <div class='margin-bottom split-grid'>
+      Or enter your own card size
-                <input type='number' id='cardWidth' class='input' value='1500' onchange='setCardSize();'>
+    </h5>
-                <input type='number' id='cardHeight' class='input' value='2100' onchange='setCardSize();'>
+    <div class="margin-bottom split-grid">
+      <input
+        type="number"
+        id="cardWidth"
+        class="input"
+        value="1500"
+        onchange="setCardSize();"
+      />
+      <input
+        type="number"
+        id="cardHeight"
+        class="input"
+        value="2100"
+        onchange="setCardSize();"
+      />
     </div>
-            <h5 class='margin-bottom padding input-description'>Enter your bleed edge thickness (in pixels)</h5>
+    <h5 class="margin-bottom padding input-description">
-            <input type='number' id='cardPadding' class='input margin-bottom' value='0' min='0' onchange='setPaddingSize(this.value);'>
+      Enter your bleed edge thickness (in pixels)
-    		<h5 class='margin-bottom padding input-description'>Enter the distance between cards (in pixels)</h5>
+    </h5>
-            <input type='number' id='cardMargin' class='input margin-bottom' value='30' min='0' onchange='setMarginSize(this.value);'>
+    <input
-            <h5 class='margin-bottom padding input-description'>Set PPI (pixels per inch)</h5>
+      type="number"
-            <input type='number' id='cardPPI' class='input margin-bottom' value='600' min='1' max='2400' onchange='setPPI(this.value);'>
+      id="cardPadding"
-            <h5 class='margin-bottom padding input-description'>Include cutting aids (colored marks to help guide cuts; may not be visible in preview)</h5>
+      class="input margin-bottom"
-            <label class='checkbox-container input margin-bottom'>Cutting aids
+      value="0"
-                <input id='cuttingAidsCheckbox' type='checkbox' onchange='setCuttingAids(this.checked);'>
+      min="0"
-                <span class='checkmark'></span>
+      onchange="setPaddingSize(this.value);"
+    />
+    <h5 class="margin-bottom padding input-description">
+      Enter the distance between cards (in pixels)
+    </h5>
+    <input
+      type="number"
+      id="cardMargin"
+      class="input margin-bottom"
+      value="30"
+      min="0"
+      onchange="setMarginSize(this.value);"
+    />
+    <h5 class="margin-bottom padding input-description">
+      Set PPI (pixels per inch)
+    </h5>
+    <input
+      type="number"
+      id="cardPPI"
+      class="input margin-bottom"
+      value="600"
+      min="1"
+      max="2400"
+      onchange="setPPI(this.value);"
+    />
+    <h5 class="margin-bottom padding input-description">
+      Include cutting aids (colored marks to help guide cuts; may not be visible
+      in preview)
+    </h5>
+    <label class="checkbox-container input margin-bottom"
+      >Cutting aids
+      <input
+        id="cuttingAidsCheckbox"
+        type="checkbox"
+        onchange="setCuttingAids(this.checked);"
+      />
+      <span class="checkmark"></span>
     </label>
-            <h5 class='margin-bottom padding input-description'>Images already include bleed edge</h5>
+    <h5 class="margin-bottom padding input-description">
-            <label class='checkbox-container input margin-bottom'>Bleed edge included
+      Images already include bleed edge
-                <input id='bleedEdgeCheckbox' type='checkbox' onchange='setBleedEdge(this.checked);' checked>
+    </h5>
-                <span class='checkmark'></span>
+    <label class="checkbox-container input margin-bottom"
+      >Bleed edge included
+      <input
+        id="bleedEdgeCheckbox"
+        type="checkbox"
+        onchange="setBleedEdge(this.checked);"
+        checked
+      />
+      <span class="checkmark"></span>
     </label>
-            <h5 class='margin-bottom padding input-description'>Bleed Edge Color</h5>
+    <h5 class="margin-bottom padding input-description">Bleed Edge Color</h5>
-            <input id='bleedEdgeColor' type='color' class='input margin-bottom' onchange='setBleedEdgeColor(this.value);'>
+    <input
-            <h5 class='margin-bottom padding input-description'>Save your current configurations as default</h5>
+      id="bleedEdgeColor"
-            <button onclick='saveDefaults();' class='input margin-bottom'>Save configuration</button>
+      type="color"
+      class="input margin-bottom"
+      onchange="setBleedEdgeColor(this.value);"
+    />
+    <h5 class="margin-bottom padding input-description">
+      Save your current configurations as default
+    </h5>
+    <button onclick="saveDefaults();" class="input margin-bottom">
+      Save configuration
+    </button>
   </div>
 </div>
 <div class="layer margin-bottom-large">
   <div class="drop-area" style="padding: 1rem">
-            <div class='padding margin-bottom-large readable-background'>
+    <div class="padding margin-bottom-large readable-background">
-                <h5 class='margin-bottom padding input-description'>Upload the images that you'd like to print, or drag-and-drop them</h5>
+      <h5 class="margin-bottom padding input-description">
-                <input type='file' multiple accept='.png, .svg, .jpg, .jpeg, .bmp' placeholder='File Upload' class='input' oninput='uploadFiles(event.target.files, uploadCard, "filename");' data-dropFunction='uploadCard' data-otherParams='filename'>
+        Upload the images that you'd like to print, or drag-and-drop them
+      </h5>
+      <div
+        class="upload-box"
+        style="
+          border: 2px dashed #ccc;
+          border-radius: 10px;
+          padding: 20px;
+          text-align: center;
+          cursor: pointer;
+          margin-bottom: 1rem;
+          position: relative;
+        "
+        onclick="document.getElementById('file-upload').click()"
+        ondragover="event.preventDefault()"
+        ondrop="handleDrop(event)"
+      >
+        <input
+          id="file-upload"
+          type="file"
+          multiple
+          accept=".png, .svg, .jpg, .jpeg, .bmp"
+          style="display: none"
+          onchange="handleFiles(this.files)"
+        />
+        <div style="font-size: 2rem; color: #ccc">
+          <svg
+            fill="gray"
+            height="30px"
+            width="30px"
+            version="1.1"
+            id="Capa_1"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            viewBox="0 0 374.116 374.116"
+            xml:space="preserve"
+          >
+            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+            <g
+              id="SVGRepo_tracerCarrier"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            ></g>
+            <g id="SVGRepo_iconCarrier">
+              <g>
+                <path
+                  d="M344.058,207.506c-16.568,0-30,13.432-30,30v76.609h-254v-76.609c0-16.568-13.432-30-30-30c-16.568,0-30,13.432-30,30 v106.609c0,16.568,13.432,30,30,30h314c16.568,0,30-13.432,30-30V237.506C374.058,220.938,360.626,207.506,344.058,207.506z"
+                ></path>
+                <path
+                  d="M123.57,135.915l33.488-33.488v111.775c0,16.568,13.432,30,30,30c16.568,0,30-13.432,30-30V102.426l33.488,33.488 c5.857,5.858,13.535,8.787,21.213,8.787c7.678,0,15.355-2.929,21.213-8.787c11.716-11.716,11.716-30.71,0-42.426L208.271,8.788 c-11.715-11.717-30.711-11.717-42.426,0L81.144,93.489c-11.716,11.716-11.716,30.71,0,42.426 C92.859,147.631,111.855,147.631,123.57,135.915z"
+                ></path>
+              </g>
+            </g>
+          </svg>
+          <!-- Ícone de upload de arquivo -->
+        </div>
+      </div>
+      <div
+        id="thumbnails"
+        style="display: flex; flex-wrap: wrap; gap: 10px"
+      ></div>
+      <h5 class="margin-bottom padding input-description">
+        Choose the number of copies you'd like to print
+      </h5>
+      <div class="input-grid margin-bottom">
+        <input
+          id="repeat-count"
+          type="number"
+          min="1"
+          value="1"
+          class="input"
+          placeholder="Number of repetitions"
+          style="text-align: center"
+        />
+        <button onclick="repeatImage();" class="input">Add Images</button>
+      </div>
     </div>
     <div class="center">
-                <canvas style='height: auto; max-width:850px; width: 100%; background: #fff;'></canvas>
+      <canvas
+        style="height: auto; max-width: 850px; width: 100%; background: #fff"
+      ></canvas>
     </div>
   </div>
 </div>
-    <div class='readable-background padding layer margin-bottom-large'>
+<div class="readable-background padding layer margin-bottom-large">
-		<h3 class='download padding' onclick='downloadCanvas();'>Download your Sheet (PNG)</h3>
+  <h3 class="download padding" onclick="downloadCanvas();">
-		<h4 class='padding center'>(Can take a few seconds)</h4>
+    Download your Sheet (PNG)
+  </h3>
+  <h4 class="padding center">(Can take a few seconds)</h4>
 </div>
-	<div class='readable-background padding layer margin-bottom-large'>
+<div class="readable-background padding layer margin-bottom-large">
-		<h3 class='download padding' onclick='downloadPDF();'>Download your Sheet (PDF)</h3>
+  <h3 class="download padding" onclick="downloadPDF();">
-		<h4 class='padding center'>(WARNING: This can take around 15 seconds...)</h4>
+    Download your Sheet (PDF)
+  </h3>
+  <h4 class="padding center">(WARNING: This can take around 15 seconds...)</h4>
 </div>
 <div class="readable-background layer margin-bottom-large">
-        <h3 class='padding margin-bottom center'>
+  <h3 class="padding margin-bottom center">
     Want to see your custom cards on the kitchen table?
   </h3>
-        <h4 class='padding'>
+  <h4 class="padding">
-        	Upload up to nine images, and they will automatically arrange themselves on an 8.5" by 11" sheet, so you can print them at home at up to 600PPI.
+    Upload up to nine images, and they will automatically arrange themselves on
+    an 8.5" by 11" sheet, so you can print them at home at up to 600PPI.
   </h4>
 </div>
-	<script defer src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js'></script>
+<script>
+  let selectedFiles = [];
+
+  function repeatImage() {
+    const repeatCount = document.getElementById("repeat-count").value;
+
+    if (selectedFiles.length > 0) {
+      for (let i = 0; i < repeatCount; i++) {
+        console.log(`Uploading file ${i + 1} of ${repeatCount}`);
+        uploadFiles(selectedFiles, uploadCard, "filename");
+      }
+    }
+
+    // clear selected files
+    selectedFiles = [];
+
+    // clear the input
+    document.querySelector("input[type='file']").value = "";
+
+    // clear the repeat count
+    document.getElementById("repeat-count").value = 1;
+
+    // clear the thumbnails
+    document.getElementById("thumbnails").innerHTML = "";
+  }
+
+  function handleDrop(event) {
+    event.preventDefault();
+    const files = event.dataTransfer.files;
+    handleFiles(files);
+  }
+
+  function handleFiles(files) {
+    selectedFiles.push(...files);
+
+    const thumbnails = document.getElementById("thumbnails");
+
+    for (const file of files) {
+      const reader = new FileReader();
+      reader.onload = function (e) {
+        const thumbnail = document.createElement("div");
+        thumbnail.style.position = "relative";
+        thumbnail.innerHTML = `
+          <img src="${e.target.result}" style="width: 100px; height: 100px; object-fit: cover; border-radius: 5px;" />
+          <button onclick="removeFile(this, '${file.name}')" style="position: absolute; top: 0; right: 0; background: #880808; color: white; border: none; border-radius: 50%; cursor: pointer;">&times;</button>
+        `;
+        thumbnails.appendChild(thumbnail);
+      };
+      reader.readAsDataURL(file);
+    }
+  }
+
+  function removeFile(button, fileName) {
+    const thumbnail = button.parentElement;
+    thumbnail.remove();
+    selectedFiles = selectedFiles.filter((file) => file.name !== fileName);
+  }
+</script>
+<script
+  defer
+  src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"
+></script>
 <script defer src="/print/print.js"></script>
 <!-- END OF CONTENT -->

print/print.js

@@ -19,20 +19,54 @@ var bleedEdgeColor = "black";
 var useCuttingAids = false;
 //Prepare variables/canvas/context
 var imageList = [];
-var canvas = document.querySelector('canvas');
+var canvas = document.querySelector("canvas");
-var context = canvas.getContext('2d');
+var context = canvas.getContext("2d");
 drawSheet();
 //svgs
-var cuttingGuides = new Image();
+const blackPixel = getImage("black.png");
-cuttingGuides.src = 'cuttingGuides.svg';
+const cuttingGuides = getImage("cuttingGuides.svg");
-var blackPixel = new Image();
+
-blackPixel.src = 'black.png';
+function getImage(imageSrc) {
+  const image = new Image();
+
+  image.onload = function () {
+    console.log(`Image '${image.src}' loaded`);
+  };
+
+  image.onerror = function () {
+    console.log(`Image '${image.src}' failed to load`);
+
+    if (!image.src.includes("print/")) {
+      console.log(`Trying to change src address to 'print/${imageSrc}'`);
+
+      image.src = `print/${imageSrc}`;
+    }
+  };
+
+  image.src = imageSrc;
+
+  return image;
+}
+
+function uploadFrameOption(imageSource) {
+  const uploadedFrame = {
+    name: `Uploaded Image (${customCount})`,
+    src: imageSource,
+    noThumb: true,
+  };
+  customCount++;
+  availableFrames.push(uploadedFrame);
+  loadFramePack();
+}
 
 function uploadCard(card, filename) {
   var img = new Image();
-    img.crossOrigin = 'anonymous';
+  img.crossOrigin = "anonymous";
-    img.onload = function() {imageList.push(this); drawSheet();}
+  img.onload = function () {
-    img.filename = filename.replace('filename=', '');
+    imageList.push(this);
+    drawSheet();
+  };
+  img.filename = filename.replace("filename=", "");
   img.src = card;
 }
 //buffer to avoid drawing the sheet *too* many times when uploading multiple images at the same time
@@ -59,12 +93,22 @@ function drawSheetReal() {
   var count = 0;
   if (useCuttingAids) {
     for (var i = 0; i < cardsX; i++) {
-            var x = pageMarginX + i * cw + Math.floor(cardMarginX / 2) + cardPaddingX - aidOffset;
+      var x =
+        pageMarginX +
+        i * cw +
+        Math.floor(cardMarginX / 2) +
+        cardPaddingX -
+        aidOffset;
       context.fillRect(x, 0, aidWidth, page[1] * ppi);
       context.fillRect(x + cardWidth, 0, aidWidth, page[1] * ppi);
     }
     for (var j = 0; j < cardsY; j++) {
-            var y = pageMarginY + j * ch + Math.floor(cardMarginY / 2) + cardPaddingY - aidOffset;
+      var y =
+        pageMarginY +
+        j * ch +
+        Math.floor(cardMarginY / 2) +
+        cardPaddingY -
+        aidOffset;
       context.fillRect(0, y, page[0] * ppi, aidWidth);
       context.fillRect(0, y + cardHeight, page[0] * ppi, aidWidth);
     }
@@ -75,15 +119,34 @@ function drawSheetReal() {
     if (imageList[i].width > 1) {
       try {
         //Calc upper-left corner of card *image* (accounts for bleed edge and margins)
-                var x = pageMarginX + (count % cardsX)                      * (cw) + Math.floor(cardMarginX / 2) + cardPaddingX;
+        var x =
-                var y = pageMarginY + (Math.floor(count / cardsX) % cardsY) * (ch) + Math.floor(cardMarginY / 2) + cardPaddingY;
+          pageMarginX +
+          (count % cardsX) * cw +
+          Math.floor(cardMarginX / 2) +
+          cardPaddingX;
+        var y =
+          pageMarginY +
+          (Math.floor(count / cardsX) % cardsY) * ch +
+          Math.floor(cardMarginY / 2) +
+          cardPaddingY;
         var w = cardWidth;
         var h = cardHeight;
         if (imgIncludesBleedEdge) {
-                    context.drawImage(imageList[i], x - cardPaddingX, y - cardPaddingY, w + 2 * cardPaddingX, h + 2 * cardPaddingY);
+          context.drawImage(
+            imageList[i],
+            x - cardPaddingX,
+            y - cardPaddingY,
+            w + 2 * cardPaddingX,
+            h + 2 * cardPaddingY
+          );
         } else {
           context.fillStyle = bleedEdgeColor;
-                    context.fillRect(x - cardPaddingX, y - cardPaddingY, w + 2 * cardPaddingX, h + 2 * cardPaddingY);
+          context.fillRect(
+            x - cardPaddingX,
+            y - cardPaddingY,
+            w + 2 * cardPaddingX,
+            h + 2 * cardPaddingY
+          );
           context.drawImage(imageList[i], x, y, w, h);
         }
         if (useCuttingAids) {
@@ -91,15 +154,15 @@ function drawSheetReal() {
         }
         count++;
       } catch {
-                console.log('image failed.');
+        console.log("image failed.");
       }
     }
   }
 }
 
 function downloadCanvas() {
-    var download = document.createElement('a');
+  var download = document.createElement("a");
-    download.download = 'print.png';
+  download.download = "print.png";
   download.href = canvas.toDataURL();
   document.body.appendChild(download);
   download.click();
@@ -107,14 +170,14 @@ function downloadCanvas() {
 }
 
 function downloadPDF() {
-    var pageOrientation = 'portrait';
+  var pageOrientation = "portrait";
   if (page[0] > page[1]) {
-        pageOrientation = 'landscape';
+    pageOrientation = "landscape";
   }
   var doc = new jsPDF({
     orientation: pageOrientation,
-        unit: 'in',
+    unit: "in",
-        format: [page[0], page[1]]
+    format: [page[0], page[1]],
   });
   //create a single black pixel for default padding
   var defaultPadding = document.createElement("canvas");
@@ -136,14 +199,38 @@ function downloadPDF() {
   var count = 0;
   if (useCuttingAids) {
     for (var i = 0; i < cardsX; i++) {
-            var x = pageMarginX + i * cw + Math.floor(cardMarginX / 2) + cardPaddingX - aidOffset;
+      var x =
+        pageMarginX +
+        i * cw +
+        Math.floor(cardMarginX / 2) +
+        cardPaddingX -
+        aidOffset;
       doc.addImage(blackPixel, "PNG", x / ppi, 0, aidWidth / ppi, page[1]);
-            doc.addImage(blackPixel, "PNG", (x + cardWidth) / ppi, 0, aidWidth / ppi, page[1]);
+      doc.addImage(
+        blackPixel,
+        "PNG",
+        (x + cardWidth) / ppi,
+        0,
+        aidWidth / ppi,
+        page[1]
+      );
     }
     for (var j = 0; j < cardsY; j++) {
-            var y = pageMarginY + j * ch + Math.floor(cardMarginY / 2) + cardPaddingY - aidOffset;
+      var y =
+        pageMarginY +
+        j * ch +
+        Math.floor(cardMarginY / 2) +
+        cardPaddingY -
+        aidOffset;
       doc.addImage(blackPixel, "PNG", 0, y / ppi, page[0], aidWidth / ppi);
-            doc.addImage(blackPixel, "PNG", 0, (y + cardHeight) / ppi, page[0], aidWidth / ppi);
+      doc.addImage(
+        blackPixel,
+        "PNG",
+        0,
+        (y + cardHeight) / ppi,
+        page[0],
+        aidWidth / ppi
+      );
     }
   }
   //Iterate through every viable space and draw the card there
@@ -152,26 +239,55 @@ function downloadPDF() {
     if (imageList[i].width > 1) {
       try {
         //Calc upper-left corner of card *image* (accounts for bleed edge and margins)
-                var x = pageMarginX + (count % cardsX)                      * (cw) + Math.floor(cardMarginX / 2) + cardPaddingX;
+        var x =
-                var y = pageMarginY + (Math.floor(count / cardsX) % cardsY) * (ch) + Math.floor(cardMarginY / 2) + cardPaddingY;
+          pageMarginX +
+          (count % cardsX) * cw +
+          Math.floor(cardMarginX / 2) +
+          cardPaddingX;
+        var y =
+          pageMarginY +
+          (Math.floor(count / cardsX) % cardsY) * ch +
+          Math.floor(cardMarginY / 2) +
+          cardPaddingY;
         var w = cardWidth;
         var h = cardHeight;
         if (imgIncludesBleedEdge) {
-                    doc.addImage(imageList[i], "PNG", (x - cardPaddingX) / ppi, (y - cardPaddingY) / ppi, (w + 2 * cardPaddingX) / ppi, (h + 2 * cardPaddingY) / ppi);
+          doc.addImage(
+            imageList[i],
+            "PNG",
+            (x - cardPaddingX) / ppi,
+            (y - cardPaddingY) / ppi,
+            (w + 2 * cardPaddingX) / ppi,
+            (h + 2 * cardPaddingY) / ppi
+          );
         } else {
-                    doc.addImage(defaultPadding, "PNG", (x - cardPaddingX) / ppi, (y - cardPaddingY) / ppi, (w + 2 * cardPaddingX) / ppi, (h + 2 * cardPaddingY) / ppi);
+          doc.addImage(
+            defaultPadding,
+            "PNG",
+            (x - cardPaddingX) / ppi,
+            (y - cardPaddingY) / ppi,
+            (w + 2 * cardPaddingX) / ppi,
+            (h + 2 * cardPaddingY) / ppi
+          );
           doc.addImage(imageList[i], "PNG", x / ppi, y / ppi, w / ppi, h / ppi);
         }
         if (useCuttingAids) {
-                    doc.addImage(cuttingGuides, "PNG", x / ppi, y / ppi, w / ppi, h / ppi);
+          doc.addImage(
+            cuttingGuides,
+            "PNG",
+            x / ppi,
+            y / ppi,
+            w / ppi,
+            h / ppi
+          );
         }
         count++;
       } catch {
-                console.log('image failed.');
+        console.log("image failed.");
       }
     }
   }
-    doc.save('print.pdf');
+  doc.save("print.pdf");
 }
 //Manages page
 function setPageSize(size = [8.5, 11]) {
@@ -237,12 +353,12 @@ function saveDefaults() {
     cardPaddingY: cardPaddingY,
     bleedEdge: imgIncludesBleedEdge,
     bleedEdgeColor: bleedEdgeColor,
-        cuttingAids:useCuttingAids
+    cuttingAids: useCuttingAids,
-    }
+  };
   localStorage.setItem("cardPrintConfig", JSON.stringify(cardObject));
 }
 function loadDefaults() {
-    var cardObject = JSON.parse(localStorage.getItem("cardPrintConfig"))
+  var cardObject = JSON.parse(localStorage.getItem("cardPrintConfig"));
   if (cardObject && cardObject != {}) {
     ppi = cardObject.ppi;
     document.querySelector("#cardPPI").value = ppi;