Enterprise Software

Create dynamic client-side images using XBM

X-Bitmap graphic files can be created on the fly programmatically. Although they have been around awhile, XBMs can still be a great tool for your Web development toolkit.

The X-Bitmap (XBM) is an old yet versatile graphical file format that's widely compatible with many modern Web browsers. Its specifications are a component of xlib, the C code library for the X-Windows graphical interface (a popular GUI front end for UNIX and Linux). I'll explain how the XBM format works and then show you one of the more interesting ways to use it: creating on-the-fly images on the client. You can download the code for this article here.

XBM basics
The XBM format was originally designed to store monochrome system bitmaps, such as icons and cursors. XBM graphics are essentially C source code files that represent binary images using hex arrays.

You might be asking yourself at this point: What does this file format have to do with Web browsers? In the early 1990s, the National Centre for Supercomputing Applications (NCSA) at the University of Illinois was developing one of the first widely used Web browsers, called Mosaic. The graphical support for that browser was derived from many available open source code libraries, including xlib. As a result, many browsers today can handle XBM graphics.

The Mosaic project later became the basis for the development of the Netscape browser. Microsoft borrowed portions of the Mosaic code to create Internet Explorer. Microsoft continues to natively support XBM as a MIME-type registration in Internet Information Server (IIS) and as a supported image type in all current versions of Internet Explorer.

From a programmer's point of view, JPEGs or GIFs differ greatly from XBM graphics. Both of those file formats are manipulated on the bit level using compression schemes. They can support a wide range of color depths. And the only way you can create those types of Web graphics on the fly is by using server-side scripts, such as a combination of GD.pm and CGI/Perl scripts, or by accessing the Graphic Design Interface (GDI+) Class Library in ASP.NET through the System.Drawing namespace.

XBM graphics are created programmatically. Each bit is precisely specified, and the resulting graphics are limited to a 2-bit color depth (black and white). X-Bitmaps don't necessarily require server-side scripts; they can be generated in real-time using client-side JavaScript.

Practical application of X-Bitmaps includes on-the-fly generation of charts and page counters, retro-style graphical icons, and dynamic bar charts. One of the most impressive uses of XBM graphics I've ever seen is a game called Wolfenstein 5k, which is a texture-mapped, first-person shooter written in only 5 KB of JavaScript.

Anatomy of the XBM format
You can easily embed XBM image files on a Web page by using the IMG element. Here is an example of the syntax:
<img src="xbmsmile.xbm">

This format will not render on Macs or certain browsers, such as the early versions of Mozilla.

Typical XBM source code looks something like that in Listing A.

The #define command sets the image width and height in pixels. As an aside, you can use the x_hot and y_hot commands if you want to define a hot spot on the image. I've created an X-Bitmap to illustrate the process. To design it, I started by mapping the image using binary values. If you stare closely at the ones and zeroes, you'll notice the smiling face in this sidebar.

The binary image I created is 16 digits across and seven digits high, the same width/height pixel values defined in the XBM header in our source code. The image itself is stored in a static array containing a series of binary-coded hexadecimal (BCH) values—in other words, broken down in groups of four bits.

The easiest way to figure out the hex values of our smiley face is to examine the image one row at a time, splitting the binary values into four-bit segments and matching up each segment with a binary/hex conversion table. Here is the first row of the bitmap:

The two code rows below represent the four bit segments and the corresponding hex values matched up from the Binary/hexadecimal conversion table for XBM, as shown in Table A:
Bin: 0001  1000  0110  0000
Hex:   8       1       6       0

Table A
Binary/hexadecimal conversion table for XBM
Binary Hexadecimal
0000 0
1000 1
0100 2
1100 3
0010 4
1010 5
0110 6
1110 7
0001 8
1001 9
0101 A
1101 B
0011 C
1011 D
0111 E
1111 F

Keep in mind that these are not standard bin/hex conversions. The values were calculated backward (left to right) as opposed to right to left. We are inverting the values because the browser will natively read and render graphics left to right, and our code has to account for that.

The last step involves getting these hex values into the right format to be XBM compliant. You must prepend "0x" before each hex grouping. That's the standard C++ method of flagging a value as hexadecimal or base-16 numbering system. The values are then written out right to left (each hex pair representing a binary octet). For an example, see Listing B.

Therefore, we can say that:
0001100001100000 = 0x18, 0x06

These XBM-compliant values can then easily be inserted into the image array:
static unsigned char xbmsmile_bits[] = { 0x18, 0x06, etc...}

Now that we've looked at the format itself, it's time to learn how to dynamically generate X-Bitmaps in our client browser.

Programming XBM graphics using JavaScript
I'll demonstrate the usefulness of the XBM format through a program I've designed that generates UPC-compliant bar codes on the fly. The idea originated from an interesting article that describes how UPC bar codes work.

To generate a new bar code, simply change the value of the upcCode variable and refresh the browser page. Listing C provides the detailed code for the application.

The program works with the help of two important JavaScript functions:
  • ·        buildBinStr takes a 12-digit decimal number and converts it into a 96-digit binary number that graphically represents the bar code image. The binary construction of the bar code roughly follows the specifications outlined by the Uniform Code Council.
  • ·        buildHexStr takes the long binary number generated by buildBinStr and converts it into XBM-compliant hex code. This function programmatically follows the same conversion steps outlined in the section explaining the anatomy of the XBM format. Listing D converts the decimal input to binary bar code.

Listing E takes the XBM hex values generated by the buildHexStr function and builds the XBM code necessary to display the graphic. The hex values are reiterated 40 times in the array to create a bar code that is 40 pixels in height.

One of the many methods of instantiating XBM graphics using JavaScript is by using javascript:imagename. All you need to do is create a variable that contains the XBM code and reference the variable within the image src tag. Check out Listing F for an example.

X-Bitmaps are an interesting option if you want to generate simple Web graphics on the fly using nothing but a browser. With a little imagination, you can create clever and useful applications harnessing the format's potential.

Editor's Picks