In the upcoming new version, ZK 8.6, we’d like to introduce you two new barcode components: Barcode and Barcodescanner. Barcode is a component that can easily render the barcode for web app developers. Barcodescanner is a scanner for decoding the barcode message which your camera scanned.

ZK Barcode

ZK provides a friendly and easy-to-use Barcode widget to generate a barcode image easily. The only thing you need to do is to declare <barcode/> in the zul file, specifying its value and type, and ZK will automatically generate the barcode image on the browser. For example, simply write the following code and the QR code will be automatically generated:

<barcode type="qr" value="" height="100px"/>

ZK Barcodescanner

The Barcodescanner is a component for scanning the barcodes. It is based on HTML5 <video> tag and promise syntax, so it only works on HTML5-supported browsers and the browsers that support ECMA6 or later versions. The attribute that Barcodescanner supports are type, continuous, open, and interval. The following is an example for the barcode scanner scan a barcode and its result.

<barcodescanner type="qr,code128" continuous="true" interval="1000" height="100px"
onDetect='Clients.log(event.getType() + " " + event.getResult())'/>

The Barcodescanner can automatically detect the barcode type and decode accordingly. To decode more than one type of barcodes, you can simply separate the series by comma. For example, name type=”code128,qr,ean”.

Library registering mechanism

Barcode and Barcodescanner have some built-in types. If the built-in types are not what you’re after, and you wish to add your own library, we also provide a way to register your own function and library: zkmax.barcode.Barcode.registerLibrary() and zkmax.barscanner.Barcodescanner.registerLibrary().

In Barcode, the first parameter is your javascript function, the second parameter is the name of your library, and the third parameter is an array to define the type which your own library can handle. Here we put the function at the second parameter of the zk.afterload(‘zkmax.barcode’, /*your function*/) to make sure that the function can be imported at the right time in the  ZK-lifecyle.

<?script src="mybarcodeLibrary.js"?>
    zk.afterLoad('zkmax.barcode', function () {
        zkmax.barcode.Barcode.registerLibrary(function mybarcode(wgt) {
        }, 'library-name', ['type1', 'type2', ...]);

In Barcodescanner, the registering method is a bit more complicated than the method in Barcode. The concept to use Barcodescanner library is to create a  javascript object to detect and decode the barcode captured by the camera. So we have to inject the object constructing method, with a set of create, init, decode, enable, disable, and setType functions. After that, we obtain a barcode reader (a javascript object), and the reader can detect and decode the barcode message.

<?script src="myBarcodescannerLibrary.js"?>
    zk.afterLoad('zkmax.barcode', function () {
           create: jq.extend(true, {}, Quagga), //the reader
           name: "QUAGGA",
           init: zkmax.barscanner.Barcodescanner._quaggaInit, //@param(wgt, video, canvas)
           open: zkmax.barscanner.Barcodescanner._quaggaOpen, //@param(wgt, video, canvas)
           decode: zkmax.barscanner.Barcodescanner._quaggaDecodeOnce,//@param(wgt, reader) 
           setTypes: zkmax.barscanner.Barcodescanner._quaggaSetType, //@param()
           other: null
        }, 'library-name', ['type1', 'type2', ...]);

We set @param as a parameter to the given function.

You can refer to ZK Component Reference for more details.

Barcode and BarcodeScanner supporting types.

Barcode Display Type
1D Code Family CODE39, CODE128, CODE128A, CODE128B, CODE128C,
1D EAN Family EAN13, EAN8, EAN5, EAN2,
1D MSI Family MSI, MSI10, MSI11, MSI1010, MSI1110,


BarcodeScanner Type
1D CODE Family CODE128, CODE39, CODE39VIN,
1D EAN Family EAN (inc. EAN13), EAN8,

You can have quick try with our ZK 8.6 freshly, and we look forward to your input and feedback!

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

9 Responses to “[8.6 Preview] Barcode and Barcodescanner”

  1. Daniele says:

    Great component!

    But why BarcodeScanner doesn’t support EAN13 type?

  2. MDuchemin says:

    Hi Daniele,

    The barcode scanner does support EAN13.
    To scan an EAN13 barcode, you simply need to use type=”EAN” in the barcode scanner declaration in zul, or use myBarcodeScanner.setType(“EAN”) in java.

  3. Daniele says:

    Hi MDuchemin,

    thanks for your quick reply, I tried to read ean13 barcode setting the type ean but it did not work while it worked well with qr so I thought that the EAN 13 barcodes were not supported.

    Now, after your answer, I’m trying to read EAN 13 again by setting type = EAN



    but still my phone can’t detect EAN13 while quickly detect QR.

  4. Manuel says:

    I can confirm this.
    ZK9EE 9.0.1 FireFox 68.9 ESR

    QR codes work without problems, EAN(13 and 8) are not detected.

  5. MDuchemin says:

    Hi Manuel,

    I’ve tested the scanner with the following snippet:
    (open the fiddle frame to a separate tab to avoid security blocking of the camera API)

    This works on Firefox for android 68.9.0 (current latest on google playstore)

    Usual issues with the scanner include the camera API being blocked by security filtering, such as connecting through an unsecure connection.

    If you encounter any error message, or if you still cannot detect, I’d recommend opening a support ticket to investigate further.

  6. Iqwal Akmar says:

    Hi Guys,

    Can it not generate more than 50 barcodes? I have a data in tables, if the data 50, barcodes can be generate as much max 50, data other than 50 cant generate. I.e i have 51 data, data 1 – 50 barcodes can be generate, for data 51, barcodes cant generate.

    data 50 the barcodes can be generate as much 50,

    Thanks Guys. Stay safe, stay healthy

  7. Rudy Huang says:

    Hi Iqwal,

    I’ve tested 100 barcodes on the same page and it works.

    Do you have any errors in the browser console?

    If you encounter any error messages, I’d recommend opening a support ticket instead.

  8. GetsugaTensho says:

    Hi Guys,

    im trying to use the Barcode as following:

    and always having an error because of the value. how can i solve this ? Thank you

  9. jeanyen says:

    Hi Getsuga,

    We will need to take a look at your code, the current behavior/error, and the expected behavior. Unfortunately, we couldn’t see your code here in the blog discussion area.

    If you are a customer, please contact our support. If you are not a customer yet, you can post it to the ZK forum and we will take a look.

Leave a Reply