Creating Graphical Numbers | Microsoft ASP.NET Web Matrix Starter Kit (Bpg-Other)

You can make your hit counter more interesting by creating what I ll call graphical numbers not just numbers in a label, but numbers created from graphics. Using graphical numbers not only adds artistic flair to your hit counter, it has the additional benefit of making your hit counter compatible with more browsers. Non Internet Explorer browsers don t always support all of the properties of the Label control that you might have set earlier in this chapter, in the section Creating a Page That Counts Hits.

The possibilities for creativity with your hit counter are endless. You can create a hit counter that looks like an odometer, a child s handwriting, an LED display, or whatever you like. The choices are limited only by what you can do using your favorite graphics application. Figure 8-4 shows the same page that appeared in Figure 8-1, this time using graphical numbers.

click to expand
Figure 8-4: A hit counter displayed using graphical numbers.

The basic strategy for creating graphical numbers is this: you create graphics files for each digit that you can display (10 in all, for 0 through 9). You perform the counter calculations as usual. When you have a new counter to display, you parse the counter value a digit at a time. For each digit, you create an image control on the fly, setting its image file to the corresponding graphics file.

This is not a very sophisticated strategy, to be sure. However, it s comparatively simple to understand and easy to code.

Creating the Graphics Files

For the graphical display of the counter, you ll need a series of graphics files for the digits. Any legitimate image source is fine for these files for example, you can use clip art. The ideal format for the graphics files is GIF or PNG, both of which are formats that allow you to create graphics with a transparent background. A transparent background enables you to see the graphics on a background of any color. If it s not practical for you to use GIF or PNG files, however, you can use JPG files. (I would not use BMP files only because BMP files are not compressed the way JPG files are, and would therefore make your page much larger.)

On the CD

To save you the trouble of creating graphics files, I ve included a set on the companion CD. To use these graphics files, copy the files 0.PNG through 9.PNG from the images folder on the companion CD to the \images folder beneath C:\WebMatrix folder on your hard disk.

If you want to create your own graphics files, the following procedure demonstrates one possible technique, using Windows Paint. If you have other graphics tools, feel free to use them. (In fact, Paint is not a particularly capable tool for creating the graphics I suggest, so I hope that you do have a better tool.)

Create graphical numbers using Paint

In Windows, open Paint.
Using the Text tool in the Toolbox, draw a box on the viewing area. Make the box about 1 inch square. If the Text toolbar isn t already open, choose Text Toolbar from the View menu.
Type in the digit 0.
Set the font and size so that the digit looks good to you. For example, I used the font called Comic Sans MS and set the size to 48 points. Optionally, set the color of the digit by clicking a color in the color box.
Now reduce the size of the graphic to just large enough to hold the digit. First click the Select tool in the Toolbox and then draw a box around the digit. Drag the box up to the top left corner. Then shrink the viewing area to just enough to hold the digit. You can either drag the handles on the area or choose Attributes on the Image menu and set the width and height attributes. I set the width to 35 and height to 46, in this example, to accommodate the 48-point Comic Sans MS digits I created.
Save the file as 0.PNG (or 0.GIF) in the \images folder beneath your WebMatrix folder. In the Save As dialog box, select PNG (or GIF) from the Save As Type list at the bottom. When you re done, you ll have a file named 0.PNG in the C:\WebMatrix\images folder.
In Paint, choose New from the File menu. Repeat the process for each digit until you have files 0.PNG through 9.PNG, all in the \images folder.

For my graphics files, I made each digit a different color. I tried to select colors that would show up well against a white background. I made all the 10 digit files exactly 46 pixels high, but I varied the width proportionally, anywhere from 33 pixels for the digit 1 to 38 pixels for the digit 4.

Unfortunately and strangely, Paint doesn t have an option to save PNG and GIF files with a transparent background. If you re using another graphics tool, see whether that tool offers an option for transparent PNG or GIF files, and if so, do take advantage of it.

Displaying the Graphical Numbers

With 10 graphics files at the ready, we can now display the hit counters using them. As summarized earlier, we re going to parse the counter value and display one of the graphical number files for each digit in the counter.

To display a digit, you ll create an Image control programmatically. Up to now, you ve added controls by dragging them from the Toolbox in Web Matrix. But it s quite possible to conjure up controls at run time and add them to the page. When you create controls programmatically, you need to put them into a container. A common container is the PlaceHolder control, which in fact was designed for situations just like this.

Keep in mind that once you re in the business of adding controls at run time, you re in it for good. Controls that you create programmatically are added to the page, but they re not stored as part of the page s HTML, as are controls that you drag from the Toolbox. (Programmers tend to say that the controls aren t persisted. ) As you know, when the page performs a round trip, it s re-created from scratch. If you want your dynamically created controls to appear on the page again, you have to create them again. The implication for us is that if you want to create controls on the fly, you should always do so in the Page_Load event handler so that the controls are re-created each time the page makes a round trip.

This program converts the (integer) counter into a string that s left- padded with zeros and stores the string version of the counter in the variable currentCountString.

Because we can determine from the string s Length property how many characters the currentCountString string has, we can use a For-Next loop to go through the string digit by digit. (Remember that we start at 0 and have to therefore decrease the Length value by 1 to get an accurate count of characters.) The variable i is used here just as a loop counter. Its value starts at 0 and is automatically incremented by 1 with each iteration of the For-Next loop.

We use the Length property of the currentCountString to determine the upper limit for the For-Next loop. Although you formatted the number using the format string D5, and might therefore assume that your number will always be 5 characters long, if the counter gets to 100,000, the number will be 6 characters long. In any event, as a general rule it s always a good idea to set the loop limit dynamically so that you don t code assumptions about the length of the string into your program.

To get an individual character out of the currentCountString variable, we use the Substring method, which allows you to pluck selected characters out of a string. In our example, we tell Substring to extract a single character at position i (in other words, first at position 0, then at position 1, and so on). Once we have the digit, we can concatenate it with .png to come up with the name of the graphics file we need. If you used some other graphics file type, you d have to substitute the appropriate extension.

The program then creates a new Image control and stores it in the variable img. It sets the imageUrl property to the graphics file. In our case, the name of the file is prefixed with images\ so that the imageUrl property has the complete path of the graphics file.

Finally, the program puts the new Image control into the PlaceHolder control. The PlaceHolder control has a property named Controls that s a collection (similar to an array) of the controls it contains. The Controls collection starts with no items in it, but as we create each new Image control, we add it to the collection. By the end of the program, the PlaceHolder control will contain an image for each digit.

Run the page and verify that the counter shows up graphically. If you don t see graphics just boxes with red x s in them make sure that your graphics are in the C:\WebMatrix\images folder (or the image folder under whatever folder you keep your Web pages in) and that they have the correct file name extension.

The technique of adding controls to a Placeholder control is the standard way to add a control on the fly: create a variable to hold the new control, create an instance of the control, and set any properties you need for the control. You then add the new control to the page by adding it to the Controls collection of whatever container control you decided to use. We add a new control at least five times in our example, once per digit, but the same technique applies whether you re adding a single control or a hundred.