Barcode Label Print

Wappler General Need Help
1

Hello,

I am pretty new to Wappler and I am wondering about it’s limits to custom code or node.js files. I am currently working on a project which involves printing barcode labels with some custom content. I am using JsBarcode cDn Library to generate a barcode but printing it to labels with my zebra thermal printer is becoming extremely tricky, any suggestions on how I can achieve this would be extremely helpful and much appreciated.

2

Why are you finding it extremely tricky? What have you tried so far?

3

Hi @JonL, I am creating an application where I have various item and I need to print out a label with barcode whenever a new item is added. I used JSBarcode to generate the barcode. However, I am not able to figure out how I can print it in the label printer without any print dialog from the browser as well as not actually displaying the barcode in the user-interface. I found various Nodejs libraries but I’m not able to figure out how I can use the library in Wappler and integrate the codes.

4

You are on the right path. If you don’t want to print from the browser but print via network you will have to do it from the backend.

There are probably several node packages available that can print to zebra thermal printers.

You need to send from the browser to the backend api the image you want to print and once you have it there send it to your printer. For this you would need to create a custom server connect extension based on said node package.

5

Hello @JonL ,

Thank you for your advise, I was able to generate a barcode label in a div and make it an image using canvas, So all there left was to print it.

To test the theory of a package I am using, I used a dummy file that can print the image to a label printer.
here’s my code.
const usb = require(‘usb’);
const Jimp = require(‘jimp’);

function getImageData(path, cb) {
    Jimp.read(path, (err, img) => {
        const widthInBytes = Math.ceil(img.getWidth() / 8);
        const data = new Array(img.getHeight());
        for (let y = 0; y < img.getHeight(); y++) {
            const row = new Array(widthInBytes);
            for (let b = 0; b < widthInBytes; b++) {
                let byte = 0;
                let mask = 128;
                for (let x = b * 8; x < (b + 1) * 8; x++) {
                    const color = Jimp.intToRGBA(img.getPixelColor(x, y));
                    if (color.a < 65) byte = byte ^ mask; // empty dot (1)
                    mask = mask >> 1;
                }
                row[b] = byte;
            }
            data[y] = row;
        }
        cb(data);
    });
}

function print(buffer) {
    // you can get all available devices with usb.getDeviceList()
    let device = usb.findByIds(/*vid*/8137, /*pid*/8214);
    device.open();
    device.interfaces[0].claim();
    const outEndpoint = device.interfaces[0].endpoints.find(e => e.direction === 'out');
    outEndpoint.transferType = 2;
    outEndpoint.transfer(buffer, (err) => {
        device.close();
    });
}

getImageData('../assets/sabba-logo.jpeg', (data) => {
    const widthInBytes = data[0].length;
    const heightInDots = data.length;

    const buffer = Buffer.concat([
        Buffer.from('SIZE 48 mm,25 mm\r\n'),
        Buffer.from('CLS\r\n'),
        Buffer.from(`BITMAP 10,20,${widthInBytes},${heightInDots},0,`),
        Buffer.from(data.flat()),
        Buffer.from('BARCODE 10,100,"128",50,1,0,2,2,"altospos.com"\r\n'),
        Buffer.from('PRINT 1\r\n'),
        Buffer.from('END\r\n'),
    ]);

    print(buffer);
});

But I’m getting an error in the console which says “Can’t find variable: require” and am not able to solve it. I tried calling the js file in the script tag with type set to module but then I get a relative path invalid error message.

6

Where are you running this code?

7

Hello JonL,

I made a js file and I am calling it in a page and running the function getImageData in the run javascript in app flow

8

Are you running the JavaScript code in the browser or in NodeJS? What console are you looking at?

Node USB is a NodeJS library, it won’t work in the browser

Also, what operative system are you running and is your NodeJS running natively, through Docker or through Wappler’s internal server? These questions are of concern as you want to interact with a USB device

9

You are trying to run a node package in the browser. As @apple says it won’t work.

As commented above this is the right way to do it.

What you are trying to do is possible, but it’s probably not for beginners. You need to spend some time with Wappler to understand how it all connects before attempting something like this.

If you need it immediately to start building your app you are better off paying for someone to build it for you. If you need help with that feel free to drop me a PM. Although it would be a tricky project given that normally people don’t have a Zebra printer laying around :slight_smile: