Adding barcode scanning to a web app with LEADTOOLS

Here's a cool idea: take your old desktop ERP system and migrate it to the web.

Then...

Add a barcode scanner widget, run the client on a tablet, and use the built-in camera to scan in-coming shipments and instantly update the inventory table in the back-end database.

Ta da! That's what we're bringing you today, courtesy of LEADTOOLS and their awesome set of goodies for web apps.

I zipped up our migrated version of Salmon King Seafood (aka SKS)--which, don't forget, started out as a VB6 app and, using automagical AI-assisted modernization tools, created a modern web version--and sent it to Greg Ross over at LEAD Technologies, makers of LEADTOOLS..

Why barcode?

Modernizing a desktop app to the web opens up a slew of possibilities. Sure, you can add barcode capabilities to even an ancient VB6 app, using a cordless scanner and some code on the app side. Yawn. You still need a desktop/laptop running old crap out in the shipping or receiving department, and good luck getting more than one scanner working at the same time. Those desktop apps were designed for a single user, not multiple ones.

SKS joins the 21st century

Over at the mythical warehouse inside Salmon King Seafood's vast, intergalatic headquarters, shipments of fresh seafood arrive every day from fishing fleets all over the north Pacific.

via GIPHY

Rather than let them sit on the loading dock, we need to process those shipments and move them out quickly to keep them from smelling like, well, fish. So we wanted to add a barcode capability to our SKS app and have our vendors add a descriptive bar code to each shipment.

Get the package

Before we do anything else, we need to add LEADTOOLS to our project. You can get it as a NuGet package.

This will add a bunch of individual packages to handle the barcode implementation--all you have to do is call it: 

using Leadtools;
using Leadtools.Codecs;
using Leadtools.Barcode;

Update the form

The first step is adding a "Scan" button to the inventory adjust form, as below:

That's pretty easy, as you can see from an earlier, similar post where we added a dashboard menu item to SKS. Let's create a "Scan Shipment" button in the HTML for this form:

<button id="cmdScan" tabindex="21" class="cmdScan" type="button" data-role="wmbutton" data-bind="viewmodel : cmdScan, events : { click : cmdScan_Click }, "></button>

And of course we add some css for the element:

.SKS_frmAddStockManual .cmdScan {
      background-color: rgba(240, 240, 240, 1);
      cursor: default;
      left: 112px;
      top: 376px;
      position: absolute;
      width: 100px;
      height: 25px;
      padding: 0px 0px 0px 0px;
      display: table-cell;
      vertical-align: middle;
      display: table-cell;

In the ViewModel, we'll set the text for the button as we create the view for the form:

public override void Build(UpgradeHelpers.Interfaces.IIocContainer ctx)
		{
			base.Build(ctx);
			System.ComponentModel.ComponentResourceManager resources = new System.ComponentModel.ComponentResourceManager(typeof(SKS.Properties.Resources));
         this.cmdScan = ctx.Resolve<UpgradeHelpers.BasicViewModels.ButtonViewModel>();
         this.cmdScan.Name = "cmdScan";
         this.cmdScan.Text = "Scan Shipment";
         this.cmdSave = ctx.Resolve<UpgradeHelpers.BasicViewModels.ButtonViewModel>();
         this.cmdSave.Name = "cmdSave";
         this.cmdSave.Text = "Save";

And then we wire up the button to actually do something with the LEADTOOLS library:

internal void cmdScan_Click(Object eventSender, System.EventArgs eventArgs)
      {
         using (var async1 = this.Async(true))
         {
            try
            {
               // For sake of example/narrative, we'll pretend that the path to the file was passed as a parameter
               var pathToUploadedImage = System.Web.HttpContext.Current.Server.MapPath("~/resources/images/inventory-update-barcode.gif");


               // Use LEADTOOLS to decode the barcode
               // First unlock LEADTOOLS with your license.  If you don't have a license file and key, you will need to visit https://www.leadtools.com/downloads for a free eval license.
               string licenseFile = @"C:\LEADTOOLS 20\Common\License\LEADTOOLS.LIC"; // Path to your license file
               string developerKey = System.IO.File.ReadAllText(@"C:\LEADTOOLS 20\Common\License\LEADTOOLS.LIC.key"); // Your developer key
               RasterSupport.SetLicense(licenseFile, developerKey);

               // Load the image
               RasterCodecs codecs = new RasterCodecs();
               RasterImage image = codecs.Load(pathToUploadedImage);

               // Decode the barcode
               BarcodeEngine barcodeEngine = new BarcodeEngine();
               BarcodeData barcodeData = barcodeEngine.Reader.ReadBarcode(image, LeadRect.Empty, BarcodeSymbology.PDF417);

               // Add the product and quantity to the inventory update
               if (!string.IsNullOrEmpty(barcodeData.Value))
               {
                  // The PDF417 barcodes used in our system are encoded with the product id and quantity
                  string[] values = barcodeData.Value.Split('|');

               }

            }

Our barcode data is in the string[] array; we just need to use that data to update our database with some simple SQL code. 

Tablets ahoy!

Most of the time rich desktop apps don't migrate well to smaller form factors, and to be honest getting something like SKS to run on a Samsung phone isn't part of the modernization plan*. 

But in this case, there's the exception that proves the rule. Using a reasonable tablet--or even a so-called "two in one" where the screen detaches and becomes a tablet--the helpful folks in the receiving department can inventory all the incoming shipments by just pointing the camera at the crate o' crabs and go snap. Then the forklift can move them into the chiller without unnecessary delays. 

Speaking of which, if my wife is reading this (one can be hopeful) I would love some crab for my birthday. 

If you found this interesting, head over to LEADTOOLS to see what else they have. From what I can tell, they've got a bolt-on solution for just about anything image-related. 

Thanks again to Greg Ross, Technical Marketing Engineer at LEAD Technologies, for his help in creating this post. 

*Since WebMAP creates RESTful endpoints on the server-side code, it's not super-hard to create a single-task app for a small device, using your JavaScript framework of choice, to connect to those endpoints. So you COULD have an inventory check-in app using the scanner code on your iPhone. The solution is left as an exercise to the reader.