Animating Graphics in ASP.NET with GDI+
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>