SVG BarCode 39

Posted a SVG based BarCode 39 sample program. The sample program can be found at http://www.hiew.per.sg .

This program is just a demo for BarCode generation. It does not fully conform to the BarCode 39 standard but the generated code should be able to be scanned correctly.

Code 39 gets its name from the way it is coded. It contains 5 bars and 4 spaces. each bar or space can be wide or narrow. Three of the bar of space must be wide. Thus the name 3 of 9.

The method of converting the text to ascii is quite simple. The translation codes are stored as text (in binary code) in an array. When user input a string, each character is then translated to its barcode binary by directly translating its ascii code as the array pointer.

The next step is to simply to translate that code as a series of rectangle or a move (if it is supposed to be a space code) using the SVG path command. The rectangle and space code is also stored in an array for easy retrieval by translating the binary code as value and retrieve the value depending on which array to take value from.

The code 39 start and stop character is simply stored as ascii 128 and is inserted before the parsing of the user input.

The inter character spacing is also coded together with the translation table for easy coding thus making the binary string as 10 digits. I used the simple form of the inter character space calculation using I=X (interspace equals smallest bar size). I also use the smallest ration of 1:2 between the narrow and wide code.

There is a limitation to the number of barcode that can be displayed. It depends on your Browser window as the width for the html embed statement is 100%. But by dynamically calculating the barcode width, you should be able to change it programmatically.

If you use viewbox in SVG, you should be able to shrink or expand the barcode overall size. But that means you must really conform to the code 39 specification of calculating the width and height of the overall size corresponding to the barcode width and height properly otherwise the scanner might not be able to decode it.

I have also created a barcode 39 font quite some years ago. This SVG BarCode39 program is based on the setting of the font I created. It took me a few days to create and test the font. Moreover, the font cannot be used on a web. I have to use WSH to convert it to web enabled form. It took me another few day to get the conversion working. It only took me half a morning to compelete the SVG barcode program. What a difference in coding time. However, barcode font can be used in windows. SVG barcode can only be used on web.

SVG Chart

Updated the SVG chart by standardizing the DOM interface for both manual and automation. The EMAScript is now moved to SVG itself. Calls are made to the EMAScript exposed function and values are passed into it.

This method is cleaner because all the necessary chart preparation are done right inside the SVG instead of at the javascript level at the Main page. The main page now just composes the information and passed the variables to the SVG to process. Therefore, the manual chart composition page (linechartform.html) and the automated php (not provided) are now using almost identical method calls.