Home    |    Support   |   Site Map

Site search
 
Back

How to create a Dynamic Weather Composite Image Map using ASP.NET and RSS

Technologies used
  • Neodynamic ImageDraw (2.0 or later) for ASP.NET
  • Microsoft .NET Framework (2.0 or later)
  • Microsoft Visual Studio .NET (2005 or later - Visual Web Developer Express Edition)
In the following guide we'll create a Dynamic Composite Image Map featuring Weather information for ASP.NET Web Applications using Neodynamic ImageDraw. The real time weather information will be obtained consuming Weather RSS Feed powered by Yahoo! Weather
NOTE
Yahoo! Weather RSS service is used in this Step-By-Step Guide for DEMOSTRATION PURPOSE ONLY. Please, read the "Terms of Use" topic at http://developer.yahoo.com/weather/ for more information about it if you pretend to use the RSS service at your live ASP.NET Web Application.
The idea behind this guide is to create Dynamic Composite Image Maps using predefined static images - such as a background and Yahoo! logo; and weather icons and texts that will change depending on the info returned by the Weather RSS Feed. To improve the visual appearance of the final image, some built-in ImageDraw's imaging effects - such as GlassTable (Reflection), Drop Shadows, Rotation, Scaling - are applied on some elements on the image. The following image tries to provide a preview of what we want to accomplish with this demo.
How to create a Dynamic Weather Composite Image Map using ASP.NET and RSS
The original files and info that will be merged to create the output weather composite image map.
In this guide we'll use Neodynamic ImageDrawMap control which is only available for ASP.NET 2.0 or later and Visual Studio 2005. Visual Web Developer Express Edition can be use as well.
Follow these steps
  • Open VS 2005 and create a new Website.
  • With the Default.aspx webform opened at design-time, add the following controls as is shown in the figure:
    • A TextBox
    • A Button
    • A Label
    • An ImageDrawMap
    How to create a Dynamic Weather Composite Image Map using ASP.NET and RSS
  • Create a new folder and name it "images". This folder will hold a lot of weather icons, a background image, and the Yahoo! Logo. Note: All images are provided for downloading at the end of this guide.
  • To consume the Weather RSS Feed provided by Yahoo!, we will have to design a .NET Class. Based on the info about Yahoo! Weather RSS services stated at http://developer.yahoo.com/weather we have created a simple .NET class (available for downloading at the end of this guide) that you should add to your website project under App_Code folder. Note: The WeatherRSS class is VERY simple and not all weather info provided by Yahoo! was implemented.
  • Now it's time to design the Weather Composite Image using ImageDrawMap control. The output Composite Image to generate will look like the following:

    How to create a Dynamic Weather Composite Image Map using ASP.NET and RSS

    There are two ways to compose the image using ImageDrawMap:
    • Write ASP.NET HTML code
    • Use the built-in ImageDraw Visual Editor
    In this guide will go through all steps by using Visual Editor which, in turn, will generate the needed ASP.NET HTML code.
    Using ImageDraw Visual Editor to compose the output image
    • Open Default.aspx webform in Design View

    • Launch ImageDraw Visual Editor right-clicking on ImageDrawMap control and selecting ImageDraw Visual Editor... To learn more about ImageDraw Visual Editor please read it in the product help documentation or clicking on Help button on the Visual Editor form.

    • ImageDraw controls are based on a Canvas and one or more Elements -ImageElement and TextElement. Follow these steps to get the Weather Composite Image:
      • Add an ImageElement - clicking on Image button - that will represent the background. This ImageElement will wrap a static image called background.png under images folder.

        Select the ImageElement on the left pane and set this property:
        • SourceFile: ~/images/background.png


        We will add a DropShadow effect on the element. Select the ImageElement and then, on the bottom left pane click on Add Action button and select DropShadow. Select the DropShadow action and set these properties:
        • Color: DimGray
        • Distance: 3
        Neodynamic ImageDraw Visual Editor

      • Add a TextElement - clicking on Text button - that will hold the U.S. City name and State. The Text property of this TextElement will be set at code-behind with the value returned by WeatherRSS .NET Class.

        Select the TextElement on the left pane and set these properties:
        • Font-Size: 18
        • ForeColor: White
        • StrokeColor: MediumBlue
        • StrokeWidth: 1
        • Text: City Name
        • X: 10
        • Y: 10


        We will add a GlassTable (Reflection) effect on the element. Select the TextElement and then, on the bottom left pane click on Add Action button and select GlassTable. Select the GlassTable action and set these properties:
        • ReflectionLocation: Custom
        • RelfectionLocationY: 10
        • ReflectionOpacity: 80
        Neodynamic ImageDraw Visual Editor

      • Add a TextElement that will hold a static text stating Today. Select the TextElement on the left pane and set these properties:
        • Font-Size: 18
        • ForeColor: Silver
        • Text: Today
        • X: 10
        • Y: 40


        We will add a Rotate action on the element. Select the TextElement and then, on the bottom left pane click on Add Action button and select Rotate. Select the Rotate action and set this property:
        • Angle: 90


        In addition, add an ImageElement that will hold the weather icon. Leave the SourceFile property empty because it will be set at code-behind with the value returned by WeatherRSS .NET Class. Select the ImageElement on the left pane and set these properties:
        • X: 25
        • Y: 35
        Neodynamic ImageDraw Visual Editor

      • Add 4 (four) TextElements that will hold the current Weather's Temperature, Condition, High and Low values respectively. The Text property of each TextElement will be set at code-behind with the values returned by WeatherRSS .NET Class.

        Select the first TextElement of this group and set these properties:
        • Font-Size: 48
        • ForeColor: White
        • Text: 00�
        • X: 95
        • Y: 40


        Select the second TextElement of this group and set these properties:
        • Font-Size: 12
        • ForeColor: White
        • StrokeWidth: 3
        • X: 90
        • Y: 78


        Select the third TextElement of this group and set these properties:
        • Font-Bold: True
        • Font-Size: 15.75
        • ForeColor: Red
        • Text: High
        • Y: 180
        • Y: 40


        Select the last one TextElement of this group and set these properties:
        • Font-Bold: True
        • Font-Size: 15.75
        • ForeColor: DeepSkyBlue
        • Text: Low
        • Y: 180
        • Y: 62
        Neodynamic ImageDraw Visual Editor

      • At the bottom of the Composite Image we'll show the weather information for the next day. Add a TextElement that will hold a static text stating Tomorrow. Select the TextElement on the left pane and set these properties:
        • Font-Size: 12
        • ForeColor: Azure
        • StrokeWidth: 2
        • Text: Tomorrow...
        • X: 10
        • Y: 105


        In addition, add an ImageElement that will hold the weather icon for Tomorrow. Leave the SourceFile property empty because it will be set at code-behind with the value returned by WeatherRSS .NET Class. Select the ImageElement on the left pane and set these properties:
        • X: 15
        • Y: 120


        We will add a Scale action on the element. Select the ImageElement and then, on the bottom left pane click on Add Action button and select Scale. Select the Scale action and set these properties:
        • HeightPercentage: 50
        • WidthPercentage: 50
        Neodynamic ImageDraw Visual Editor

      • Add 3 (three) TextElements that will hold the Weather's Condition, High and Low values for tomorrow respectively. The Text property of each TextElement will be set at code-behind with the values returned by WeatherRSS .NET Class.

        Select the first TextElement of this group and set these properties:
        • Font-Size: 12
        • ForeColor: LightGray
        • X: 50
        • Y: 122


        Select the second TextElement of this group and set these properties:
        • Font-Bold: True
        • Font-Size: 14.25
        • ForeColor: Red
        • Text: 00�
        • X: 50
        • Y: 138


        Select the third TextElement of this group and set these properties:
        • Font-Bold: True
        • Font-Size: 14.25
        • ForeColor: DeepSkyBlue
        • Text: 00�
        • X: 80
        • Y: 138
        Neodynamic ImageDraw Visual Editor

      • Finally, add an ImageElement that will represent the Yahoo! logotype. This ImageElement will wrap a static image called yahoologo.gif under images folder.

        Select the ImageElement on the left pane and set these properties:
        • SourceFile: ~/images/yahoologo.gif
        • X: 190
        • Y: 100


        We will add a Scale action on the element. Select the ImageElement and then, on the bottom left pane click on Add Action button and select Scale. Select the Scale action and set these properties:
        • HeightPercentage: 30
        • WidthPercentage: 30
        Neodynamic ImageDraw Visual Editor

      • That's it. Click on OK button. You should get something like the following at design time.

        Neodynamic ImageDraw at design time

  • We have used an ImageDrawMap control which will generate a HTML ImageMap tag. ImageDrawMap control features Hot Spot regions which are clickable regions.
    ImageDrawMap control exposes a Visual HotSpot Editor which highly simply the Hot Spot regions settings.
    In this demo, we'll add a hotspot region on the Yahoo! logotype in order to redirect the user to the Yahoo! website for more info.

    Follow these steps
    • Open Default.aspx webform in Design View

    • Launch ImageDrawMap HotSpots Editor right-clicking on ImageDrawMap control and selecting Map HotSpots Editor� To learn more about ImageDrawMap HotSpots Editor please read it in the product help documentation or clicking on Help button on the Visual Editor form.

    • ImageDrawMap feature three different hotspots regions but in our case we will use rectangular only. Follow these steps to get the hotspot region on the Weather Composite Image:
      • Add a Rectangular HotSpot region - clicking on Rectangle button - and set these properties:
        • AlternateText: Yahoo! Weather
        • NavigateUrl: http://weather.yahoo.com
        • Target: _blank


        And finally the rectangular coordinates for it:
        • Left: 190
        • Top: 100
        • Right: 255
        • Bottom: 115
        Neodynamic ImageDrawMap HotSpots Editor

        You'll see a green rectangular region on the output composite image letting you immediately feedback on where the hot spot region will be setting up.

      • That's it. Just click on OK button to accept the additions.

        <neoimg:ImageDrawMap ID="ImageDrawMap1" runat="server" CacheExpiresAtDateTime="" Visible="False" ColorDepth="Format16bpp">
    <Canvas Height="169" Width="273"  />
    <Elements>
       <neoimg:ImageElement Source="File" SourceFile="~/images/background.png">
           <Actions>
               <neoimg:DropShadow Color="DimGray" Distance="3" />
           </Actions>
       </neoimg:ImageElement>
       <neoimg:TextElement Font-Bold="True" Font-Size="18" ForeColor="White" StrokeColor="MediumBlue"
           StrokeWidth="1" Text="City Name" X="10" Y="10">
           <Actions>
               <neoimg:GlassTable ReflectionLocation="Custom" ReflectionLocationY="10" ReflectionOpacity="80" />
           </Actions>
       </neoimg:TextElement>
       <neoimg:TextElement Font-Size="18" ForeColor="Silver" Text="Today" X="10" Y="40">
           <Actions>
               <neoimg:Rotate Angle="90" />
           </Actions>
       </neoimg:TextElement>
       <neoimg:ImageElement Source="File" X="25" Y="35">
       </neoimg:ImageElement>
       <neoimg:TextElement Font-Size="48" ForeColor="White" Text="00º" X="95" Y="40">
       </neoimg:TextElement>
       <neoimg:TextElement Font-Size="12" ForeColor="White" StrokeWidth="3" Text="Text"
           X="90" Y="78">
       </neoimg:TextElement>
       <neoimg:TextElement Font-Bold="True" Font-Size="15.75" ForeColor="Red" Text="High"
           X="180" Y="40">
       </neoimg:TextElement>
       <neoimg:TextElement Font-Bold="True" Font-Size="15.75" ForeColor="DeepSkyBlue" Text="Low"
           X="180" Y="62">
       </neoimg:TextElement>
       <neoimg:TextElement Font-Size="12" ForeColor="Azure" StrokeWidth="2" Text="Tomorrow..."
           X="10" Y="105">
       </neoimg:TextElement>
       <neoimg:ImageElement Source="File" X="15" Y="120">
           <Actions>
               <neoimg:Scale HeightPercentage="50" WidthPercentage="50" />
           </Actions>
       </neoimg:ImageElement>
       <neoimg:TextElement Font-Size="12" ForeColor="LightGray" Text="Text" X="50" Y="122">
       </neoimg:TextElement>
       <neoimg:TextElement Font-Bold="True" Font-Size="14.25" ForeColor="Red" Text="00º"
           X="50" Y="138">
       </neoimg:TextElement>
       <neoimg:TextElement Font-Bold="True" Font-Size="14.25" ForeColor="DeepSkyBlue" Text="00º"
           X="80" Y="138">
       </neoimg:TextElement>
       <neoimg:ImageElement Source="File" SourceFile="~/images/yahoologo.gif" X="190" Y="100">
           <Actions>
               <neoimg:Scale HeightPercentage="30" WidthPercentage="30" />
           </Actions>
       </neoimg:ImageElement>
    </Elements>
    <MapHotSpots>
        <neoimg:RectangleHotSpot AlternateText="Yahoo! Weather" Bottom="115" Left="190" NavigateUrl="http://weather.yahoo.com"
            Right="255" Target="_blank" Top="100" />
    </MapHotSpots> 
</neoimg:ImageDrawMap>
  • The last step is to code the webform in order to consume the Weather RSS service. Copy and paste the following code for Page_Load and Button1_Click event procedures respectively.
    Visual Basic .NET 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Me.IsPostBack Then
        Me.ImageDrawMap1.Visible = False
        Me.Label1.Visible = False
End If
End Sub

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
    Dim info As WeatherRSS = WeatherRSS.GetWeatherInfo(Me.TextBox1.Text)

    If info.Location <> "" Then
        Me.Label1.Visible = False
        Me.ImageDrawMap1.Visible = True

        'Update ImageDrawMap elements

        'Set output image id/name

        Me.ImageDrawMap1.OutputImageName = Me.TextBox1.Text

        'Set location

        Dim txt As Neodynamic.WebControls.ImageDraw.TextElement = CType(Me.ImageDrawMap1.Elements(1), Neodynamic.WebControls.ImageDraw.TextElement)
        txt.Text = info.Location

        'Set today's weather icon

        Dim icon As Neodynamic.WebControls.ImageDraw.ImageElement = CType(Me.ImageDrawMap1.Elements(3), Neodynamic.WebControls.ImageDraw.ImageElement)
        icon.Source = Neodynamic.WebControls.ImageDraw.ImageSource.File
        If info.TodayConditionCode = "" Then
            info.TodayConditionCode = "3200"
        End If
        icon.SourceFile = Server.MapPath("~/images/" & info.TodayConditionCode & ".png")

        'Set current temperature

        txt = CType(Me.ImageDrawMap1.Elements(4), Neodynamic.WebControls.ImageDraw.TextElement)
        If info.TodayConditionTemp <> "" Then
            info.TodayConditionTemp += "�"
        End If
        txt.Text = info.TodayConditionTemp

        'Set today's condition

        txt = CType(Me.ImageDrawMap1.Elements(5), Neodynamic.WebControls.ImageDraw.TextElement)
        txt.Text = info.TodayConditionText

        'Set today's high and low temp

        txt = CType(Me.ImageDrawMap1.Elements(6), Neodynamic.WebControls.ImageDraw.TextElement)
        txt.Text = info.TodayConditionHi & "�"
        txt = CType(Me.ImageDrawMap1.Elements(7), Neodynamic.WebControls.ImageDraw.TextElement)
        txt.Text = info.TodayConditionLo & "�"

        'Set tomorrow's weather icon

        icon = CType(Me.ImageDrawMap1.Elements(9), Neodynamic.WebControls.ImageDraw.ImageElement)
        icon.Source = Neodynamic.WebControls.ImageDraw.ImageSource.File
        If info.TomorrowConditionCode = "" Then
            info.TomorrowConditionCode = "3200"
        End If
        icon.SourceFile = Server.MapPath("~/images/" & info.TomorrowConditionCode & ".png")

        'Set tomorrow's condition

        txt = CType(Me.ImageDrawMap1.Elements(10), Neodynamic.WebControls.ImageDraw.TextElement)
        txt.Text = info.TodayConditionText

        'Set tomorrow's high and low temp

        txt = CType(Me.ImageDrawMap1.Elements(11), Neodynamic.WebControls.ImageDraw.TextElement)
        txt.Text = info.TomorrowConditionHi & "�"
        txt = CType(Me.ImageDrawMap1.Elements(12), Neodynamic.WebControls.ImageDraw.TextElement)
        txt.Text = info.TomorrowConditionLo & "�"
    Else
        Me.Label1.Visible = True
        Me.ImageDrawMap1.Visible = False
    End If
End Sub
    Visual C# .NET 
    protected void Page_Load(object sender, EventArgs e)
{        
    if (!IsPostBack)
    {
        this.ImageDrawMap1.Visible = false;
        this.Label1.Visible = false;
    }
}

protected void Button1_Click(object sender, EventArgs e)
{
    WeatherRSS info = WeatherRSS.GetWeatherInfo(this.TextBox1.Text);

    if (info.Location != "")
    {
        this.Label1.Visible = false;
        this.ImageDrawMap1.Visible = true;

        //Update ImageDrawMap elements

        //Set output image id/name
        this.ImageDrawMap1.OutputImageName = this.TextBox1.Text;

        //Set location
        Neodynamic.WebControls.ImageDraw.TextElement txt = this.ImageDrawMap1.Elements[1] as Neodynamic.WebControls.ImageDraw.TextElement;
        txt.Text = info.Location;

        //Set today's weather icon
        Neodynamic.WebControls.ImageDraw.ImageElement icon = this.ImageDrawMap1.Elements[3] as Neodynamic.WebControls.ImageDraw.ImageElement;
        icon.Source = Neodynamic.WebControls.ImageDraw.ImageSource.File;
        if (info.TodayConditionCode == "")
            info.TodayConditionCode = "3200";
        icon.SourceFile = Server.MapPath("~/images/" + info.TodayConditionCode + ".png");

        //Set current temperature
        txt = this.ImageDrawMap1.Elements[4] as Neodynamic.WebControls.ImageDraw.TextElement;
        if (info.TodayConditionTemp != "")
            info.TodayConditionTemp += "�";
        txt.Text = info.TodayConditionTemp;

        //Set today's condition
        txt = this.ImageDrawMap1.Elements[5] as Neodynamic.WebControls.ImageDraw.TextElement;
        txt.Text = info.TodayConditionText;

        //Set today's high and low temp
        txt = this.ImageDrawMap1.Elements[6] as Neodynamic.WebControls.ImageDraw.TextElement;
        txt.Text = info.TodayConditionHi + "�";
        txt = this.ImageDrawMap1.Elements[7] as Neodynamic.WebControls.ImageDraw.TextElement;
        txt.Text = info.TodayConditionLo + "�";

        //Set tomorrow's weather icon
        icon = this.ImageDrawMap1.Elements[9] as Neodynamic.WebControls.ImageDraw.ImageElement;
        icon.Source = Neodynamic.WebControls.ImageDraw.ImageSource.File;
        if (info.TomorrowConditionCode == "")
            info.TomorrowConditionCode = "3200";
        icon.SourceFile = Server.MapPath("~/images/" + info.TomorrowConditionCode + ".png");

        //Set tomorrow's condition
        txt = this.ImageDrawMap1.Elements[10] as Neodynamic.WebControls.ImageDraw.TextElement;
        txt.Text = info.TomorrowConditionText;

        //Set tomorrow's high and low temp
        txt = this.ImageDrawMap1.Elements[11] as Neodynamic.WebControls.ImageDraw.TextElement;
        txt.Text = info.TomorrowConditionHi + "�";
        txt = this.ImageDrawMap1.Elements[12] as Neodynamic.WebControls.ImageDraw.TextElement;
        txt.Text = info.TomorrowConditionLo + "�";
    }
    else
    {
        this.Label1.Visible = true;
        this.ImageDrawMap1.Visible = false;
    }
}
  • Run your application and play with it entering some U.S. Zip codes. For example, if you enter 10001, you'll get weather info for New York City.

    ImageDrawMap Weather Composite Image using Yahoo! RSS service
    ImageDrawMap Weather Composite Image using Yahoo! RSS service
Sample Files Download
Here are the VB.NET and C# versions of this sample. Please, download the zip file you want to. After extract it you'll find all necessary files to reproduce this step by step guide.
Remember to download and install ImageDraw in order to reproduce this sample demo.
If you need more information or assistance, please contact our .
  Home   |    About us   |    Products   |   Support   |   Contact us   |   Privacy Policy
 Copyright © 2003 - 2009 Neodynamic S.R.L. All rights reserved.