Adding barcode scanning to a web app with LEADTOOLS
by John Browne, on Feb 22, 2018 6:00:00 AM
Here's a cool idea: take your old desktop ERP system and migrate it to the web.
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..
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.
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:
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:
And of course we add some css for the element:
In the ViewModel, we'll set the text for the button as we create the view for the form:
And then we wire up the button to actually do something with the LEADTOOLS library:
Our barcode data is in the string array; we just need to use that data to update our database with some simple SQL code.
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.