Create barcodes on your Web pages using VML
Wednesday, July 06, 2005 10:52 AM
Dynamic HyperText Markup Language (DHTML) is now the standard for presentation in applications, primarily because you can create rich documents with minimal effort. Cascading Style Sheets (CSS) gives users the ability to further control the output of these documents. And, Vector Markup Language (VML) lets you add the ability to create drawing objects to these documents; while, Scalable Vector Graphics (SVG) is the standards approach to creating drawing objects.
See how I 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 specificationCode 3 of 9 (or Code 39) is a specification for creating barcode symbols based on a 43 character alphabet. Each character is symbolized 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 characterized 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. Listing A contains the code to create the barcode in the <DIV>.
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 initialization, 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.
There are currently no comments for this post.