zebra-sticker-print/sticker-print.js

const TEMPLATES = {
    "sticker-70x35": {
        name: "Sticker 70x35mm",
        content: `
            ^XA
            ^FX Template label 70x35mm

            ^FX --------- Agenzia Entrata logo
            ^FO{agencyLogoXpos},{agencyLogoYpos}{agencyLogoZPL}^FS

            ^FX --------- QR Code image
            ^FO{qrCodeXpos},{qrCodeYpos}{qrCodeZPL}^FS

            ^FX --------- Company name
            ^CF0,30
            ^FO{companyNameXpos},{companyNameYpos}^FD{companyName}^FS

            ^FX --------- External MSID
            ^CFA,20
            ^FO{extMasterSystemIdXpos},{extMasterSystemIdYpos}^FDACS: {extMasterSystemId}^FS

            ^FX --------- Machine Model
            ^CFA,20
            ^FO{machineModelXpos},{machineModelYpos}^FD{machineModel}^FS

            ^FX --------- MSID label
            ^CFA,20
            ^FO{masterSystemIdXpos},{masterSystemIdYpos}^FDID ADE:^FS

            ^FX --------- MSID, max 22 chars
            ^CFA,20
            ^FO20,240^FD{masterSystemId}^FS

            ^XZ
        `,
        agencyLogo: {
            dimensions: {
                width: 260,
                height: 73,
            },
            pos: {
                x: 20,
                y: 90,
            },
        },
        qrCode: {
            dimensions: {
                width: 250,
                height: 250,
            },
            pos: {
                x: 300,
                y: 10,
            },
        },
        companyName: {
            pos: {
                x: 20,
                y: 10,
            },
        },
        machineModel: {
            pos: {
                x: 20,
                y: 180,
            },
        },
        masterSystemId: {
            pos: {
                x: 20,
                y: 210,
            },
        },
        extMasterSystemIdId: {
            pos: {
                x: 20,
                y: 55,
            },
        },
    },
};

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 renderInternalStickerTemplate(templateName, vars) {
    const template = TEMPLATES[templateName];

    return replaceTemplateVars(template.content, {
        qrCodeZPL: vars.qrCodeZPL,
        qrCodeXpos: template.qrCode.pos.x,
        qrCodeYpos: template.qrCode.pos.y,
        agencyLogoZPL: vars.agencyLogoZPL,
        agencyLogoXpos: template.agencyLogo.pos.x,
        agencyLogoYpos: template.agencyLogo.pos.y,
        companyName: vars.companyName,
        companyNameXpos: template.companyName.pos.x,
        companyNameYpos: template.companyName.pos.y,
        machineModel: vars.machineModel,
        machineModelXpos: template.machineModel.pos.x,
        machineModelYpos: template.machineModel.pos.y,
        masterSystemId: vars.masterSystemId,
        masterSystemIdXpos: template.masterSystemId.pos.x,
        masterSystemIdYpos: template.masterSystemId.pos.y,
        extMasterSystemId: vars.extMasterSystemId,
        extMasterSystemIdXpos: template.extMasterSystemIdId.pos.x,
        extMasterSystemIdYpos: template.extMasterSystemIdId.pos.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);
        });
    });
}

async function createInternalStickerZPL(options) {
    const templateName = "sticker-70x35";
    const template = TEMPLATES[templateName];

    const agencyLogoZPL = await imageToGRF(options.agencyLogoUrl, {
        width: template.agencyLogo.dimensions.width,
        height: template.agencyLogo.dimensions.height,
    });

    const qrCodeZPL = await imageToGRF(options.qrCodeUrl, {
        width: template.qrCode.dimensions.width,
        height: template.qrCode.dimensions.height,
    });

    return renderInternalStickerTemplate(templateName, {
        agencyLogoZPL,
        qrCodeZPL,
        ...options,
    });
}


function getAvailablePrinters() {
    return new Promise((resolve, reject) => {
        const devices = [];
        BrowserPrint.getDefaultDevice("printer", device => {
            devices.push(device);
            const defaultDevice = device;

            BrowserPrint.getLocalDevices(deviceList => {
                //console.log(deviceList)
                deviceList.printer.forEach(device => {
                    if (!defaultDevice || device.uid != defaultDevice.uid) {
                        devices.push(device);
                    }
                }, error => {
                    reject("Error getting local devices");
                }, "printer");
                resolve(devices);
            });
        }, error => {
            reject(error);
        })
    })
}