Capture barcode reader (keyboard-wedge) events from javascript

T'lash picture T'lash · Feb 14, 2016 · Viewed 11.5k times · Source

I am developing a web application that has to be used on Honeywell Dolphin 75e devices running Android 4.4. The integrated barcode reader can operate in "keyboard wedge" mode, but only when a text field has focus.

With desktop browsers I can use that code to capture barcode reader events :

var BarcodesScanner = {
    barcodeData: '',
    deviceId: '',
    symbology: '',
    timestamp: 0,
    dataLength: 0
};

function onScannerNavigate(barcodeData, deviceId, symbology, timestamp, dataLength){
    BarcodesScanner.barcodeData = barcodeData;
    BarcodesScanner.deviceId = deviceId;
    BarcodesScanner.symbology = symbology;
    BarcodesScanner.timestamp = timestamp;
    BarcodesScanner.dataLength = dataLength;
    $(BarcodesScanner).trigger('scan');
}

BarcodesScanner.tmpTimestamp = 0;
BarcodesScanner.tmpData = '';
$(document).on('keypress', function(e){
    e.stopPropagation();
    var keycode = (e.keyCode ? e.keyCode : e.which);
    if (BarcodesScanner.tmpTimestamp < Date.now() - 500){
        BarcodesScanner.tmpData = '';
        BarcodesScanner.tmpTimestamp = Date.now();
    }
    if (keycode == 13 && BarcodesScanner.tmpData.length > 0){
        onScannerNavigate(BarcodesScanner.tmpData, 'FAKE_SCANNER', '', BarcodesScanner.tmpTimestamp, BarcodesScanner.tmpData.length);
        BarcodesScanner.tmpTimestamp = 0;
        BarcodesScanner.tmpData = '';
    } else if (e.charCode && e.charCode > 0) {
        BarcodesScanner.tmpData += String.fromCharCode(e.charCode);
    }
});

$(BarcodesScanner).on('scan', function(e){
    alert();
});

Unfortunately, it does not work on Android. Is there an API allowing me to capture these events? Or another browser that handles this?

EDIT:

I was able to intercept the events of the barcode reader using a text field as a buffer.

But in this case I can not use any controls that require the focus in my application. Which is quite a handicap.

BarcodesScanner.tmpInput = $('<input />', {
    type: 'text',
    style: 'position: fixed; top: 0; right: 0; width: 0; height: 0;'
});
$('body').append(BarcodesScanner.tmpInput);
setInterval(function(){
    BarcodesScanner.tmpInput.focus();
}, 500);
BarcodesScanner.tmpInput.on('input', function(e){
    if (BarcodesScanner.tmpInput.val().length > 0){
        onScannerNavigate(BarcodesScanner.tmpInput.val(), 'FAKE_SCANNER', 'WEDGE', Date.now(), BarcodesScanner.tmpInput.val().length);
        BarcodesScanner.tmpInput.val('')
    }
});

Answer

T&#39;lash picture T'lash · Mar 10, 2016

I finally received a functional response from the Honeywell support:

I suspect that the application wants to receive the data as Keydown / Keyup events.

Can you please test the following?

On Wedge as Keys set: 9,10,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127

Screenshot

As it might take 15 minutes to do it manually, I have created this code that you can read inside the Wedge as keys field:

9,10,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127

After reading the code please wait 10 seconds before saving and check if the data is correctly saved into that field by exiting and reentering the Scanner settings.

Finally, disable and re-enable the scanner (or reboot the device).

The scanner should then work on your application.

Hope this helps.

The terminal must use the latest version of the system to see the "Wedge as keys" field. Don't forget to set "\n" as suffix.

With that, the JS code will be:

var BarcodesScanner = {
    barcodeData: '',
    deviceId: '',
    symbology: '',
    timestamp: 0,
    dataLength: 0
};

function onScannerNavigate(barcodeData, deviceId, symbology, timestamp, dataLength){
    BarcodesScanner.barcodeData = barcodeData;
    BarcodesScanner.deviceId = deviceId;
    BarcodesScanner.symbology = symbology;
    BarcodesScanner.timestamp = timestamp;
    BarcodesScanner.dataLength = dataLength;
    $(BarcodesScanner).trigger('scan');
}

BarcodesScanner.tmpTimestamp = 0;
BarcodesScanner.tmpData = '';
$(document).on('keypress', function(e){
    e.stopPropagation();
    var keycode = (e.keyCode ? e.keyCode : e.which);
    if (BarcodesScanner.tmpTimestamp < Date.now() - 500){
        BarcodesScanner.tmpData = '';
        BarcodesScanner.tmpTimestamp = Date.now();
    }
    if (keycode == 13 && BarcodesScanner.tmpData.length > 0){
        onScannerNavigate(BarcodesScanner.tmpData, 'FAKE_SCANNER', 'WEDGE', BarcodesScanner.tmpTimestamp, BarcodesScanner.tmpData.length);
        BarcodesScanner.tmpTimestamp = 0;
        BarcodesScanner.tmpData = '';
    } else if (e.charCode && e.charCode > 0) {
        BarcodesScanner.tmpData += String.fromCharCode(e.charCode);
    }
});

Now, you could listen the scanning event:

$(BarcodesScanner).on('scan', function(e){
    alert(BarcodesScanner.barcodeData);
});

I hope this will help someone else.