CODEWITHSUNDEEP
jquerybarcodebarcode-scanner
Ricardo Marimon
Ricardo Marimon

Reputation: 10687

Barcode web site interaction

I'm in the process of designing a web application and I'm thinking about incorporating some barcode reading to facilitate data input. Let's suppose I have a list of tasks a courier needs to do. I would like to print something similar to the following page:

+----------------------------------------------------------------------+
| Task List                                   || || |||| || || ||| (a) |
|                                                                      |
| Task One                                    ||| || |||||| || ||| (b) |
| Task Two                                    ||| || || | | || ||| (c) |
| Task Three                                  | |||||| || ||| |||| (d) |
|                                                                      |
|                                             ||||| |||| || || ||| (e) |
+----------------------------------------------------------------------+

The barcodes are represented by the ||||| | ||| || (x) at the end of every line. Printing the page should be straight forward using a barcode servlet as barbecue. I would like to have a general way to intercept those barcodes and do stuff in jQuery. For example:

When scanning barcode(a) I would go to that page. When scanning barcodes (b), (c), (d) I would populate text inputs in the page. When scanning barcode (e) I would submit the form. I'm thinking of having some form of jQuery listener that is available on every page to which I can register actions based on the first command of the barcode. I know I can do programming of the barcode device to incorporate some of the logic, but would like to avoid it, so that any barcode would do and I don't have to deal with programming them.

I have even thought that each barcode might have to start with some magic token to distinguish between regular input and barcode input. Perhaps something like $**$:goto:/tasklist/123:. The question is then how would I go about doing the jQuery to intercept this set of commands and what would be the correct way to register handlers for the different actions I create (e.g.: $**$:add:31222:)?

Upvotes: 1

Views: 2009

Answers (1)

knutin
knutin

Reputation: 5103

I've done a similar application, so here are my two cents.

The USB scanner basically works like a USB keyboard. Most will send an enter key as termination character, but this can be configured on most devices. I relied on the termination character for driving actions in my UI. (Enter will by default submit the currently selected form.)

Another problem is that if this is a mobile application, you really want to avoid roundtrips to the server as much as possible. I solved this by having tons of application logic in the UI, however all business logic was still on the server so for actions to have effect, the user needed to be connected and able to POST to the server.

So, to the core of your problem. Consider something like this:

var state = 'WAITING'; # super simple state

function add(data) {
    # courier checks an item, 'data' contains the data from the scanner
}

function input_handler(input) {
    if (state == 'WAITING') {
        if (input == 'DONE' || input == 'EXIT') {
            state = 'DONE';
            # abort, whatnot
        } else {
            state = 'SCAN';
            input_handler(input); # recurse, with new state
        }
    } else {
        add(input);
    }
}

This is basically a state machine, coded manually. When the courier checks the 'I want to start scanning for this order'-barcode, you enter a mode where every input goes to your scanning handler. When he scans the "I'm done"-barcode, you validate the result, etc. This could be improved by actually using a real state machine.

You should keep the barcodes as simple as possible. Commands like 'SCAN', 'EXIT', 'NOTHING_MORE_TO_SCAN' are good, because they are generic and your application need not parse the barcode for meaning.

Another reason for keeping them simple, is that you will run into a situation where the label has been damaged and is impossible to scan. Then the user must be able to manually enter the data without spending extra time finding special characters, etc.

Upvotes: 3

Related Questions