Published: Wednesday, December 13, 2000
Representing Numbers Graphically
On a number of sites you'll see a page counter or some sort of dynamic number
displayed as an image as opposed to a text string. The most classic example is the
page counter, where you'll see some blurb like:
This page has been visited:
times since December 1st, 2000
However, this is not the only application when you might like to display a number as a string
of digits. Perhaps you'd like to display the time:
:
In a little side project of mine I needed such functionality, to display various numbers as
an image. I decided to write up a short little function that would encompass this functionality.
Before you can use this function, though, you need to go find ten images that represent the digits
between 0 and 9. You can grab a zip file containing the
digits you see above, or you can snake them from image repositories like
http://www.schoenster.com/images/digits/
or http://www.chrome-concepts.com/purp/freecds.htm
or http://www.uncg.edu/images/digits/digits.html.
(All of these sites were found with a search on image and digits at
Google.com.)
Next, save these ten digit images in some directory, like /digits.
Now that you have your digit images saved we're ready to examine the ConstructDigits
function. This function accepts a single parameter, iValue, which represents a
numerical value. The function returns an HTML string with the appropriate HTML IMG
tags to generate an image representing the value of iValue.
The first thing ConstructDigits does is ensure that iValue is a number,
does not contain any decimal points, and is greater than or equal to zero. While these check
could be done with a single regular expression,
I've opted to use three If ... Then statements:
Function ConstructDigits(iValue)
'This function accepts a single parameter, iValue, and
'returns HTML containing a series of images representing
'a graphical image of the value in iValue
'Start by ensuring iValue is a number
If Not IsNumeric(iValue) then
ConstructDigits = iValue & " IS NOT A NUMBER!"
Exit Function
End If
'Can't show decimals!
If InStr(1, iValue, ".") then
ConstructDigits = "CANNOT CONTAIN DECIMALS!"
Exit Function
End If
'Can't show negative numbers!
If iValue < 0 then
ConstructDigits = "CANNOT DISPLAY NEGATIVE NUMBERS!"
Exit Function
End If
... TO BE EXAMINED ...
End Function
|
[
View a live demo!]
The first check uses the IsNumeric
function to determine if iValue is indeed numeric. If iValue is not numeric, the
function returns a warning. Since numbers with decimals and negative numbers are still considered numeric numbers,
we need two more checks to account for these two other cases. The next check uses
InStr to check if iValue
contains a decimal point; if it does, a warning is returned. Finally, the last check determines if the value of
iValue is less than zero; again, if it is, a warning is returned.
The only remaining part of the ConstructDigits function is the actual work of displaying a number
as an image. This is accomplished with a For ... Next loop that iterates through each character of
iValue, creating the correct image tag.
Function ConstructDigits(iValue)
' ... CODE IN ABOVE LISTING REMOVED FOR BREVITY ...
Dim iLoop, strResults
For iLoop = (Len(iValue) - 1) to 0 STEP -1
strResults = strResults & "<img src=""/digits/" & _
Mid(CStr(iValue),Len(iValue) - iLoop,1) & ".gif"" border=0>"
Next
ConstructDigits = strResults
End Function
|
[
View a live demo!]
The above code example assumes that the digit images are stored in the format N.gif (that is,
that the image for digit 1 is stored as 1.gif and that these images are stored in the
/digits directory. You may need to make some slight changes to the code if either of these conditions
aren't true for your digit images.
Simplifying ConstructDigits |
|---|
The ConstructDigits function presented in the article can pretty much be
reduced to a single line of code:
(iValue + "").replace(/([0-9])/g, '<img src="$1.gif">' )
Since I do all of my scripting in JavaScript, the code above is in
JavaScript. The replace function is also available in VBScript, on the
RegExp object, and should work the same way. (For more information on
Regular Expressions with VBScript, be sure to read: An Introduction
to Regular Expressions with VBScript!)
-- Dennis M.
|
Well, there you have it, a means to display a number as an image. Now that we have this part licked, you may wish
to know about some articles that could make use of the ConstructDigits function. Here are some articles
that could be easily adapted to use the ConstructDigits function to snaz up their display!
Happy Programming!
Attachments:
View the live demo!
Download a ZIP of the digit images
