From 60d103f370f0f6beac427299d64c87864097709a Mon Sep 17 00:00:00 2001
From: Kyle <41976328+ImKyle4815@users.noreply.github.com>
Date: Sun, 31 Jan 2021 11:31:32 -0800
Subject: [PATCH] print
---
css/style-7.css | 9 ++++++++-
js/main-1.js | 50 +++++++++++++++++++++++++++++++++++++++++++++
print/index.php | 33 ++++++++++++++++++++++++++++++
print/print.js | 54 +++++++++++++++++++++++++++++++++++++++++++++++++
4 files changed, 145 insertions(+), 1 deletion(-)
create mode 100644 print/index.php
create mode 100644 print/print.js
diff --git a/css/style-7.css b/css/style-7.css
index 8b5039d5..8e3b7089 100644
--- a/css/style-7.css
+++ b/css/style-7.css
@@ -438,7 +438,14 @@ textarea.input {
width: 100%;
height: 100%;
}
-
+/*drop to upload*/
+.drop-area {
+ border: 2px dashed gray;
+ transition: 0.25s;
+}
+.drop-area.hover {
+ border-color: var(--color-selected);
+}
/*Animated cards*/
diff --git a/js/main-1.js b/js/main-1.js
index 908c9cb3..84536f3d 100644
--- a/js/main-1.js
+++ b/js/main-1.js
@@ -33,3 +33,53 @@ window.onload = function() {
element.autocomplete = 'off';
});
}
+
+// Drop to upload
+const droppables = document.querySelectorAll('.drop-area');
+Array.from(droppables).forEach(element => {
+ element.addEventListener('dragenter', dropEnter, false);
+ element.addEventListener('dragleave', dropLeave, false);
+ element.addEventListener('dragover', dropOver, false);
+ element.addEventListener('drop', dropDrop, false);
+})
+function dropEnter(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ e.target.closest('.drop-area').classList.add('hover');
+}
+function dropLeave(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ e.target.closest('.drop-area').classList.remove('hover');
+}
+function dropOver(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ e.target.closest('.drop-area').classList.add('hover');
+}
+function dropDrop(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ e.target.closest('.drop-area').classList.remove('hover');
+ destination = window[e.target.closest('.drop-area').children[1].getAttribute('data-dropFunction')];
+ otherParams = window[e.target.closest('.drop-area').children[1].getAttribute('data-otherParams')];
+ uploadFiles(e.dataTransfer.files, destination, otherParams);
+}
+async function uploadFiles(filesRaw, destination, otherParams) {
+ var files = ([...filesRaw]);
+ if (files.length > 9) {
+ if (!confirm('You are uploading ' + files.length + ' images. Would you like to continue?')) {
+ return;
+ }
+ }
+ files.forEach(file => {
+ var reader = new FileReader();
+ reader.onloadend = function () {
+ destination(reader.result, otherParams);
+ }
+ reader.onerror = function () {
+ destination('/img/blank.png', otherParams);
+ }
+ reader.readAsDataURL(file);
+ })
+}
\ No newline at end of file
diff --git a/print/index.php b/print/index.php
new file mode 100644
index 00000000..1b9fb8cd
--- /dev/null
+++ b/print/index.php
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+
Download your Sheet
+ (Can take a few seconds)
+
+
+
+ Want to see your custom cards on the kitchen table?
+
+
+ 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.
+
+
+
+
+
\ No newline at end of file
diff --git a/print/print.js b/print/print.js
new file mode 100644
index 00000000..e74cfe91
--- /dev/null
+++ b/print/print.js
@@ -0,0 +1,54 @@
+//Configure sizes
+const ppi = 600;
+const pageWidth = 8.5 * ppi;
+const pageHeight = 11 * ppi;
+const cardWidth = 2.5 * ppi;
+const cardHeight = 3.5 * ppi;
+const cardMarginX = 10;
+const cardMarginY = 10;
+//Prepare variables/canvas/context
+var imageList = [];
+var canvas = document.querySelector('canvas');
+canvas.width = pageWidth;
+canvas.height = pageHeight;
+var context = canvas.getContext('2d');
+//Prepare pdf
+// const doc = new jsPDF({
+// orientation: 'portrait',
+// unit: 'in',
+// format: [pageWidth / ppi, pageHeight / ppi]
+// });
+//Draw blank page
+drawSheet();
+
+function uploadCard(card) {
+ var img = new Image();
+ img.crossOrigin = 'anonymous';
+ img.onload = function() {imageList.push(this); drawSheet();}
+ img.src = card;
+}
+
+function drawSheet() {
+ context.fillStyle = 'white';
+ context.fillRect(0, 0, pageWidth, pageHeight);
+ const cardsX = Math.floor(pageWidth / cardWidth);
+ const cardsY = Math.floor(pageHeight / cardHeight);
+ var count = 0;
+ for (var i = imageList.length - 1; i >= 0 && count < 9; i --) {
+ if (imageList[i].width > 1) {
+ context.drawImage(imageList[i], (pageWidth - cardsX * cardWidth - cardMarginX) / 2 + (count % cardsX) * (cardWidth + cardMarginX), (pageHeight - cardsY * cardHeight - cardMarginY) / 2 + (Math.floor(count / cardsX) % cardsY) * (cardHeight + cardMarginY), cardWidth, cardHeight);
+ }
+ count ++;
+ }
+}
+
+async function downloadSheet() {
+ // doc.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 8.5, 11);
+ // doc.save('print.pdf');
+ var download = document.createElement('a');
+ download.download = 'print.png';
+ download.href = canvas.toDataURL();
+ document.body.appendChild(download);
+ await download.click();
+ download.remove();
+}
\ No newline at end of file