Chapter 10. Using Barcode ActiveX in IIS

You can create images through the Barcode ActiveX and send to the browsers. This section briefly discusses several technical issues involving web programming with the Barcode ActiveX.

With careful planning and design you can create high quality label and print from the browser, as illustrated below:

Two labeling samples are included in the default installation - one creates barcode images based on screen resolution. Another one creates barcodes under 203-dpi resolution. The sample files are located under \program files\morovia\barcodeactivex3.4\IIS [3] folder by default. Simply copy the files to an IIS virtual directory and you are ready to test.

With server side bar coding, all that a client computer need is to have an Internet browser and a printer. However, to create quality barcodes at the server end is nevertheless a nontrivial task. The HTML IMG statement was designed to display images on a computer screen. All browsers simply scale the image pixel to pixel at the time of print while retaining the overall size. A barcode image created targeting high resolution devices may deteriorate in quality when transmitted to a low resolution device.

10.1. Creating Image Based on Screen Resolution

With this approach the barcode image is created under screen resolution - 96 dpi. Since the IMG statement assumes the screen pixel size by default, you do not need to specify size in the IMG tag. At the time of print, the browser enlarges one screen pixel into several printer pixels. During the process, rounding errors are likely to happen because screen resolution is not compatible with resolutions of most printers. Nevertheless, that does not mean that the barcode quality will deteriorate. As long as the printer pixel is very small, an extra pixel does not affect the overall readability.

Our testing found that this approach works very well on high resolution printers even when the narrow element only occupies 1 screen pixel. On low-resolution thermal printers, when the value of NarrowBarWidth is equal to or greater than the width of two screen pixels (20 mils), the barcode quality is also pretty good.

The primary issue with this approach is that you have few choices on the NarrowBarWidth because the size has to align with screen pixels. For example, between 10 mils and 20 mils you can either go with 1 screen pixel (10 mils), or 2 screen pixels (20 mils). Although Barcode ActiveX accepts other values such as 16 mils, it creates the same barcode image as if you specify 20 mils.

10.2. Creating Image Based on Printer Resolution

You can create images with other resolutions, for example, the target printer's resolution. This approach gives you much better flexibility, and most sizing requirements derive from the printer resolution. However, this approach suffers a major disadvantage: you have to specify the size in terms of screen pixels. Without specifying the screen size, the browser maps one image pixel to one screen pixel, resulting in a much bigger image appearing on the screen.

So you have to calculate the screen pixels and set the size. At the print time, the pixels are scaled up to match the physical size. Each step may cause rounding errors. Fortunately, we found that as long as planned properly, we can still get pretty good results.

Note: the ExportImage method is device dependent because rounding errors may also happen when the drawing units are incompatible with the device units. To ensure best quality, you need to have the printer driver available at the server end. The printer does not need to be connected physically. The image created reflects the exact print effect when the value of RasterImageResolution property matches the printer resolution.

The barcode images created from the first approach can be screen copied while retaining its readability. This is not the case for barcodes created from the second approach. Try to scan the sample images (both are screen copies), the barcodes on the left have much better readability. On the other side, the second approach gives you more control on the NarrowBarWidth values.

The image created from the second approach is also much bigger than the ones targeting at the screen resolution. The bigger the image size is, the more time it takes to transmite over the network and load the image.

The table below lists the feature comparison of the two approaches:

Creating barcodes based on screen resolution No need to calculate the size of the image. Image can be screen copied while retaining high quality. Image size is usually very small; less time in downloading and loading the images. NarrowBarWidth must align to the edge of the screen pixel, resulting in few choices
Creating barcodes based on target printer resolution More choices on the value of NarrowBarWidth. Need to calculate the image size in screen pixels. Screen copied barcode usually have very low quality. Image size is much bigger; More time needed to download and load the image.

10.3. HTML Statement

In HTML, you can place an image with the following statement:

<img src="barcode.asp?message=123443"/>

When you take the second approach, you must specify the size in screen pixels. The size is specified through attributes width and height, such as:

<IMG src="barcode.asp?message="1234567890" width="256" height="130" />

10.4. Retrieving Images from Barcode ActiveX

The image created by Barcode AcitveX can be exported via calling ExportImage method. This method takes two parameters: the last one asks for the image type, and the first one can be a file path or a Stream object.

Saving the image to a physical file on the web server does the job. However, sometimes you may want to just use the memory as the transport. The ExportImage method accepts passing a Stream object as the argument. You can use any third party Stream components for this purpose, or just use the one from Microsoft - ADODB.Stream. The ADODB.Stream object is available on Windows 2000 SP4 and later versions, or you can have it available by installing MDAC version 2.5 or above.

After the image is stored in the Stream object, you can have the ASP script send the image data to the browser using Response.BinaryWrite method.

10.5. Size Control

Barcode ActiveX enters label design mode when AutoLabelSize is set to FALSE. Under label design mode, the overall size of the image is fixed regardless of the barcode length. If for layout reasons, you'd like to create images with fixed size but on the other side the barcode length is variable, set AutoLabelSize to TRUE and Set LabelHeight and LabelWidth to the values you desire. Note that values of LabelHeight and LabelWidth are in either 1/1000 inch or 1/1000 cm units depending on the value of Measurement.

10.6. Example

Assume that we need to create a web application which allows client computers to print shipping labels on Zebra S600™ printers (203 dpi in resolution). On the shipping label the barcode is required to be 1 inch tall with X dimension at 15 mils (3 printer pixels). The barcode encodes a fixed 16-digit alpha numeric address which takes a form of 6 capital letters followed by 10 digits, such as KANADA1234567890.

10.6.1. Planning

Because the encoded data has a fixed data structure and length, the barcode length is always fixed. Moreover, since the X dimension is required to be 15 mils and the barcode targets a low-resolution printer, we need to take the second approach.

10.6.2. Setting Up

We need a container program to embed the object so we can ask the object to provide the size information. Microsoft Word is such a good container. You can also use any OLE control containers such as Visual Basic. If you do not have these programs, you can write a simple WSH script to measure the size.

Before creating the object you need to set the target printer as the default. This ensures that the measures are taken from the printer. Now we start to create an object based on the specification. First insert the object into Microsoft Word document by selecting Insert Object from the Insert menu. Scroll down to locate Morovia Barcode ActiveX and click on OK. The barcode control appears. Right click on the control and select Propeties. On the pop-up property window, find one called symbology and change its value to mbxCode128. Make sure that Measurement is set to mbxMeasureEnglish. Set message property to KANADA1234567890. Disable the comment by setting ShowComment to FALSE. Since the human readable is required, make sure that ShowHRText is TRUE. Set NarrowBarWidth to 15 and BarHeight to 1000.

The specification also says that the human readable is printed on top of the barcode, with typeface Arial, bold and size 9. Go back to the property window, find property TextOnTop and set it to TRUE. Set TextAlignment to mbxAlignmentLeft. Click on the Font property, then click on the right small button to pop up the Font dialog. Select Arial, bold and 9 from the appropriate boxes. Dismiss the dialog. Now we have a barcode matching the specification.

10.6.3. Measuring the Size

We keep the symbol margins intact. If you'd like to modify the symbol margins, look at the SymbolMarginXXXX entries.

Now we measure the overall size. From the property window, find LabelWidth and LabelHeight. The program reports Labelheight as 1350 and LabelWidth 2670. Since we are using English imperial units, that translates into 1.350 inches in height and 2.670 inches in width.

10.6.4. Calculating the Screen Size

After we retrieve the LabelWidth and LabelHeight in logical units, convert them into screen pixels rounding to the closest integer:

NameIn logical units (inches) In screen pixels (multiply the inch value by 96)

10.6.5. Assembling the HTML Statement

We now write an ASP script called barcode-zebra.asp to provide the image feed. This ASP script sets properties one by one. The message property is retrieved from the URL query string. If you are interested with how we did it, take a look at the sample included in the package.

After we finish the back end script, we proceed to add barcode to the front HTML file. Insert the following statement in the place of the barcode:

<IMG SRC="barcode-zebra.asp?message=KANADA1234567890" 
WIDTH="256" HEIGHT="130"/>

10.6.6. Reference

[3] For barcode activeX lite, the folder is \program files\morovia\barcodelite3.4\IIS