createInternalStickerZPL
This commit is contained in:
Eden Kirin
@ -17,6 +17,11 @@
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Sticker Print Demo</h1>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for=""></label>
|
||||
<textarea class="form-control" name="zpl" rows="10"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
||||
171
sticker-print.js
171
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",
|
||||
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",
|
||||
externalMasterSystemId: "ext-msid",
|
||||
});
|
||||
extMasterSystemId: "ext-msid",
|
||||
});
|
||||
|
||||
console.log(internalTicketZPL);
|
||||
document.querySelector(`textarea[name="zpl"]`).value = internalTicketZPL;
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user