added more user control

print/index.php

@@ -8,27 +8,39 @@ include('../globalHTML/header-1.php');
 		<h4 class='center padding margin-bottom'>Configure Page Settings</h4>
 		<h5 class='margin-bottom padding input-description'>Select your paper size</h5>
 		<select onchange='setPageSize(this.value.split(","));' class='input margin-bottom'>
-			<option value='8.5,11'>Regular (8.5 by 11)</option>
+			<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'>Select your 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.74,3.74'>2.74 x 3.74 Inches</option>
-            <option value='2.75,3.75'>2.75 x 3.75 Inches</option>
-            <option value='2.48031,3.46457'>63 x 88 mm</option>
-        </select>
         <h5 class='margin-bottom padding input-description'>Toggle the paper orientation (Portrait / Landscape)</h5>
         <button onclick='changeOrientation();' class='input margin-bottom'>Toggle orientation</button>
-        <h5 class='margin-bottom padding input-description'>Include cutting aids (black background and centerlines)</h5>
+        <h5 class='margin-bottom padding input-description'>Select a default card size</h5>
-        <label class='checkbox-container input'>Cutting aids
+        <select onchange='setCardSize(this.value.split(","));' class='input margin-bottom'>
-            <input id='cuttingAids' type='checkbox' onchange='drawSheet();'>
+            <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>
+        <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>
+        <input type='number' id='cardPadding' class='input margin-bottom' value='0' min='0' 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)</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'>Set the distance between cards (in pixels)</h5>
+        <h5 class='margin-bottom padding input-description'>Images already include bleed edge</h5>
-        <input type='number' id='cardMargin' class='input margin-bottom' value='60' min='0' max='100' onchange='setCardDistance(this.value);'>
+        <label class='checkbox-container input margin-bottom'>Bleed edge included
-        <h5 class='margin-bottom padding input-description'>Set PPI (pixels per inch; only relevant when exporting as a PNG)</h5>
+            <input id='bleedEdgeCheckbox' type='checkbox' onchange='setBleedEdge(this.checked);' checked>
-        <input type='number' id='cardPPI' class='input margin-bottom' value='600' min='1' max='2400' onchange='setPPI(this.value);'>
+            <span class='checkmark'></span>
+        </label>
+        <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 class="layer">
         <div class='padding margin-bottom readable-background drop-area'>
@@ -40,7 +52,7 @@ include('../globalHTML/header-1.php');
         <canvas style='height: auto; max-width:850px; width: 100%; background: #fff;'></canvas>
     </div>
     <div class='readable-background padding layer margin-bottom-large'>
-		<h3 class='download padding' onclick='downloadSheet();'>Download your Sheet (PNG)</h3>
+		<h3 class='download padding' onclick='downloadCanvas();'>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'>

print/print.js

@@ -1,16 +1,22 @@
 //Configure sizes
 var ppi = 600;
 var page = [8.5, 11];
-var cardWidth = 2.5;
+//card size
-var cardHeight = 3.5;
+var cardWidth = parseInt(document.querySelector("#cardWidth").value);
-var cardMarginX = parseInt(document.querySelector('#cardMargin').value) / ppi;
+var cardHeight = parseInt(document.querySelector("#cardHeight").value);
-var cardMarginY = parseInt(document.querySelector('#cardMargin').value) / ppi;
+//bleed edge
+var cardPaddingX = parseInt(document.querySelector("#cardPadding").value);
+var cardPaddingY = cardPaddingX;
+//whitespace
+var cardMarginX =  parseInt(document.querySelector("#cardMargin").value);
+var cardMarginY = cardMarginX;
+//booleans
+var imgIncludesBleedEdge = true;
+var useCuttingAids = false;
 //Prepare variables/canvas/context
 var imageList = [];
 var canvas = document.querySelector('canvas');
 var context = canvas.getContext('2d');
-var aidCanvas = document.createElement('canvas');
-var aidContext = aidCanvas.getContext('2d');
 drawSheet();
 //svgs
 var cuttingGuides = new Image();
@@ -23,59 +29,59 @@ function uploadCard(card, filename) {
     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
+var drawingSheet;
 function drawSheet() {
+    clearTimeout(drawingSheet);
+    drawingSheet = setTimeout(drawSheetReal, 500);
+}
+function drawSheetReal() {
+    //Prepare canvases
     canvas.width = page[0] * ppi;
     canvas.height = page[1] * ppi;
     context.clearRect(0, 0, page[0] * ppi, page[1] * ppi);
-    aidCanvas.width = canvas.width;
+    //Calc actual card size
-    aidCanvas.height = canvas.height;
+    const cw =  cardWidth + 2 * cardPaddingX + cardMarginX;
-    aidContext.clearRect(0, 0, page[0] * ppi, page[1] * ppi);
+    const ch = cardHeight + 2 * cardPaddingY + cardMarginY;
-    const cardsX = Math.floor(page[0] / cardWidth);
+    //Calc number of cards that fit on the sheet
-    const cardsY = Math.floor(page[1] / cardHeight);
+    const cardsX = Math.floor(page[0] / (cw / ppi));
+    const cardsY = Math.floor(page[1] / (ch / ppi));
+    //Calc page margins
+    const pageMarginX = Math.floor((page[0] * ppi - cardsX * cw) / 2);
+    const pageMarginY = Math.floor((page[1] * ppi - cardsY * ch) / 2);
+    //Iterate through every viable space and draw the card there
     var count = 0;
-    for (var i = imageList.length - 1; i >= 0 && count < cardsX * cardsY; i --) {
+    for (var i = imageList.length - 1; i >= 0 && count < cardsX * cardsY; i--) {
         if (imageList[i].width > 1) {
-            const cardX = (page[0] - cardsX * cardWidth) / 2 + (count % cardsX) * (cardWidth + cardMarginX) - cardMarginX;
-            const cardY = (page[1] - cardsY * cardHeight) / 2 + (Math.floor(count / cardsX) % cardsY) * (cardHeight + cardMarginY) - cardMarginY;
             try {
-                context.drawImage(imageList[i], cardX * ppi, cardY * ppi, cardWidth * ppi, cardHeight * ppi);
+                //Calc upper-left corner of card *image* (accounts for bleed edge and margins)
-                if (document.querySelector('#cuttingAids').checked) {
+                var x = pageMarginX + (count % cardsX)                      * (cw) + Math.floor(cardMarginX / 2) + cardPaddingX;
-                    context.drawImage(cuttingGuides, cardX * ppi, cardY * ppi, cardWidth * ppi, cardHeight * ppi);
+                var y = pageMarginY + (Math.floor(count / cardsX) % cardsY) * (ch) + Math.floor(cardMarginY / 2) + cardPaddingY;
-                }
+                var w = cardWidth;
-                if (document.querySelector('#cuttingAids').checked) {
+                var h = cardHeight;
-                    aidContext.fillStyle = 'black';
+                if (imgIncludesBleedEdge) {
-                    aidContext.fillRect(Math.floor((cardX - cardMarginX / 2) * ppi + 2), Math.floor((cardY - cardMarginY / 2) * ppi + 2), Math.ceil((cardWidth + cardMarginX) * ppi - 4), Math.ceil((cardHeight + cardMarginY) * ppi - 4));
+                    context.drawImage(imageList[i], x - cardPaddingX, y - cardPaddingY, w + 2 * cardPaddingX, h + 2 * cardPaddingY);
-                    if ((Math.floor(count / cardsX) % cardsY) == 0) {
+                } else {
-                        aidContext.clearRect((cardX - cardMarginX / 2) * ppi, (cardY - cardMarginY / 2) * ppi, (cardWidth + cardMarginX) * ppi, cardMarginY * ppi / 2);
+                    context.fillRect(x - cardPaddingX, y - cardPaddingY, w + 2 * cardPaddingX, h + 2 * cardPaddingY);
-                    } else if ((Math.floor(count / cardsX) % cardsY) == cardsY - 1) {
+                    context.drawImage(imageList[i], x, y, w, h);
-                        aidContext.clearRect((cardX - cardMarginX / 2) * ppi, (cardY + cardHeight) * ppi, (cardWidth + cardMarginX) * ppi, cardMarginY * ppi / 2);
-                    }
-                    if ((count % cardsX) == 0) {
-                        aidContext.clearRect((cardX - cardMarginX / 2) * ppi, (cardY - cardMarginY / 2) * ppi, cardMarginX * ppi / 2, (cardHeight + cardMarginY) * ppi);
-                    } else if ((count % cardsX) == cardsX - 1) {
-                        aidContext.clearRect((cardX + cardWidth) * ppi, (cardY - cardMarginY / 2) * ppi, cardMarginX * ppi / 2, (cardHeight + cardMarginY) * ppi);
                 }
+                if (useCuttingAids) {
+                    context.drawImage(cuttingGuides, x, y, w, h);
                 }
+                count ++;
             } catch {
                 console.log('image failed.');
             }
         }
-        count ++;
-    }
-    if (document.querySelector('#cuttingAids').checked) {
-        context.globalCompositeOperation = 'destination-over';
-        context.drawImage(aidCanvas, 0, 0, aidCanvas.width, aidCanvas.height);
-        context.globalCompositeOperation = 'source-over';
     }
 }
 
-async function downloadSheet() {
+function downloadCanvas() {
     var download = document.createElement('a');
     download.download = 'print.png';
     download.href = canvas.toDataURL();
     document.body.appendChild(download);
-    await download.click();
+    download.click();
     download.remove();
 }
 
@@ -89,52 +95,132 @@ function downloadPDF() {
         unit: 'in',
         format: [page[0], page[1]]
     });
-    const cardsX = Math.floor(page[0] / cardWidth);
+    //create a single black pixel for default padding
-    const cardsY = Math.floor(page[1] / cardHeight);
+    var defaultPadding = document.createElement("canvas");
+    defaultPadding.width = 1;
+    defaultPadding.height = 1;
+    var defaultPaddingContext = defaultPadding.getContext("2d");
+    defaultPaddingContext.fillRect(0, 0, 1, 1);
+    //Calc actual card size
+    const cw =  cardWidth + 2 * cardPaddingX + cardMarginX;
+    const ch = cardHeight + 2 * cardPaddingY + cardMarginY;
+    //Calc number of cards that fit on the sheet
+    const cardsX = Math.floor(page[0] / (cw / ppi));
+    const cardsY = Math.floor(page[1] / (ch / ppi));
+    //Calc page margins
+    const pageMarginX = Math.floor((page[0] * ppi - cardsX * cw) / 2);
+    const pageMarginY = Math.floor((page[1] * ppi - cardsY * ch) / 2);
+    //Iterate through every viable space and draw the card there
     var count = 0;
-    if (document.querySelector('#cuttingAids').checked) {
+    for (var i = imageList.length - 1; i >= 0 && count < cardsX * cardsY; i--) {
-        doc.addImage(aidCanvas, 'PNG', 0, 0, page[0], page[1]);
-    }
-    for (var i = imageList.length - 1; i >= 0 && count < cardsX * cardsY; i --) {
         if (imageList[i].width > 1) {
-            const cardX = (page[0] - cardsX * cardWidth) / 2 + (count % cardsX) * (cardWidth + cardMarginX) - cardMarginX;
+            try {
-            const cardY = (page[1] - cardsY * cardHeight) / 2 + (Math.floor(count / cardsX) % cardsY) * (cardHeight + cardMarginY) - cardMarginY;
+                //Calc upper-left corner of card *image* (accounts for bleed edge and margins)
-            console.log(`image: ${imageList[i].filename}, bounds: ${cardX}, ${cardY}, ${cardWidth}, ${cardHeight}`);
+                var x = pageMarginX + (count % cardsX)                      * (cw) + Math.floor(cardMarginX / 2) + cardPaddingX;
-            doc.addImage(imageList[i], 'PNG', cardX, cardY, cardWidth, cardHeight);
+                var y = pageMarginY + (Math.floor(count / cardsX) % cardsY) * (ch) + Math.floor(cardMarginY / 2) + cardPaddingY;
-            if (document.querySelector('#cuttingAids').checked) {
+                var w = cardWidth;
-                doc.addImage(cuttingGuides, 'PNG', cardX, cardY, cardWidth, cardHeight);
+                var h = cardHeight;
+                if (imgIncludesBleedEdge) {
+                    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(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);
                 }
                 count ++;
+            } catch {
+                console.log('image failed.');
+            }
+        }
     }
     doc.save('print.pdf');
 }
-
+//Manages page
 function setPageSize(size = [8.5, 11]) {
     page[0] = parseFloat(size[0]);
     page[1] = parseFloat(size[1]);
     drawSheet();
 }
-
-function setCardSize(size = [2.5, 3.5]) {
-    cardWidth = parseFloat(size[0]);
-    cardHeight = parseFloat(size[1]);
-    drawSheet();
-}
-
-function setCardDistance(distance) {
-    cardMarginX = parseInt(distance) / ppi;
-    cardMarginY = parseInt(distance) / ppi;
-    drawSheet();
-}
-
 function changeOrientation() {
-    page = page.reverse();
+    setPageSize([page[1], page[0]]);
+}
+//Sets PPI, recalculates card measurements
+function setPPI(inputPPI) {
+    var oldPPI = ppi;
+    ppi = parseInt(inputPPI);
+    var scale = ppi / oldPPI;
+    cardWidth *= scale;
+    cardHeight *= scale;
     drawSheet();
 }
-
+//Sets specific card dimensions
-function setPPI(inputPPI) {
+function setCardSize(size) {
-    ppi = parseInt(inputPPI);
+    if (size) {
-    setPageSize([page[0], page[1]]);
+        document.querySelector("#cardWidth").value = Math.round(size[0] * ppi);
-    setCardSize([cardWidth, cardHeight]);
+        document.querySelector("#cardHeight").value = Math.round(size[1] * ppi);
+    }
+    cardWidth = parseInt(document.querySelector("#cardWidth").value);
+    cardHeight = parseInt(document.querySelector("#cardHeight").value);
+    drawSheet();
 }
+function setPaddingSize(size) {
+    cardPaddingX = parseInt(size);
+    cardPaddingY = cardPaddingX;
+    drawSheet();
+}
+function setMarginSize(size) {
+    cardMarginX = parseInt(size);
+    cardMarginY = cardMarginX;
+    drawSheet();
+}
+//Sets booleans
+function setBleedEdge(bool) {
+    imgIncludesBleedEdge = bool;
+    drawSheet();
+}
+function setCuttingAids(bool) {
+    useCuttingAids = bool;
+    drawSheet();
+}
+//Default print configurations
+function saveDefaults() {
+    var cardObject = {
+        ppi:ppi,
+        page:page,
+        cardWidth:cardWidth,
+        cardHeight:cardHeight,
+        cardMarginX:cardMarginX,
+        cardMarginY:cardMarginY,
+        cardPaddingX:cardPaddingX,
+        cardPaddingY:cardPaddingY,
+        bleedEdge:imgIncludesBleedEdge,
+        cuttingAids:useCuttingAids
+    }
+    localStorage.setItem("cardPrintConfig", JSON.stringify(cardObject));
+}
+function loadDefaults() {
+    var cardObject = JSON.parse(localStorage.getItem("cardPrintConfig"))
+    if (cardObject && cardObject != {}) {
+        ppi = cardObject.ppi;
+        document.querySelector("#cardPPI").value = ppi;
+        page = cardObject.page;
+        cardWidth = cardObject.cardWidth;
+        document.querySelector("#cardWidth").value = cardWidth;
+        cardHeight = cardObject.cardHeight;
+        document.querySelector("#cardHeight").value = cardHeight;
+        cardMarginX = cardObject.cardMarginX;
+        cardMarginY = cardObject.cardMarginY;
+        document.querySelector("#cardMargin").value = cardMarginX;
+        cardPaddingX = cardObject.cardPaddingX;
+        cardPaddingY = cardObject.cardPaddingY;
+        document.querySelector("#cardPadding").value = cardPaddingX;
+        imgIncludesBleedEdge = cardObject.bleedEdge;
+        document.querySelector("#bleedEdgeCheckbox").checked = imgIncludesBleedEdge;
+        useCuttingAids = cardObject.cuttingAids;
+        document.querySelector("#cuttingAidsCheckbox").checked = useCuttingAids;
+    }
+}
+
+loadDefaults();