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
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.
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
<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>
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
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;
}
}
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.
We provide best-in-class customer service and support directly from members of our dev team! If we are available when you contact us, you will get a response in few minutes; otherwise the maximum turnaround is 24hs in most cases.