Introduction

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="https://www.zkoss.org/" 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"?>
<script>
    ...
    zk.afterLoad('zkmax.barcode', function () {
        zkmax.barcode.Barcode.registerLibrary(function mybarcode(wgt) {
            ...
            };
        }, 'library-name', ['type1', 'type2', ...]);
    });
    ...
</script>

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"?>
<script>
    ...
    zk.afterLoad('zkmax.barcode', function () {
        zkmax.barscanner.Barcodescanner.registerLibrary({
           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', ...]);
    });
    ...
</script>

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

You can refer to ZK Component Reference for more details.

https://www.zkoss.org/wiki/ZK_Component_Reference/Multimedia_and_Miscellaneous/BarcodeScanner

Barcode and BarcodeScanner supporting types.

Name
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,
1D Others UPC, ITF14,ITF, PHARMACODE, CODABAR
2D QR

 

Name
BarcodeScanner Type
1D CODE Family CODE128, CODE39, CODE39VIN,
1D EAN Family EAN (inc. EAN13), EAN8,
1D Others CODEBAR, UPC, UPC_E, I2OF5
2D QR

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.

3 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.

Leave a Reply