import dti from 'dom-to-image';
import './Label.html';
import PDF from 'jspdf';
import { saveAs } from 'file-saver';
import swal from 'sweetalert2';
import dragula from 'dragula';
//import JsBarcode from 'JsBarcode';
import QRCode from '/imports/util/qrcode/qrcode';
//let QRCode = require('/imports/util/qrcode/qrcode.js');
console.log(QRCode);
//let {qrcode, svg2url} = require('pure-svg-code');
//let QRCode = require('qrcode-svg');
//******************************************************************
//** Creates printable labels for a roll style printer.
//******************************************************************
let PREFIX = "LabelMaker_";
let PX_PER_MM = 300 / 25.4;
let SCREEN_PX_PER_MM = 96 / 25.4;
let imagePath = "/images/3x2 Label Logo BW.svg";//"/images/Logo_0.8x0.73_300ppi.png";
function generateLabels(title1, title2, ingredients, date, count, topSpacing, bottomSpacing) {
//TODO: Allow logo to be removed or altered with an alternative logo for sizing fixes
let label = "
" +
"" +
//"" +
//"" +
"" +
//"
We grow it. We can it.
" +
"
" + title1 + "
" +
"
" + (title2 === undefined ? "" : title2) + "
" +
"
Ingredients:" + ingredients + "
" +
"
*grown by us8oz FD1951 (" + date + ")
" +
"
Refrigerate after opening; return jar when done
" +
"
18601 Hwy 128, Yorkville, CA 95494
" +
"
www.PetitTeton.com
" +
//"" +
"
";
let labels = "";
//TODO: Include bar code and identifying numbers.
for(let i = 0; i < count; i++) {
labels += label;
}
return labels;
}
function printImageOld(template, dataUrl) {
let img = new Image();
img.onload = function() {
let imageCanvas = $('.labelCanvas')[0];
let ctx = imageCanvas.getContext('2d');
//let threshold = 255 + 200 + 0;
let desiredContrast = 100;
let contrastCorrectionFactor = (259 * (desiredContrast + 255)) / (255 * (259 - desiredContrast));
imageCanvas.width = img.width;
imageCanvas.height = img.height;
//console.log("Generated image: " + img.width + ", " + img.height);
//ctx.scale(0.25, 0.25);
ctx.drawImage(img, 0, 0);
let imageData = ctx.getImageData(0, 0, imageCanvas.width, imageCanvas.height);
let data = imageData.data;
//Run three times
for(let c = 0; c < 3; c++) {
//Set each pixel to either black or white with the given threshold.
for(let i = 0; i < data.length; i += 4) {
data[i] = contrastCorrectionFactor * (data[i] - 128) + 128;
data[i + 1] = contrastCorrectionFactor * (data[i + 1] - 128) + 128;
data[i + 2] = contrastCorrectionFactor * (data[i + 2] - 128) + 128;
//if(data[i] + data[i + 1] + data[i + 2] < threshold) {
// data[i] = 0;
// data[i + 1] = 0;
// data[i + 2] = 0;
//}
//else {
// data[i] = 255;
// data[i + 1] = 255;
// data[i + 2] = 255;
//}
data[i + 3] = 255;
}
}
ctx.putImageData(imageData, 0, 0);
//Convert the canvas content to an image for printing. (cannot print a canvas?)
//sendToPrinter(template, imageCanvas.toDataURL("image/png"));
//Save to disk.
//imageCanvas.toBlob(function(blob) {
// saveAs(blob, "label.png");
//}, "image/png", 1);
//imageCanvas.toBlob(function(blob) {
// let url = URL.createObjectURL(blob);
// window.open(url, "_blank");
//}, "image/png", 1);
//let imgData = imageCanvas.toDataURL('image/jpeg', 1.0);
imageCanvas.toBlob(function(blob) {
let pdf = new PDF();
let url = URL.createObjectURL(blob);
pdf.addImage(url, "image/png", 0, 0);
pdf.save("label.pdf");
}, "image/png", 1);
};
img.src = dataUrl;
}
function printImage(template, raw, width, height) {
let data = raw;
//Run three times
for(let c = 0; c < 3; c++) {
//Set each pixel to either black or white with the given threshold.
for(let i = 0; i < data.length; i += 4) {
data[i] = contrastCorrectionFactor * (data[i] - 128) + 128;
data[i + 1] = contrastCorrectionFactor * (data[i + 1] - 128) + 128;
data[i + 2] = contrastCorrectionFactor * (data[i + 2] - 128) + 128;
//if(data[i] + data[i + 1] + data[i + 2] < threshold) {
// data[i] = 0;
// data[i + 1] = 0;
// data[i + 2] = 0;
//}
//else {
// data[i] = 255;
// data[i + 1] = 255;
// data[i + 2] = 255;
//}
data[i + 3] = 255;
}
}
let url = URL.createObjectURL(new Blob(raw, {type: "image/png"}));
let test = new Image();
test.src = url;
$('.testImage').html(test);
}
// Note: Not working correctly. Output seems to be at 96dpi instead of 300+dpi. Using a large image scaled down in in an Image tag seems to not print well.
function sendToPrinter(template, dataUrl) {
let canvasImg = new Image();
canvasImg.onload = function() {
//window.print();
};
canvasImg.src = dataUrl;
canvasImg.style.height = template.labelHeight.get() + "mm";
canvasImg.style.width = template.labelWidth.get() + "mm";
$(".printableLabel").html(canvasImg);
//$('.printableLabel').html(img);
window.print();
}
function loadImage(url) {
return new Promise(r => { let i = new Image(); i.onload = (() => r(i)); i.src = url; });
}
async function refreshLabelCanvas(template) {
let mmWidth = template.labelWidth.get();
let mmHeight = template.labelHeight.get();
let title1 = template.title1.get();
let title1Font = template.title1Font.get();
let title1YOffset = template.title1YOffset.get();
let title2 = template.title2.get();
let title2Font = template.title2Font.get();
let title2YOffset = template.title2YOffset.get();
let ingredients = template.ingredients.get();
let ingredientsFont = template.ingredientsFont.get();
let ingredientsYOffset = template.ingredientsYOffset.get();
let date = template.date.get();
let $labelCanvas = $('.labelCanvas');
let ctx = $labelCanvas[0].getContext('2d');
let width = Math.floor(mmWidth * PX_PER_MM);
let height = Math.floor(mmHeight * PX_PER_MM);
let center = width / 2;
let img = await loadImage(imagePath);
let imageWidth = 241;
let imageHeight = 219;
let ingredientsY = 180;
let ingredientsEndingY = 240;
let instructionsY = 280;
let addressY = 320;
let websiteY = 380;
ctx.fillStyle = 'white';
ctx.fillRect(0,0, width, height);
ctx.fillStyle = 'black';
ctx.drawImage(img, center - (imageWidth / 2), 0);
ctx.font = title1Font;
ctx.textAlign = 'center';
ctx.fillText(title1, center, title1YOffset);
////TODO: Allow logo to be removed or altered with an alternative logo for sizing fixes
//let label = "
" +
"
" +
// "