Skip to main content

programming code.

Weather Radar
Code Download
Download WeatherRadar.zip - 11.8 KB
This project requires that you download the
HtmlAgilityPack separately and place the
HtmlAgilityPack.dll into the appropriate Debug
and/or Release folder.
Introduction
As far as I could tell, the NOAA weather
webservice does not provide a function for
obtaining the weather radar image of particular
location, nor is this feature readily provided by
other weather web services. So here I present a
"bare-bones" implementation, using
HtmlAgilityPack for some simple XPath queries.
The radar.weather.gov Website
If you inspect a page displaying a radar image on
this website, you'll notice that the image is
actually a composite of 8 selectable pieces:
The first image is a JPG, and the remaining are
GIF's:
Topography Doppler Radar Counties Rivers
Roads Cities
Warnings (none at this moment)
Legend
So, given you're nearest radar station (pick one
on http://radar.weather.gov ) we need to obtain
these images and combine them together to
show the final composite image. There's a slight
twist - two of the images come from a different
source and are computed by the Javascript on
the page, so we have special handlers for these.
There are five steps:
Step 1: Acquiring the Page HTML
Given the URL entered in the textbox, we first
acquire the HTML for the page:
protected string GetPageHtml( string
url)
{
using (WebClient client = new
WebClient())
  {
return client.DownloadString
(url);
  }
}
Step 2: Figuring out the Image URL's
This is the most complex part of the process, as
we have to programmatically generate two of the
image URL's. You'll also see how we use the
HtmlAgilityPack to extract the specific node
values for the div sections you saw earlier.
protected List<string>
GetPageImageUrls(string html, string
url)
{
  List<string> ret = new
List<string>();
  HtmlAgilityPack.HtmlDocument doc =
new HtmlAgilityPack.HtmlDocument();
doc.LoadHtml(html);
WebClient webClient = new
WebClient();
int n = 0 ;
while ( true)
{
var nodes =
doc.DocumentNode.SelectNodes
( String .Format( "//div[@id='image
{0}']/img" , n++));
if ((nodes != null) &&
(nodes.Count == 1 ))
{
string imageUrl = nodes.Select
(node => node.Attributes
[ "src" ].Value). Single ();
// This is a computed image.
if (imageUrl == "#" )
{
string name = nodes.Select
(node => node.Attributes
[ "name" ].Value). Single ();
string rid = url.Between
( "rid=" , "&" ).ToUpper();
string product = url.Between
( "product=" , "&" ).ToUpper();
switch (name)
{
case "conditionalimage" :
// Example: <a
href="http://radar.weather.gov/
RadarImg/N0R/ENX_N0R_0.gif">http://
radar.weather.gov/RadarImg/N0R/
ENX_N0R_0.gif</a>
          imageUrl = String .Format
( "RadarImg/{0}/{1}_{0}_0.gif" ,
product, rid);
break ;
case "conditionallegend" :
// Example: <a
href="http://radar.weather.gov/
Legend/N0R/
ENX_N0R_Legend_0.gif">http://
radar.weather.gov/Legend/N0R/
ENX_N0R_Legend_0.gif</a>
          imageUrl = String .Format
( "Legend/{0}/{1}_{0}_Legend_0.gif" ,
product, rid);
break ;
}
}
ret.Add(imageUrl);
}
else
{
break ;
}
}
webClient.Dispose();
return ret;
}
Step 3: Downloading the Images
Here we simply download the images, saving the
Image and its associated MemoryStream
instance. While I could clone the image at this
point and free up the memory stream and the
original image, I opted to keep the two together
as a package for later cleanup.
protected List<ImageData>
DownloadImages(List<string>
imageUrls)
{
  List<ImageData> ret = new
List<ImageData>();
  WebClient webClient = new
WebClient();
  foreach ( string url in imageUrls)
{
byte[] data =
webClient.DownloadData( "http://
radar.weather.gov/" + url);
// Memory stream CANNOT be
disposed of!
    MemoryStream stream = new
MemoryStream(data);
    Image image = Image.FromStream
(stream);
    ret.Add( new ImageData() { Image
= image, BackingStream = stream });
  }
  webClient.Dispose();
return ret;
}
Step 4: For fun, we Save the Images
You'll note my assumption that the first image is
a JPG and the rest are GIF's. Yes, we could
figure this out by inspecting the raw image
format, but that's more work than I wanted to
put into the code at the moment.
protected void WriteImages
(List<ImageData> images)
{
int n=0;
images.ForEach(img =>
img.Image.Save( "img" + n++ +
(n==1 ? ".jpg" : ".gif" )));
}
Step 5: Combine the Images
Here we combine the images, returning a new
image consisting of the composite image data:
protected Image CombineImages
(Graphics gr, List<ImageData>
images, Size size)
{
  Image baseImage = (Image)images
[ 0].Image.Clone();
gr = Graphics.FromImage
(baseImage);
for ( int i=1; i<images.Count; i++)
{
gr.DrawImage(images[i].Image,
new Point( 0, 0 ));
}
gr.Dispose();
return baseImage;
}
Step 6: Cleanup
Here we dispose of the images and their the
associated memory streams.
protected void Cleanup
(List<ImageData> images)
{
  images.ForEach(img =>
  {
    img.BackingStream.Dispose();
    img.Image.Dispose();
  });
}
Putting it all Together
When you click on the Go button, an async
process is started, and we provide a callback to
display the progress on the status bar:
protected async void btnGo_Click
( object sender, EventArgs e)
{
  btnGo.Enabled = false;
string url = tbUrl.Text;
Graphics gr =
pbRadar.CreateGraphics();
  Image bitmap = await Task.Run(()
=> GetRadarImage(gr,
    url,
    (progress) => this.BeginInvoke
(() => tsLabel.Text = progress)));
  pbRadar.Image = bitmap;
  tsLabel.Text = "Done" ;
btnGo.Enabled = true;
}
And the implementation of GetRadarImage
chains together the processes we described
above:
protected Image GetRadarImage
(Graphics gr, string url,
Action<string> progressCallback)
{
  progressCallback( "Acquiring
page..." );
string html = GetPageHtml(url);
progressCallback( "Scraping
page..." );
List<string> imageUrls =
GetPageImageUrls(html, url);
  progressCallback( "Downloading
images..." );
List<ImageData> images =
DownloadImages(imageUrls);
  progressCallback( "Writing
images..." );
WriteImages(images);
progressCallback( "Combining
images..." );
Image bitmap = CombineImages(gr,
images, pbRadar.Size);
  progressCallback( "Cleanup..." );
Cleanup(images);
return bitmap;
}
Extension Methods
To make my life a bit easier, I borrowed some
extension methods that I use in other projects:
public static class Extensions
{
public static string Between( this
String src, string s1, string s2)
{
return src.RightOf(s1).LeftOf
(s2);
  }
public static string RightOf( this
String src, string s)
{
string ret = String .Empty;
int idx = src.IndexOf(s);
if (idx != -1)
{
ret = src.Substring(idx +
s.Length);
    }
return ret;
}
public static string LeftOf( this
String src, string s)
{
string ret = src;
int idx = src.IndexOf(s);
if (idx != -1)
{
ret = src.Substring( 0, idx);
}
return ret;
}
public static void BeginInvoke
( this Control control, Action action)
{
if (control.InvokeRequired)
{
control.BeginInvoke
((Delegate)action);
    }
else
{
action();
}
}
}
Conclusion
And there you have it, a bare-bones approach to
acquiring a radar image in your own application!

Comments

Popular Post

Most Important Topics. International , Science , UPSC, BPSC..

  International Relations Prev First in-Person Meeting of Quad Countries           Star marking (1-5) indicates the importance of topic for CSE Tags:  GS Paper - 2 Groupings & Agreements Involving India and/or Affecting India's Interests Why in News Recently, the first in-person meeting of  Quad  leaders was hosted by the US. Issues like climate change, Covid-19 pandemic and challenges in the Indo Pacific, amidst China's growing military presence in the strategic region, were discussed in the meeting. Key Points Background: In  November 2017, India, Japan, the US and Australia gave shape to the long-pending proposal of setting up the Quad  to develop a new strategy to keep the critical sea routes in the Indo-Pacific free of any influence. China claims nearly all of the disputed  South China Sea , though Taiwan, the Philippines, Brunei, Malaysia and Vietnam all claim parts of it. The South China Sea is an arm of the Western ...

History of Ladakh

History of Ladakh History of India The standoff at Galwan river raised the question of the significance of Ladakh to India and China. History 1. Ladakh was initially part of Tibetan empire but later broke off in 742 CE after the assassination of King Langdarma. 2. Until the Dogra invasion in 1834, Ladakh was an independent Himalayan state similar to Sikkim and Bhutan. 3. It was integrated into the state of Jammu and Kashmir by the Dogra ruler Gulab Singh. 4. In 1841, Tibet under the Qing dynasty of China tried to invade Ladakh but was defeated by the Sikhs. This led to the Treaty of Chushul by which Tibet agreed to not invade again. 5. After the Anglo-Sikh war in 1845-46, Ladakh was brought under British suzerainty. Significance of Ladakh 1. Ladakh served as an entrepot between Central Asia and Kashmir. Tibetan pashmina shawl was traded through Ladakh to Kashmir. 2. Trade flourished from Karakoram pass to Yarkand and Kashgar to Chinese Turkestan. China’s inte...

Apple is testing a ChatGPT-like AI chatbot

  According to a recent report by Bloomberg's Mark Gurman, Apple is making significant strides in the development of artificial intelligence tools to rival the likes of OpenAI and Google. Internally referred to as "Apple GPT," the tech giant has created a chatbot using its proprietary framework called "Ajax." This framework, built on Google Cloud with Google JAX, enables the creation of large language models similar to ChatGPT and Google's Bard. While Apple is yet to finalize its strategy for consumer release, it is reportedly planning a major AI-related announcement next year. The chatbot's internal rollout faced delays due to security concerns related to generative AI. However, it has been made available to a growing number of Apple employees with special approval, primarily for product prototyping purposes. Apple's chatbot can summarize text and answer questions based on its training data. Although it shares similarities with commercially availabl...

The discovery of Gravitational Waves.

वैज्ञानिकों  ने  अंतरिक्ष  में  गुरूत्वीय  तरंगों  की ऐतिहासिक    की: वैज्ञानिकों ने 11 फरवरी 2016 को घोषणा की कि उन्होंने अंतत: उन गुरूत्वीय तरंगों की खोज कर ली है, जिसकी भविष्यवाणी महान वैज्ञानिक आइंस्टीन ने एक सदी पहले कर दी थी। ब्रह्मांड में जोरदार टक्करों के कारण पैदा होने वाली इन तरंगों की खोज खगोलविदों को इसलिए उत्साहित कर रही है क्योंकि इससे ब्रह्मांड का अवलोकन उसकी क्रमबद्धता में करने का एक नया रास्ता खुल गया है। इस नयी खोज में खगोलविदों ने अत्याधुनिक एवं बेहद संवेदनशील लेजर इंटरफेरोमीटर ग्रेविटेशनल वेव ऑबजर्वेटरी (लीगो) का इस्तेमाल किया, जिसकी लागत 1.1 अरब डॉलर है। लीगो की मदद से उन्होंने दूर दो ब्लैक होल के बीच हुई हालिया टक्कर में पैदा हुई गुरूत्वीय तरंग का पता लगाया। गुरूत्वीय तरंगों की सबसे पहली व्याख्या आंइस्टीन ने वर्ष 1916 में अपने सापेक्षिता के सामान्य सिद्धांत के तहत की थी। ये चौथी विमा दिक्-काल में असाधारण रूप से कमजोर तरंगें हैं। जब बड़े लेकिन सघन पिंड, जैसे ब्लैक होल या न्यूट्रॉन स्टार आपस में टकराते हैं तो उनके गुरूत्...

How to Solve Profit & Loss Questions? Tips & Tricks(SSC CGL)

  How to Solve Profit & Loss        Questions? Tips & Tricks Important Concepts Cost Price  The price at which an article is purchased, is called its cost price. It is abbreviated as  C.P . Selling Price The price, at which an article is sold, is called its selling prices, abbreviated as  S.P. Profit/gain  = SP – CP Profit  % = Profit/(C P)×100 S P  = (100+gain % )/100  ×C P C P  = 100/(100+gain %)×S P Loss If the overall Cost Price exceeds the selling price of the buyer then he is said to have incurred loss . Loss  = C P – S P Loss  % = LOSS/(C P)×100 S P  = (100-loss %)/100×C P C P  = 100/(100-loss %)×S P Profit and Loss Based on Cost Price To find the percent gain or loss, divide the amount gained or lost by the cost.  Example 1 : A toy that cost 80 rupees is sold at a profit of 20 rupees . Find the percent or rate of profit. Answer : Gain / cost...

Follow the Page for Daily Updates!