Animating Graphics in ASP.NET with GDI+

Introduction

At some level, I suspect most programmers want the best of Windows development—rich clients—and Web development—high bandwidth and easy deployment. The fact is that many people and entities seem to be working on it, openly.

Asynchronous HTTP (which you have probably heard of as ATLAS or AJAX) is blurring the line between always connected rich Windows forms clients and highly available web forms clients. Microsoft's implementation of AJAX (now called ASP.NET AJAX 1.0) permits programmers to roundtrip to the web server in a way that is almost completely transparent to the end user. Non-transparent roundtrips cause a full page repaint. AJAX roundtrips do not. AJAX trips to the server can be implemented to update only a very small part of a client page.

In an earlier article, "Rendering Graphics in ASP.NET with GDI+", I demonstrated how to use user controls, GDI+, and an HTML image to draw on a web page much as you might draw on a WinForm. This is a follow up of that article. In this part, I will demonstrate how to use AJAX web controls to make the click in Part 1 tick; that is, you will animate the clock distinctly from other elements on the page. Begin by reviewing the previous article, but refer to that article for more specific details.

Reviewing Rendered Images

In the first half of this project, you were shown how to create a dynamic bitmap, draw on it, and write the result to the response stream. By writing to a user control's response stream, you avoided disrupting the rest of the page. Here is a summary of the elements used to create the dynamic clock from "Rendering Graphics in ASP.NET with GDI+":

  • Create an ASP.NET Web project (VS2005 was used for the demo)
  • Add a UserControl to that project
  • In the UserControl's code behind dynamically create a Bitmap object, draw on the bitmap, rendering the dynamic image
  • Save the drawn bitmap to the output stream for the request
  • Add a web page and drag and drop the UserControl onto the web page
  • Add a second web page with an HTML image wherever you will want to the rendered drawing to appear
  • Set the image's (<img>) source property (for example, <img src="clockpage.aspx">) to the web page with the UserControl on it not to an actual image URL

That's all you need to do. For the code, see the referenced Part 1 of this article.

Animating the Rendered Image

Now that you have an image, how do you animate it?

Everyone knows about animated GIFs, but these are generally a half dozen images that are predefined and stored in one GIF like a repeating slide show. For your purposes, I am talking about images that are rendered based on real, dynamic data, like the changes in a stock price. To animate rendered images, you need the basic rending mechanism from the first part of this article, and you need AJAX.

Built on top of AJAX are the ScriptManager, TimerControl, and UpdatePanel. (There are more AJAX Web controls, but these will do for your purposes.)

The main page—named default.aspx—contains an HTML image control. The image control's source property loads the rendered image dynamically; hence, you need to use AJAX to send requests to update the image part of the web page. To do this, you need to add a ScriptManager, UpdatePanel, and TimerControl to the default page.

Adding AJAX Controls to Your Project

You can download and install the AJAX controls from http://ajax.asp.net/Default.aspx. The Microsoft.Web.Atlas.dll can be added to your Toolbox, permitting you to drag and drop the needed controls from Visual Studio's toolbox onto your web page.

Adding the ScriptManager

Once ASP.NET AJAX 1.0 is installed and the Microsoft.Web.Atlas.dll has been added to your toolbox, drag a ScriptManager from the Toolbox onto the default.aspx page (or whatever page you are using). Right-click on the ScriptManager's smart tag and check EnablePartialRendering (see Figure 1). You will need only one ScriptManager per AJAX-enabled page.

Figure 1: Enabled partial rendering for the ScriptManager.

The ASP that includes the ScriptManager should look something like the code in bold in Listing 1. Refer to Listing 1 for the remainder of the article.

Listing 1: The default.aspx page's (elided) ASP listing.

<%@ Language AutoEventWireup="false" CodeFile="Default.aspx.vb"
             Inherits="_Default" %>

<%@ Register Assembly="Microsoft.Web.Atlas"
             Namespace="Microsoft.Web.UI.Controls"
             TagPrefix="cc1" %>
<%@ Register Assembly="Microsoft.Web.Atlas"
             Namespace="Microsoft.Web.UI" TagPrefix="cc2"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
   <title>Untitled Page</title>
</head>
<body>
   <id="form1" runat="server">
      <cc2:ScriptManager ID="ScriptManager1" runat="server"
                         EnablePartialRendering="True">
         </cc2:ScriptManager>
      <cc1:TimerControl ID="TimerControl1" runat="server"
                        Interval="1000">
   </cc1:TimerControl>
   <div>
      <div style="border-right: red thin solid;
                  border-top: red thin solid; left: 0px;
                  border-left: red thin solid; width: 95px;
                  border-bottom: red thin solid; position: absolute;
                  top: 1px; height: 95px">
         <cc2:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
               <img src="ClockPage.aspx" runat="server"
                    id="Image1" />
            </ContentTemplate>
            <Triggers>
               <cc2:ControlEventTrigger ControlID="TimerControl1"
                                        EventName="Tick" />
            </Triggers>
         </cc2:UpdatePanel>
      </div>
   </div>
   </form>
</body>
</html>

Adding the TimerControl

Next, YOU need to add a TimerControl. For Your purposes, this works just like a Windows Timer. The Timer will be used to kick off the AJAX roundtrip every second. To complete the work with the TimerControl, set the Interval to 1000 (which is approximately one second). Listing 2 contains an excerpt from Listing 1 showing the ASP for the TimerControl.

Listing 2: An excerpt from Listing 1 showing the ASP for the TimerControl.

<cc1:TimerControl ID="TimerControl1" runat="server" Interval="1000">
</cc1:TimerControl>

Finishing Up with the UpdatePanel

The final step is to wrap the controls you want to update asynchronously using AJAX in an UpdatePanel. You can code the ASP manually or drag an UpdatePanel onto the default.aspx page and put the <img> in the UpdatePanel's <ContentTemplate>

The most important step is to specify what triggers the UpdatePanel's roundtrip behavior. This could be something like a click or client event; for your purposes, you want AJAX to do its thing every time the TimerControl ticks. The code for the UpdatePanel and its content template and triggers is provided in Listing 1 and excerpted in Listing 2.

Listing 2: Adding the UpdatePanel, content and trigger.

<cc2:UpdatePanel ID="UpdatePanel1" runat="server">
   <ContentTemplate>
      <img src="ClockPage.aspx" runat="server" id="Image1"/>
   </ContentTemplate>
   <Triggers>
      <cc2:ControlEventTrigger ControlID="TimerControl1"
                               EventName="Tick" />
   </Triggers>
</cc2:UpdatePanel>

That's all there is to it. When you run the page now, the clock should tick and draw about every second.

Summary

Should you use AJAX for something as trivial as a clock? Unless you are building a web clock, probably not. The example was designed to show you that dynamic GDI+ and rendered animation is possible now. Simply install ASP.NET AJAX 1.0 and a few controls later and you have round trip asynchronous programming for the web.

What's more important is that one day (soon) it won't matter what platform you are programming for. Programmers will get the best of Windows and the web and use the same tools; whether the back end is squawking across HTTP, on the desktop, or something else simply describes how the bits are moving around. Even more important is that some day may be here. With Windows Vista, WPF (Windows Presentation Foundation), and XAML (Extended Application Markup Language, pronounced zammel), the lines differentiating Windows development and web development just got a little hazier.

About the Author

Paul Kimmel is the VB Today columnist for www.codeguru.com and has written several books on object-oriented programming and .NET. Check out his new book UML DeMystified from McGraw-Hill/Osborne. Paul is an architect for Tri-State Hospital Supply Corporation. You may contact him for technology questions at pkimmel@softconcepts.com.

If you are interested in joining or sponsoring a .NET Users Group, check out www.glugnet.org.

Copyright © 2007 by Paul T. Kimmel. All Rights Reserved.
Prepared for www.codeguru.com, VB Today.



Downloads

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • The first phase of API management was about realizing the business value of APIs. This next wave of API management enables the hyper-connected enterprise to drive and scale their businesses as API models become more complex and sophisticated. Today, real world product launches begin with an API program and strategy in mind. This API-first approach to development will only continue to increase, driven by an increasingly interconnected web of devices, organizations, and people. To support this rapid growth, …

  • 10 Rules that Make or Break Enterprise App Development Projects In today's app-driven world, application development is a top priority. Even so, 68% of enterprise application delivery projects fail. Designing and building applications that pay for themselves and adapt to future needs is incredibly difficult. Executing one successful project is lucky, but making it a repeatable process and strategic advantage? That's where the money is. With help from our most experienced project leads and software engineers, …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds