Add barcodes to Web pages
In today's column, I'll use VML to add another dimension to documentation by creating Code 3 of 9 barcodes to my document. (Note: The code in this article will work in Internet Explorer 5.0 and above.)
Understanding the Code 3 of 9 specification
Code 3 of 9 (or Code 39) is a specification for creating barcode
symbols based on a 43 character alphabet. Each character is symbolised
by a series of 5 bars and 4 spaces, which is a total of 9 elements. Of
these 9 elements, 3 of the bars or spaces are wide while the other 6
are narrow. This is what gives the code its name (3 of 9 of the
bars/spaces are wide).
Each symbol can be characterised by a pattern of narrow and wide elements such as wnnnnwnnw (which is the pattern for the character A). The 43 characters that are representable by Code 3 of 9 are: 0 through 9, A through Z, - (dash), . (period), $, /, +, %, and space. An asterisk marks the beginning and end of the barcode series. You can place a checksum at the end of the character series as a guarantee that the symbol is read appropriately. This is the remainder of the sum of the numeric equivalent of the characters divided by 43. Other details of the specification include bar/space width and symbol height. (I'm going to assume that I can represent one narrow element with a 1-pixel wide line/space and a wide element with a 3-pixel wide line/space.)
I'll place the barcode, which will consist of a series of <v:line> elements, in a <DIV> element. Instead of specifying the individual stroke weights of each line, I'll create the illusion of a wider line by adjoining consecutive lines in order to overcome the "interesting" math involved with stroke weights and positioning. The result is a nice, clean line and a nice, clean space.
Here's the code to create the barcode in the <DIV>:
<html >
<head>
<style>
v\:* {behavior:url(#default#VML);}
</style>
<script language="JavaScript">
var code39Pattern = {
"0":"nnnwwnwnn", "C":"wnwnnwnnn", "O":"wnnnwnnwn", "-":"nwnnnnwnw",
"1":"wnnwnnnnw", "D":"nnnnwwnnw", "P":"nnwnwnnwn", ".":"wwnnnnwnn",
"2":"nnwwnnnnw", "E":"wnnnwwnnn", "Q":"nnnnnnwww", " ":"nwwnnnwnn",
"3":"wnwwnnnnn", "F":"nnwnwwnnn", "R":"wnnnnnwwn", "*":"nwnnwnwnn",
"4":"nnnwwnnnw", "G":"nnnnnwwnw", "S":"nnwnnnwwn", "$":"nwnwnwnnn",
"5":"wnnwwnnnn", "H":"wnnnnwwnn", "T":"nnnnwnwwn", "/":"nwnwnnnwn",
"6":"nnwwwnnnn", "I":"nnwnnwwnn", "U":"wwnnnnnnw", "+":"nwnnnwnwn",
"7":"nnnwnnwnw", "J":"nnnnwwwnn", "V":"nwwnnnnnw", "%":"nnnwnwnwn",
"8":"wnnwnnwnn", "K":"wnnnnnnww", "W":"wwwnnnnnn",
"9":"nnwwnnwnn", "L":"nnwnnnnww", "X":"nwnnwnnnw",
"A":"wnnnnwnnw", "M":"wnwnnnnwn", "Y":"wwnnwnnnn",
"B":"nnwnnwnnw", "N":"nnnnwnnww", "Z":"nwwnwnnnn"
};
var code39Alpha = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ-. $/+%";
function genBarCode(charString) {
var checkSum = 0;
var posX = 10;
var aCharString = charString.split("");
for (var i = 0; i < aCharString.length; i++)
checkSum += code39Alpha.indexOf(aCharString[i]);
checkSum = checkSum % 43;
charString += code39Alpha.split("")[checkSum];
charString = "*" + charString + "*";
alert(charString);
var aCharString = charString.split("");
for (var i = 0; i < aCharString.length; i++) {
var ltr = aCharString[i];
var pattern = code39Pattern[ltr];
if (i < aCharString.length) pattern += "n";
var val = code39Alpha.indexOf(ltr);
var aPattern = pattern.split("");
for (var n = 0; n < aPattern.length; n++) {
var barWeight = aPattern[n];
if
(barWeight == "n") strokeW = 1; else if (barWeight == "w")
strokeW = 3;
if (n % 2 == 0) {
for
(var x = 0; x < strokeW; x++) {
var
line = document.createElement("v:line");
line.style.position
= "absolute";
line.from
= posX + "px,0px";
line.to
= posX + "px,200px";
line
= divBarCode.appendChild(line);
posX
+= 1;
}
} else {
posX += strokeW;
}
}
}
}
</script>
</head>
<body>
<button onclick="genBarCode('CODE3OF9')" id=button1 name=button1>Test</button>
<br><br><br>
<div id="divBarCode" style="width:300;height:200">
</div>
</body>
</html>
In this simple example, the <BUTTON>'s onclick event handler runs the genBarCode() function. I pass the string 'CODE3OF9' as the content of the barcode symbol to create. After a bit of initialisation, the checksum character is appended to the character string. The start and stop markers ("*") are prepended and appended to the character string too. Each character is used to get the pattern for the symbol. An "n" is appended to each character pattern string (except the last character) to create the narrow space element between each symbol. The pattern string is then stepped through to create the series of narrow and wide spaces/bars. If the increment is a 0 modulus of 2, a bar is created. Otherwise, the position of the next bar is increased by the stroke weight.
Phillip Perkins is a contractor with Ajilon Consulting. His experience ranges from machine control and client server to corporate intranet applications.