An ASP.NET Rating System
By Paul Apostolos
In Part 2 we looked at how to grab the total ranking for a given
picture. In this part we'll look at how to dynamically render the image in an ASP.NET Web page.
While the image display could be dynamically generated from a single GIF (by, perhaps, manipulating the
width of the GIF), or perhaps by having a set of static images, each of which represents the various rankings,
I decided to have ASP.NET render the proper image on the fly using the .NET Framework's
System.Drawing classes. While it would be more efficient to just use a single GIF, I chose
this approach to learn more about rendering images on the fly with ASP.NET.
Drawing the Image in ASP.NET
To dynamically render the image I create an instance of the
Bitmap class and pass it the
constants MaxImageLength and MaxHeight, like so:
Dim objBitmap as Bitmap = new Bitmap(MaxImageLength, MaxImageHeight)
|
Then I need to create an instance of the Graphics class based on the Bitmap
class I just created:
Dim objGraphics as Graphics = Graphics.FromImage(objBitmap)
|
For more information regarding the Bitmap and Graphics classes see the
ASP.NET: Tips, Tutorials, and Code
sample chapter.
Since I want my image to be green with a silver background I will set up brushes for each color.
Instead of using a constant green from the color pallatte I wanted to be sure to match my site's
color exactly so, I use the FromArgb method of the Color Object.
To use this method you must supply the RGB colors in numeric format for each color channel. According
to the Photoshop Color Picker the green I use for my site is Red 88, Green 128, and Blue 86; therefore,
I specified the green brush like so:
Dim objBrushGreen as SolidBrush = new SolidBrush( Color.FromArgb( 88, 128, 86 ))
|
The silver is a little easier becauses it uses a named constant from the
System.Drawing Color Members. Therefore, I create the silver brush like so:
Dim objBrushGray as SolidBrush = new SolidBrush(Color.Silver)
|
I start by filling the entire rectangle using the FillRectangle method of the
Graphics class. This method's parameters are: brush, starting X pixel, starting Y pixel,
length to draw, height to draw. Because I want to fill the entire image with silver (this way when
I apply a length of green that represents the rating the remaining image will still be silver) I
use the following:
objGraphics.FillRectangle(objBrushGray, 0, 0, MaxImageLength, MaxImageHeight)
|
Next, I draw the rating representation into the silver rectangle. I starting at a y position of 2 and
filling to a width of MaxImageHeight - 4. This will leave the underlying silver showing and simulate
a 2 pixel border on the top and bottom of the image.
Remember the variable Rating is set to an integer between 1 and 168. I will use it as
the length parameter of the FillRectangle method.
objGraphics.FillRectangle(objBrushGreen, 0, 2, Rating , MaxImageHeight - 4)
|
I apply the scale by drawing a 2 pixel wide gray stripe the entire height of the image at six different points. The first and last stripes are to apply the 2 pixel border.
|
I'm all done drawing now all I have to do is send the image to the browser. This is done by specifying
the content type of the page's response (set it to image/jpeg, since we're creating a JPEG
image) and then write the binary content of the rendered image to the Response object's OuputStream
and do a little cleanup:
|
At this point we have a page that allows the user to rate the photo and a page to dynamically generate an image displaying the ranking. All that we need now is a user control that we can plug into each page where a photo is displayed that shows the ranking for a given image. We'll look at how to build this user control in Part 4.
