Home > .net 2.0, .net 3.5, c#, Visual Studio 2005, Visual Studio 2008, WordPress > Creating a Countdown Image Handler in ASP.NET

Creating a Countdown Image Handler in ASP.NET

November 11, 2007

I love WordPress—it’s by far one of the best packaged blogging engines I’ve come across and has kept my DIY tendancies at bay for several years now.  With the structure of WordPress, however, comes restrictions.  My biggest complaint is that I can’t place JavaScript tools or components on my page. 

In the past few months, one thing I would have liked to have was a little “countdown” to graduation, the holidays, whatever.  That’s brilliantly simple with JavaScript.  Meh. :(  I looked at a few other sources, but they required registration and made the images HUGE.

So, this afternoon while catching up on my Top Gear obsession on BBCA, I coded up a quick HttpHandler.

You can see an example of the image created by this on the right side of the blog—the Graduation countdown ticker.

Download Code: .NET 2.0

The handler accepts two optional variables, width and height, and two required variables, eventText and eventDate.

By default, the width of the image is 100px and the height is 120px—about the size of a standard small banner.

For this code, the most important namespaces are System.Drawing and System.Drawing.Imaging.

First, we need to create a new Bitmap image to hold our graphic.

Bitmap imageBitmap = new Bitmap(width, height);

Next, create a drawing pad, of sorts, in a Graphics object and associate it with our new bitmap image.

Graphics graphicObject = Graphics.FromImage(imageBitmap);

graphicObject.FillRectangle(

new SolidBrush(Color.White), 0, 0, width, height);

Since, by default, the background is Black, call FillRectangle (from 0,0 to the max width and height) to fill the background with White.

Our next task is to create a border around the image.  I chose a black border with a 2px width.  The draws are in order of top, left, right, and bottom lines.  Note: I’m sure there’s a better way to do this by creating an empty rectangle or something…

Pen borderPen = new Pen(Color.Black, 2);

 

graphicObject.DrawLine(borderPen,

new Point(0, 0),

new Point(width, 0));

 

graphicObject.DrawLine(borderPen,

new Point(0, 0),

new Point(0, height));

 

graphicObject.DrawLine(borderPen,

new Point(width, 0),

new Point(width, height));

 

graphicObject.DrawLine(borderPen,

new Point(0, height),

new Point(width, height));

Our final touch is to put the text onto the image.

Font textFont = new Font(“Arial”, 8, FontStyle.Bold);

SolidBrush textBrush = new SolidBrush(Color.Black);

 

string imageText = eventText + “: “ + countdown.Days + “d”;

 

graphicObject.DrawString(imageText,

textFont,

textBrush,

new PointF(2, 2),

null);

To “type” onto an image, create a “font brush” with the assigned color, font face, and size.  Instead of drawing a line or shape, use DrawString.  The fourth paramenter(new PointF(2,2)) specifies where to begin the text—you can get more creative than this and figure exact locations based on image size.

Finally, use the context supplied by the ProcessRequest method to return the image to the consumer.

context.Response.ContentType = “image/gif”;

imageBitmap.Save(context.Response.OutputStream, ImageFormat.Gif);

That’s it! 

If you’re interested in the source code, the link is at the top of the post—download and enjoy!  As I update the code, I’ll post it up.  This has lots of room for improvement, but is a nice starting point for those who want to put a dynamic image on their hosted blogs.🙂

%d bloggers like this: