implementing barcode scanner using javascript with generating invoice

Updated : Nov 14, 2019 in Articles

implementing barcode scanner using javascript

In this article, we will discuss how to implementing barcode scanner using javascript invoice basic example

the given below barcode scanner example is static example it means it not intracking to database

open visual studio or Notepad+ Add following the given Html page

the following CSS CDN’S and JS CDN’s are required for implementing barcode scanner using javascript with generating invoice

// CSS files
<link href="~/assets/barcode/bootstrap.min.css" rel="stylesheet" />
<link href="~/assets/barcode/style.css" rel="stylesheet" />
<link href="~/assets/barcode/scan.css" rel="stylesheet" />

// Js Files
<script src="~/assets/barcode/JS/jquery.min.js"></script>
<script src="~/assets/barcode/JS/bootstrap.min.js"></script>
<script src="~/assets/barcode/JS/jquery.viewportchecker.js"></script>
<script src="~/assets/barcode/JS/script.js"></script>


<script src="~/assets/barcode/JS/quagga.min.js"></script>
<script src="~/assets/barcode/JS/scan.js"></script>

implementing barcode scanner using javascript
implementing barcode scanner using javascript
@{
    Layout = null;
}
<br />

<div class="container" style="width:50% ">
    <div class="input-group" style="height:50px">
        <input id="scanner_input" class="form-control" placeholder="Press Scan you item" type="text" style="height:50px;font-size: 18px;margin-left: 55px;">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button" data-toggle="modal" data-target="#livestream_scanner" style="height:63px;font-size: 16px;">
                <i class="fa fa-barcode">SCAN</i>
            </button>
        </span>
    </div>
</div>



<modal class="modal" id="livestream_scanner" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content" align="center">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">Barcode Scanner</h4>
            </div>
            <div class="modal-body" style="position: static">
                <div id="interactive" class="viewport" style="height: 30vh;"></div>
                <div class="error"></div>
            </div>
            <div class="modal-footer" style="overflow:hidden">
                <input id="file" type="file" accept="image/*" class="hidden" style="display:none;">

                <label id="fileSel" for="file" class="btn btn-primary" style="float: left; display: none;">SELECT FILE</label>
                <button type="button" class="btn btn-primary" data-dismiss="modal" style="float:right;width:45%;">CLOSE</button>

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</modal>

<div class="invoice-box" id="invoice-bill" style="display:none">
    <table class="invoice-boxs" cellpadding="0" cellspacing="0">
        <tr class="top">
            <td colspan="2">
                <table>
                    <tr>
                        <td class="title">
                            <img class="custom-logo" src="https://tutorialshelper.com/wp-content/uploads/2019/10/tutorial-logo.png" style="width:100%; max-width: 181px;">
                        </td>

                        <td>
                            <span>Invoice #:</span> <input style="width: 48%;" type="text" disabled name="checkyear" id="invoice-id" value=""><br>
                            <p>
                                CreatedDate:
                                <script>document.write(new Date().toLocaleDateString());</script>
                            </p>
                            Due: February 1, 2015
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr class="information">
            <td colspan="2">
                <table>
                    <tr>
                        <td>
                            Sparksuite, Inc.<br>
                            12345 Sunny Road<br>
                            Sunnyville, CA 12345
                        </td>

                        <td>
                            Acme Corp.<br>
                            John Doe<br>
                            <a href="https://tutorialshelper.com/">[email protected]</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr class="heading">
            <td>
                Payment Method
            </td>

            <td>
                Check #
            </td>
        </tr>

        <tr class="details">
            <td>
                Check
            </td>

            <td>
                1000
            </td>
        </tr>

        <tr class="heading">
            <td>
                Item
            </td>

            <td>
                Price
            </td>
        </tr>

        <tr class="item">
            <td>
                Website design
            </td>

            <td>
                $300.00
            </td>
        </tr>

        <tr class="total">
            <td></td>

            <td>
                Total: $300.00
            </td>
        </tr>
    </table>
</div>

invoice script js

if you want connect to your database the following js file will helpful for generating a dynamic invoice

$(function () {
    // Create the QuaggaJS config object for the live stream
    var liveStreamConfig = {
        inputStream: {
            type: "LiveStream",
            constraints: {
                width: { min: 640, max: 640 },
                height: { min: 480, max: 480 },
                aspectRatio: { min: 1, max: 100 },
                facingMode: "environment" // or "user" for the front camera
            }
        },
        locator: {
            patchSize: "medium",
            halfSample: true
        },
        numOfWorkers: (navigator.hardwareConcurrency ? navigator.hardwareConcurrency : 4),
        decoder: {
            "readers": [
                { "format": "ean_reader", "config": {} },
                { "format": "ean_2_reader", "config": {} },
                { "format": "ean_5_reader", "config": {} },
                { "format": "ean_8_reader", "config": {} },
                { "format": "upc_reader", "config": {} },
                { "format": "upc_e_reader", "config": {} }
            ]
        },
        locate: true
    };
    // The fallback to the file API requires a different inputStream option. 
    // The rest is the same 
    var fileConfig = $.extend(
        {},
        liveStreamConfig,
        {
            inputStream: {
                size: 800
            }
        }
    );
    // Start the live stream scanner when the modal opens
    $('#livestream_scanner').on('shown.bs.modal', function (e) {
        $('#livestream_scanner .modal-body .error').html('');
        $('#interactive').height('0px');
        document.getElementById('fileSel').style = "float:left;display:none;";

        Quagga.init(
            liveStreamConfig,
            function (err) {
                if (err) {
                    document.getElementById('fileSel').style = "float:left;display:inline;";
                    Quagga.stop();
                    return;
                }
                else {
                    $('#interactive').height('30vh');
                    Quagga.start();
                    Quagga.CameraAccess.getActiveTrack().applyConstraints({ advanced: [{ torch: true }] });
                }
            }
        );
    });
    // Make sure, QuaggaJS draws frames an lines around possible 
    // barcodes on the live stream
    Quagga.onProcessed(function (result) {
        var drawingCtx = Quagga.canvas.ctx.overlay,
            drawingCanvas = Quagga.canvas.dom.overlay;

        if (result) {
            if (result.boxes) {
                drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
                result.boxes.filter(function (box) {
                    return box !== result.box;
                }).forEach(function (box) {
                    Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, { color: "green", lineWidth: 2 });
                });
            }

            if (result.box) {
                //Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
            }

            if (result.codeResult &amp;&amp; result.codeResult.code) {
                Quagga.ImageDebug.drawPath(result.line, { x: 'x', y: 'y' }, drawingCtx, { color: 'red', lineWidth: 3 });
            }
        }
    });

    // Once a barcode had been read successfully, stop quagga and 
    // close the modal after a second to let the user notice where 
    // the barcode had actually been found.
    Quagga.onDetected(function (result) {
        if (result.codeResult.code) {
            $('#scanner_input').val(result.codeResult.code);
            document.getElementById('invoice-bill').style = "display:block;";
            document.getElementById("invoice-id").value = result.codeResult.code
            // $("#invoice-boxs").printThis();
            setTimeout(function () {
                Quagga.stop();
                $('#livestream_scanner').modal('hide');
            }, 300);
        }
        // $('#invoice-boxs').printThis();
    });

    // Stop quagga in any case, when the modal is closed
    $('#livestream_scanner').on('hide.bs.modal', function () {
        if (Quagga) {
            $('#interactive').html('');
            Quagga.stop();
        }
    });

    // Call Quagga.decodeSingle() for every file selected in the 
    // file input
    $("#livestream_scanner input:file").on("change", function (e) {
        $('#livestream_scanner .modal-body .error').html('');
        $('#interactive').html('');

        document.getElementById('interactive').style = "height:auto;min-height:0px;max-height:60vh;";
        if (e.target.files &amp;&amp; e.target.files.length) {
            Quagga.decodeSingle($.extend({}, fileConfig, { src: URL.createObjectURL(e.target.files[0]) }), function (result) {
                var barcode = result.codeResult.code;
            });
        }
    });
});

download the project and try run

output:

the given below invoice bill is static html page it means it not interacting to database

implementing barcode scanner using javascript with generating invoice
implementing barcode scanner using javascript with generating bill

Summary

the above example we learned the basic concept of implementing barcode scanner using javascript next article we will learn how to create barcode for each item and store in database

once stored in database we will read specify product (name,price…)based information we will generate a dynamic invoice

thanks..

Note: once download project after you must and should check order css and js files

Like
Like Love Haha Wow Sad Angry

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x