XBM Image Creation Library for JavaScript
As you may have seen elsewhere on my website, I've become somewhat fond of the XBM image format and the ease with which one can be created via JavaScript. All of this playing around has culminated in this library. A JavaScript file that provides an XBMImage object with a multitude of manipulation commands to allow you to create XBM images on the fly on your web page. It's only 8k, too!
Feel free to use this on your own web page. Please let me know if you do use it.
Note, this is free and just for fun... There are no guarantees or warranties or anything like that... in other words, don't sue me.
Requirements: The only real requirement is JavaScript since it should work in almost any browser that supports it. In general, Netscape 3 or above, or Internet Explorer (not sure what is the minimum version, but it works in 5.0 and above, and should work in earlier ones as well).
Netscape 3 only works with 32x32 XBM images... no larger, no smaller. Anything else will look like gibberish. It also won't clear the image properly if you set the src to a new image.
Download the file xbmDraw.js and include it on your web page with
<SCRIPT language="JavaScript" SRC="xbmDraw.js"></SCRIPT>
Then, from script create a new image with:
var myxbm = new XBMImage(width,height,name);
You can then manipulate the new object with the following methods:
- draw(x,y)
- draw a dot
- clearImage()
- clear the entire image
- drawLine(x1,y1,x2,y2)
- draw a line between two points
- drawCircle(center_x,center_y,radius)
- draw a circle with the given radius and center.
- drawCircleCoords(x1,y1,x2,y2)
- draw a circle that fits within the box specified by the two points.
- drawBox(x1,y1,x2,y2)
- draw a box with the given corner locations.
- drawBoxFilled(x1,y1,x2,y2)
- draw a filled box.
- saveFrame(index)
- store a copy of the current image at the given "frame" index.
- showFrame(index) - set the current image to the copy stored at the given "frame" index.
- setXBM(xbm_string)
- load an existing XBM image (doesn't currently parse the width/height, just the data).
- getXBM()
- get the XBM string for the current image.
There are a few other methods and properties, but they're meant for internal use.
Once you have created your XBM, you can use it on a web page with an IMG tag like the following:
<IMG src="javascript:myxbm.getXBM()" name="myxbmimg">
The image can later be changed to another "frame" with e.g.:
myxbm.showFrame(2);
document.images[image_name_or_index].src = "javascript:myxbm.getXBM()";
Even if that was the original src value.
Last Modified: April 14, 2002