Support Barcode and QR code scanners

[ced (Cédric Krier)]

Rational

Barcode and QR code are used to quickly input data. Tryton clients could benefit from supporting scanners to fill form quickly.

Proposal

A new attribute is added to the form which contains the list of type of barcode or qr code to detect.
When set the client display an input entry and a button to start the reader or if no reader is supported just the entry (with a customizable shortcut to set the focus on it).
The position must be fixed to be always visible.

When the user starts the reader, the client display a feedback of the video in a popup until a code bar is detected. An option activate or not a beep to warn user that a code has been detected. And another defines if the reader must stop or keep scanning until the user close the window.

When a code is scanned (or entered and validated in the input), the client calls a method on_code_scan which behaves like an instance button but with the code as parameter (the depends are managed like for the buttons).
The method could raise exceptions in case the code can not be processed (and if the option is activate, another beep is played).

To support hardware scanner (which behaves most of the time as a keyboard), the input shortcut can be used as trigger by the scanner to put the focus on the input before “typing” the code.

Dependencies

For the web client we can use the library quagga2, the main advantage against the common zxing is that it is invariant to scale and rotation.
And for the desktop client we can use zbar.

Usage

The feature can be activate on the Sale Point to find product to add (or to increase) with a quantity of 1 (if the sale unit has no digits).

Implementation

• Add support for scanning code (!615) · Merge requests · Tryton / Tryton · GitLab

[udono]

@ced

an input entry

Is it a new field type, or a widget of a common field? Will it be possible to scan multiple codes one by one, without keyboard interaction? E.g. scan all lot numbers and or product codes of all products in a shipment-in at once and separate/handle them in the next step.

@ced

and a button to start the reader

Why is a button needed to start the reader? Is it also possible to start the reader once the view is opened?

@ced

When the user starts the reader, the client display a feedback of the video in a popup until

What does video means in this context?

@ced

When a code is scanned … the client calls a method on_code_scan

This sounds scanning multiple codes one after one seems not directly possible. Is on_code scan able to drive a wizard? E.g. having a view with only input and buttons scan next and cancel*. On code scan press button scan next to store the scanned code and propose the same view for the next code.

[ced (Cédric Krier)]

@udono

Is it a new field type, or a widget of a common field?

Neither, it is an attribute of the form.

@udono

Will it be possible to scan multiple codes one by one, without keyboard interaction?

@ced

And another defines if the reader must stop or keep scanning until the user close the window.

@udono

Why is a button needed to start the reader?

Because you need to display the video of what is scanned.

@udono

What does video means in this context?

It is the live image of the camera.

@udono

Is on_code scan able to drive a wizard?

No but the scanner will be available on wizard form.

[ced (Cédric Krier)]

@ced

When the user starts the reader, the client display a feedback of the video in a popup until a code bar is detected. An option activate or not a beep to warn user that a code has been detected.

After testing both libraries based on camera, I think the performance and the speed of detecting barcode is not good enough to be useful. Indeed there are hardwares for about 30€ that can scan barcode quickly and communicate via USB or Bluetooth that are compatible with Linux, MacOS, Windows, Android and iphone.
So I think it is simpler to just develop the input capture of such hardware (which behaves like keyboard) and it will provide a better user experience.

[pokoli (Sergi Almacellas Abellana)]

@ced

So I think it is simpler to just develop the input capture of such hardware (which behaves like keyboard) and it will provide a better user experience.

Then its a mather of just implementing Many2One on tree editable does not fill when only one record is found (#11840) · Issues · Tryton / Tryton · GitLab
Or at least we should find a solution for such issue.

[albert (Albert Cervera i Areny)]

@pokoli

Then its a mather of just implementing Many2One on tree editable does not fill when only one record is found (#11840) · Issues · Tryton / Tryton · GitLab
Or at least we should find a solution for such issue.

We use barcode readers without problems simply using an on_change on a char field in sao. I don’t think Tryton needs to do anything special.

Although we end up with customer specific wizards, here you can find an example:

NaN-tic/trytond-stock_scanner/blob/main/picking.py

At most, I’d like to have the possibility of emitting a small sound, so we can notify users if input was correct/wrong.

[pokoli (Sergi Almacellas Abellana)]

@albert

Although we end up with customer specific wizards, here you can find an example:

Of course but this wizard is just using a plain Text field and the server is performing the search. So it sounds like a workarround to emulate a code scan.

For me it will be better that once the scaner enters the code on a Many2One wizard Tryton selects automatically the code if this already exists.

[albert (Albert Cervera i Areny)]

@albert

We use barcode readers without problems simply using an on_change on a char field in sao. I don’t think Tryton needs to do anything special.

That was not true, we don’t use the on_change but the next step of the wizard.

@pokoli

Of course but this wizard is just using a plain Text field and the server is performing the search. So it sounds like a workarround to emulate a code scan.

Not exactly. In many cases you’ll receive a barcode and you will have to parse it to see the kind of barcode it is and do more things that just selecting a product. For example, an EAN128 barcode can include lot number, expiry date and a quantity.

With a single char field we also allow the user to introduce the quantity after the barcode or simply scan barcodes one after the other. Just like in the supermarket.

@pokoli

For me it will be better that once the scaner enters the code on a Many2One wizard Tryton selects automatically the code if this already exists.

I would also like Tryton to select the item automatically in a Many2One field if there is only one, that’s an improvement for the user introducing the information manually, but don’t see it as an advantage for barcode reading specifically.

[pokoli (Sergi Almacellas Abellana)]

@albert

In many cases you’ll receive a barcode and you will have to parse it to see the kind of barcode it is and do more things that just selecting a product. For example, an EAN128 barcode can include lot number, expiry date and a quantity.

Yes but in such case you just need a Char field which expects the code, parse it using python-stdnum and the fill all the values using on_change

@ced

When a code is scanned (or entered and validated in the input), the client calls a method on_code_scan which behaves like an instance button but with the code as parameter (the depends are managed like for the buttons).

So for this codes we need something like on_code_scan. Or just use a Char field which just and on_change on server side.

@albert

I would also like Tryton to select the item automatically in a Many2One field if there is only one, that’s an improvement for the user introducing the information manually, but don’t see it as an advantage for barcode reading specifically.

So this is Then its a mather of just implementing Many2One on tree editable does not fill when only one record is found (#11840) · Issues · Tryton / Tryton · GitLab which also have impact on code scanners as when using a code that identifies a single record, which is the case of EAN codes.

[numaelis (Numael Garay)]

hi guys
I have recently tried using a c++ library to read barcodes and qr codes on the web with webassembly (wasm), and it is very effective using the live camera. detection is very efficient even on an old mobile. milliseconds.
It is even fast having all the formats activated.

https://github.com/zxing-cpp/zxing-cpp

I’m not sure if there is already a library loaded in npm.
For now I compiled with a specific em++ version.

[ced (Cédric Krier)]

I tested it and it may be faster than the other library, it still has difficulties with small barcode when a cheap gun at 25€ scan it quickly. More over such gun is more user friendly because you have the red light line to help you pointing to the barcode.

[edbo]

For javascript you can use GitHub - zxing-js/library: Multi-format 1D/2D barcode image processing library, usable in JavaScript ecosystem. but it’s slow and zxing has trouble with 2D datamatrix barcodes. Also you have to make sure that the barcode is aligned horizontally otherwise it isn’t recognized (for 2D datamatrix).

What you will try, a native scanner is always faster because it is designed specifically for that purpose. You can buy a Bluetooth finger scanner, connect it with your device and scan quickly and efficiently in your warehouse. Much more efficient then trying to scan with your phone or tablet. An example https://www.amazon.com/Bluetooth-Wireless-Portable-Wearable-Connection/dp/B08KD2LNC7. There are also fixed scanners for in your shop.

So generally speaking make it possible in the client to enter barcodes very quickly. Maybe even kind of “disconnect” the field. Barcodes are entered by the scanner and put into a queue and from there they will be send to Tryton. So when Tryton is checking and searching, the user can already scan the next product.

[ced (Cédric Krier)]

@edbo

So generally speaking make it possible in the client to enter barcodes very quickly. Maybe even kind of “disconnect” the field. Barcodes are entered by the scanner and put into a queue and from there they will be send to Tryton. So when Tryton is checking and searching, the user can already scan the next product.

I do not think queuing will create a good UX. How would you manage errors? How can user have any feedback about what he just did?

[edbo]

@ced

I do not think queuing will create a good UX. How would you manage errors? How can user have any feedback about what he just did?

I was thinking a bit too far ahead on this because it needs a really different UI. Also in most cases it doesn’t make sense because Tryton will be fast enough to send data back. And I know this because I’m using a barcode scanner for 2D data matrix in a special client which sends the barcode to Tryton (JSON-RPC) and gets data back before the user even got the other product.

Going back to the queue, you can think of showing the barcodes scanned in a list and show a spinner when waiting for return data from Tryton. When there is an error a warning sign is displayed and the user can click on it to see the error.

[numaelis (Numael Garay)]

If someone wants to use this library on the web, I recommend using the wasm wrapper.

The example (demo) that they have in zxing-cpp/wrappers/wasm at master · zxing-cpp/zxing-cpp · GitHub have problems.
I suggest you don’t use it. (possibly it was compiled with a very new version of em++ and it is very slow, the camera freezes.)

but if it is compiled with a previous version (1.39) it is very fast. .

I can read all these formats just fine:
UPC-A UPC-E EAN-8, EAN-13 DataBar
Code 39 Code 93 Code 128 Codabar
QR Code Micro QR Code Aztec Data Matrix PDF417

of course a dedicated device is better

[ced (Cédric Krier)]

For me the implementation is ready to be tested.

[pokoli (Sergi Almacellas Abellana)]

I just tested and it looks good to me. I’m just wondering if we should also include a visual indicator to show to the user that the code have been successfully scanned, as with disabled sound it is no way to know if the code had been correctly scanned or not.

We just tested with a USB barcode scanner using firefox and the Bookmark menu entry is opened when scanning the code. Everything works fine with chromium or even tryton client. Not sure if others experimented the same behaviour.

I think a on_code_scan function should be implemented in sale_point module to scan products directly from the user interface. This implementation should:

• Raise error if the product is not found or not salable.
• Add a new line if the product is not included on the sale point lines with quantity 1 and compute the price.
• If a line with the same product is found, the line quantity should be increased by one.

[numaelis (Numael Garay)]

I discovered that there is a missing match in the scan window with the password window. that happened when the session time expired.
It would be nice if the scan window detects some special keys (F1, F2,…), such as to modify the quantity of the product, before being searched.
Also that the One2Many field/widget can emit the type of action in the on_change:
Some points of sale require confirmation from a supervisor before removing any product from the list.
I have a question: can a wizard be issued from the on_change?

def on_change_lines(self):
    if action == "add":
          ...
    if action == "remove":
       ....

[ced (Cédric Krier)]

@pokoli

I’m just wondering if we should also include a visual indicator to show to the user that the code have been successfully scanned, as with disabled sound it is no way to know if the code had been correctly scanned or not.

For me, user will disable sound if they use barcode scanner that already emit sounds. In such case we do not need to have success notification because only failure matters at this point.

@numaelis

I discovered that there is a missing match in the scan window with the password window. that happened when the session time expired.

Indeed it has been fixed in last version of the MR but it requires also Session renewal always process exception (#12411) · Issues · Tryton / Tryton · GitLab

@numaelis

It would be nice if the scan window detects some special keys (F1, F2,…), such as to modify the quantity of the product, before being searched.

Some code-bar supports to define the quantity so if you need such behavior, you should use such code-bar.

[numaelis (Numael Garay)]

@ced

Some code-bar supports to define the quantity so if you need such behavior, you should use such code-bar.

if that’s true!
I like the elegance of this implementation (input code from form).
In any case, depending on the case, you could take advantage of the barcode input to manually add the quantity, but that would have to be done by the developer, for example:
if we want to add 4 units of a product 0001
we could write 4x0001 in the input and from the code detect the “x” to do the rest