Bar code reader

[Janusz]

Hi,
Currently I am looking for some possibility to enter data in the Text/Input field taken from the barcode scanned by smartphone camera.
(with nuBuilder application running on smartphone)

So would I consider that there is function defined in Custome Code of input field and with onclick the scanner is started and after code is captured it goes to the input field.

Making quick review on web I can see that there is few possibilities of Javascript Barcode Reader plugins which potentially can be considered - but maybe some of you have already some experiece with similar topic and maybe some recommendation how to approach such case.

[kev1n]

Hi,

What type of barcodes will you be scanning?

[Janusz]

Hi,
I would like to use the most typical barcode types, still can choose exact type if for some types it would be easier to scan.
As targer solution I will probably print small labels to stick on parts kept in some storage area (then I can choose any specific code type) - if existing barcodes will not be usefull.
But so far I have completelly no experience in that subject - so trying to collect some advices on it.

Currently I am trying to look on the following:
https://serratus.github.io/quaggaJS/

[Janusz]

and other application where JS examples works well on android /chrome

do you think would it be possible to combine it with nubuilder?
and as result to have scanned text in the nubuilder input/text field
(I do not have much experience in JS, so trying to get some tips if it's worth to try and spend some time on it)

https://github.com/yushulx/zxing-cpp-emscripten
https://github.com/yushulx/zxing-cpp-emscripten/tree/master/examples
https://www.codepool.biz/building-webassembly-zxing-windows.html

[kev1n]

1. Download video.js and zxing.js from https://github.com/yushulx/zxing-cpp-em ... xamples/js

2. and upload it to your webserver (subdirectory custlibs/ZXing/)

3. Create a HTML object, paste this code:

Code: Select all

  <h1>Pure JS Barcode Reader</h1>
  <div>Barcode result: <span id="dbr"></span></div>
  <div class="select">
    <label for="videoSource">Video source: </label><select id="videoSource"></select>
  </div>
  <button id="go">Read Barcode</button>
  <div>
    <video muted autoplay id="video" playsinline="true"></video>
    <canvas id="pcCanvas" width="640" height="480" style="display: none; float: bottom;"></canvas>
    <canvas id="mobileCanvas" width="240" height="320" style="display: none; float: bottom;"></canvas>
  </div>

<script async src="custlibs/ZXing/zxing.js"></script>
<script src="custlibs/ZXing/video.js"></script>

4. If I understand video.js correctly, the bar code result is output to a field called dbr. You might want to change its name.

5. Test it!

[Janusz]

Hi Kev1n,
Thank you very much for your reply.

In zxing case I have situation that camera is live in the window.
But when I press the Read barcode buton then I get the error:
Barcode Reader is not ready!

------------------------------------
In parrallel I am investigating solution with QuaggaJS where I found 2 examples working very well on demonstration pages and seems to be well ducumented, but when placing insided the nuBuilder still have issue to make it running (in this case camera is not starting)

https://serratus.github.io/quaggaJS/v1. ... -to-input/
https://a.kabachnik.info/a-javascript-b ... ggajs.html

and have following error:

Code: Select all

VM411:69 Uncaught TypeError: Quagga.decoder is not a function
    at Object.configureScanner (<anonymous>:69:18)
    at Object.activateScanner (<anonymous>:10:28)
    at HTMLButtonElement.onClick (<anonymous>:32:18)

in header I am putting:
<script src="quagga.js" type="text/javascript"></script>
and remaing code from the 1st link in JS and HTML

If you would have some suggestions what to change (in the Quagga example) I would appreciate it very much.
As currently at least for me the quagga seems to be maybe easier to implement, and examples looks very OK.

[Janusz]

and one supplementary info for zxing code
so after few more trials I have:
camera running is the nuBuilder html (all the time) but when I press Read Barcode button then I have an error:

Code: Select all

VM1071:107 Uncaught TypeError: Cannot set property 'textContent' of null
    at scanBarcode (<anonymous>:107:30)
    at HTMLButtonElement.buttonGo.onclick (<anonymous>:101:3)

but anyway - now want to focus more on the Quagga

[Janusz]

FYI
The example live_w_locator.html from GitHub
https://github.com/serratus/quaggaJS/tree/master/example
placed in the html in nuBuilder is alive and there is posibility to scan (just locations of .js files to be adjusted).
Still far from final shape - but at least there is a starting point.

In fact finally I would like to implement the code as in this example:
https://serratus.github.io/quaggaJS/v1.0.0-beta.1/examples/scan-to-input/

So if someone would have some positive trials please share.

[kev1n]

This works for me:

Code: Select all

<style>

.input-field {
    display: flex;
    align-items: center;
    width: 260px;
}

.input-field label {
    flex: 0 0 auto;
    padding-right: 0.5rem;
}

.input-field input {
    flex: 1 1 auto;
    height: 20px;
}

.input-field button {
    flex: 0 0 auto;
    height: 28px;
    font-size: 20px;
    width: 40px;
}

.icon-barcode {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTAgNGg0djIwaC00ek02IDRoMnYyMGgtMnpNMTAgNGgydjIwaC0yek0xNiA0aDJ2MjBoLTJ6TTI0IDRoMnYyMGgtMnpNMzAgNGgydjIwaC0yek0yMCA0aDF2MjBoLTF6TTE0IDRoMXYyMGgtMXpNMjcgNGgxdjIwaC0xek0wIDI2aDJ2MmgtMnpNNiAyNmgydjJoLTJ6TTEwIDI2aDJ2MmgtMnpNMjAgMjZoMnYyaC0yek0zMCAyNmgydjJoLTJ6TTI0IDI2aDR2MmgtNHpNMTQgMjZoNHYyaC00eiI+PC9wYXRoPjwvc3ZnPg==);
}

</style>

<script src="https://serratus.github.io/quaggaJS/v1.0.0-beta.1/examples/js/quagga.js" type="text/javascript"></script>
<script src="https://serratus.github.io/quaggaJS/v1.0.0-beta.1/examples/js/prism.js" type="text/javascript"></script>

<script>
var Quagga = window.Quagga;
var App = {
    _scanner: null,
    init: function() {
        this.attachListeners();
    },
    activateScanner: function() {
        var scanner = this.configureScanner('.overlay__content'),
            onDetected = function (result) {
                document.querySelector('input.isbn').value = result.codeResult.code;
                stop();
            }.bind(this),
            stop = function() {
                scanner.stop();  // should also clear all event-listeners?
                scanner.removeEventListener('detected', onDetected);
                this.hideOverlay();
                this.attachListeners();
            }.bind(this);

        this.showOverlay(stop);
        scanner.addEventListener('detected', onDetected).start();
    },
    attachListeners: function() {
        var self = this,
            button = document.querySelector('.input-field input + button.scan');

        button.addEventListener("click", function onClick(e) {
            e.preventDefault();
            button.removeEventListener("click", onClick);
            self.activateScanner();
        });
    },
    showOverlay: function(cancelCb) {
        if (!this._overlay) {
            var content = document.createElement('div'),
                closeButton = document.createElement('div');

            closeButton.appendChild(document.createTextNode('X'));
            content.className = 'overlay__content';
            closeButton.className = 'overlay__close';
            this._overlay = document.createElement('div');
            this._overlay.className = 'overlay';
            this._overlay.appendChild(content);
            content.appendChild(closeButton);
            closeButton.addEventListener('click', function closeClick() {
                closeButton.removeEventListener('click', closeClick);
                cancelCb();
            });
            document.body.appendChild(this._overlay);
        } else {
            var closeButton = document.querySelector('.overlay__close');
            closeButton.addEventListener('click', function closeClick() {
                closeButton.removeEventListener('click', closeClick);
                cancelCb();
            });
        }
        this._overlay.style.display = "block";
    },
    hideOverlay: function() {
        if (this._overlay) {
            this._overlay.style.display = "none";
        }
    },
    configureScanner: function(selector) {
        if (!this._scanner) {
            this._scanner = Quagga
                .decoder({readers: ['ean_reader']})
                .locator({patchSize: 'medium'})
                .fromSource({
                    target: selector,
                    constraints: {
                        width: 800,
                        height: 600,
                        facingMode: "environment"
                    }
                });
        }
        return this._scanner;
    }
};
App.init();
</script>

<form>
    <div class="input-field">
        <label for="isbn_input">EAN:</label>
        <input id="isbn_input" class="isbn" type="text" />
        <button type="button" class="icon-barcode button scan"> </button>
    </div>
</form>


             

[Janusz]

Hi Kev1n,

Yeah - it works fine

Thank You very very much for your support.