BMP Web Page Counter

An open source single-image ASP page counter with BMP graphics. In addition to the usual fonts, non-obvious displays like EIA Color Code, Charleston Code, Kanji Characters, and Hexadecimal are available.

This page has been read times. Or reloaded that many times. Or something.

The number you just read above is a dynamically-created single image (not several separate images) created without using any external libraries. That means only one image link on your web page and no DLL or OCX files. Nothing but pure VBS-ASP code. Just what you need on a hosted site that won't let you install graphics libraries! BMP works as an inline image in all modern browsers (Firefox, Mozilla, and IE4/5/6) and the image file sizes are so small compression isn't needed (anything small enough to fit in a single ethernet packet doesn't need compression).

The counter has font/digit information embedded in the ASP code. Changing colors and adding borders is fairly straightforward (directions are on this page). Click one of the below graphics to download the related counter:

All the counters are hard-coded to use the same "counter.mdb" database. You can replace or rename the ASP file to suit your needs and your page counts will be unchanged.

The CHARLESTON counter uses a code widely used by retailers to hide the cost of items in plain sight. C is 1, H is 2, and so on.
The EIA COLOR CODE counter uses a code widely used in the electronics industry. Black is 0, Brown is 1, Red is 2, and so on.
The WINGDINGS counter uses the cute but pretty much useless WingDings font to display the numbers.
The KANJI counter uses characters used for counting in Japanese and Chinese.
The ABACUS counter works by moving beads toward the center rail to count. Top beads are 5, bottom beads are 1.
The HEXADECIMAL counter displays the hex count of hits. For example, 255 hits would be displayed as FF.

Usage:
Here are the tags you need to insert. Just define an image and use this (corrected to your actual counter location) as the image source:

http://127.0.0.1/counter.asp

Be sure your html editor doesn't put image size in the tag! Remember, the image width changes as the number of digits increases.

If you want to specify the number of digits (forcing leading zeros so you'll have a fixed size graphic), try something like this:

http://127.0.0.1/counter.asp?digits=4

If you need to reset the counter to a particular value (back to zero or up to a high fake value), try putting this in your page as a tag and hitting it:

http://127.0.0.1/counter.asp?count=0

This counter can only be reset from the page it counts, so there is no need to bother with user accounts or passwords or other foolishness. If you want to reset the counter, put a reset link on your page and remove the reset link after you use it. Simple. Sure, you could also directly edit the database to reset a counter, but maybe you don't have a copy of Microsoft Access.

Installation:
Put the "counter.asp", "counter.mdb", and "counter.ldb" file all together in the same folder somewhere on your Windows server. You'll need to set your file permissions up to allow the IUSR account to have write permissions on your "counter.mdb" file. Give the IUSR account write (but not delete) permissions on the zero-byte "counter.ldb" file.

Database Location:
The counter ASP code assumes you'll have a "counter.mdb" in the same directory. Feel free to change the code if you want. I couldn't use any other directory on this sample code because I have no idea what directory structure you have on your server! The counter will try to create the MDB file if it doesn't exist, but it will fail because it won't have write permission... Unless you're running on Win9x in which case the counter will succeed in creating the .MDB file because Win9x has no security at all!

Colors:
It's easy to change the colors to anything you want. In the ASP code in the ArrayToBMP function, you'll see code like this:

strBuffer = strBuffer & ChrB(255) & ChrB(255) & ChrB(255) & ChrB(0) 'White - 0
strBuffer = strBuffer & ChrB(0) & ChrB(0) & ChrB(0) & ChrB(0) 'Black - 1
strBuffer = strBuffer & ChrB(0) & ChrB(0) & ChrB(255) & ChrB(0) 'Red - 2
strBuffer = strBuffer & ChrB(0) & ChrB(255) & ChrB(0) & ChrB(0) 'Green - 3
strBuffer = strBuffer & ChrB(255) & ChrB(0) & ChrB(0) & ChrB(0) 'Blue - 4
strBuffer = strBuffer & ChrB(255) & ChrB(255) & ChrB(0) & ChrB(0) 'Cyan - 5
strBuffer = strBuffer & ChrB(255) & ChrB(0) & ChrB(255) & ChrB(0) 'Magenta - 6
strBuffer = strBuffer & ChrB(0) & ChrB(255) & ChrB(255) & ChrB(0) 'Yellow - 7
strBuffer = strBuffer & ChrB(192) & ChrB(192) & ChrB(192) & ChrB(0) 'Light Gray - 8
strBuffer = strBuffer & ChrB(128) & ChrB(128) & ChrB(128) & ChrB(0) 'Dark Gray - 9
strBuffer = strBuffer & ChrB(0) & ChrB(0) & ChrB(128) & ChrB(0) 'Dark Red - 10
strBuffer = strBuffer & ChrB(0) & ChrB(128) & ChrB(0) & ChrB(0) 'Dark Green - 11
strBuffer = strBuffer & ChrB(128) & ChrB(0) & ChrB(0) & ChrB(0) 'Dark Blue - 12
strBuffer = strBuffer & ChrB(128) & ChrB(128) & ChrB(0) & ChrB(0) 'Dark Cyan - 13
strBuffer = strBuffer & ChrB(128) & ChrB(0) & ChrB(128) & ChrB(0) 'Dark Magenta - 14
strBuffer = strBuffer & ChrB(0) & ChrB(128) & ChrB(128) & ChrB(0) 'Dark Yellow - 15

The comments at the end of each line reminds me what colors and palette order things are in. The first line is used for the background, and the second line is used for the font color. On the black-and-white counters, nothing else is used -- but all 16 lines have to be there because I generate 16-color bitmaps! If you decided you wanted a yellow background and red text, you could directly edit the values for the appropriate lines or just shuffle the lines around like this:

strBuffer = strBuffer & ChrB(0) & ChrB(255) & ChrB(255) & ChrB(0) 'Yellow - 7
strBuffer = strBuffer & ChrB(0) & ChrB(0) & ChrB(255) & ChrB(0) 'Red - 2
strBuffer = strBuffer & ChrB(255) & ChrB(255) & ChrB(255) & ChrB(0) 'White - 0
strBuffer = strBuffer & ChrB(0) & ChrB(0) & ChrB(0) & ChrB(0) 'Black - 1
strBuffer = strBuffer & ChrB(0) & ChrB(255) & ChrB(0) & ChrB(0) 'Green - 3
strBuffer = strBuffer & ChrB(255) & ChrB(0) & ChrB(0) & ChrB(0) 'Blue - 4
strBuffer = strBuffer & ChrB(255) & ChrB(255) & ChrB(0) & ChrB(0) 'Cyan - 5
strBuffer = strBuffer & ChrB(255) & ChrB(0) & ChrB(255) & ChrB(0) 'Magenta - 6
strBuffer = strBuffer & ChrB(192) & ChrB(192) & ChrB(192) & ChrB(0) 'Light Gray - 8
strBuffer = strBuffer & ChrB(128) & ChrB(128) & ChrB(128) & ChrB(0) 'Dark Gray - 9
strBuffer = strBuffer & ChrB(0) & ChrB(0) & ChrB(128) & ChrB(0) 'Dark Red - 10
strBuffer = strBuffer & ChrB(0) & ChrB(128) & ChrB(0) & ChrB(0) 'Dark Green - 11
strBuffer = strBuffer & ChrB(128) & ChrB(0) & ChrB(0) & ChrB(0) 'Dark Blue - 12
strBuffer = strBuffer & ChrB(128) & ChrB(128) & ChrB(0) & ChrB(0) 'Dark Cyan - 13
strBuffer = strBuffer & ChrB(128) & ChrB(0) & ChrB(128) & ChrB(0) 'Dark Magenta - 14
strBuffer = strBuffer & ChrB(0) & ChrB(128) & ChrB(128) & ChrB(0) 'Dark Yellow - 15

In addition to changing colors, you can wrap a border around your counter using tables or CSS in your web page:

Fonts:
If you're interested in making your own, the actual counter digits are stored in the variable "strImageData" in the "MakeBitmap" function. Start out with a simple screen capture of the numbers 0 through 9, then use a graphics program to chop them into separate identically-sized images. Then use the IrfanView program to save each digit as a PBM file with "Ascii encoding". If you look at the resulting pbm file with WordPad, you get something like this:

P1
# Created by IrfanView
8 11
0 1 1 1 1 1 1 0 1 0 0 0 0 0 1 0 0 0 0 0 0 0 1 0 0 0 0 0 0 1 0 0 0 0 0 0 0 1 0 0 
0 0 0 0 0 1 0 0 0 0 0 0 1 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 1 0 0 0 0 0 0 1 0 0 0 0 
0 0 0 1 0 0 0 0

Delete the first three lines, unwrap the text, remove all the spaces, and paste the ones and zeros into the strImageData variable. Start with zero and keep pasting data into the strImageData variable until you get through number nine. Change the "FONT_HEIGHT" and "FONT_WIDTH" constants to show the actual height and width of your individual characters and you're done.

Why not have separate graphics files? Because it's easier to generate a new graphic by directly going to the needed bits in a single string than it would be to have to read, decode, join, and re-encode ten separate graphic files every time. I say do the hard work once and let the script (and your server) take it easy.

Modifications:
If you're an ASP programmer, it should be fairly easy for you to modify this code to use the HTTP "referer" to check a "white list" of sites allowed to use the counter. You can also change this from a hit counter to a unique visit counter by adding a bit of session code. No, I'm not going to provide sample code to do either of these tasks.

As seen at:
Aspin.com in the Hit Counters section as the "ASP (pure) One-Image Counter"
Planet Source Code in the Server Side section as the ASP (pure) single-image hit counter
ScriptSearch.com in the Counters - ImageBased section as the BMP Web Page Counter
SiteScripts.com in the ASP Counters section as the ASP Single-Image Counter

Lost? Look at the site map.

Bad links? Questions? Send me mail.