A while ago, I was asked to come up with a way to show barcodes on our expenses-form.
Employees can fill in their expenses form online, but have to have some signatures on the printed version and then send it to the financial department. There, the form is checked and approved (or not).
Until recently, they had to type in the number of the form and then approve or disapprove it. But not anymore, now they can just use a hand-scanner and scan the barcode.
When I started looking for solutions to use barcodes on webpages everything I could find needed third party software on the server-side. That wasn’t really an option for us, because this would require to big an effort for what was basically just a nice-to-have feature for our users. I also noticed that I wasn’t the only one looking for this, there are some forum topics that also go in to this, but always with a more complicated approach using smartforms (BarCode is not getting printed) . What I did was creating a very simple way to show simple barcodes that can be read with basic barcode readers. No checksums are used and only code-39 barcodes can be generated.
Code39 (also called “3 of 9 code” or “USD-3”) was the first type of barcode to be developed, and is still widely used. The code39 barcode is a self-checking barcode, which means that a single print defect can never transpose a character into another valid character. (This basically means that if there is an error, you will not be able to read the barcode, and will never read the wrong value)
Now on to the technical side of it.
As you probably already know, a barcode is a way to present text and numbers in the form of white and black lines. So first we need to know how each character is represented. I found a very usefull page here : http://www.barcodeisland.com/code39.phtml (http://www.barcodeisland.com/code39.phtml).
So with the codetable found on this page, I made a mapping array that maps each character with it's representation in white and black lines.
<!code> var ct = Array();
ct["0"] = "101001101101";
ct["1"] = "110100101011";
ct["2"] = "101100101011";
//etc., the complete array is on the bottom of the weblog
Now I needed two images, one that represents the white line (https://weblogs.sdn.sap.com/weblogs/images/3747/wn.gif), and one that represents the black line (https://weblogs.sdn.sap.com/weblogs/images/3747/bn.gif).
And the last step is a function that transforms a string into a barcode.
<!code> function genCode39Barcode(text,height)
<!code> {
<!code> var width =1;
<!code> var fulltext = ""text"";
<!code> strlen = fulltext.length;
<!code> var strArr = Array();
<!code> for (i=0;i<fulltext.length;i++)
<!code> {
<!code> code39 = ct[fulltext.charAt(i)];
<!code> strArr[i] = "";
<!code> for (j=0;j<code39.length;j++)
<!code> {
<!code> if (code39.charAt(j) == "1")
<!code> {
<!code>
<!code> strArr[i] += "!barcode/bn.gif border=0 style=!";
<!code> }
<!code> else
<!code> {
<!code> strArr[i] += "!barcode/wn.gif border=0 style=!";
<!code>
<!code> }
<!code> }
<!code> strArr[i] += "!barcode/wn.gif border=0 style=!";
<!code> document.write(strArr[i]);
<!code> }
<!code>
<!code> document.write ('
'fulltext'</font></b><br/>');
<!code> }
You can pass a string x to this function and a number y, the result will be a barcode representing the value x that is y centimeters high. The width depends on the number of characters of x .
<!code>
<!code> genCode39Barcode("valuebarcode", 1);
<!code>
This will generate the following barcode :
3 Comments
