diff --git a/index.html b/index.html
index 2173f04..de3957e 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,11 @@
Sticker Print Demo
+
+
+
+
+
diff --git a/sticker-print.js b/sticker-print.js
index cbe2c9b..5e7b3ad 100644
--- a/sticker-print.js
+++ b/sticker-print.js
@@ -1,82 +1,31 @@
-/*
-
-^XA
-^FX Template label 70x35mm
-
-^FX --------- Agenzia Entrata logo
-^FO20,85^GFA,2409,2409,33,,:::::I01LF8hL0806,I07LF8hK08812,I0MFChK0140B8,I0MFChI02384045E,001MFEhI0275802058,001MFEhI0AC6I0C44,001MFEhI0BFC004246,I0NFhH01768I0189,I0NFhI064K0C9,I07MF8hG0ACCK0E7C,J0MF8gI07V01B48K0422,L07JFCgI0FV02DDL0691,L0KFCgI0FW0EBI0800141,L0KFCgI0FV04FAI08001378,K01FI07EhG0FAL0102,K018J0Eh08F2I04I019,M03FE03J0FEF80FC03EFC03FFE03F8007F8P01E2L01414,L03IFEJ01IFC3FF03FFE03FFE07F801FFCP056O056,K01KFCI03IFC7FF83IF03FFE07F801FFEP01C5L01C42,K07LFI07C3F0F87C1F8F03FFE03F800E0FP0398M0648,K0MF800781E1E01E0F078387C0078J0FP03980041I0268,J03MFE00F00E1E01E0E07818F80078003FFP02B003C0E0017A,J07NF00F00E1IFE0E07801EI07800IFP03A08K0813C,J0OF80F00E1IFE0E07803CI07801IFP0D404J0100BC,I01OFC0F00E1IFE0E078078I07803E0FP0F4M0107C,I03OFC0701E1EJ0E0780F0E00780380FP0F8008L028,I03IF800IFE0783E0F00C1E0781F0E00780381FP0F0404001I039,I07FFCI01IF03FFE0IFE3F9FC3FFE0IFC3IFCO05060300200A91,I0IF8J0IF03FFE07FFE7F9FE3FFE0IFE3IFCN0130E0100201011,I0IFK07FF80FFE03FFC3F8FC3FFE0IFC1IFCO0B1B0200201511,001FFEK03FF8038E007CV038Q031BJ020141D,001FFCK01FFCI0EgS07B2M0D73,001FF8L0FFC001EgS03B1001CI0CCA,001QFC0FFEgS03F1003210104A,003QFC0FFCgR011F3J080124A,003QFE0FF8gS05FE01J0129,003QFE07CgT01EC0400180744,003QFEgX0FCM06D4,003QFEgW04ECM0DB,003QFEP0FU038O03ECM0BA8,003BPFEP0FU03CO01F402J01E9,003BPFEP0FU03CP0FAL017E,0033PFEP0FU03CP07AM058,0013PFEP0FU03CP03CM0E4,I03FCR01F3F003IF007E3F007F801IFC007F8I04DL034C,I03FCL07FF8003IFC07IF80FE7F83FFE03IFE01FFEI06F84I08089C,I03FCL03FF8003IFE0JF81JFC3IF03IFE03IF006241CI019804,00C3FFL03FFC003IFE07IF80JFC3IF01IFC07IF80021BCI01208,00C3FF8K03FFCI0FC1F00FJ01FE38I0F803CI07C0FC02605C004BC082,01E3FFEJ03IFCI0780F00FJ01FCK07803CI0F803C0320325IF001A,01E3IFE00JFEEI0700F00FJ01FJ07FF803CI0F003C0E881804870452,1FF1PFEFF00700F00FJ01EI01IF803CI0JFE03F400509818E4,7FF8PFE7F80700F00FJ01EI03IF803CI0JFE00780318604608,7FFCPFE7F80700F00FJ01EI07IF803CI0JFE014BDI26B433,IFE3OFC7FC0700F00FJ01EI0FC07803CI0FL049DA0D81404,JF1OFCFFC0700F00FJ01EI0F007803CI0FL021C0FEF0018,JF8OF1FFC0F00F00F01E01EI0F01F803C078FC01CI081E606FF6,JFE3MFC3FFC1FC1F80IFE0IFC0JFE03IF87IFEI078DC032,7JF0LFC1IF83FE3FC07FFE1IFE07JF03IF83IFEJ013001B8,7JFE1JF81JF83FE7FC03FFC1IFE03JF01IF01IFCJ03FI0F8,1KF8J03JFE01FC3FC01FE01IFC01FE7C007F8007FEL0E,,:::::^FS
-
-^FX --------- QR Code
-^FO300,5
-^BQN,2,5,M,7
-^FDQA,
-https://www.zebra.com/content/dam/zebra_new_ia/en-us/manuals/printers/common/programming/zpl-zbi2-pm-en.pdf
-^FS
-
-^FX --------- Company name
-^CF0,30
-^FO20,15^FD
-Vandelay Industries
-^FS
-
-^FX --------- External MSID
-^CFA,20
-^FO20,55^FD
-ACS: EXT-MSID
-^FS
-
-^FX --------- Machine Model
-^CFA,20
-^FO20,180^FD
-Model XL-123
-^FS
-
-^FX --------- MSID label
-^CFA,20
-^FO20,210^FD
-ID ADE:
-^FS
-
-^FX --------- MSID, max 22 chars
-^CFA,20
-^FO20,240^FD
-1234567890123456789012
-^FS
-
-^XZ
-
-*/
-
const TEMPLATES = {
"sticker-70x35": {
name: "Sticker 70x35mm",
- template: `
+ content: `
^XA
^FX Template label 70x35mm
^FX --------- Agenzia Entrata logo
^FO20,85^GFA,2409,2409,33,,:::::I01LF8hL0806,I07LF8hK08812,I0MFChK0140B8,I0MFChI02384045E,001MFEhI0275802058,001MFEhI0AC6I0C44,001MFEhI0BFC004246,I0NFhH01768I0189,I0NFhI064K0C9,I07MF8hG0ACCK0E7C,J0MF8gI07V01B48K0422,L07JFCgI0FV02DDL0691,L0KFCgI0FW0EBI0800141,L0KFCgI0FV04FAI08001378,K01FI07EhG0FAL0102,K018J0Eh08F2I04I019,M03FE03J0FEF80FC03EFC03FFE03F8007F8P01E2L01414,L03IFEJ01IFC3FF03FFE03FFE07F801FFCP056O056,K01KFCI03IFC7FF83IF03FFE07F801FFEP01C5L01C42,K07LFI07C3F0F87C1F8F03FFE03F800E0FP0398M0648,K0MF800781E1E01E0F078387C0078J0FP03980041I0268,J03MFE00F00E1E01E0E07818F80078003FFP02B003C0E0017A,J07NF00F00E1IFE0E07801EI07800IFP03A08K0813C,J0OF80F00E1IFE0E07803CI07801IFP0D404J0100BC,I01OFC0F00E1IFE0E078078I07803E0FP0F4M0107C,I03OFC0701E1EJ0E0780F0E00780380FP0F8008L028,I03IF800IFE0783E0F00C1E0781F0E00780381FP0F0404001I039,I07FFCI01IF03FFE0IFE3F9FC3FFE0IFC3IFCO05060300200A91,I0IF8J0IF03FFE07FFE7F9FE3FFE0IFE3IFCN0130E0100201011,I0IFK07FF80FFE03FFC3F8FC3FFE0IFC1IFCO0B1B0200201511,001FFEK03FF8038E007CV038Q031BJ020141D,001FFCK01FFCI0EgS07B2M0D73,001FF8L0FFC001EgS03B1001CI0CCA,001QFC0FFEgS03F1003210104A,003QFC0FFCgR011F3J080124A,003QFE0FF8gS05FE01J0129,003QFE07CgT01EC0400180744,003QFEgX0FCM06D4,003QFEgW04ECM0DB,003QFEP0FU038O03ECM0BA8,003BPFEP0FU03CO01F402J01E9,003BPFEP0FU03CP0FAL017E,0033PFEP0FU03CP07AM058,0013PFEP0FU03CP03CM0E4,I03FCR01F3F003IF007E3F007F801IFC007F8I04DL034C,I03FCL07FF8003IFC07IF80FE7F83FFE03IFE01FFEI06F84I08089C,I03FCL03FF8003IFE0JF81JFC3IF03IFE03IF006241CI019804,00C3FFL03FFC003IFE07IF80JFC3IF01IFC07IF80021BCI01208,00C3FF8K03FFCI0FC1F00FJ01FE38I0F803CI07C0FC02605C004BC082,01E3FFEJ03IFCI0780F00FJ01FCK07803CI0F803C0320325IF001A,01E3IFE00JFEEI0700F00FJ01FJ07FF803CI0F003C0E881804870452,1FF1PFEFF00700F00FJ01EI01IF803CI0JFE03F400509818E4,7FF8PFE7F80700F00FJ01EI03IF803CI0JFE00780318604608,7FFCPFE7F80700F00FJ01EI07IF803CI0JFE014BDI26B433,IFE3OFC7FC0700F00FJ01EI0FC07803CI0FL049DA0D81404,JF1OFCFFC0700F00FJ01EI0F007803CI0FL021C0FEF0018,JF8OF1FFC0F00F00F01E01EI0F01F803C078FC01CI081E606FF6,JFE3MFC3FFC1FC1F80IFE0IFC0JFE03IF87IFEI078DC032,7JF0LFC1IF83FE3FC07FFE1IFE07JF03IF83IFEJ013001B8,7JFE1JF81JF83FE7FC03FFC1IFE03JF01IF01IFCJ03FI0F8,1KF8J03JFE01FC3FC01FE01IFC01FE7C007F8007FEL0E,,:::::^FS
- ^FX --------- QR Code
- ^FO300,5
- ^BQN,2,5,M,7
- ^FDQA,{qrCodeUrl}^FS
+ ^FX --------- QR Code image
+ ^FO{qrCodeXpos},{qrCodeYpos}{qrCodeZPL}^FS
^FX --------- Company name
^CF0,30
- ^FO20,15^FD{companyName}^FS
+ ^FO{companyNameXpos},{companyNameYpos}^FD{companyName}^FS
^FX --------- External MSID
^CFA,20
- ^FO20,55^FDACS: {externalMasterSystemId}^FS
+ ^FO{extMasterSystemIdXpos},{extMasterSystemIdYpos}^FDACS: {extMasterSystemId}^FS
^FX --------- Machine Model
^CFA,20
- ^FO20,180^FD{machineModel}^FS
+ ^FO{machineModelXpos},{machineModelYpos}^FD{machineModel}^FS
^FX --------- MSID label
^CFA,20
- ^FO20,210^FDID ADE:^FS
+ ^FO{masterSystemIdXpos},{masterSystemIdYpos}^FDID ADE:^FS
^FX --------- MSID, max 22 chars
^CFA,20
@@ -84,26 +33,106 @@ const TEMPLATES = {
^XZ
`,
+ qrCodePos: {
+ x: 300,
+ y: 10,
+ },
+ companyNamePos: {
+ x: 20,
+ y: 10,
+ },
+ machineModelPos: {
+ x: 20,
+ y: 180,
+ },
+ masterSystemIdPos: {
+ x: 20,
+ y: 210,
+ },
+ extMasterSystemIdIdPos: {
+ x: 20,
+ y: 55,
+ },
},
};
-function createInternalStickerZPL(template, content) {
- return template
- .replace("{qrCodeUrl}", content.qrCodeUrl)
- .replace("{companyName}", content.companyName)
- .replace("{machineModel}", content.machineModel)
- .replace("{masterSystemId}", content.masterSystemId)
- .replace("{externalMasterSystemId}", content.externalMasterSystemId);
+function replaceTemplateVars(template, vars) {
+ Object.entries(vars).forEach(([key, value]) => {
+ template = template.replace(`{${key}}`, value);
+ });
+
+ const trimmed = template
+ .split("\n")
+ .map((line) => line.trim())
+ .join("\n");
+
+ return trimmed;
}
-function imageToGRF() {}
+function createInternalStickerZPL(templateName, vars) {
+ const template = TEMPLATES[templateName];
-const internalTicketZPL = createInternalStickerZPL(TEMPLATES["sticker-70x35"].template, {
- qrCodeUrl: "https://en.wikipedia.org/wiki/Zebra_Programming_Language",
- companyName: "Vandelay Industries",
- machineModel: "Model XL-123",
- masterSystemId: "master-system-id",
- externalMasterSystemId: "ext-msid",
+ return replaceTemplateVars(template.content, {
+ qrCodeZPL: vars.qrCodeZPL,
+ qrCodeXpos: template.qrCodePos.x,
+ qrCodeYpos: template.qrCodePos.y,
+ companyName: vars.companyName,
+ companyNameXpos: template.companyNamePos.x,
+ companyNameYpos: template.companyNamePos.y,
+ machineModel: vars.machineModel,
+ machineModelXpos: template.machineModelPos.x,
+ machineModelYpos: template.machineModelPos.y,
+ masterSystemId: vars.masterSystemId,
+ masterSystemIdXpos: template.masterSystemIdPos.x,
+ masterSystemIdYpos: template.masterSystemIdPos.y,
+ extMasterSystemId: vars.extMasterSystemId,
+ extMasterSystemIdXpos: template.extMasterSystemIdIdPos.x,
+ extMasterSystemIdYpos: template.extMasterSystemIdIdPos.y,
+ });
+}
+
+function loadImage(imgUrl) {
+ return new Promise((resolve, reject) => {
+ const image = new Image();
+ image.addEventListener(
+ "load",
+ () => {
+ resolve(image);
+ },
+ false
+ );
+ image.src = imgUrl;
+ });
+}
+
+function imageToGRF(imgUrl, options) {
+ return new Promise((resolve, reject) => {
+ loadImage(imgUrl).then((image) => {
+ if (options?.width) {
+ image.width = options.width;
+ }
+ if (options?.height) {
+ image.height = options.height;
+ }
+
+ let res = imageToZ64(image);
+ let zpl = `^GFA,${res.length},${res.length},${res.rowlen},${res.z64}`;
+ resolve(zpl);
+ });
+ });
+}
+
+imageToGRF("/assets/qr-code-example.jpeg", {
+ width: 250,
+ height: 250,
+}).then((qrCodeZPL) => {
+ const internalTicketZPL = createInternalStickerZPL("sticker-70x35", {
+ qrCodeZPL: qrCodeZPL,
+ companyName: "Vandelay Industries",
+ machineModel: "Model XL-123",
+ masterSystemId: "master-system-id",
+ extMasterSystemId: "ext-msid",
+ });
+
+ document.querySelector(`textarea[name="zpl"]`).value = internalTicketZPL;
});
-
-console.log(internalTicketZPL);