Fixes and updates.
This commit is contained in:
Wynne Crisman
@@ -8,6 +8,8 @@ import dragula from 'dragula';
|
||||
import QRCode from '/imports/util/qrcode/qrcode';
|
||||
//let QRCode = require('/imports/util/qrcode/qrcode.js');
|
||||
|
||||
import './PrintLabel.js';
|
||||
|
||||
console.log(QRCode);
|
||||
|
||||
//let {qrcode, svg2url} = require('pure-svg-code');
|
||||
@@ -20,216 +22,11 @@ console.log(QRCode);
|
||||
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 = "<div class='label'>" +
|
||||
"<div class='barcodeContainer'><svg class='barcode' jsbarcode-format='UPC' jsbarcode-value='123456789012' jsbarcode-textmargin='0' jsbarcode-fontoptions='bold' jsbarcode-margin='0' jsbarcode-width='2in' jsbarcode-height='10em'></svg></div>" +
|
||||
//"<div style='height: " + (topSpacing) + "in'></div>" +
|
||||
//"<img class='labelLogo' alt='logo' src='/images/PetitTetonLabelLogo_2in Width_v1.png'/>" +
|
||||
"<img class='labelLogo' alt='logo' src='" + imagePath + "'/>" +
|
||||
//"<div class='labelTagline'>We grow it. We can it.</div>" +
|
||||
"<div class='title1'>" + title1 + "</div>" +
|
||||
"<div class='title2'>" + (title2 === undefined ? "" : title2) + "</div>" +
|
||||
"<div class='ingredients'><span class='ingredientsPrefix'>Ingredients</span>:" + ingredients + "</div>" +
|
||||
"<div class='ingredientsEnding'>*<span style='font-style: oblique'>grown by us</span> <span class='size'>8oz</span> FD1951 (" + date + ")</div>" +
|
||||
"<div class='instructions'>Refrigerate after opening; return jar when done</div>" +
|
||||
"<div class='address'>18601 Hwy 128, Yorkville, CA 95494</div>" +
|
||||
"<div class='website'>www.PetitTeton.com</div>" +
|
||||
//"<div style='height: " + bottomSpacing + "in'></div>" +
|
||||
"</div>";
|
||||
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 = "<div class='label'>" +
|
||||
// "<div style='height: " + topSpacing + "in'></div>" +
|
||||
// //"<img class='labelLogo' alt='logo' src='/images/PetitTetonLabelLogo_2in Width_v1.png'/>" +
|
||||
// "<img class='labelLogo' alt='logo' src='/images/Logo_0.8x0.73_300ppi.png'/>" +
|
||||
// "<div class='labelTagline'>We grow it. We can it.</div>" +
|
||||
// "<div class='title1'>" + title1 + "</div>" +
|
||||
// "<div class='title2'>" + (title2 === undefined ? "" : title2) + "</div>" +
|
||||
// "<div class='ingredients'><span class='ingredientsPrefix'>Ingredients</span>:" + ingredients + "</div>" +
|
||||
// "<div class='ingredientsEnding'>*<span style='font-style: oblique'>grown by us</span> <span class='size'>8oz</span> FD1951 (" + date + ")</div>" +
|
||||
// "<div class='instructions'>Refrigerate after opening; return jar when done</div>" +
|
||||
// "<div class='address'>18601 Hwy 128, Yorkville, CA 95494</div>" +
|
||||
// "<div class='website'>www.PetitTeton.com</div>" +
|
||||
// "<div style='height: " + bottomSpacing + "in'></div>" +
|
||||
// "</div>";
|
||||
//let labels = "";
|
||||
//
|
||||
////TODO: Include bar code and identifying numbers.
|
||||
//for(let i = 0; i < count; i++) {
|
||||
// labels += label;
|
||||
//}
|
||||
//
|
||||
//return labels;
|
||||
}
|
||||
function bufferToBase64(buf) {
|
||||
var binstr = Array.prototype.map.call(buf, function (ch) {
|
||||
return String.fromCharCode(ch);
|
||||
}).join('');
|
||||
return btoa(binstr);
|
||||
}
|
||||
//let formats = {
|
||||
// "8oz Label": {logo: true, text: true, barcode: true, width: 76.2, height: 50.8, labelClass: '8oz'},
|
||||
// "Barcode Only": {logo: false, text: false, barcode: true, width: 25, height: 25, labelClass: 'barcode'}
|
||||
//};
|
||||
|
||||
Template.LabelMaker.onCreated(function() {
|
||||
this.labelWidth = new ReactiveVar(76);
|
||||
@@ -240,52 +37,29 @@ Template.LabelMaker.onCreated(function() {
|
||||
this.ingredients = new ReactiveVar("*strawberry, sugar, *espelette");
|
||||
|
||||
this.date = new ReactiveVar(19001);
|
||||
|
||||
//Session.set(PREFIX + "title1", "Strawberry");
|
||||
//Session.set(PREFIX + "title1Font", "50px Times New Roman");
|
||||
//Session.set(PREFIX + "title1YOffset", 260);
|
||||
//Session.set(PREFIX + "title2", "w/ Espelette");
|
||||
//Session.set(PREFIX + "title2Font", "40px Times New Roman");
|
||||
//Session.set(PREFIX + "title2YOffset", 340);
|
||||
//Session.set(PREFIX + "ingredients", "*strawberry, sugar, *espelette");
|
||||
//Session.set(PREFIX + "date", 19001);
|
||||
//Session.set(PREFIX + "count", 3);
|
||||
this.format = new ReactiveVar("oz8");
|
||||
});
|
||||
Template.LabelMaker.onRendered(function() {
|
||||
let template = this;
|
||||
|
||||
//Re-run this routine when ever the session variables change.
|
||||
//Tracker.autorun(function() {
|
||||
// //refreshLabelCanvas(Session.get(PREFIX + "title1"), Session.get(PREFIX + "title2"), Session.get(PREFIX + "ingredients"), Session.get(PREFIX + "date"), 1, Session.get(PREFIX + "labelSpacing"), 0);
|
||||
// refreshLabelCanvas(template);
|
||||
//});
|
||||
//
|
||||
//template.$('.labelContainer').on('DOMSubtreeModified', function() {
|
||||
// console.log("Initialized barcode");
|
||||
// //
|
||||
//});
|
||||
//JsBarcode(".barcode").init();
|
||||
|
||||
|
||||
//const svgString = qrcode({content: "1234567890", padding: 0, width: 60, height: 60, color: "#000000", background: "#FFFFFF", ecl: "L"});
|
||||
//this.$('.qrcode').attr('src', svg2url(svgString));
|
||||
|
||||
//this.$('.qrcode').attr('src', svg2url(new QRCode({content: '1234567890', width: 80, height: 80, color: "#000000", background: "#FFFFFF"}).svg()));
|
||||
|
||||
new QRCode(document.getElementById("qrcode"), {text: "1234567890", width: 60, height: 60});
|
||||
//new QRCode(document.getElementById("qrcode"), {text: "1234567890", width: 60, height: 60});
|
||||
});
|
||||
Template.LabelMaker.onDestroyed(function() {
|
||||
});
|
||||
Template.LabelMaker.events({
|
||||
'change .labelWidth': function(e, t) {
|
||||
let x = $(e.target).val();
|
||||
|
||||
t.labelWidth.set(!Number.isNaN(x) && x > 0 ? parseFloat(x) : 76);
|
||||
},
|
||||
'change .labelHeight': function(event, template) {
|
||||
let x = $(event.target).val();
|
||||
|
||||
t.labelHeight.set(!Number.isNaN(x) && x > 0 ? parseFloat(x) : 50);
|
||||
//'change .labelWidth': function(e, t) {
|
||||
// let x = $(e.target).val();
|
||||
//
|
||||
// t.labelWidth.set(!Number.isNaN(x) && x > 0 ? parseFloat(x) : 76);
|
||||
//},
|
||||
//'change .labelHeight': function(event, template) {
|
||||
// let x = $(event.target).val();
|
||||
//
|
||||
// t.labelHeight.set(!Number.isNaN(x) && x > 0 ? parseFloat(x) : 50);
|
||||
//},
|
||||
|
||||
'change input[name="labelType"]': function(e, t) {
|
||||
t.format.set($(e.target).val());
|
||||
},
|
||||
|
||||
'change .title1': function(e, t) {t.title1.set($(e.target).val());},
|
||||
@@ -302,25 +76,27 @@ Template.LabelMaker.events({
|
||||
|
||||
'change .date': function(e, t) {t.date.set(parseInt($(e.target).val()));},
|
||||
'click .preview': function(event, template) {
|
||||
let params = {};
|
||||
let _this = template;
|
||||
let format = _this.format.get();
|
||||
let title1 =_this.title1.get();
|
||||
let title2 =_this.title2.get();
|
||||
let ingredients =_this.ingredients.get();
|
||||
let date =_this.date.get();
|
||||
let params = {format, title1, title2, ingredients, date};
|
||||
|
||||
params['title1'] = "Strawberry";
|
||||
params['title2'] = "";
|
||||
params['ingredients'] = "Fairies";
|
||||
params['date'] = "1234";
|
||||
window.open('/PrintLabel?' + $.param(params));
|
||||
},
|
||||
'click .print': function(event, template) {
|
||||
let _this = template;
|
||||
let node = $('.label')[0];
|
||||
let width = _this.labelWidth.get();
|
||||
let height =_this.labelHeight.get();
|
||||
let format = _this.format.get();
|
||||
let title1 =_this.title1.get();
|
||||
let title2 =_this.title2.get();
|
||||
let ingredients =_this.ingredients.get();
|
||||
let date =_this.date.get();
|
||||
|
||||
Meteor.call('printLabels', width, height, "3x2Standard", title1, title2, ingredients, date, (error, result) => {
|
||||
//console.log("Calling print with: " + JSON.stringify({format, title1, title2, ingredients, date}));
|
||||
|
||||
Meteor.call('printLabels', format, title1, title2, ingredients, date, (error, result) => {
|
||||
if(error) {
|
||||
console.log(error);
|
||||
}
|
||||
@@ -333,81 +109,37 @@ Template.LabelMaker.events({
|
||||
}
|
||||
});
|
||||
|
||||
//dti.toBlob(node, {bgcolor: 'white'}).then(function(blob) {
|
||||
// printImage(template, blob);
|
||||
//}).catch(function(err) {
|
||||
// console.log(err);
|
||||
//});
|
||||
|
||||
//dti.toPng(node, {bgcolor: 'white'}).then(function(dataUrl) {
|
||||
// printImageOld(template, dataUrl);
|
||||
//}).catch(function(err) {
|
||||
// console.log(err);
|
||||
//});
|
||||
|
||||
|
||||
//let count = template.$('input[name="count"]').val();
|
||||
//let spacing = Session.get(PREFIX + "labelSpacing");
|
||||
//
|
||||
////count = (count === undefined || Number.isNaN(count)) ? 1 : parseInt(count);
|
||||
////
|
||||
////if(count < 1) {
|
||||
//// count = 1;
|
||||
////}
|
||||
////
|
||||
////Session.set(PREFIX + "generatedLabels", generateLabels(Session.get(PREFIX + "title1"), Session.get(PREFIX + "title2"), Session.get(PREFIX + "ingredients"), Session.get(PREFIX + "date"), count, 0, spacing));
|
||||
//
|
||||
//let $label = $('.printableLabel');
|
||||
//
|
||||
//console.log($label);
|
||||
//console.log($label.length);
|
||||
//domtoimage.toPng($label).then(function(dataUrl) {
|
||||
// console.log("A");
|
||||
// let img = new Image();
|
||||
// img.src = dataUrl;
|
||||
// $('.printableLabel').html(img);
|
||||
// //caman('.printableLabel img', function() {
|
||||
// // this.contrast(100);
|
||||
// // this.render();
|
||||
// // window.print();
|
||||
// //});
|
||||
//}).catch(function(error) {
|
||||
// console.error("failed to convert dom to image");
|
||||
// console.error(error);
|
||||
//});
|
||||
}
|
||||
});
|
||||
Template.LabelMaker.helpers({
|
||||
printLabelVars: function() { //Called to pass the values for rendering a sample label on the client. This mimics the same call to the same view when going to 'print' the label to PDF later.
|
||||
let t = Template.instance();
|
||||
|
||||
return {
|
||||
format: t.format.get(),
|
||||
title1: t.title1.get(),
|
||||
title2: t.title2.get(),
|
||||
ingredients: t.ingredients.get(),
|
||||
date: t.date.get()
|
||||
}
|
||||
},
|
||||
title1: function() {return Template.instance().title1.get();},
|
||||
title2: function() {return Template.instance().title2.get();},
|
||||
ingredients: function() {return Template.instance().ingredients.get();},
|
||||
date: function() {return Template.instance().date.get();},
|
||||
labelWidth: function() {return Template.instance().labelWidth.get();},
|
||||
labelHeight: function() {return Template.instance().labelHeight.get();},
|
||||
sampleLabel: function() {
|
||||
let t = Template.instance();
|
||||
setTimeout(function() {JsBarcode(".barcode").init();}, 500);
|
||||
return generateLabels(t.title1.get(), t.title2.get(), t.ingredients.get(), t.date.get(), 1, 0);
|
||||
},
|
||||
//canvasLabel: function() {
|
||||
// return generateLabelCanvas(Session.get(PREFIX + "title1"), Session.get(PREFIX + "title2"), Session.get(PREFIX + "ingredients"), Session.get(PREFIX + "date"), 1, Session.get(PREFIX + "labelSpacing"), 0);
|
||||
//},
|
||||
|
||||
labels: function() {
|
||||
return Session.get(PREFIX + "generatedLabels");
|
||||
},
|
||||
labelPxWidth: function() {
|
||||
//console.log("label width: " + Template.instance().labelWidth.get());
|
||||
//console.log("px_per_mm: " + PX_PER_MM);
|
||||
//console.log("labelPxWidth: " + (Template.instance().labelWidth.get() * PX_PER_MM));
|
||||
return Math.floor(Template.instance().labelWidth.get() * PX_PER_MM);
|
||||
},
|
||||
labelPxHeight: function() {
|
||||
return Math.floor(Template.instance().labelHeight.get() * PX_PER_MM);
|
||||
},
|
||||
labelPxWidthActual: function() {
|
||||
//console.log("label width: " + Template.instance().labelWidth.get());
|
||||
//console.log("px_per_mm: " + PX_PER_MM);
|
||||
//console.log("labelPxWidth: " + (Template.instance().labelWidth.get() * PX_PER_MM));
|
||||
return Math.floor(Template.instance().labelWidth.get() * SCREEN_PX_PER_MM);
|
||||
},
|
||||
labelPxHeightActual: function() {
|
||||
|
||||
Reference in New Issue
Block a user