The final weblog entry in the current Code 128 Barcode series is about the finishing touches that had to be put on the Code 128 Barcodes to get them to be client-sided. This is useful if you want to generate HTML files that stand alone and can be placed on a memory stick or other media without having the browser rush back to the web server to pick up a bunch of graphics files. The real data behind each barcode is the PNG graphic that is represented by its Base 64 encoding.

Base 64 conversion is a very old technique for mapping the contents of a binary file into a subset of ASCII. This allows us to move binary information back and forth over communication channels without inadvertently triggering unwanted behavior on either side of the interface. You can assume that binary data contains bytes and words in all bit combinations under the sun. Some of these combinations can be reserved to invoke functions within the sending or receiving program.

Because we want to transfer the raw data back and forth without invoking functions we have to “mask” all of the special combinations behind data that is highly unlikely to be used by any but the most extreme programmers to trigger functions.

So the Base 64 encoding scheme utilizes characters that are fairly innocuous in byte streams and are not likely to be altered in transit by the sending or receiving application. Namely, it uses upper and lower case letters found in the English alphabet, numbers and a few characters used in mathematics (+, / and =). Base 64 encases binary data in a stream of these characters meant for human consumption by laying a message’s bits out end to end and having a CPU look up 6 bits at a time out of a table of 64 characters. On the receiving side, the computer looks the characters up in a table and builds three bytes (24 bits) out of the bits that it finds. This technique allows a lossless transfer of binary information between two systems at a relatively small (33.3%) amount of overhead.

Base 64 is important for our barcodes because it is what enables them to be client-side barcodes. In other words, we can create barcodes in a web browser without having any connection to the internet. You might think that’s not important, but when your computer is considered “down” because its connection to the internet is “down” then I would say that you are underutilizing your processing power. The enabling technique is to have the barcode “font” embedded in the webpage without having to download auxilliary files from a server which may or may not be operational onto a client platform which may or may not think these auxilliary files are a secure thing.

If you take a close look at the Code 128 Barcode page, you’ll find that each symbol has its binary data (the PNG files generated with the technique illustrated in the last installment) represented in Base 64. We explain this to the browser by the codewords in the ‘src’ field “data:image/png;base64,”. The rest of the data is the binary information of each code symbol represented in Base 64.

I suppose I could have rifled through old hard drives and tape backups to find the source code for a utility that I wrote in the C programming language many years ago to encode/decode Base 64. Instead, I spent about an hour and a half online with a Base 64 encoding website and individually encoded each of the 107 symbols.

After I had all the Base 64 encoded data, I spent another two hours or so prettying up the HTML encoding for all the images and adding the fly-over text, etc. In all, it probably took me ten hours to create and test these barcodes over the course of a week. I hope that you find them fun, amusing and/or useful. Feel free to try this technique in your own application.

In our next installment we’ll introduce an idea that will make all this ultimately more useful by supporting many more symbologies as well as 2D barcoding schemes. Until next time, thank you for tuning in.

In our last installment, we created PNG graphics files from the code 128 specification. I showed you how I set up the Paint program that comes with Microsoft Windows to easily create these black and white microscopic bitmaps and save them in PNG files.
This installment deals with the PNG files themselves, because, as you will see, Paint does not do black and white.
For demonstration purposes, let’s look at what Paint does with our miniscule masterpiece. I’ve copied the Code 128 symbol for the exclamation character (or the numerals “01” if you are using 128C) into a working file and brought it up in Paint. That’s “11001101100” for all you people who think in binary. Here is the picture in Figure 1.

Figure 1. Paint Screen Capture

What paint does is conform the graphical description you see in the bitmap drawing into a standard PNG file format as Paint understands them. When you view the saved file in HEX/ASCII (using UltraEdit or some other programming editor / viewer), you’ll see what I typically call “bloat”. This is the waste generated when you try to use a general purpose tool to get something specific done.

Fig 2 UltraEdit Screen of Paint File

For many of you, the ASCII representation of the bytes in the file holds the most information, so I will direct your attention there. I won’t go into too much detail on the file layout of PNGs, so if you are curious about exactly how they are structured, you’ll want to read that elsewhere.
Probably the best place on the web to view information on the PNG file format is Greg Roelofs’ book online at http://www.libpng.org/pub/png/book/cover.html. The book itself is out of print, so you’ll need to use the online version or order it used.
Let’s examine the format as Paint stores them, then as we would like to have them for our barcode support.

Figure 3. ASCII Side Showing Chunks

I’ve highlighted the chunk names in the file as saved by the Paint program. All PNG files must have a file signature (&PNG), a header chunk (IHDR), a data chunk (IDAT) and an end indicator (IEND). The other chunks (sRGB, gAMA, pHYs, and tEXt) are useful for other processing applications or color images. We don’t use color and our goal is not to use the PNG file in its created format, so all of this information can go away. That “bloat” takes up a majority of each file’s byte count.
But we can’t just delete the extraneous information, because the Paint program saved our black and white image as a full color picture. Removing the unneeded chunks would break the image integrity.
For the purpose of putting the graphic images on a diet, and reducing the amount of unnecessary data, I use Gimp. Gimp stands for GNU Image Manipulation Program and is free, user-supported software for image composition and authoring. You can learn more about Gimp and download it at http://www.gimp.org. Here is a screenshot:

Figure 4. Gimp Screen

As you can see, Gimp thinks our file is a 1-layer RGB color image. That’s what Paint is telling it, anyway. What we really want is a grayscale bitmap image with no extraneous data. So we will want to export this file with those attributes from Gimp to get our goal accomplished.
We select from Gimp’s menus “Image->Mode->Grayscale” to begin. This tells Gimp it can drop the color support from the file. Then we export the file by using “File->Export” from Gimp’s menu system and we are greeted with a dialog similar to the ones below:

Figure 5. Gimp Export Dialogs

We are going to want to change the default settings on the left with the ones on the right, which basically tells Gimp not to save any extraneous data.
Our new file looks the same when displayed, but it’s size has been reduced from 182 bytes to 82 bytes.

Figure 6. UltraEdit Screen of Gimp

Our PNG file is still not in its ideal format. We would like to embed these files into HTML pages, providing true client-side scripting support for our applications. We’ll do this by using a base64 converter. That will be the topic for the next installment. Until next time, thank you for tuning in.

The first thing we have to understand about barcodes is that we want to work on the microscopic level. That means one pixel at a time. The quickest way I found to get started with that was to crack open the Paint application supplied with Windows or your favorite operating system and configure it as follows:

Figure 1. Image>Resize

Use the Image>Resize facility to apply the dimensions of the barcode. For code 128, that’s 11 Horizontal by 1 Vertical. Not all barcodes will be only one pixel high, but most of them will be.

Figure 2. Resize dialog

Next, select the tool. Since we want to adjust our 11×1 image one pixel at the time, we must select the Tool>Pencil. That’s the little guy in the upper left pictured here.

Figure 3. Tools>Pencil

Finally our color pallet is the most boring available, black and white, so set your Colors up as follows:

Figure 4. Color pallet

That’s black for the foreground and white for the background, although I suppose it could be done the other way. The Zoom level should also be set to the maximum. For paint, that’s 800x. If you are brave enough to try this with Photoshop or some other editor you are more comfortable with, you might try 1600x. I believe the paint bitmap is just a bit too small. Next, resize your Paint application so it looks like mine. You may also want to turn on gridlines and rulers.

Figure 5. Sample screenshot

You now have a lean, mean barcode generating machine. Except that it isn’t really all that lean, we’ll get to that in a little while. The above final screen shot shows the bit pattern for the Code 128 symbol for the value 0. That’s the number zero, not the character zero. The character zero is a totally different animal. But before I get all confusing and lose you, you are possibly asking how I “know” that. I certainly wasn’t born with that bitmap and I am definitely not the author of the Code 128 specification.

I have a friend and it’s called http://en.wikipedia.org/wiki/Barcode. At that site, you can learn all about the barcode, its inventor, Norman Joseph Woodland (September 6^th, 1921 – December 9^th, 2012), his explanation of the symbols as Morse code, his co-inventor Bernard Silver (September 21^st, 1924 – August 28^th, 1963), and a wealth of other barcode related information.

Most useful on this page, for our discussion, is a link to the Code 128 “chart” found here. Please take some time to open that link up in a new browser tab, as I am not going to duplicate it here. For authoring barcodes, the two most important columns from that table are “Value” and “Bar/Space Pattern”. In fact the “Bar/Space Pattern” column is where the rubber meets the road and I am very grateful to the author for including it in that table. We will find that not all symbologies are documented so agreeably.

So let’s take a look at the “Bar/Space Pattern” or binary representation of the symbol for the value of 0 (zero). The table has it as “11011001100” that’s eleven binary bits of information and it succinctly and completely describes the symbol. There is no need to measure rectangle widths or the width of the white space between bars. “11011001100” is all we need to know. If you recall the screenshot in Figure 5, examine the name of the file in the title bar. It’s 128_0.png. That’s a naming convention I have adopted to keep the PNG files straight. PNG stands for Portable Network Graphics and is a lossless graphics format supported universally by web browsers. The keywords in the previous sentence are “lossless” and “supported”. Any graphics file format used must be lossless to prevent corruption of the integrity of the file, and supported to provide interoperability between web browsers, word processors, document publishing systems and printing software.

It is evident by the binary representation of the number zero (11011001100) and the bitmap visible in the canvas area of the paint program that black pixels represent ones and white pixels represent zeros. For the Code 128 symbology, there are 107 unique binary patterns. It took me a couple of hours, but I actually sat down and implemented all of them. You are welcome to repeat my efforts, but the Code 128 Barcode page on this website (link found at the top) is ready for use.

In our next installment, we’ll go from PNG file to HTML <img…> tag, and reveal some details about the way Portable Network Graphics work. Until next time, thank you for tuning in.

The Microsoft Excel spreadsheet embedded at the top of this web log entry is a user-friendly tool to produce your own barcodes. Instructions on exactly how to use it follow. In short, modify the string, adjust the bar width (I recommend minimum of 8), the bar height, switch to the “HTML” worksheet, copy every line to a text editor and save the resulting file as an ‘.htm’ or ‘.html’ file. Open the file in your browser, and print. Rinse, repeat. At this time, the spreadsheet is downloadable, with no restrictions to copy.

It is redistributable, provided you don’t take steps to make it non-redistributable. The rights are protected by a Creative Commons Attribution-ShareAlike 3.0 Unported License.
Code 128 Barcode Spreadsheet Tool by Brian P. Anderson is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. The output from the tool (the embedded images you copy from the “HTML” worksheet after the string, width and height fields have been filled in) is not copyrighted in any way.

You will find that, as long as you do not change the formatting significantly, you are able to embed the contents of the “HTML” worksheet into any web page anywhere you could embed a picture. Amaze your family and friends. Create labels for your book or record collection. Place static Code 128 barcodes within your business documents and on your web forms. Have fun.

I am saving the JavaScript code that does what the spreadsheet does for a later article, but if you know JavaScript or any other programming language, feel free to use this spreadsheet as a prototype and create your own dynamic script to create barcodes of any string passed to it.

In the introductory web log, I showed a sample barcode. Since it doesn’t cost me anything extra, I’ll reproduce it here. If you print then scan the barcode above this paragraph, your scanner will interpret that Code 128 barcode as the word “Sample”.

I went through a rather inefficient process to create the barcode. I’ll outline it now.

1. Come up with what you want your barcode to “say”.
2. Lookup the letters in a table to find the Code 128 equivalent values.
3. Open the HTML page containing all Code 128 barcodes in a text editor.
4. Copy the lines from the editor for each value into a fresh ‘.htm’ file.
5. Calculate the checksum using modulo arithmetic.
6. Make sure you include the proper Start, Stop and Checksum codes.
7. Save the fresh file containing only the codes you want in your message.
8. Open and print the file from your browser.

Quite the rigmarole, eh? If all you want to do is create Code 128 barcodes, you’ll need the ‘.htm’ file that contains all the image strings, a table that indexes the proper code to the ASCII character that you want to represent and knowledge on how to compute the checksum.

Since the calculation of the checksum, table lookup and string concatenation are all capabilities of your garden-variety spreadsheet, I’ve included a spreadsheet that simplifies the entire process. It operates by taking three inputs from the user and creating the resulting necessary text in the “HTML” worksheet.

It is really as simple as that. Click on the “switch to start” link on the Copyleft tab or navigate to the ‘Start Here’ tab. Enter whatever you want to say in cell E4 (that’s the one that originally contains the phrase “Try another string.”). Switch to the “HTML” tab or worksheet. There you will find your HTML image tags. place the cursor on the first ‘<img’ tag in the upper left corner and use the <Shift> key in conjunction with the down-arrow key to select the contents of the “HTML” worksheet. Once all of the image information is selected, copy to the clipboard and paste into your favorite text or HTML editor.

Now try this with your own information.  If you know someone with a scanner, try using it to scan at different height and width parameters.  While the height can vary within the bar, varying the width parameter will make it unreadable.

I hope you find this tool useful and a good source of inspiration. In the next article I will be explaining how to create the images themselves. I will introduce you to the tools I used and we can create the image data and spreadsheet for Code 39, UPC, Postal and other symbologies. Until next time, thank you for tuning in.

Included in the menu bar at the top of this page is a button entitled “Code 128 Barcode” You can use the web page it references to view the entire HTML Code 128 barcode. The barcode images are segregated into their own web page to enable you to copy the HTML out of the browser and into a text file.

Utilizing the barcodes in your own browser to “spell” your own messages requires you to learn a few techniques to satisfy the rules of your browser and the scanning equipment needed to interpret your barcodes.

In this article, I’ll walk you through the creation of a complete barcode that scans when the page is printed to paper. When we are finished, you will have the mechanics and source for creating an embedded barcode into any web browser. I’ll start right now calling this the ‘brute force method’ which is how I know it. It is cumbersome and prone to error and not the leanest way to do barcodes in a web browser. In future web log installments, I will demonstrate automation of this manual method via spreadsheet and JavaScript. However, I feel that it is important for you to follow along and try to manipulate the text yourself to help you understand the process.

Code 128 is a somewhat complicated symbology. There are not enough unique symbols to assign one symbol to each represented character. In order to get around this, you may consider Code 128 to contain three separate symbologies. These are distinguished by three start codes Start A, Start B and Start C. The same stop character is used for all three “sub-symbologies”.

The above barcode, in Code 128A reads “H[ENQ][FF][FF][SI]“. That’s a capital letter ‘H’, followed by an ASCII control character that meant “enquiry” to teletype devices. Unfortunately, I can’t tell you what [ENQ] did to teletypes, but if you have a Windows program that uses <Ctrl-E> to eliminate all the data on your hard disk, I would avoid scanning this barcode into any window within that application. The next two bars will generate the ASCII character [FF], which I can tell you induces a teletype to advance its output to where it thinks the top of the next page is. The ASCII control character [SI] signaled the teletype to Shift In to its native character set after it had been shifted out to an alternate character set. A barcode scanner generates a key signal equivalent to the keyboard combination <Ctrl-O> when it read [SI], which is what causes the “Open file…” dialog box to open in Microsoft Office and many other applications.

The second barcode in this section reads, quite simply, “Hello” in Code 128B. That’s more like it, right?

The last barcode in this section is Code 128C, which utilizes most of the symbols to represent a two digit numeral. This technique allows the Code 128 barcode symbology to encode numeric-only information quite compactly. The barcode above is interpreted as the 10 digit number “4069767679″. If you have a numeric field with an odd number of digits, there are ways to “shift” to Code 128A or Code 128B for one character and use those character sets’ single digit representations.

For example, if the number I wanted to represent was the 9-digit number “406976767″, I would encode it {105 40 69 76 76 101 23}.

At the end of all three of the example barcodes above, was code 106. This is the universal code for Stop, and signals a barcode reader to evaluate the barcode up to that point and convey the information to the host software.

Just before the Stop code is the checksum code. The checksum is calculated using modulo arithmetic of the running weighted total of the values in the string including the value of the Start codes. Modulo arithmetic is a fancy way of saying that the result we want from a division operation is the remainder.

Let’s use our sample barcode for the middle example (code 128B) above to explain the calculation of the checksum. Use the fly-over text to view the values of the separate images, or view the source on this page to follow along.

Source Code for the Code 128B “Hello”

The checksum is calculated by adding the multiple of a character’s value by its position in the barcode with the exception of the start code. While the start code’s position is ’1′, so is the position of the first character following the start code. So the start code and the first byte of data (‘H’) are multiplied by the number 1 (104×1 + 40×1 = 144). The following 4 bytes get an incrementally higher multiplier (69×2 + 76×3 + 76×4 + 79×5 = 1065). Summing it all up together we get 1209.

Now comes the fun part. We divide the result by 103 (1209 ÷ 103 = 11.737864077670). Next we throw away the portion of the result to the left of the decimal point, leaving only the fraction or remainder and multiply that by 103 (103 × 0.737864077670 = 76). The checksum character for the Code 128B string “Hello” is 76 or lowercase ‘l’.

Now it is time for your homework. Take the HTML source, and find all the letters for your first name. Start a ‘.html’ file of your own with the image line code for Start B (104). Add the image line from the HTML source file for each letter in your name. Calculate the checksum using the technique outlined above and the values embedded first in the alt and title fields of each image. Don’t forget to multiply by that positional weighting. Copy the image line for the value you calculated as the checksum and finally add the Stop (106) image line.

Open the file in your web browser, print it out, get it scanned. Until next time, thank you for tuning in.

In the previous installment of the barcode web log, the Code 128 barcode images were revealed. At the top of the page in the navigation bar, is a link to a web page containing only the complete Code 128 set. I would like to walk you through an example of how you can use it. It would be helpful if you brought the code down to a local HTML file and are able to edit along as we proceed.

I recommend UltraEdit as a text editor from IDM Computer Solutions, Inc. They have a very intelligent editor that allows the editor to configure itself to specific behaviors based on the file type being edited. You may use whatever text editing facility that comes with your operating system. The screen captures that I have placed in this article will show text as it appears in UltraEdit, but the information is easily manipulated in any text editor.

Terminology will be important here. The final word on terminology in the world of HTML is the World Wide Web Consortium. If you are unfamiliar with basic HTML-related terminology a little time spent in this tutorial will prove valuable.

Figure 1 – Image Tags

Let’s review the construction of each image by turning first to Figure 1. The first thing to point out here is that the ‘<img …>’ tag itself is oddly placed. This is due to a tendency of web browsers to insert spacing (where it can do harm) between images. If each line started with the first four characters equal to ‘<img’ there would be a space between the barcodes. By design, barcode characters need spacing between them. But the space the browser inserts is not programmatically controllable. I’m pointing this out because any space that the browser inserts between bars will interfere with the barcodes’ “scanability”. Watch for this and never begin a line in the file with the ‘<img’ tag, unless it is the first bar pattern in the barcode.

Figure 2 – Alt Attribute

With that out of the way, we begin dissection of the image. The first element to discuss is the “alt=” attribute. See Figure 2. For each image, an alternate text exists. This text is placed in the location that the bar graphic would appear if graphics were turned on in the browser. You will see the alternate text when the display of graphics is turned off as part of the browser’s configuration. You may also see alternate text in place of some graphics if your internet connection is extremely slow, but you won’t see these alternates in that case. Can you guess why? Selecting an example from the file, ‘alt=” 00,A:{space},B:{space}”’ stands for the first Code 128 code which corresponds to the space character in Code A and Code B sets.

Figure 3 – Title Attribute

In Figure 3, we see the “title=” attribute highlighted. It allows you to control fly-over text. When your mouse pointer hovers over a graphic, the title text for that graphic is displayed as fly-over text.

Figure 4 – Source Attribute

As you can see by examining Figure 4, the ‘src=”data:image/png;base64,iV…’ attribute is quite obviously the essence of the distinguishing data that explains the bar pattern in graphical form to the browser. This data deserves further explanation. The actual source for most graphical images in a browser are files external to the displayed HTML file. The ‘src=’ normally points the browser to this file, somewhere in the file system on the web server. For the purposes of these Code 128 barcodes, however, the data is embedded within the ‘src=’ attribute itself.

The ‘src=’ attribute value is further divided by the data type (image/png) and data value (the format is base64 encoding and the remaining characters represent the actual data). If you examine the actual data closely, you’ll see that all barcodes but the Stop code have strikingly similar actual data strings. There are 14 bytes after the sequence ‘z/A’ and before the sequence ‘AAAASUV’ that vary from code to code. We will find this useful in a later installment of this column. For now, please note it as a curiosity that is not totally unexpected.

Figure 5 – Dimensions

Finally, after the encoded data string, we have the last two attributes modifying the ‘<img’ tag. These are the attributes that require the browser to do all of our work for us. The ‘width=’ and ‘height=’ attributes scale our tiny barcode bitmaps into something visibly obvious and scanable. These attributes are the barcode’s dimensions and for any barcode string, the dimension that controls width must be identical within the barcode.

The delay between the previous installment of this column and this one was unavoidable. The next installment should be published shortly. In it, I will demonstrate the use of the barcode images in a sample string, and explain the Code 128 symbology in greater detail. Until next time, thank you for tuning in.

In the previous installment of the barcode web log, I related the story of how I came to be interested in barcode generation. To make a long story short, I was challenged to produce the Automotive Industry Action Group’s (AIAG) shipping label for my employer. Figure 1 is a scanned label from a newsletter published in 1987. The AIAG has an updated standard (B-10, Trading Partner Labels Implementation Guideline). We’ll be generating a current model of AIAG B-10 in a future blog.

Figure 1, AIAG shipping label

For the purposes of this installment of the barcode web log, the label is reproduced to enable a closer look at the challenge presented. According to the specification, the label was to be 4″ high and 6″ wide. If we were using a roll label printer those dimensions would be reasonable. Because I wanted to create my software for the Apple LaserWriter Plus, that seemed wasteful to me at the time.

The least expensive label stock for our application was full sheet 8½” by 11″, but that meant our label had to be 4¼” high and 5½” wide in order to fit 4 labels per page. After a discussion with our customer on a deviation, they agreed that our dimensions would be okay, provided the barcodes passed the validation equipment.

As it turned out, this still presented a technical difficulty. The purchase order number field shared a table row with the quantity field. The quantity field was not problematic. Its maximum width was 6 characters and fit in the table cell nicely using the Code 39 barcode specified by the AIAG standard. The purchase order number was something else. It was required to support 9 characters. As perfectly centered in the table cell as I could position the barcode with PostScript, the label field would not scan.

Figure 2, Quiet zone illustration

My inability to get the purchase order number field to scan was a result of insufficient “Quiet Zone”. See Figure 2. Quiet Zone is the amount of space to the left and right of a barcode. That blank space is necessary for the scanning hardware to locate the start and end of the barcode. In the interest of saving the trees that they make label stock from, I had narrowed the label to the point that there was not enough room in the purchase order number field’s table cell for enough white space.

What made this challenge simple to overcome is the technique I used to produce the barcodes. Because the computer sees barcodes as a series of dots and dashes separated by wide and short pauses, it is not necessary to draw lines or rectangles and calculate distances between them based upon their thickness. I specified the representation of a bar in the computer’s native binary, and let the printer’s firmware do the scaling.

For example, the code 39 character ‘*’ which is used for a start and stop character (you’ll see it on the left and right of every code 39 barcode) is represented by a dot, followed by a long pause, another dot, followed by a short pause, then a dash, followed by a short pause, dash, short pause, dot and short pause. Because code 39 dashes are exactly 3 times as long as the dots and the pauses have the same ratio and lengths, the binary representation of the ‘*’ is 1000101110111010 or 0x8BBA in hexadecimal.

When you ask a 300 dots per inch printer to generate this pattern at 1:1 scale, you get a blip of ink 0.053 inches in width and 0.003 inches in height. In other words, the dot will be slightly larger than the period at the end of this sentence. However, if you use the printer’s built in scaling mechanism to increase the height by a factor of 200 and the width by a factor of 100, the code 39 ‘*’ character magically appears. And it appears as close to perfect as the printer is able to produce it.

But, what if your barcode is too large? Simply change the horizontal scaling to 95 or 90 or 85, until it is at the perfect width. Because the barcode is defined at it’s smallest possible dimensions and the printer scales height and width independently, you will end up with a perfectly readable barcode until you reach the limits of the hardware to create discernible lines and dashes. As it turns out, I could almost fit two purchase order number barcodes side by side in the table cell in Figure 1 before the barcodes would no longer scan. Time to fix “problem”: less than a minute.

This works in the opposite direction. You can create a barcode that fills an entire sheet of paper that is readable from several feet away. The limiting factor is the power of the laser in the scanning equipment.

As promised, at the end of this article is the entire Code 128 symbology in ‘PNG’ form. PNG stands for Portable Network Graphics and is the format that many web graphics are saved in. PNG should be used in barcode representation on web pages because it uses a lossless form of compression. In the next article, I’ll walk through the code and some of the necessary mechanics to use the client-side Code 128 barcodes in your own browser. Until next time, thank you for tuning in.

In the Spring of 1987, a large manufacturing company sent a notice to all of its suppliers.  This notice informed them that their large customer was taking steps to modernize its supply chain. All of the suppliers to this Fortune 50 company would be required to place labels on all packages shipped. These labels looked very similar to the one pictured below in Figure 1.

Figure 1. AIAG shipping label

At that time, I worked for one such supplier. We had to comply, but we had a choice.

1. We could pay a considerable fee for the hardware and software to print these labels.
2. We could develop the software in-house and use equipment we already owned.

My boss asked me to pursue the less expensive option.

I was a devotee of the “Guru” Don Lancaster. (Don is an author and a thought leader in electronics and desktop publishing.) His monthly column “Ask the Guru” in Computer Shopper magazine, was replete with tips, tricks and techniques for modifying electronics, programming the Apple ][ and utilizing the PostScript programming language to get an Apple LaserWriter to do things that desktop publishing experts find difficult to this day. Naturally, I was keen to try my hand at developing software for printing barcodes with PostScript.

The company we supplied our products to was a member of the Automotive Industry Action Group (AIAG). Consequently, our shipping labels needed to follow AIAG specifications. In just two weeks after studying the AIAG shipping label specification, I was generating label sheets full of barcodes using an Apple //c and an Apple LaserWriter Plus.

The key to creating these barcodes in such short order hinged on my insight into both the form and functionality of a barcode. You see barcodes are not just a series of thick and thin lines stacked sideways on a page, but a challenge computers were wonderfully suited to achieve.

I can't seem to remember when I first learned of Morse code. I can assure you it was early in my life. Radio, television and movies feature people sitting around a desk tapping on a device generating sound effects that convey urgency and importance. Morse code over radio and wire consists of multiple series of dots, dashes and space in between. This signal is translated by a trained human ear into a language we all understand.

A barcode symbol is a computer's Morse code. While we see a sideways stack of thin and thick lines and spaces, computers see only the thinnest cross-section of those lines using lasers and mirrors (see Figure 2).  The signal is transformed into the computer's native 1's and 0's. The image becomes a series of dots and dashes and then translation to numbers and letters occurs in software.

Figure 2. The thin red line

Generating a barcode from a printer is not necessarily a different story. Anyone who has worked with computer graphics knows the unfortunate side effect of unintentionally scaling one dimension of a picture without keeping the entire picture’s aspect ratio constant. The aspect ratio is a ratio of width to height. When a 200 x 150 image becomes a 200 x 1500 image an interesting effect is evident (See Figure 3). If the original image is a recognizable object, it becomes unrecognizable. However, if the image starts as a monochrome series of dots and dashes 11 pixels wide by one pixel high, you get a barcode.

Figure 3. Picture on left is original

becomes…

When the same relative scaling is applied to dots and dashes, however, becomes…

This effect is achieved with HTML image tags buried in this article. Use the browser’s ‘View Source’ option to see the code. It isn’t pretty, but you will see in time that it is elegant.

This is the technique I am using to create a barcode within the browser. In the next article, I’ll walk through the code and some of the necessary mechanics to use the client-side Code 128 barcodes in your own browser. Until next time, thank you for tuning in.

Welcome. You’ve found the premiere web log posting of Notionovus. I am Brian Anderson, a software developer and manager of Notionovus LLC. I’ll begin by telling you a bit about myself, our company and what I hope to accomplish with this blog.

As an information technology professional, I spend my time looking at the world around me and thinking about how we can improve our standard of living through computer automation. People who know me well will tell you that I am strongly opinionated.  As you might expect, I have some opinions about the computer industry. I will be sharing some of these, as well as more general thoughts and insights. I hope you’ll use the capability of this forum to interact with me, sharing your own thoughts.

I started programming computing machinery early in my life with a TI-58 calculator.  Although I am not normally detail oriented, I think I fell in love with the precision required to describe to a device what you want to accomplish. If you explain your goals right, what happens next is magical. As a matter of fact, the feeling is reminiscent of the short Disney animated movie The Sorcerer’s Apprentice. If you do it wrong, a computing device will overwhelm you with the gravity of your mistakes.

I have much to talk about in the area of programming philosophy, but I won’t be giving out lessons learned right away.  We’ll need to get familiar with general concepts first. That’s why I suggest you pick up Joel on Software (2004 | ISBN-10: 1590593898 ) if you haven’t already read it. I’ll start out by saying “Yeah, what he said.” But, enough about me for now. I’d like to introduce Notionovus LLC.

Notionovus started out as an idea I had over a decade ago. I was facing a tough career change at my company and was somewhat frustrated at my inability to carry any of my technical expertise forward into my new position. It was as if all of my training up to that point was worthless, and the new challenges I would face would require an entirely different skill set. My true passion was the conjuring of ideas. Eventually I found things I enjoyed about my new career path and decided to remain at my employer.

Naming the new company presented a challenge. Use of the word “innovation” seemed to have fallen out of favor. It was a casualty, I suspect, of the hype surrounding the Internet boom.  In the mid to late ’90s, people were TRIZzing the dickens out of ideas. Some of these ideas were perfectly good if left alone, but they spun completely out of control because they were assuming untried or failed business models.

Everyone on Wall Street felt that they were missing out on all the high-tech boom companies. Investors who weren’t able to be childhood friends with Bill Gates or Steve Jobs thought the next best thing would be to pump money into Silicon Valley venture capital firms. This turned out to be rather misguided. The VC funding pipes grew white-hot and exploded. And all these investors left holding their empty money bags remember being sold on all these “innovative” ideas.

I thought a new term was needed, one that meant “new thought” but didn’t imply the same innovation that took so many investors to the cleaners at the turn of the century. So I dusted off the old English-Latin dictionary (the one at Barnes and Nobles, since I don’t actually own one) and looked up the words for new (novus) and thought (notio) and decided that it sounded cooler in reverse order.  I secured the domain name “notionovus.com” in June of 2001.

As it stands today, I am close to a milestone in my career, but still not developing software at the company I work for. So, in the interest of pursuing my life’s passion, I have decided to throw the website that has been “under construction” for over a decade out of neutral and start chugging down the road in it.

I hope to use this medium to publish ideas. You will originally be seeing articles dealing with software development and, specifically, barcode generation. I intend to include topics such as publishing and industrial applications using C, Javascript, Postscript and XML Languages. Most of the ideas that are provided on this site will be published under some form of free software license, as opposed to being placed in the public domain or under a restrictive copyright.

To start with, I’d like to bring to light an idea I have had about the common barcode that I’ve been hiding for about 25 years. What is interesting about this barcode is the technology used to generate it is 100% client based. That means you do not need to be connected to the Internet to use it. All you need is a web browser, any web browser.  The software relies on Javascript, but no particular version. In the next article, I’ll share the story and the source code. I would like to have you along as I continue my journey. The barcode standard I’ve used first is a popular one (Code 128) but the technique I used to generate the barcodes can be applied to any barcode standard. I intend to prove that by example, all the way up to the Holy Grail: the QR Code.

After several weeks of discussing barcodes, we’ll start investigating other areas of interest related to document publishing, industrial applications, interoperability and a new way of looking at e-mail.  Over time, by hanging out this shingle, I hope that some of my interests spark interest in others.

I plan to update this blog once a week or so.  The next entry will have some actual HTML code and an example of the technique I am using to generate barcodes in the web browser.  Until next time, thank you for tuning in.