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.

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